Что разберём
- Почему экран выглядит собранным на глаздо и после
- Как выбрать набор отступов и держаться его
- Как группировать расстояниемтренажёр
- Как поставить блоки на одну линиюкрая
- Как положить блоки в колонкисетка
- Как найти разнобойпоиск
- Как настроить сетку и шаг в Figma
1Экран на глаз и экран по набору
Разницу видно сразу, даже если сложно объяснить, в чём она.
Слева — экран, собранный на глаз. Справа — тот же состав, но каждый отступ взят из короткого набора чисел, а все блоки начинаются от одной линии.
Числа на экранах — расстояния между блоками в пикселях. Нажмите «Края», чтобы увидеть, от какой линии начинается каждый блок.
На глаз
10:00–14:00завтра
16:00–20:0012 марта
10:00–14:00
По набору
10:00–14:00завтра
16:00–20:0012 марта
10:00–14:00
Что выдаёт экран, собранный на глаз
- Похожие, но разные отступы. 13 и 14, 5 и 6. По отдельности разницу не видно, но вместе они делают экран неаккуратным, хотя трудно сказать почему.
- Несколько левых краёв. Блоки начинаются на 12, 16 и 20 пикселях от края экрана. Взгляд идёт вниз и на каждом блоке ищет новую опору.
- Связанное стоит не ближе, чем чужое. Ссылка «Изменить адрес» отстоит от адреса на 14, а от следующего блока — на 13. Непонятно, к чему она относится.
- Каждый отступ решается заново. Под новым блоком расстояние выбирает глаз, и каждый раз немного по-другому.
2Набор отступов
Чтобы не подбирать каждый отступ заново, выберите заранее несколько чисел и берите только их.
Набор — короткий список расстояний, из которых собирается экран. В этом уроке возьмём пять чисел: 4, 8, 16, 24 и 32. Все они делятся на 4, а все, кроме 4, — на 8.
Про такой набор говорят «шаг 8»: основные отступы кратны восьми, а 4 оставлено для самых тесных мест.
Каждому числу нужна роль — место, где его ставят. Тогда выбор отступа сводится к вопросу, как связаны два блока.
| Отступ | Где ставим | Пример на экране «Доставка» |
|---|---|---|
| 4 | Внутри одного элемента: подпись и значение, название и уточнение | «Адрес» и «ул. Лесная, 8, кв. 14» |
| 8 | Между соседями в одной группе | Адрес и ссылка «Изменить адрес»; варианты времени между собой |
| 16 | Между связанными блоками одной части экрана; поля экрана слева и справа | Итог «Доставка — бесплатно» и кнопка «К оплате»; от края экрана до любого блока |
| 24 | Между группами | Блок «Адрес» и блок «Когда привезти» |
| 32 | Между крупными частями экрана | Форма и итог с кнопкой |
Почему шаг 8
- Числа легко складывать и делить. 8 + 16 = 24, половина от 16 — это 8, половина от 8 — это 4. Короткий ряд помнится без таблицы.
- Числа остаются целыми на разных экранах. У телефонов разная плотность пикселей: на экране с масштабом 1,5 отступ 8 занимает ровно 12 физических пикселей, а отступ 5 — семь с половиной. Половину пикселя экран показать не может, и край блока может размыться.
- Так рекомендует Material Design. Компоненты там выравнивают по сетке с шагом 8, текст — по сетке с шагом 4. В Material 3 отступы тоже считают шагом 8, а кроме кратных восьми есть 2, 4, 6 и 10 для мелких расстояний.
За пределами Material шаг 8 — договорённость команды. В гайдлайнах Apple он нигде не закреплён: там речь о безопасных зонах и системных полях. Главное, чтобы набор был один на весь продукт и его знала вся команда. Если в вашем продукте уже есть свой набор, берите его.
3Связанное — ближе
Расстояние показывает, что с чем связано, раньше, чем человек прочитает подписи.
Близко стоящие элементы воспринимаются как группа. Это называют принципом близости, в «Ководстве» Артемия Лебедева — теорией близости.
Если подпись стоит ближе к полю, чем к соседнему блоку, её относят к полю, не задумываясь. Если расстояния одинаковые, подсказки нет, и связи приходится восстанавливать по смыслу подписей.
Сравните два экрана. Слева все отступы по 16 — аккуратно и ровно. Справа отступы разные: внутри групп меньше, между группами больше. Нажмите «Прищур»: размытие убирает буквы и оставляет пятна и расстояния между ними.
Везде 16
10:00–14:00завтра
16:00–20:0012 марта
10:00–14:00
Связанное ближе
10:00–14:00завтра
16:00–20:0012 марта
10:00–14:00
Внутри меньше, чем снаружи
Отступ внутри группы должен быть меньше отступа между группами. У Бюро Горбунова это называется правилом внутреннего и внешнего.
Чем больше разница, тем яснее граница: 8 и 24 читаются как разные расстояния, 13 и 14 — как одинаковые. Поэтому в наборе нет чисел, которые отличаются на пару пикселей: соседние числа набора должны заметно различаться.
Где связи ломаются
- Подпись посередине. Между подписью и её полем столько же, сколько между подписью и предыдущим полем. Непонятно, какое поле она подписывает.
- Ничья ссылка. «Изменить адрес» одинаково далеко от адреса и от следующего блока.
- Кнопка далеко от того, к чему относится. «Применить» под фильтрами отделена таким же отступом, как следующий раздел, и кажется его частью.
- Одинаковые отступы по всему экрану. Выглядит ровно, но групп не видно, и человек читает экран строка за строкой.
Подпись «Телефон получателя» и поле с номером под ней.
4Подпись и то, что она подписывает, — одно целое. Самый маленький отступ показывает, что это пара.
Три варианта времени доставки в одном ряду.
8Это соседи в одной группе: варианты стоят рядом и читаются как один выбор. С отступом 4 кнопки почти слипнутся, и в нужную будет сложнее попасть пальцем.
Блок «Адрес» и блок «Когда привезти» под ним.
24Это граница групп. Отступ втрое больше, чем между соседями внутри группы, поэтому граница видна сразу.
Поле «Имя получателя» и поле «Телефон» под ним в одной форме.
16Соседние поля формы связаны, но у каждого своя подпись. С отступом 8 граница между полями едва заметна: подпись второго поля отстоит от своего поля на 4, а от чужого — всего на 8.
Форма доставки и блок итога с кнопкой «К оплате».
32Итог с кнопкой — отдельная часть экрана: человек сначала заполняет форму, потом проверяет сумму и переходит к оплате.
Адрес «ул. Лесная, 8, кв. 14» и ссылка «Изменить адрес» под ним.
8Ссылка относится к адресу, но это отдельный элемент со своим действием. Важно, чтобы до следующего блока было заметно больше: 24.
Левый край экрана и поле «Комментарий курьеру».
16Это поле экрана. Оно одинаковое для всех блоков, поэтому блоки встают на одну линию.
Название товара в корзине и строка «2 шт.» под ним.
4Название и уточнение — строки одного элемента, карточки товара.
Строка «Доставка — бесплатно» и кнопка «К оплате» под ней.
16Итог и кнопка — связанные блоки одной части: кнопка подтверждает то, что написано над ней. Но это уже не подпись со значением, поэтому не 4.
4Одна левая линия
Чем меньше на экране разных краёв, тем спокойнее он читается.
Взгляд идёт по экрану сверху вниз и опирается на левые края блоков.
Если все блоки начинаются от одной линии, её видно даже без сетки. Если края разные, каждый сдвиг выглядит как отдельный смысл: будто блок вложен в предыдущий или относится к чему-то другому.
На экране корзины все отступы уже из набора. Дело только в краях: линии показывают, от какой вертикали начинается каждый блок.
Четыре края
Одна линия
Откуда берутся лишние края
- Блок сдвинули, чтобы он не сливался с соседом. Сдвиг читается как вложенность: второй товар выглядит частью первого. Чтобы отделить блоки, увеличьте отступ между ними.
- Текст в поле выровняли по подписи над ним. Тогда рамка поля уходит за линию на свой внутренний отступ — в корзине на 12. На линию ставится рамка, а текст внутри неё отступает сам.
- Кнопку сделали уже и поставили по центру. Среди блоков, выровненных влево, это ещё одна ось. Выберите что-то одно — кнопка на всю ширину или по левому краю вместе с остальными.
- У соседних экранов разные поля. На одном 16, на другом 20. При переходе между экранами блоки прыгают.
5Сетка колонок
Набор отвечает за расстояния сверху вниз, сетка — за то, где блок начинается и заканчивается по горизонтали.
Сетка колонок — несколько вертикальных полос одинаковой ширины с одинаковыми промежутками между ними и полями по краям экрана. Блоки кладут в колонки: широкий блок занимает несколько колонок подряд, узкий — одну или две.
| Часть сетки | Что это | В примере урока |
|---|---|---|
| Колонки | Полосы, в которые кладут блоки. Их ширина меняется вместе с шириной экрана | 4 колонки |
| Промежутки | Пустые полосы между колонками. Блоки в них не заходят | 16 |
| Поля | Расстояние от края экрана до первой и от последней колонки до края | 16 слева и справа |
Сравните два экрана каталога. Сетка уже включена: четыре закрашенные полосы — колонки, светлые просветы между ними — промежутки.
Мимо колонок
По колонкам
Сколько колонок брать
Число колонок зависит от ширины экрана. Для телефона в этом уроке берём четыре.
Этого хватает, чтобы положить блок на всю ширину, две карточки в ряд или подпись и значение в две колонки.
| Ширина окна | Колонок | Поля |
|---|---|---|
| До 599 | 4 | 16 |
| 600–904 | 8 | 32 |
| 905–1239 | 12 | растут вместе с окном, содержимое шириной 840 |
| 1240–1439 | 12 | 200 |
| От 1440 | 12 | растут вместе с окном, содержимое шириной 1040 |
Значения — из адаптивной сетки Material Design 2, в dp: так Material называет пиксели, которые не зависят от плотности экрана. Промежутков в этой таблице нет, их задают отдельно. Другие системы берут свои числа; главное, чтобы на одной ширине экрана сетка была одна.
6Как найти разнобой
Разницу в два пикселя глаз не замечает, поэтому отступы проверяют числами.
Экран «Доставка» пересобрали по набору, но пропустили четыре места. Найдите их: нажимайте на числа отступов.
Ошибкой может быть не только число не из набора, но и число из набора, которое стоит не на своём месте.
10:00–14:00завтра
16:00–20:0012 марта
10:00–14:00
- 4 — между подписью «Адрес» и адресом.Здесь всё верно. Подпись и значение — одно целое, поэтому 4.
- 8 — между адресом и ссылкой «Изменить адрес».Здесь всё верно. Ссылка относится к адресу и стоит рядом с ним как соседка по группе.
- 8 — между ссылкой «Изменить адрес» и подписью «Когда привезти».Как исправить. Число из набора, но стоит не на своём месте. Ссылка теперь одинаково близко к адресу и к следующему блоку, и непонятно, к чему она относится. Между группами — 24.
- 4 — между подписью «Когда привезти» и вариантами времени.Здесь всё верно. Подпись и то, что она подписывает, — 4.
- 22 — между вариантами времени и подписью «Комментарий курьеру».Как исправить. 22 нет в наборе. Это граница групп, как между адресом и временем выше, — значит, 24. Разницу в два пикселя не видно, но из-за неё границы групп на экране разные.
- 6 — между подписью «Комментарий курьеру» и полем.Как исправить. У двух других подписей на экране 4. Подпись и поле — одно целое: 4.
- 32 — между полем комментария и итогом.Здесь всё верно. Итог с кнопкой — отдельная часть экрана, поэтому самый большой отступ из набора.
- 14 — между итогом и кнопкой «К оплате».Как исправить. 14 нет в наборе. Итог и кнопка — связанные блоки одной части экрана: 16.
Все четыре найдены. Три из них — числа не из набора: их находит простая сверка со списком. Четвёртое, 8 под ссылкой, из набора, но нарушает близость. Его находит только вопрос «как связаны эти два блока».
Как проверять свой экран
- Включите сетку и посмотрите на левые края блоков. Сколько разных линий?
- Пройдите экран сверху вниз и выпишите столбиком каждый отступ между блоками.
- Отметьте числа не из набора. Их исправить проще всего.
- Для каждого оставшегося назовите роль: «подпись и поле — 4», «между группами — 24». Если роль не называется или одно число стоит на месте двух разных связей, как 8 под ссылкой, это тоже находка.
- Прищурьтесь или отойдите от экрана. Видно ли группы, не читая подписей?
7Сетка и шаг в Figma
Четыре настройки, с которыми держаться набора проще.
Сетка на фрейме
- Выделите фрейм экрана и в правой панели найдите раздел Layout guide. Нажмите «+».
- Выберите тип Columns и задайте: Count — 4, Type — Stretch, Margin — 16, Gutter — 16.
- Показывайте и прячьте сетку в меню масштаба справа вверху: пункт Layout guides. Там же видно сочетание клавиш для вашей раскладки. Проверяйте экран с сеткой, а показывайте — без неё.
Шаг сдвига
Стрелка на клавиатуре сдвигает выделенный блок на 1, Shift + стрелка — на 10. Замените 10 на 8: главное меню → Preferences → Nudge amount. Тогда крупный сдвиг сразу даёт шаг набора, и блоки не уходят на 10, 20, 30.
Измерить расстояние
Выделите блок, зажмите Alt (на Mac — Option) и наведите курсор на соседний блок. Figma покажет расстояние между ними. Так проверяется каждый отступ из замеров «до» и «после» в задании.
Отступы в auto layout
В auto layout расстояние между элементами и внутренние поля задаются числами. Вписывайте туда только числа из набора. Тогда при правках отступы не разъедутся: их держит сама раскладка.
8Задание
Возьмите экран, собранный на глаз, и пересоберите его на сетке с одним набором отступов. Приложите сравнение «до и после».
Часть 1 · Выбрать экран и набор, 10 минут
- Выберите экран, собранный на глаз: свой из прошлого проекта, черновой экран из прошлой темы или экран продукта, которым пользуетесь. Для упражнения подойдёт экран на 8–12 блоков.
- Запишите набор отступов. Возьмите 4, 8, 16, 24, 32 или набор своего продукта, если он есть.
- Рядом с каждым числом напишите его роль, как в таблице раздела 2.
Часть 2 · Замерить «до», 15 минут
- Сделайте копию экрана и подпишите её «до».
- Выпишите все отступы между блоками сверху вниз. Каждый меряйте инструментом, даже если кажется, что он очевиден.
- Посчитайте разные левые края.
- Отметьте места, где связанное стоит не ближе, чем чужое.
ЭКРАН: ______________________ Дата: __.__.____ НАБОР И РОЛИ 4 — ____________________________________ 8 — ____________________________________ 16 — ____________________________________ 24 — ____________________________________ 32 — ____________________________________ «ДО» · отступы сверху вниз между ______________ и ______________ : ____ между ______________ и ______________ : ____ между ______________ и ______________ : ____ между ______________ и ______________ : ____ между ______________ и ______________ : ____ между ______________ и ______________ : ____ разных чисел: ____ из них не из набора: ____ левых краёв: ____ связанное дальше, чем чужое: ______________________ «ПОСЛЕ» разных чисел: ____ все из набора: да / нет левых краёв: ____ каждый отступ могу объяснить: да / нет что изменилось, кроме чисел: ______________________
Часть 3 · Пересобрать, 40 минут
- Добавьте на фрейм сетку: 4 колонки, поля 16, промежутки 16.
- Поставьте все блоки от левого поля. Широкие блоки — на целое число колонок.
- Для каждого отступа сначала решите, как связаны блоки, потом возьмите число из набора.
- Если блок не помещается, меняйте блок, а не набор.
- Не меняйте состав экрана. В этом упражнении работаем с раскладкой: новые блоки и новые решения оставьте на потом.
Часть 4 · Сравнить, 10 минут
- Положите «до» и «после» рядом с включённой сеткой и сделайте снимок.
- Заполните в шаблоне часть «после».
- Прищурьтесь на оба экрана: на каком видны группы?
- Покажите сравнение коллеге и спросите, какой экран выглядит аккуратнее и почему.
Что должно получиться
- Экраны «до» и «после» рядом, с включённой сеткой.
- Заполненный шаблон замеров.
- Набор отступов с ролями — его можно брать для следующих экранов.
План работы: 10 минут на выбор экрана, 15 на замеры, 40 на пересборку и 10 на сравнение. Всего — около полутора часов.
Частые сложности
- «Не понимаю, 8 здесь или 16». Сформулируйте связь словами. «Ссылка меняет этот адрес» — соседи в группе, 8. «Это следующее поле формы со своей подписью» — 16.
- «Все отступы из набора, а экран всё равно выглядит неровно». Прищурьтесь и проверьте близость: возможно, одинаковые числа стоят там, где связи разные. Потом включите сетку и посчитайте края.
- «После пересборки экран стал длиннее». Проверьте, не поставили ли 32 там, где хватает 24. Если все отступы на своих местах, а экран длинный, вопрос в составе экрана. Запишите его и обсудите отдельно.
- «В продукте уже есть свои отступы». Берите их. Урок учит держаться одного набора, числа в нём могут быть другими.
- «Текст в поле не стоит на линии». Так и должно быть: на линии стоит рамка поля, текст внутри отступает на внутренний отступ.
9Чек-лист и ошибки
Экран собран по набору, если
- Все отступы между блоками — из набора
- Про каждый отступ можно сказать, почему он такой
- Внутри групп отступы меньше, чем между группами
- Подпись ближе к своему полю, чем к соседнему блоку
- Все блоки начинаются от одной левой линии
- Поля экрана слева и справа одинаковые
- Широкие блоки занимают целое число колонок
- Ни один край блока не попадает в промежуток сетки
- На размытом экране видны группы и главное действие
Что мешает собрать экран по сетке
- Отступы на глаз. 13, 14 и 16 рядом: по отдельности разницу не видно, вместе экран выглядит неаккуратно.
- Набор растёт ради одного места. 20, «потому что 24 не влезло», — и через месяц на экранах появятся 18 и 22.
- Одинаковые отступы везде. Экран ровный, но групп не видно.
- Ничьи элементы. Ссылка или подпись одинаково далеко от двух соседей.
- Несколько левых краёв. Каждый сдвиг выглядит как вложенность.
- Блок мимо колонок. Край попадает в промежуток или в середину колонки.
- Сетка важнее смысла. Иконку или аватар растянули на колонку, чтобы совпасть с сеткой.
- Проверка на глаз. Разницу в два пикселя глаз не видит: включайте сетку и мерьте.
10Три ступени темы
В этом уроке учимся держаться набора отступов и сетки. На следующих ступенях — строить иерархию без цвета и записывать правила раскладки для команды.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior — этот урок | Выбрать набор отступов и держаться его; группировать связанное расстоянием; класть блоки в колонки; проверять выравнивание сеткой, а не глазом | Все отступы на экране из набора, и про каждый можно сказать, почему он такой |
| Middle | Строить иерархию размером, весом и расстоянием, а цвет добавлять последним; подбирать плотность под задачу — плотный рабочий экран и свободный промо | На чёрно-белом снимке экрана человек за три секунды показывает, что здесь главное |
| Senior | Записывать шкалу отступов и типовые раскладки продукта; проверять чужие экраны по правилам без придирок; объяснять разработке, как правила ложатся на сетку в коде | Экран, собранный другим дизайнером по вашим правилам, встаёт в продукт без переделки раскладки |
Что почитать дальше
- Refactoring UIТри главы по теме урока: «Establish a spacing and sizing system», «Grids are overrated» и «Avoid ambiguous spacing». Вторая уже названием спорит с разделом 5 урока. Книга 2018 года для разработчиков; текст глав закрыт, открыто оглавление.
- Что такое «правило внутреннего и внешнего»?Правило из раздела 3 на одной надписи: как соотношение внутренних и внешних расстояний отделяет буквы, слова, строки и подзаголовок и почему контраст важнее точной пропорции. Совет 2014 года, примеры типографские, не интерфейсные.
- § 136. Теория близостиПочему близкие объекты читаются как связанные и почему заголовок должен стоять ближе к своему абзацу, — на примерах вёрстки и уличных указателей, плюс обратное правило: одинаковое трудно различить. Параграф 2006 года, на две минуты.
- Spacing и Responsive layout gridШкала отступов Material 3 на 8 dp с мелкими значениями 2, 4, 6 и 10 и адаптивная сетка Material 2, из которой взята таблица колонок в разделе 5. Material 2 — прошлая версия: в Material 3 брейкпоинты другие — 600, 840, 1200 и 1600 dp.