Чтобы выбрать размеры отступов и оформить их в последовательную систему, определите базовый шаг, составьте небольшую шкалу кратных ему значений и назначьте каждому размеру понятные сценарии. Проверьте правила на компонентах и макетах разных ширин. Числа в примере ниже - стартовая схема, а не универсальный стандарт: адаптируйте её к плотности интерфейса и контенту.
Опорные решения для системы отступов
- Начните с базового шага, который подходит плотности вашего интерфейса.
- Оставьте в шкале только значения, для которых есть повторяющиеся сценарии.
- Различайте внутренние отступы компонента, расстояния между компонентами и отступы секций.
- Закрепите значения за токенами, а не за отдельными случайными числами в макетах.
- Проверяйте систему на реальных экранах, контенте и адаптивных состояниях.
Выберите базовый шаг под плотность интерфейса
Базовый шаг - исходная величина, вокруг которой строится шкала отступов. Он подходит командам, которым нужно согласовать решения между дизайнерами и разработчиками, а также поддерживать единый ритм в разных разделах продукта.
Для компактного интерфейса можно начать с шага 4 px, для более свободного - с 8 px. Это практические отправные точки, а не обязательное правило: оцените размер текста, высоту элементов управления, плотность данных и требования доступности.
Не стоит механически подгонять каждый размер под одну кратность, если это ухудшает читаемость или нарушает нужную геометрию компонента. Например, высота элемента может зависеть от строки текста и внутренних полей, а не только от шага шкалы.
Соберите шкалу отступов с понятной кратностью
Перед созданием шкалы понадобятся макеты ключевых экранов, список повторяющихся компонентов и доступ к библиотеке компонентов или файлам дизайн-системы. Полезно также договориться, как команда будет называть и передавать значения в код.
Сначала соберите фактически используемые размеры, затем объедините близкие значения и проверьте, какие из них повторяются. Не добавляйте новые позиции только ради заполнения шкалы. В примере ниже использован базовый шаг 4 px; значения и сценарии можно изменить под продукт.
Распределите значения между компонентами и макетами
-
Зафиксируйте типы расстояний.
Разделите отступы на внутренние поля компонента, расстояния между соседними элементами и интервалы между крупными секциями. Это помогает не подменять одним и тем же значением разные задачи. -
Составьте черновую шкалу.
Выберите базовый шаг и выпишите значения, которые уже встречаются в макетах. Удалите дубли и оставьте только те позиции, которым можно назначить понятное применение. -
Назначьте значения компонентам.
Определите, какие отступы используются в кнопках, полях, карточках, списках и секциях. Зафиксируйте правила в библиотеке компонентов, чтобы повторяющиеся элементы не получали случайные размеры. -
Создайте токены и названия.
Задайте значениям последовательные имена, напримерspace-1иspace-2, а конкретные числа храните в токенах проекта. Названия должны быть понятны команде и не зависеть от единичного сценария. -
Проверьте макеты и согласуйте исключения.
Примените шкалу к нескольким типам экранов и отметьте места, где она не подходит. Исключения оставляйте только при ясной причине, например для особого компонента или ограничения контента.
Быстрый режим
- Выберите базовый шаг по плотности интерфейса.
- Соберите используемые размеры и уберите дубли.
- Назначьте значения внутренним, межкомпонентным и секционным отступам.
- Запишите правила в токенах и проверьте на нескольких макетах.
Сведите размеры в таблицу для быстрой работы
Таблица помогает применять шкалу без постоянного выбора произвольного числа. Ниже приведён пример для базового шага 4 px; это иллюстрация, а не обязательный набор размеров отступов в дизайне.
| Токен | Пример значения | Возможное применение |
|---|---|---|
| space-1 | 4 px | Небольшой промежуток внутри плотного компонента |
| space-2 | 8 px | Расстояние между связанными элементами |
| space-3 | 12 px | Внутренний отступ компактного элемента |
| space-4 | 16 px | Базовое расстояние между компонентами |
| space-6 | 24 px | Отступ внутри карточки или между группами |
| space-8 | 32 px | Интервал между крупными блоками |
| space-12 | 48 px | Пространство между секциями на свободном макете |
Перед внедрением проверьте результат по списку:
- У каждого токена есть понятное назначение.
- Близкие значения не дублируют друг друга без причины.
- Для компонентов определены внутренние поля и расстояния между элементами.
- Токены одинаково названы в макетах и кодовой базе.
- Шкала работает на плотных и свободных экранах.
- Исключения задокументированы и не превращаются в альтернативную шкалу.
Настройте отступы для адаптивных состояний
На узком экране часто требуется уменьшить внешние поля или расстояния между блоками, но сокращать все значения одинаково не нужно. Сохраняйте иерархию: связанные элементы остаются близко, отдельные группы - визуально разделены. Для адаптивных правил используйте ограниченное число вариантов и проверяйте их на реальном контенте.
Частые ошибки:
- Менять отступы на каждом брейкпоинте без понятного правила.
- Уменьшать внутренние поля так, что текст или элементы управления выглядят тесно.
- Использовать один токен для расстояний с разной визуальной ролью.
- Создавать шкалу с большим количеством почти одинаковых значений.
- Подгонять размеры только под один экран или короткий тестовый текст.
- Забывать о длинных заголовках, локализации и состояниях ошибок.
Проверьте систему на реальных экранах
Проверяйте отступы в веб-дизайне не только на чистом макете, но и в интерфейсе с реальными данными, длинными текстами и разными состояниями. Для проверки выберите способ, соответствующий масштабу проекта:
- Быстрый аудит макетов. Подходит небольшому проекту: найдите повторяющиеся размеры и сравните их с предложенной шкалой.
- Проверка библиотеки компонентов. Уместна, если компоненты уже собраны: обновите отступы в библиотеке и проверьте связанные макеты.
- Тестирование на прототипе. Полезно для новых интерфейсов, где важно оценить плотность и переходы между состояниями до разработки.
- Совместная проверка с разработчиком. Выберите этот вариант, если макеты уже реализованы: согласуйте токены и выявите расхождения между дизайном и интерфейсом.
Завершите проверку на нескольких экранах разной плотности. Если одни и те же исключения повторяются, пересмотрите шкалу; если исключение единичное и объяснимое, зафиксируйте его отдельно.
Разбор практических ситуаций с отступами
Как выбрать отступы в дизайне, если проект уже существует?
Сначала соберите фактически используемые размеры на ключевых экранах и сгруппируйте близкие значения. Затем назначьте повторяющимся размерам токены, а редкие исключения проверьте отдельно.
Обязательно ли использовать один базовый шаг для всех компонентов?
Нет. Базовый шаг помогает держать визуальный ритм, но отдельные размеры могут определяться текстом, геометрией компонента или требованиями доступности. Важно объяснить такие исключения.
Сколько значений должно быть в шкале?
Используйте столько позиций, сколько нужно для повторяющихся сценариев проекта. Удаляйте значения, которые отличаются незначительно и не дают заметной пользы в макетах.
Нужно ли менять отступы для мобильного экрана?
Меняйте их, если плотность и композиция этого требуют, но сохраняйте различие между связанными элементами и отдельными группами. Проверяйте результат на длинном контенте и нескольких ширинах экрана.
Как оформить дизайн-систему отступов для разработчиков?
Создайте согласованные токены с понятными именами, значениями и сценариями применения. Синхронизируйте их с библиотекой компонентов и способом хранения переменных в проекте.
Что делать, если макет требует значения вне шкалы?
Проверьте, действительно ли нужно новое значение или задачу решит существующий токен. Если исключение повторяется в разных компонентах, рассмотрите добавление позиции в шкалу и задокументируйте её назначение.