Sizes
Размеры в дизайн-системе — это единая шкала значений, которая обеспечивает визуальную консистентность между компонентами интерфейса.
Токен размера не означает единую высоту в пикселях для всех компонентов. Он означает, что компонент принадлежит одному масштабному уровню системы: использует одинаковую типографику, консистентные отступы и определённые токены скруглений. Фактическая высота зависит от роли компонента в интерфейсе.
Основные принципы
Компоненты в SDDS делятся на два типа по логике высоты:
- Самостоятельные компоненты — занимают полную высоту размера и используются как основные строительные блоки интерфейса.
- Зависимые компоненты — имеют собственную высоту, не привязанную к полной высоте размера, так как предназначены для размещения внутри других компонентов или в качестве вспомогательных элементов.
Самостоятельные компоненты
Все основные интерактивные компоненты одного размера имеют одинаковую высоту и токены скруглений. Горизонтальные отступы могут варьироваться в зависимости от типа компонента. Это обеспечивает вертикальное выравнивание при совместном использовании — например, в строке формы.
| Пример компонента | Размер | Высота |
|---|---|---|
| Button | M | 48px |
| IconButton | M | 48px |
| TextField | M | 48px |
| Select | M | 48px |
| Segment | M | 48px |
Кнопка, поле ввода и сегмент в одном размере всегда выровнены по высоте и могут стоять в одной строке без дополнительных подгонок.
Зависимые компоненты
Часть компонентов имеет высоту, которая меньше полной высоты размера. Это не отклонение от системы, а намеренное решение: такие компоненты выполняют вспомогательную роль — они размещаются внутри самостоятельных компонентов или рядом с текстом и контентом, а не в качестве самостоятельных элементов строки интерфейса.
| Пример компонента | Размер | Высота | Роль |
|---|---|---|---|
| Chip | M | 40px | Вкладывается в TextField, используется в фильтрах |
| Counter | M | 24px | Отображается внутри кнопок, табов, списков |
| Badge | M | 24px | Накладывается поверх других компонентов |
| Indicator | M | 8px | Точечный статусный маркер |
Зависимые компоненты намеренно меньше своего размерного контейнера — это создаёт внутренние отступы и визуальный воздух при вложении, сохраняя пропорциональность интерфейса.
Размер и типографика
- Токен размера в самостоятельных компонентах соответствует токену типографики внутри компонента. Независимо от ряда — основного, заголовочного или витринного — размер компонента и его типографика составляют единую пару и никогда не расходятся.
- В зависимых компонентах есть исключения: Badge и Counter намеренно используют типографику меньшего размера, чем их размерный токен. Такие компоненты компактны по определению и всегда существуют в контексте другого компонента, поэтому увеличение типографики нарушило бы баланс внутри родителя.
Основная шкала размеров
Базовая шкала охватывает шесть ступеней и применяется к большинству компонентов системы.
| Размер | Типографика | Высота | Применение | Платформа и контекст |
|---|---|---|---|---|
| XS | BodyXS | 32px | Компактные, вспомогательные компоненты | Desktop Web: ERP, CRM, административные панели и дашборды — максимальная плотность данных |
| S | BodyS | 40px | Второстепенные действия, дополнительные поля | Desktop Web: B2B-продукты, вспомогательные элементы на планшете |
| M | BodyM | 48px | Базовый размер по умолчанию для большинства интерфейсов | Desktop Web, Mobile |
| L | BodyL | 56px | Основные действия, формы с приоритетом на ввод | Mobile iOS и Android: основной размер, главные действия, формы |
| XL | BodyL исключение из правила соответствия | 64px | Акцентные элементы, крупные точки взаимодействия | TV, Smart TV, киоски, интерактивные панели, лендинги с акцентным CTA |
| Scalable | — | По контейнеру | Размер следует контейнеру, а не фиксированным пресетам | Desktop Web: B2C-продукты. Mobile: вложенные вспомогательные элементы |
Расширенные шкалы
Помимо основной шкалы в системе есть дополнительные размерные ряды. Они применяются в отдельных компонентах, где стандартной шкалы недостаточно для покрытия всех сценариев.
Сверхкомпактный ряд
Используется в компонентах, которым нужен размер меньше XS: высокоплотные интерфейсы и вспомогательные элементы с минимальной визуальной нагрузкой.
| Размер | Типографика | Высота | Применение |
|---|---|---|---|
| XXS | BodyXS, BodyXXS | 24px | Индикаторы, метки, вспомогательные маркеры в плотных интерфейсах |
Заголовочный ряд
Применяется в компонентах, типографика которых привязана к заголовочным токенам. Размер здесь определяется не высотой контейнера, а используемым типографическим токеном.
| Размер | Типографика | Применение |
|---|---|---|
| H5 | Header/H5 | Минимальный заголовочный акцент |
| H4 | Header/H4 | Умеренный акцент: компонент заметен, но не доминирует |
| H3 | Header/H3 | Крупный акцент на компоненте |
| H2 | Header/H2 | Высокий акцент на компоненте |
Витринный ряд
Применяется в единичных компонентах для максимально акцентного отображения контента — лендинги, акцентные блоки, экраны TV.
| Размер | Типографика | Применение |
|---|---|---|
| DisplayS | DisplayS | Крупные акцентные элементы |
| DisplayM | DisplayM | Крупные акцентные элементы |
| DisplayL | DisplayL | Крупные акцентные элементы |
Без размера
Часть компонентов не имеет параметра Size и шкалы размеров вовсе. Их габариты определяются не токеном, а:
- содержимым;
- ограничениями контейнера;
- вьюпортом и брейкпоинтами;
- платформенными зонами безопасности и системными паттернами.
Примеры таких компонентов: Modal, BottomSheet, Image, Gallery.