Модуль и сетка

Модуль в 8 пикселей — базовая размерная единица интерфейсов Контура. На основе модуля строятся типографика и контролы, выбираются размеры для иконок, высчитываются отступы между элементами.

Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу.

Зачем нужен модуль

Использование модуля делает дизайн вычисляемым и более предсказуемым:

Модуль упрощает выбор размеров

Без модуля шагом становится 1px и выбирать приходится из избыточного количества вариантов. Модуль ограничивает выбор и экономит время на рутинных задачах верстки.

Модуль делает решения объяснимыми

Когда дизайнеры Контура выбирали радиус скругления кнопок, потребовалось провести голосование. Если системы нет, остается руководствоваться мнением большинства — в ретроспективе результаты таких решений выглядят малопонятными.

Модуль ускоряет перенос дизайна в код

Если разработчик знает, что все размеры должны быть кратны 8px, то отступ в 7px в макете не вызовет вопросов. Разработчик сам примет правильное решение и исправит ошибку без обращения к дизайнеру.

Почему 8

Исторически интерфейсы Контура верстались с отступами, кратными 5 и 10px, — стандартный выбор для небольших проектов, где удобство круглых цифр важнее системности. Но шаг 10px проигрывает 8px, когда речь заходит о построении на основе одного модуля всей дизайн-системы.

Модуль 8 пикселей:

  • Можно более последовательно использовать во всех элементах дизайна: контролы, иконки, типографика
  • Имеет меньший шаг — больше вариативности
  • Имеет два подмодуля 4px и 2px, а не один, как у 10px
  • Объекты с размером, кратным 0,5m, всегда можно разместить по центру, в отличие от 10px сетки, в которой подмодуль нечетный
  • Это отраслевой стандарт

Принципы

Модуль 8px — основной, обозначается «m». В размерах до 40px допустимо использовать шаг в полмодуля: 0,5m.

Например, у шрифта размером 18px предусмотрено две высоты строки: 24px для коротких подписей, где нужна компактность и 28px для основного набора:

В более мелких размерах этот шаг может быть и 0,25m. Например разница в высоте строки для шрифта 14px — 0,25m: 22px для основного набора и 20px для коротких подписей.

Модуль имеет прикладное значение — является ориентиром для выбора размеров, но самостоятельной ценности у него нет, поэтому макеты не нужно фанатично вписывать в восьмипиксельную сетку.

«Сетки объясняют не красоту макета, а его закономерности». Данил Ковчий

«Простое правило хорошей вёрстки — не повторять ритм на соседних этажах». Бюро Горбунова

Подробнее о том, как использовать модуль в верстке, написано в гайде «Отступы и выравнивание».