Отступы и выравнивание

Верстая страницу, придерживайтесь пра­вила «внутрен­него и внеш­него» и используйте «теорию близости».

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

Чтобы облегчить восприятие экрана, выбирайте отступы, которые отличаются достаточно сильно — 1, 2, 4 и 8 модулей (8, 16, 32 и 64px). Используйте минимальное количество разных отступов в рамках одного экрана.

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

Допустимо использовать шаг в полмодуля в отступах до 40px. Например, внутри составных элементов, таких как текст с иконкой:

А также внутри небольших групп, например в шапке или меню:

Между лейблом и полем:

Между кнопками и полями:

Между двумя параграфами текста — 1 модуль, до заголовка — 2 модуля:

Применяйте принцип кратности модулю и при создании компонентов, и в рамках всей формы или экрана. Посмотрите примеры экранов, целиком сверстанных с использованием стандартных отступов на основе модуля.

Выравнивайте элементы форм или таблиц по базовой линии текста:

Чтобы показать вложенность элементов, сделайте смещение, кратное модулю:

Хорошо, когда количество вертикальных или горизонтальных направляющих минимально в рамках одного смыслового блока — так макет выглядит аккуратнее и проще. Например, выравнивайте по левому краю тексты в раскрывающемся списке:

Но следите за тем, чтобы не возникало ложных связей между выровненными объектами:

В этом примере подписи радиокнопок находятся ближе к полям справа, чем друг к другу — кажется, что ежемесячные уведомления приходят на почту, а еженедельные на телефон. Правильнее не выравнивать строки и сделать отступ до смыслового блока больше:

Чтобы проще оперировать отступами, кратными модулю, измените дефолтный шаг для перемещения объектов клавишами Shift + → в Figma или Sketch. Установите его равным модулю — 8px:

После такой настройки можно будет поставить объекты вплотную друг к другу и отодвинуть их на нужное количество модулей с помощью стрелки с шифтом на клавиатуре.

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

Если вы работаете с таблицами или формами, объединяйте строки в группы и измеряйте отступ между группами:

Не меняйте высоту текстовых блоков в графическом редакторе вручную, это мешает разработчику измерять отступы при переносе макета в верстку:

Чтобы высота текстового блока вычислялась автоматически, включите авторесайз по высоте параграфа:

Если важен отступ до следующего элемента в строке — включите авторесайз по ширине:

В Фигме перевести текстовый блок в такой режим можно двойным кликом по его рамке.

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

Наши продукты должны выглядеть аккуратно, поэтому мы верстаем их точно по макету. При этом мы не стремимся к тому, чтобы верстка соответствовала макету пиксель в пиксель. Абсолютно одинакового отображения все равно не достичь во всех браузерах.

Решать задачи важнее, чем попадать в пиксели, но погрешности верстки и неаккуратная работа — не одно и то же.