В этой статье
Scott
Сетка 8 пикселей — это принцип организации отступов: внутренние поля, интервалы и часть размеров компонентов выбирают из небольшого набора значений, преимущественно кратных восьми. Начните с 8, 16, 24, 32 и 48 единиц, а для мелких деталей оставьте несколько дополнительных значений. Задача системы — сделать отношения между элементами понятными, а не привязать каждую букву, иконку и границу к невидимой сетке.
Шкала отступов отвечает на вопрос «Какое расстояние оставить между элементами?». Сетка макета задаёт колонки, межколонные интервалы и выравнивание. Эти инструменты можно использовать вместе, но они решают разные задачи. Даже при аккуратной колоночной сетке страница будет выглядеть неровно, если у каждой карточки свои внутренние отступы.
Выберите шкалу, которой удобно пользоваться
Начните с расстояний, которые нужны интерфейсу чаще всего. Для обычного веб-приложения рабочий набор может выглядеть так: 4, 8, 12, 16, 24, 32, 48 и 64. Основной ритм задаёт восьмёрка, а 4 и 12 позволяют точнее оформить плотные элементы управления. Включать каждое число, кратное восьми, необязательно. Менять уже согласованную систему только потому, что в ней другие значения, тоже не нужно.
В системе отступов IBM Carbon есть значения, основанные на двух, четырёх и восьми. В ней различаются небольшие интервалы внутри компонентов и более крупные расстояния в компоновке. Практичная система может включать мелкий шаг и при этом оставаться последовательной.
Согласуйте с разработчиками, чему единица в макете соответствует в реализации. Значение 16 в веб-макете обычно выражается в CSS-пикселях или относительных единицах. Это не означает шестнадцать физических пикселей на любом дисплее. Особенно важно явно определить соответствие, если продукт существует и в браузере, и на нативных платформах.
| Пример значения | Возможное назначение | На что смотреть |
|---|---|---|
| 4 | Тесная связь, например между иконкой и короткой подписью бейджа | Элементы остаются разборчивыми и не выглядят сжатыми |
| 8 | Заголовок и описание либо подпись и поле | Понятно, что элементы относятся к одному объекту |
| 16 | Связанные блоки внутри компонента | Блоки различимы, но не выглядят независимыми |
| 24 | Внутренние отступы карточки или расстояние перед действиями | При минимальной ширине компонента содержанию хватает места |
| 32–64 | Крупные группы и разделы страницы | Отступ передаёт иерархию, а не создаёт лишнюю прокрутку |
Это начальные назначения для примера, а не универсальные нормы. Плотной таблице данных и маркетинговой странице нужна разная плотность. Последовательным должен оставаться смысл выбранного расстояния.
Покажите отступами, что к чему относится
Представьте карточку проекта с названием, описанием, статусом, сведениями о задачах и кнопкой «Открыть проект». Одинаковые промежутки в 16 px создадут ровный вертикальный ряд, но не покажут, какие элементы образуют отдельные группы.
Оставьте между названием и описанием 8 px. Объедините статус и сведения о задачах в связанный блок. Отделите основное содержание от действия расстоянием 24 px. Теперь можно различить вводную информацию, дополнительные сведения и следующий шаг без рамки вокруг каждого участка.
Измеряйте интервалы одинаково — между границами блоков компоновки. Текстовый слой включает межстрочный интервал, поэтому его границы могут выходить за видимые очертания букв. Если один дизайнер измеряет расстояние от текстового блока, а другой — от нижнего края букв, для одной и той же задачи получатся разные значения. Сначала используйте общую структуру компонента, а затем при необходимости вносите осмысленные оптические поправки.
Больший интервал обычно должен означать более заметное разделение по смыслу. Если описание находится дальше от своего заголовка, чем от названия следующего проекта, компоновка передаёт неверную связь, даже когда все числа кратны восьми.
Соберите карточку проекта с вложенными группами
В примере ширина карточки составляет 360 px. Установите слева и справа отступы по 24 px: для содержания останется 312 px. Высота карточки должна увеличиваться вместе с текстом, а не оставаться фиксированной ради удобного расчёта.
- Соберите вводную группу. Добавьте название «Обновление сайта» и описание «Обновить продуктовые страницы и подготовить макеты к передаче». Между ними оставьте 8 px.
- Соберите дополнительные сведения. Добавьте «В работе» и «Команда дизайна · 12 задач». Интервал внутри этой группы должен быть меньше, чем расстояние до другого проекта.
- Объедините содержание. Между вводной группой и дополнительными сведениями оставьте 16 px. Это две связанные части одного проекта.
- Разместите действие. Отделите кнопку «Открыть проект» от содержания на 24 px. Выровняйте её по краям основной области.
- Задайте внутренние отступы карточки. Используйте по 24 px с каждой стороны. Проверьте верх и низ с настоящим заголовком и кнопкой, а не с пустыми прямоугольниками.
Получается небольшая иерархия: 8 px внутри тесно связанной группы, 16 px между группами содержания и 24 px по краям карточки и перед действием. Одни и те же значения могут выполнять разные задачи. Описанные назначения полезнее для повторного использования компонента, чем единственная пометка «Использовать сетку 8 пикселей».
Теперь замените название на «Обновление сайта к международному запуску продукта» и разрешите перенос строк. Описание и остальные блоки должны сдвинуться вниз с сохранением заданных интервалов. Если кнопка перекрывает текст, проблема в правилах изменения размеров или фиксированной высоте, а не в шкале отступов.
Примените правила через Auto Layout в Pixso
В редакторе интерфейсов Pixso используйте вложенные группы Auto Layout для вводной информации, дополнительных сведений и всей карточки. Задайте интервалы внутри каждой группы и внутренние отступы внешнего контейнера отдельно. Тогда более длинный текст сможет менять компоновку без ручного перемещения каждого слоя.
Рядом с компонентом разместите короткую памятку: допустимые значения, их назначение и по одному примеру. Готовую карточку используйте как компонент, чтобы следующие экраны начинались с той же структуры. Если отдельному экрану нужны более плотные карточки, оформите это как осмысленный вариант плотности, а не набор несвязанных поправок в каждом экземпляре.
Название токена или число рядом с макетом само по себе не связывает дизайн с рабочим кодом. Согласуйте названия и реализацию с разработчиками. Запись «внутренний отступ карточки — 24; расстояние до действий — 24» объясняет отношения ещё до появления общей системы передачи токенов.
Оставляйте небольшие и понятные исключения
Шаг восемь не обязан определять каждый размер. Обводке в 1 px, оптически выровненной иконке или принятой типографической шкале могут понадобиться другие значения. Не увеличивайте рамку до 8 px и не искажайте иконку только ради математической стройности файла.
Размер области нажатия должен соответствовать требованиям доступности продукта и рекомендациям платформы. Кратность восьми не делает кнопку достаточно крупной, разборчивой или удобной для нажатия. Проверяйте саму область и окружающие интервалы как отдельные решения.
Используйте 4 или 12 px там, где меньший шаг действительно полезен. В плотном списке 8 px между компактной иконкой и подписью могут выглядеть слишком тесно, а 16 px — слишком свободно. Задокументированное расстояние в 12 px проще поддерживать, чем независимо выставленные 11, 13 и 14 px.
Если исключение повторяется, решите, нужно ли включить его в шкалу или исправить структуру компонента. Отдельный токен для каждого случайного расстояния лишь закрепит непоследовательность под более формальными названиями.
Меняйте плотность, а не уменьшайте всё подряд
На узком экране сначала разрешите карточке занимать доступную ширину, а тексту — переноситься. Если отступы по 24 px оставляют слишком мало места для содержания, сравните компактный вариант с отступами по 16 px. При этом можно сохранить 8 px между названием и описанием и 24 px перед действием, если эти связи по-прежнему хорошо читаются.
Не умножайте все расстояния на единый коэффициент для мобильной версии. Так осмысленная шкала превращается в случайные дробные значения, а вместе с ней уменьшаются элементы, которые должны оставаться удобными для нажатия. Меняйте только те отношения, на которые действительно влияет узкая компоновка.
Для карточки проекта сравните короткое и длинное название, описание из одной и нескольких строк, самую длинную ожидаемую подпись кнопки. Выберите вариант, в котором группы остаются понятными, а компоновка не зависит от фиксированной высоты текста. При передаче в разработку укажите, какие значения постоянны, какие меняются с плотностью и где компонент может увеличиваться.
