Как записать правила раскладки, по которым команда соберёт экран без вас

На Middle вы собираете понятный экран сами. На Senior раскладка перестаёт зависеть от того, кто сегодня собирает экран.

Всё, что вы умеете с прошлых ступеней, — набор отступов, сетка, иерархия, плотность — никуда не девается. Меняется адресат: раньше вы делали это для экрана, теперь — для людей, которые будут делать экраны без вас.

Список чисел — ещё не правило. Правилом его делает ответ на вопрос «когда какое число брать».

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

Как записать правило для своей шкалы

Для каждого шага — четыре колонки: число, имя токена, где его ставить и пример из продукта. Пятая — исключения. Роли из урока Junior сюда переносятся почти дословно, только теперь их читает не автор, а команда.

В продукте на десятки экранов раскладок обычно несколько. Если их назвать и описать, новый экран не придумывают, а выбирают.

Дизайн-системы описывают раскладки через назначение.

В Atlassian три варианта ширины сетки:

• фиксированная широкая, до 1296 px, — для дашбордов и поиска;
• фиксированная узкая, до 864 px, — для статей и документации;
• резиновая без предела — для досок и вайтбордов.

В GOV.UK для большинства страниц советуют схему «две трети» или «две трети + треть», чтобы строки не растягивались на широком экране.

У магазина кофе получилось пять типовых раскладок. Сетка на схемах уже включена: двенадцать колонок, как на десктопе.

Что выравнивать по колонкам, а что нет

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

Кнопки, значки и всё внутри контейнеров расставляется токенами отступов.

В Carbon добавляют ещё правило: текст никогда не заходит в промежуток между колонками.

Проверьте себя

Восемь экранов магазина. Какая раскладка подходит каждому?

Правила, которые не помещаются на две страницы, не читают. Правила, в которых нет примеров, понимают по-разному.

В документе пять частей. Каждая отвечает на вопрос, который дизайнер задаёт себе, собирая экран.

1. Шкала отступов: числа, токены и где какое ставить. Вопрос: «Какой отступ здесь?»
2. Сетка по брейкпоинтам: колонки, промежутки, поля. Вопрос: «Сколько колонок займёт блок?»
3. Типовые раскладки: схема, назначение и пример экрана для каждой. Вопрос: «С чего начать экран?»
4. «Так» и «не так»: по два-три примера на пункт, взятых из вашего продукта. Вопрос: «Я правильно понял правило?»
5. Исключения и изменения: как сделать исключение и как предложить правку. Вопрос: «А если мой случай не подходит?»

ПРАВИЛА РАСКЛАДКИ · ПРОДУКТ: ______________   Версия: __  Дата: __.__.____
Кто отвечает: ______________   Как предложить правку: ______________

1. ШКАЛА ОТСТУПОВ
   число | токен      | где ставим                         | пример
   4     | space-1    | ________________________________   | __________
   8     | space-2    | ________________________________   | __________
   16    | space-4    | ________________________________   | __________
   24    | space-6    | ________________________________   | __________
   32    | space-8    | ________________________________   | __________
   Исключения: как делать и когда нельзя ______________________

2. СЕТКА
   телефон:  колонок __  промежуток __  поля __
   планшет:  колонок __  промежуток __  поля __
   десктоп:  колонок __  промежуток __  поля __  максимум ширины __
   К колонкам выравниваем: ______________________________
   Не выравниваем (ставим токенами): ______________________

3. ТИПОВЫЕ РАСКЛАДКИ
   название | схема (колонки) | для каких экранов | пример в продукте
   ________ | ______________  | _________________ | _______________
   ________ | ______________  | _________________ | _______________

4. ТАК И НЕ ТАК (по 2–3 на пункт, снимки из продукта)
   пункт __: так — ____________   не так — ____________

5. ИЗМЕНЕНИЯ
   Новый случай → кто решает → куда записываем → когда сообщаем команде

С правилами спор о раскладке идёт по пунктам документа: вместо «мне кажется» появляется ссылка.

В статье Nielsen Norman Group о дизайн-критике её определяют как анализ того, достигает ли дизайн своих целей. Без согласованных целей обратная связь субъективна.

Там же советуют переформулировать оценочные замечания — «слишком красное» — и директивные — «я бы сделал иначе» — через цель дизайна.

