Дом.ru movix
Модульная сетка
Мобильные платформы
Задача
Спроектировать универсальную модульную сетку для всех мобильных платформ
На протяжении всей разработки мы предпринимаем попытки унифицировать модульную сетку, однако осмысленно удается сделать это лишь сейчас, когда в результате проб и ошибок, фитбека от разработчиков и тестирования приложения на проде удалось сформулировать определенные требования.
Чтобы упростить и ускорить работу для дизайнеров и разработчиков приложений, чтобы исключить недопонимания и возможные ошибки, нужны простые и четкие правила работы с сеткой.
Мы провели исследование и разработали концепцию универсальной модульной сетки для всех мобильных и веб-платформ. Концепция включает в себя несколько шагов: модуль, интерфейсную сетку, структурную сетку, лэйаут и адаптивность.
Чтобы упростить и ускорить работу для дизайнеров и разработчиков приложений, чтобы исключить недопонимания и возможные ошибки, нужны простые и четкие правила работы с сеткой.
Мы провели исследование и разработали концепцию универсальной модульной сетки для всех мобильных и веб-платформ. Концепция включает в себя несколько шагов: модуль, интерфейсную сетку, структурную сетку, лэйаут и адаптивность.
Модуль
Или «супер-пиксель» — это шаг в 8dp (density independent pixels), по которому выстраиваются все элементы интерфейса — их размеры и отступы между ними. Мы используем 8dp, так как это универсальная величина, кратная почти всем существующим разрешениям экрана: 320, 640, 768, 1024, 1280, 1440, 1680, 1920, 2560.
Однако есть исключения, например Айфоны с разрешением: 375, 414. Но об этом позже.
Однако есть исключения, например Айфоны с разрешением: 375, 414. Но об этом позже.
Интерфейсная сетка
Интерфейсная сетка жёстко задаёт вертикальный ритм и минимальные размеры и отступы в макете, которые равны модулю. Элементы интерфейса могут тянуться шире этого минимума. Адаптивность не учитывается на этом слое.
Структурная сетка
Набор колонок, в которые укладывается основной лейаут интерфейса.
По факту это проверочная сетка, чтобы дизайнер без труда мог подобрать нужные размеры элементов и уложить их в лэйаут. Например: ширина любого ассета равняется 2, 3 или 4 колонкам структурной сетки.
Структурная сетка может состоять из 4, 8, 12, 24-х колонок, в зависимости от разрешения экрана. Отступы между колонок равны двум модулям. Отступы от краев (под «уши») от 3 до 5-ти.
При разработке более сложного лэйаута, сетку можно поделить на два.
В случае со смартфоном появляется половина модуля, но это не проблема — колонки структурной сетки и отступы между ними остаются равны друг другу.
В случае со смартфоном появляется половина модуля, но это не проблема — колонки структурной сетки и отступы между ними остаются равны друг другу.
Лэйаут
Разметка рабочих областей интерфейса (количество колонок, их ширина и адаптивность) на базе структурной сетки.
