UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее

Руководство по проектированию адаптивных сеток

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

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

Анатомия сетки

Сетка состоит из 3 основных компонентов: столбцов (колонок или columns), желобов (промежутков или gutters) и полей (margins). Давайте попробуем с ними разобраться.

Столбцы

Столбцы – это воображаемые вертикальные блоки, которые используются для выравнивания контента. Мы определяем ширину столбцов в процентах (%) или фиксированных значениях.

UX-исследователь
UX-исследователь
Станьте UX - исследователем - одним из самых востребованных специалистов в продуктовой команде
Забронировать место
Руководство по проектированию адаптивных сеток
Столбцы в адаптивной сетке

Межколонник

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

Руководство по проектированию адаптивных сеток
Промежутки в адаптивной сетке

Поля

Поля – это пространство между контентом и краями экрана.

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

Гибкие поля занимают пространство, оставшееся после создания сетки со столбцами, отступами и боковыми полями.

Гибкие поля меняются в зависимости от размера экрана.

Руководство по проектированию адаптивных сеток
Боковые и гибкие поля в адаптивной сетке

Как проектировать интерфейс с помощью адаптивной сетки?

Контент (изображения, текст или элементы интерфейса) помещаются в видимые или невидимые родительские контейнеры. У видимых контейнеров есть граница или блокировка заполнения, в то время, как у невидимых контейнеров есть прозрачная блокировка.

К видимым родительским контейнерам относятся такие компоненты, как карточки, баннеры и т. д.

Руководство по проектированию адаптивных сеток
Контент в таких видимых родительских контейнерах, как карточки

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

Руководство по проектированию адаптивных сеток
Контент в невидимых родительских контейнерах – функциональных блоках

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

Руководство по проектированию адаптивных сеток
Выравнивание родительского контейнера по столбцам

Контент внутри родительского контейнера размещается независимо и его не обязательно выравнивать по столбцам.

Структура столбца

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

8, 12, 16 и 20 – ряд наиболее распространенных структур столбцов для адаптивного макета. Выбор структуры столбцов для проекта зависит от требований к дизайну.

Руководство по проектированию адаптивных сеток
8/12/16/20 столбчатая структуры сетки

Структура из 12 столбцов – самая гибкая. В дальнейшем она может быть разбита 4–4–4 или 3–3–3–3, чтобы выровнять содержимое родительских контейнеров.

Точки перехода

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

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

Руководство по проектированию адаптивных сеток
Масштабирование и укладка сетки в стек

Размер столбца изменяется в сторону уменьшения, если на меньшем экране достаточно свободного места для размещения контента. Столбец складывается вертикально, если контент не помещается в доступном пространстве небольшого экрана.

Поведение сетки

Сетка может работать тремя разными способами в разных точках останова.

Попытаемся с ними разобраться.

Фиксированные сетки

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

Руководство по проектированию адаптивных сеток
Поведение сетки с фиксированной шириной

Гибкие сетки

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

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

Руководство по проектированию адаптивных сеток
Поведение гибкой сетки

Гибридные сетки

Гибридная сетка имеет компоненты гибкой и фиксированной ширины.

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

Руководство по проектированию адаптивных сеток
Поведение гибридной сетки

Если ширина контента превышает доступный размер экрана, фиксированная сетка резко превращается в гибкую, адаптирующуюся ко всему доступному пространству экрана для адекватного размещения контента.

Как настроить сетку макета в инструментах прототипирования?

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

Десктопное представление

Никогда не следует проектировать с большими разрешениями, такими как 1440 × 900, 1600 × 900 или 1920 × 1080, если только это не сделано намеренно.

1280 × 800 – минимально возможное разрешение рабочего стола. И гибкий макет, и макет фиксированной ширины, спроектированный с разрешением 1280 × 800, можно просто адаптировать к экранам большего размера, но сделать наоборот становится сложно.

Итак, начнем с артборда размером 1280 × 800.

Настройка сетки с фиксированной шириной

Чтобы настроить сетку фиксированной ширины, мы используем фиксированное числовое значение для межколонников и столбцов. Я рекомендую столбцы шириной 74px, промежутки шириной 32px и боковые поля 16px с каждой стороны.

Руководство по проектированию адаптивных сеток
Настройка сетки с фиксированной шириной

