Модульная сетка и брейкпоинты
Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB.
Веду телеграм-канал «Заметки дизайнера» , где делюсь полезными ссылками, интересными продуктами для собственного анализа
и статьями.
В основе отличного дизайна лежит правильная и эстетичная организация информации: размещение модульной сетки и её поведение в интерфейсе, иерархия, вертикальный ритм, правила внутреннего и внешнего.
В статье я расскажу и рассмотрю лучшие практики использования модульных сеток, которые основаны на Material Design System, Carbon Design System, Bootstrap.
Начальная база
Перед построением компонентов, необходимо определиться, чему будет кратно каждое измерение для обеспечения единообразия и консистентности в интерфейсе. Вы можете сами выбрать кратное измерение: 2, 3, 4, 5, 6 и так далее. Но наиболее рекомендуемая базовая единица — 8px. Почему? В мире большое количество девайсов, разрешений, плотность пикселей увеличивается, и именно 8px делится на все размеры экрана.
Поведение модульных сеток
Ключом к удобству использования вашего интерфейса является его отзывчивость, и достижением этого является установка поведения сетки макета и контрольных точек (breakpoints).
Гибкое поведение (Fluid Behavior)
Особенностью этого поведения является то, что размеры компоненты зависят от ширины колонки в % соотношении, а количество колонок фиксированное. Поэтому ширина контейнера изменяется в зависимости от размера экрана.
Carbon рекомендует использовать такой тип поведения для редактируемого контента, панель управления, изображение, видео, визуализация данных.
Учитывайте, что при использовании гибкой сетки сложно считывать информацию при больших экранах, например, 32–40 дюймов. Появляется много «слепых» зон во время работы в интерфейсе, сложно работать с такой информацией.
Фиксированное поведение (Fixed Behavior)
В этом поведении модульная сетка фиксируется по ширине контейнера для сохранения размеров компонентов в границах контрольных точек (breakpoints). Количество колонок увеличивается в зависимости от ширины экрана.
Гибридное поведение (Hybrid behavior)
Гибридная сетка содержит как гибкие, так и фиксированные компоненты. Если компонент превышает ширину контейнера, то вместо фиксации используйте гибкую сетку. Используйте масштабную шкалу для определения фиксированного размера, а ширину колонок для измерения гибкой сетки. Соотношения сторон не применяются.
Контрольные точки (Breakpoints)
Эти точки помогают управлять макетом во время масштабирования с мобильной до десктопной версии. В заданном диапазоне (например, 480–599px) макет настраивается в зависимости от размера и ориентации экрана.
Как узнать диапазон? В целом вы можете сами настраивать диапазон в зависимости от статистики пользования вашим интерфейсом. Желательно систематизировать и не делать большое количество точек.
Контрольные точки (как пример):
• Маленький / Мобайл = 0–599px
• Средний / Планшеты = 600–1024px
• Большой / Десктоп = 1025–1440px
• X-Большой / Широкофор. = 1441–1920px
• Макс. = >1920px
Bootstrap пример:
• X-small = <576px (0–575px)
• Small = ≥576px (576–767px)
• Medium = ≥ 768px (768–991px)
• Large = ≥ 992px (992–1199px)
• Extra large= ≥ 1200px (1200–1399px)
• Extra extra large= ≥ 1400px(1400-∞px)
При использовании Bootstrap фреймворка, вы можете редактировать брейкпоинты, но нельзя увеличивать количество колонок.
Carbon Design System пример:
• Small = 320px (320–671px)
• Medium = 672px (672–1055px)
• Large = 1056px (1056–1311px)
• Extra Large= 1312px (1312–1583px)
• Max= 1584px (1584–∞px)
Сетка имеет 16 колонок, что намного лучше использовать в больших интерфейс для расположения гибкой информации. Вы также можете кастомизировать значения брейкпоинтов.
Области экрана
Любой интерфейс делится на области, которые зависят от разрешения экрана, в том числе меняется поведение модульной сетки. Что я имею в виду?
В интерфейсе есть базовые зоны:
- Навигация панель. В основном располагается слева. Её поведение может быть скрытое/раскрытое.
- Шапка/Балка. Верхняя часть, где может располагаться заголовок раздела, ссылки/навигации, toggle buttons (справочник, уведомления), профиль.
- Асайд/Сайдбар. Появляется справа при нажатии на компонент для просмотра детальной информации.
В примере Carbon мы видим, что в интерфейсе используется гибкая сетка с компенсацией для отображения скрытого/раскрытого меню. Учитывайте и проектируйте интерфейс, располагайте модульную сетку с этой компенсацией.
Взяв за основу Carbon Grid, начал строить стандартное разрешение 1440px. Выставил навигацию с шириной 64px, учитывая margin 32px я получил offset = 96px (для включения offset выберите любой тип кроме stretch). Для пропорционального сохранения margin экран получился с разрешением 1376px с шириной контейнера 1280px.
Сайт • Инстаграм • Телеграм-канал • Ютуб-канал
Подкаст «Заметки дизайнера»:
Apple Podcast • Яндекс.Музыка • Google Podcasts
