Сетка в UI-дизайне: колонки, отступы и структура макета

Сетка помогает согласовать расположение текста, изображений и элементов интерфейса. Она задаёт общие линии выравнивания и интервалы, поэтому связанные страницы легче собирать и сравнивать. Выбирайте сетку под содержание: карточкам каталога, длинной статье и панели с данными нужны разные решения.

В редакторе UI-макетов Pixso удобно сравнить несколько вариантов на одном наборе карточек: сначала определить читаемую ширину содержимого, затем подобрать поля и колонки. Ниже разберём, как принять такое решение для каталога.

1. Из чего состоит сетка макета

Сетка — это система направляющих и областей для размещения содержимого. В колонной сетке задают колонки, интервалы между ними и внешние поля. Она помогает организовать макет, но не заменяет решение о том, какая информация важнее.

Основные элементы сетки

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

1. Область макета

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

Для книги, брошюры или другого многостраничного издания важно согласовать сетку с типографикой и требованиями к публикации. В обзоре Adobe InDesign для верстки объясняется, чем эта задача отличается от проектирования интерфейса.

2. Внешние поля

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

3. Горизонтальные направляющие

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

4. Модули

В модульной сетке пересечение колонок и горизонтальных делений образует ячейки. Один блок может занимать одну ячейку или объединять несколько соседних.

5. Зоны содержимого

Объединяйте соседние модули в области для навигации, основного материала или дополнительной информации. Размер области должен соответствовать её содержимому.

6. Колонки

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

7. Строки

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

8. Интервалы между колонками

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

9. Повторяемые ориентиры

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

2. Как сетка помогает интерфейсу

Хорошая сетка поддерживает несколько практических задач:

• Выравнивание: связанные заголовки, поля и изображения начинаются на согласованных линиях.
• Повторное использование: одинаковые карточки проще разместить на нескольких экранах без ручного подбора каждой позиции.
• Типографика: ширина текстовой области помогает контролировать длину строки и переносы.
• Связность страниц: знакомое расположение основных областей облегчает переход между разделами.
• Иерархия: размер и положение блока отражают его роль, а не случайное свободное место.
• Разделение групп: поля и интервалы дают содержимому пространство и делают границы между задачами понятнее.

3. Четыре распространённых типа сеток

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

1. Одноколонная сетка

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

2. Колонная сетка

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

3. Модульная сетка

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

4. Иерархическая сетка

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

4. Как подобрать сетку для своего экрана

1. Начните с содержимого

Соберите реальные заголовки, карточки, изображения и действия. Отметьте, что пользователь должен заметить первым и какие элементы относятся к одной задаче.

2. Выберите подходящую структуру

Для статьи начните с одной текстовой области. Для каталога попробуйте несколько колонок. Для панели с данными сравните размеры блоков по важности показателей.

3. Согласуйте пропорции

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

4. Проверьте узкий экран

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

5. Проверьте интервалы и длинные тексты

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

Рассчитаем сетку каталога, а не выберем число колонок наугад

Предположим, внутри страницы есть область шириной 1200 px. В ней нужно показать карточки курсов: изображение, название в две строки, автора и кнопку. Примем внешние поля по 24 px и промежутки по 24 px. Для четырёх одинаковых карточек получаем (1200 − 2 × 24 − 3 × 24) / 4 = 270 px на карточку.

Это исходные размеры для конкретного примера, а не правило для любого сайта. Подставьте длинное название курса: если при ширине 270 px оно занимает пять строк и вытесняет цену, проблема не решается уменьшением шрифта. Сравните три карточки в ряду или сократите второстепенные сведения.

Ширины в таблице — три контрольные точки, а не готовые CSS-брейкпоинты. Между ними плавно меняйте ширину: переход к меньшему числу карточек нужен там, где содержание перестаёт помещаться. Проверьте и промежуточный размер, например 900 px, чтобы не пропустить тесную компоновку.

Отделите сетку страницы от компоновки карточки

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

В Pixso подготовьте три фрейма для контрольных ширин и используйте один и тот же набор содержимого. У карточек сохраните общие стили, затем проверьте, что длинный текст увеличивает блок без наложения на кнопку. Отметьте рядом с макетами, какие области растягиваются, какие переходят в новый ряд и какой порядок чтения сохраняется на телефоне. Эти пояснения полезнее, чем один экспортированный экран с идеальными короткими заголовками.

Сетка должна поддерживать содержание

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