С правилами раскладки у ревью появляется ещё одна опора: пункт документа.

Коллега собрал экран оформления для телефона. Ниже восемь замечаний с ревью.

Решите для каждого, что это: нарушение правил, не ошибка или случай, который правила не покрывают. Опирайтесь на правила из разделов 2 и 3.

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

Дизайн-системы решают это процессом.

• Material Design считает настройку системы отступов под продукт ожидаемой. Если подходящего токена нет, его добавляют, а повторяющийся приём тоже можно оформить токеном.
• GOV.UK принимает новое предложение, если оно полезно многим командам и не повторяет существующее. Для первого шага нужны идея и доказательство потребности — не макет и не код.
• Carbon на этапе обсуждения проверяет, закрывает ли предложение настоящий пробел. Если похожее уже есть, нужно показать, чем новое лучше.

Как обновлять свои правила

1. Случай решается на экране. Дизайнер делает, как считает нужным, и помечает место: «не по правилам, см. предложение».
2. Проверяется, правда ли случай новый. Может быть, подходит существующая схема или исключение уже описано.
3. Предложение пишется коротко: какой случай, почему старое правило не подходит, что предлагается, снимки «так» и «не так».
4. Решение принимает один человек или встреча, и оно записывается в документ с датой.
5. Команда узнаёт об изменении, а старые экраны, которые правило затрагивает, получают задачу на переделку или остаются исключением.

Правила работают, когда в макете и в коде одни и те же имена: разработчик пишет не «20 пикселей», а «space-6».

В дизайн-системах токены отступов живут и в макете, и в коде.

В Atlassian разработчик вызывает токен функцией token(‘space.200’), и на сайте он превращается в CSS-переменную var(—ds-space-200). В Carbon это Sass-переменные вроде $spacing-05, их ставят в margin и padding вместо чисел. Сетка GOV.UK в коде — классы колонок: govuk-grid-column-two-thirds для основной колонки, govuk-grid-column-one-third для боковой.

В Figma то же самое делают числовые переменные. Их можно поставить в gap и padding auto layout, а также в поля, промежутки и число колонок сетки на фрейме.

У переменной можно задать имя в коде для веба, iOS и Android — Dev Mode покажет его разработчику.

Одна ловушка: если тянуть padding или gap мышью прямо на холсте, переменная отвяжется, и отступ снова станет просто числом.

/* Шкала отступов — те же имена, что в макете */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

/* Типовая раскладка «Оформление»: 12 колонок, форма — 8, итог — 4 */
.layout-checkout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.layout-checkout__form    { grid-column: span 8; }
.layout-checkout__summary { grid-column: span 4; }

/* Брейкпоинт — числом: переменные в условии медиазапроса не работают */
@media (max-width: 599px) {
  .layout-checkout { grid-template-columns: repeat(4, 1fr); }
  .layout-checkout__form,
  .layout-checkout__summary { grid-column: 1 / -1; }
}

Чем проверять экраны на соответствие

• Check designs в Figma. Встроенная проверка находит числа, вписанные вручную вместо переменных: цвета, текстовые стили, радиусы, отступы и padding. Для переменных и стилей предлагает замену. Доступна на тарифах Organization и Enterprise.
• Плагин Design Lint. Открытый плагин находит слои без стилей и сверяет радиусы со списком. Отступы по умолчанию не проверяет, их правила добавляют в своей версии плагина.
• Взгляд по правилам. Инструменты находят числа не из шкалы, но не видят, что форма собрана на всю ширину вместо «восемь плюс четыре». Раскладку проверяет человек с документом.

Опишите правила раскладки своего продукта на двух страницах: шкала, сетка, типовые схемы, примеры «так» и «не так». Соберите по ним один экран чужими руками.

Часть 1 · Собрать то, что уже есть, час

1. Выпишите отступы с десяти разных экранов продукта. Посчитайте, какие числа встречаются.
2. Сведите их к шкале из пяти–восьми шагов. Лишние числа — кандидаты на замену.
3. Разложите экраны по типовым раскладкам. Обычно их от трёх до шести.

Часть 2 · Написать правила, два часа

1. Заполните шаблон на две страницы из раздела 4.
2. Для каждого пункта найдите в продукте пример «так» и «не так» и вставьте снимки.
3. Запишите, как делать исключение и как предложить правку.
4. Сверьте токены с разработкой: одинаково ли они называются в макете и в коде.

