Сетка

Принцип построения сетки

Сетка строится по принципу «слоёв» абстракции — сначала мы задаём «ритм» для элементов интерфейса и лейаута, а затем определяем их расположение.


Интерфейсная сетка

«Супер-пиксель» — шаг или модуль в 4dp (density independent pixels), по которому выстраиваются все элементы интерфейса — их размеры и отступы между ними.

Адаптивность

Нет связи. Интерфейсная сетка жёстко задаёт вертикальный ритм и минимальные размеры и отступы по горизонтали. Элементы интерфейса могут тянуться шире этого минимума.



Структурная сетка

Набор колонок, в которые укладывается основной лейаут интерфейса. Колонки в 20dp чередуются межколонниками в 20dp, по краям экрана заложен минимальный отступ 20dp с каждой стороны, а также пространство под полосу прокрутки (20dp).

Это скорее «ритм», проверочная сетка для макетов — убедиться, что лейаут гармоничный. Разработчики не обязаны использовать её.

Адаптивность

В зависимости от типа продукта, используется два подхода:
— использование 100% экрана («резина»). Колонки используются для определения внутренних отступов лейаута и ширины его фиксированных областей. Для продуктов, где важно использовать всё экранное пространство: productivity-сервисы нового поколения .
— жёсткие переходы через ключевые breakpoints. В основных состояниях (1024, 1280, 1366, 1680) ширина областей лейаута и отступы внутри них должны совпадать с колонками. Для продуктов со сложным визуальным представлением, где важно гарантировать аккуратность: медиапроекты, промо-сайты.

Лейауты



Разметка рабочих областей интерфейса (количество колонок, их ширина и адаптивность) на базе структурной сетки.

Адаптивность

Контентная область делится на равное количество частей (2, 3 или 4). Если в лейауте есть колонки фиксированной ширины (например, меню или баннер) — они не входят в контентную область и на равное количество частей делится оставшееся пространство.

Главное, чтобы для продуктов с жёсткими переходами через ключевые breakpoints при делении на 2, 3 и 4 не было дробных чисел.

Принцип расчёта

Для построения сетки необходимо расчитать ширину контентной области для каждого breakpoint.

Из общей ширины экрана мы вычитаем с каждой стороны по 20dp под «уши» (минимальный отступ от края браузера) и 20dp под полосу прокрутки (не учитывается для разрешений меньше 1024). Итого: 60dp.

Полученное значение нормализуем до меньшего числа, соответствующего ритму 20/20 (оставшееся пространство отдаётся под «уши»). Расчёты:

Разрешение экрана 768 1024 1280 1366 1680
Контентная область 700 940 1180 1300 1420
Ширина колонки (x2) 340 460 580 640 700
Ширина колонки (x3) 220 300 380 420 460
Ширина колонки (x4) 160 220 280 310* 340

* Не попадает в ритм 20/20.




Контейнеры

Каждая колонка лейаута — это стек, в котором друг за другом помещаются контейнеры конкретных блоков с контентом.

Есть три типа контейнеров:
— Карточка. Подложка с границей по всем краям и z-index: 1. Информация выводится вертикальным списком; если её больше, чем высота контейнера — показывается ссылка на переход к полному списку или список выводится здесь же, но постранично.
— Пояс. Блок «навылет». Информация выводится в колонки; если её больше, чем ширина контейнера — показываются стрелки для горизонтальной прокрутки. Отступы между поясами кратны 20dp.
— Попап. Подложка с z-index: 2. Информация выводится вертикальным списком; не рекомендуется выводить больше информации, чем помещается в стандартный попап. Находится вне основного лейаута и определяется лейаутом для попапов (фиксированная ширина, которая определяется назначением попапа).

Адаптивность

Контейнер занимает 100% ширины колонки лейаута.