UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Руководство по проектированию адаптивных сеток
Редакція
Редакція

Опубліковано

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

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

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

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

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

Столбцы

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

Столбцы в адаптивной сетке

Межколонник

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

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

Поля

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

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

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

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

Боковые и гибкие поля в адаптивной сетке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пишите автору в Instagram, Twitter или Dribbble.


Перевод статьи medium.muz.li

Топ коментарі (0)