Отступы и дивайдеры
Отступы и дивайдеры — базовые инструменты организации пространства. Они помогают: связать или разделить объекты, организовать структуру элементов, упорядочить информацию и оформить визуальную иерархию контента.
Отступы
Система отступов построена на шаге в 4 px: 4, 8, 12, 16, 20, 24, 28, 32 и далее. Правило одинаково для горизонтальных и вертикальных отступов. Базовая линия текста не учитывается при расчёте отступов. Расстояние между компонентами и смысловыми группами дизайнер определяет сам, исходя из контекста задачи.
Иногда отступ нужно добавить для визуальной компенсации компонента на экране. Например, это актуально в Bottom Sheet или после любого последнего компонента. Добавляя отступы, обратитесь к правилу «Гравитационные силы в дизайне композиций».
Между некоторыми компонентами отступ не нужен, например, между ячейками (Cell) или текстовыми полями (Text Field). Они всегда используются без дополнительного «воздуха», необходимый отступ заложен в сам компонент.
Примеры отступов между компонентами
Гравитация в системе многоуровневых композиций
Чтобы создать отступы, не нужен дополнительный символ. Не используйте прозрачные объекты для имитации отступов между компонентами. Используйте в макетах настройку Auto layout задавая необходимые отступы, не создавая лишних слоёв. Если надо, собирайте компоненты в группы — это позволит гибко использовать возможности Auto layout, задавая разные отступы внутри группы и на экране в целом.
Настройка отступов через Auto layout
Чтобы узнать отступ от одного компонента до другого, выберите нужный объект и, зажав на клавиатуре option ⌥ ( alt на Windows), наведите курсор на другой компонент.
Отступы в компонентах
Система отступов внутри компонента основана на минимальном шаге в 2 px — это базовое правило, оно одинаково для горизонтальных и вертикальных отступов.
В исключительных случаях отступ внутри компонента может иметь нечётное значение. Математически точное выравнивание не всегда выглядит хорошо, поэтому в таких случаях делаем оптическую компенсацию.
Отступы внутри компонента
Дивайдеры
Дивайдер может использоваться как независимый компонент, визуально разделяющий смысловые модули в ленте контента.
Используйте один из трёх доступных вариантов:
- Line — сплошная горизонтальная тонкая линия. Отступы справа и слева всегда 16 px на Android и iOS. Используйте этот дивайдер, чтобы вставить его между разными группами компонентов — но по одной теме.
- Fat — широкая горизонтальная линия. У неё нет отступов с обеих сторон. Используйте этот дивайдер, чтобы разделить практически несвязанные между собой смысловые блоки, которые можно было бы разнести на разные экраны.
Использование разных видов дивайдеров
Высота всех вариантов компонента Divider — 8 px, но если хотите сделать визуальную компенсацию, задайте дополнительный отступ между дивайдером и другим компонентом.
Перед тем как использовать дивайдер между модулями контента, убедитесь, что это действительно необходимо.
Дивайдеры в компонентах
Помимо дивайдеров между компонентами, есть и те, которые встроены в тот или иной компонент. Отключать видимость дивайдера в компоненте можно через настройки вариантов, если такая возможность предусмотрена. Если среди вариантов нет компонента без дивайдера, то настроить его видимость можно только в слоях.
Как отключить дивайдер в компоненте
У дивайдера в компоненте отступ справа всегда 16 px на Android и iOS. Отступ слева минимум 16 px и больше, если есть иконки или иллюстрации.
Всегда отключайте дивайдер у последней ячейки в списке.
Нет дивайдера у последней ячейки в списке.
Если в сценарии предполагается список из некликабельных ячеек, то в таком списке лучше отказаться от дивайдеров совсем. Это уменьшит плотность контента и упростит восприятие информации.
Список некликабельных ячеек
Отключайте дивайдер у ячейки, если ниже располагаются карточки, виджеты или баннеры.
Нет дивайдера перед группой карточек
В состоянии Read Only компоненты Text Field и Value Select имеют точечный индикатор поля — Input Line. Он не является дивайдером, по этому всегда отображается в компоненте.
Input Line в Text Field и Value Select
Подведём итоги
Отступы со случайными величинами нарушают структурность макета и усложняют разработку. Избыточное количество дивайдеров увеличивает плотность контента и информация считывается тяжелее. Руководствуйтесь системным подходом — и у вас получатся аккуратные и консистентные экраны.
Когда группируете контентные модули, не забывайте о теории близости и правиле внутреннего и внешнего. Правильно организованный контент — хороший тон интерфейса.
Как теория близости работает в интерфейсе Правило внутреннего и внешнего