Структура и сетка

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

Структура макета должна быть:

• консистентной между продуктами,
• предсказуемой,
• адаптивной.

Консистентность

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

Для построения размерностей в интерфейсе мы используем сетку 4dp. Единый модуль сетки необходим для поддержания общей логики в создании макетов и их разработке.

Предсказуемость

Элементы интерфейса имеют разное назначение или находятся на разных уровнях смысловой иерархии. Мы разделяем их на информационные слои.

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

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

Структура макета

Воздух

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

Разделители

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

Структура интерфейса хорошо считывается благодаря воздуху

Интерфейс слишком зажат, из-за чего рушится иерархия элементов

Разделители без необходимости увеличивают высоту

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

До 1023px

Сетка резиновая, отступы по бокам фиксированные, контент адаптируется.

От 1024px

Сетка фиксированная, с переключением по брэкпоинтам — 1280px и 1508px. Контент не растягивается.

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