Столбцы шириной 74px и промежутки шириной 32px дают ширину контента 1240px (за исключением боковых полей 16px с каждой стороны, т.е. 1272px), что позволяет использовать максимально доступный размер экрана.

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

Настройка гибкой сетки

Чтобы настроить сетку гибкой ширины, мы используем фиксированные числовые значения для межколонников и автоматически вычисляемые значения (в %) для столбцов.

Руководство по проектированию адаптивных сеток
Настройка гибкой сетки

Гибкая сетка использует весь размер экрана для ширины основного контента, оставляя боковые поля по 16px с каждой стороны.

Мобильное представление

Для мобильных устройств мы используем гибкую сетку, в которой межколонники и боковые поля имеют фиксированные числовые значения. Я рекомендую использовать межколонники шириной 16px и боковые поля шириной 16px с каждой стороны.

Мы можем проектировать мобильные интерфейсы на артборде размером 360 × 640.

Мобильные устройства имеют небольшое разрешение экрана. Если мы отобразим 12 отдельных столбцов, промежутков и боковых полей с таким маленьким разрешением, проектирование в масштабе станет довольно громоздким.

Руководство по проектированию адаптивных сеток
Настройка гибкой сетки для мобильных устройств

Итак, мы объединяем столбцы в группы по 3, чтобы создать 4 толстых столбца, сохраняя при этом удобную сетку макета для быстрого выравнивания контента.

Планшетное представление

Мы настраиваем сетки для планшетов так же, как и для мобильных устройств. Я рекомендую межколонники шириной 32px и боковые поля шириной 16px с каждой стороны.

Мы можем создавать интерфейсы для планшетов с размером артборда 768 × 1024.

Руководство по проектированию адаптивных сеток
Настройка гибкой сетки для планшета

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

Material Design рекомендует использовать межколонники и боковые поля размером 24 px. Вы также можете использовать эти значения для планшета.

Варианты макетов

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

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

Попробуем в них разобраться.

Макет с одним столбцом

Одноколоночный макет или макет на всю ширину – один из самых популярных вариантов для целевых и лид-страниц.

Руководство по проектированию адаптивных сеток
Макет в одну колонку с контейнером уровня 1 страницы

Мы можем объединить 12 столбцов для создания родительского контейнера с одним столбцом или распределить 12 столбцов по группам родительских контейнеров.

Но в итоге все заключено только в один контейнер уровня страницы.

Макет с двумя столбцами

Макет с двумя столбцами имеет два контейнера уровня страницы. Как правило, один контейнер уровня страницы имеет больший вес столбца по сравнению с другим.

Руководство по проектированию адаптивных сеток
Двухколоночный макет с контейнером на уровне 2 страниц

В макете с двумя столбцами столбцы распределяются по родительским контейнерам 9–3 или 8–4 для создания основной ширины контента. Интерфейсы с одной боковой панелью – отличный пример макета с двумя столбцами.

Макет с тремя столбцами

Макет с тремя столбцами имеет три контейнера уровня страницы. Один контейнер уровня страницы имеет больший вес столбца по сравнению с двумя другими.

Руководство по проектированию адаптивных сеток
Макет из трех столбцов с контейнером на уровне 3 страниц

В макете с тремя столбцами столбцы распределяются в родительских контейнерах 3–6–3 или 2–8–2 для создания основной ширины контента. Интерфейсы с двумя боковыми панелями – пример макета с тремя столбцами.

Макет боковой панели с фиксированной шириной

Макет боковой панели с фиксированной шириной работает немного иначе.

Руководство по проектированию адаптивных сеток
Макет с фиксированной боковой панелью

Ширина боковой панели зафиксирована в диапазоне точек останова, а оставшееся пространство занято контейнером фиксированной или гибкой ширины.

Дашборд с закрепленными боковыми панелями – прекрасный пример макета боковой панели фиксированной ширины.

Передача сетки разработчикам

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

Что касается кода, мы можем либо объединить столбцы, либо сложить их в стек.

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

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

Разработчики используют довольно популярные фреймворки, такие как Bootstrap, Zurb Foundation и т. д., где значения столбцов, желобов и боковых полей сильно отличаются в зависимости от стандартизованного подхода.

Руководство по проектированию адаптивных сеток
Простая настройка сетки Bootstrap

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

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

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

Спасибо за прочтение!

Пишите автору в InstagramTwitter или Dribbble.

Total
24
Shares
Похожие статьи
modular design grid
Подробнее

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

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

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
23
Share