Лейаут

В этом гайде описана структура стандартного экрана сервиса Контура, основные его части и основные приёмы оформления элементов.

Все лейауты можно разделить на два типа:

• лейауты в две или три колонки с сайд-меню;

• лейауты с шапкой, в котором сайд-меню скрыто в бургер, а «Пользователь» и «Настройки» вынесены в шапку.

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

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

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

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

Подробнее про сайд-меню можно будет прочитать в будущем гайде.

Компонент для фронтента уже реализован.

Если переход по разделам меню не основной сценарий в сервисе, используйте шапку с меню-оверлей.

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

Если вы используете в сервисе шапку и меню-оверлей, то настройки, профиль и навигация по сервису нужно перенести из сайд-меню в шапку.

Контент-зона может быть оформлена тремя способами:

1. контент на белом фоне,

2. контент на серых подложках, на белом фоне,

3. контент на белых подложках, на сером фоне.

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

В шапке контент-зоны всегда есть заголовок. Также могут находиться основные действия раздела и стрелка «Назад». Это помогает пользователю легче ориентироваться и взаимодействовать с сервисом.

Чтобы не оставлять страницу белой, если список не заполнен — используйте заглушку пустого состояния.

Подвал относится ко всему сервису, а не конкретному разделу, который открыт в контент-зоне.

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

Подробное описание и примеры в гайде подвала.

Каждый продукт сам решает, как строить адаптивность в своём сервисе.

В качестве ориентира можно использовать шаблон с брейкпоинтами:

• Wide Desktop — больше 1400px
• Desktop — 1400px-1200px
• Narrow Desktop — 1200px-992px
• Tablet — 992px-768px
• Mobile — меньше 768px

Для работы с брейкпоинтами вы можете использовать компонент ResponsiveLayout из библиотеки React UI.

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

(Wide Desktop: >1400px)

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

(Desktop: 1400px-1200px)

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

(Narrow Desktop, и меньше: 1200px<)

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

Блоки в интерфейсе, контролы, или выделенные области, имеют скругление:

• Для инпутов: 2px — это позволит отличить их от кнопок;
• Для маленьких блоков и контролов: 8px — универсальное скругление для всех контролов;
• Для больших блоков и больших попапы: 16px — для сохранения соотношения скругления и размера элементов.

Блоки не должны быть слишком узкими, например, блок со скруглениями 16 не может быть высотой 32, только 48 и больше.

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

Стремитесь к сохранению монохромности в интерфейсе. Основные цвета: белый и чёрный. Допустимо использование цвета продукта и функциональных цветов: красный, зелёный и оранжевый.

Контролы либо чёрные, либо в цвет продукта. Кроме красного и оранжевого.

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

Сохраняйте пространство между элементами и визуальную частоту:

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

Используйте тени только для визуализации уровня подъёма элемента, например, модального окна. Не используйте тени для зонирования контента.

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

Рамки и линии не толще 1px. Если у элемента есть свой цвет — рамка не нужна.

У черных элементов не может быть тени — она смотрится грязно.