Часть 3 · Проверить чужими руками, день у коллеги

1. Дайте правила дизайнеру, который их не писал, и задачу на один новый экран.
2. Не подсказывайте. Все вопросы коллеги записывайте: каждый вопрос — место, где правила неясны.
3. Проведите ревью по правилам: каждое замечание — со ссылкой на пункт.
4. Поправьте документ по вопросам коллеги и замечаниям, которые не удалось сослать на пункт.

Что должно получиться

• Документ правил раскладки на две страницы, с примерами из продукта.
• Экран, собранный коллегой по этим правилам, и список его вопросов.
• Вторая версия документа с правками по итогам проверки.

План работы: час на разбор продукта, два часа на документ, день у коллеги на экран и час на ревью и правки.

Частые сложности

• «Правила не помещаются в две страницы». Скорее всего, в них попали правила компонентов или типографики. Оставьте только раскладку: шкалу, сетку, схемы.
• «Коллега задал двадцать вопросов». Это хороший результат первой версии: теперь известно, где правила неясны. Вторая версия будет короче по вопросам.
• «В продукте уже десять разных отступов между полями». Не переделывайте всё сразу. Запишите правило для новых экранов и заведите задачу на старые.
• «Разработка называет отступы по-своему». Договоритесь об одном списке имён и заведите его и в Figma, и в коде. Без этого правила разойдутся на первой же передаче.

Правила готовы, если

• У каждого шага шкалы есть токен, место применения и пример
• Сетка описана по брейкпоинтам: колонки, промежутки, поля, максимум ширины
• Сказано, что выравнивается по колонкам, а что ставится токенами
• Типовые раскладки названы, у каждой — схема и пример экрана
• На каждый пункт есть «так» и «не так» из вашего продукта
• Описано, как делать исключение и как предложить правку
• Имена токенов совпадают в макете и в коде
• Всё помещается на две страницы

Что мешает

• Список чисел без правила выбора. Шкала есть, но какое число ставить, каждый решает сам.
• Правила без примеров. Их понимают по-разному, и спор просто переезжает в другой документ.
• Сетка на всё. Значки и кнопки растягивают по колонкам, хотя выравнивать по сетке нужно контейнеры.
• Ревью по вкусу. Замечания без ссылки на пункт выглядят как придирки, и их перестают слушать.
• Правила, которые не меняются. Новые случаи решают в обход, и документ отстаёт от продукта.
• Правила, которые меняются по первому случаю. Каждое исключение становится новым правилом, и шкала расползается.
• Разные имена в макете и коде. Дизайнер говорит «24», разработчик пишет 1.5rem, и через месяц это уже 22.

Тема пройдена целиком: от ровного экрана через понятный экран к правилам, по которым их собирает вся команда.

• Spacing и GridAtlassian Design System · на английском · бесплатноШкала от 0 до 80 px с тремя диапазонами применения, сетка на 2, 6 и 12 колонок по брейкпоинтам, правило «к колонкам — только контейнеры» и три варианта ширины: фиксированная широкая, фиксированная узкая и резиновая, с примерами, когда какую брать.
• Spacing и 2x Grid: UsageIBM Carbon Design System · на английском · бесплатноТринадцать токенов отступов от 2 до 160 px, правило для исключений, три режима промежутков сетки — 32, 16 и 1 px — и запрет заводить текст в промежуток. Сетка Carbon — 16 колонок, 12 там считают наследием старых продуктов.
• Spacing и LayoutGOV.UK Design System · на английском · бесплатноДве шкалы на шаге 5 px — статичная и адаптивная, где крупные шаги растут шире 640 px, — схема «две трети + треть» ради строки до 75 знаков и классы сетки в коде. Сетка здесь из долей, а не из 12 колонок.
• Design Critiques: Encourage a Positive Culture to Improve ProductsNielsen Norman Group, Сара Гиббонс · на английском · бесплатноКак устроить критику дизайна: согласовать цели до встречи, переформулировать «слишком красное» и «я бы сделал иначе» через цель, вести обсуждение по кругу и записывать итоги. Статья 2016 года о самостоятельной критике; проверку по набору правил она не разбирает.