Лейаут и стиль
В этом гайде описана структура стандартных экранов продуктов Контура и основные приёмы оформления элементов.
Структура экранов
У продуктов Контура может быть два лейаута: с боковым меню или с шапкой
С боковым меню
Лейаут с боковым меню подходит сервисам со сложной структурой навигации где пользователь часто переключается между разделами.
Меню располагается в левой части страницы, занимает всю высоту экрана, и может содержать до двух колонок для отображения вложенности.
Умеет сворачиваться в узкую колонку и открываться поверх при наведении.
С шапкой
Лейаут с шапкой подходит сервисам, в которых:
- 1. Мало навигации;
- 2. Навигации много, но большинство времени пользователи проводят внутри одного-двух разделов;
- 3. Поиск — основной сценарий.
Если есть другие разделы, используйте бургер-меню.
Бургер-меню выглядит и выполняет ту же функцию, что и боковое меню, но открывается поверх контента при клике на иконку, и позволяет контент-зоне использовать всю ширину экрана.
Смотрите гайд «Шапка».
Контент-зона
Контент-зона может быть оформлена тремя способами:
На белом фоне:
На серых подложках и белом фоне:
На белых подложках и сером фоне:
В контент-зоне располагается контент выбранного раздела: списки документов, таблицы, документы или формы, с которыми взаимодействует пользователь.
Шапка контента
В шапке контент-зоны всегда есть заголовок.
Справа от заголовка могут располагаться основные действия для экрана. Главная кнопка выделяется акцентным цветом. Такая кнопка может быть только одна.
Слева от заголовка может появляться стрелка «Назад». При этом отступ от левой границы и со стрелкой и без нее всегда одинаковый, например 48 px. Это нужно, чтобы при переключении между экранами левая граница не скакала.
При наведении стрелка становится черной #222222.
Пустые состояния
Чтобы не оставлять страницу белой, если список не заполнен — используйте заглушку пустого состояния.
Смотрите гайд «Пустые состояния».
Подвал
Подвал должен быть лаконичным и содержать минимальный набор ссылок.
Смотрите гайд «Подвал».
Адаптивность
Каждый продукт сам решает, как адаптировать свой сервис. В качестве ориентира можно использовать шаблон с брейкпоинтами:
- Wide Desktop: > 1 400 px
- Desktop: 1 400 px – 1 200 px
- Narrow Desktop: 1 200 px – 992 px
- Tablet: 992 px – 768 px
- Mobile: < 768 px
Для работы с брейкпоинтами вы можете использовать компонент ResponsiveLayout из библиотеки React UI.
На больших экранах, когда контент тянуть бессмысленно, ширина контентной области фиксируется, отступы справа и слева увеличиваются.
(Wide Desktop: > 1 400 px)
Пока в контентной области достаточно места, показываем главное меню, включая колонку меню второго уровня, если есть.
(Desktop: 1 400 – 1 200 px)
По мере сужения экрана, когда места под контент перестаёт хватать, главное меню сворачивается в столбец. При наведении меню раскрывается поверх контент-зоны.
(Narrow Desktop: 1 200 – 992 px)
При дальнейшем сужении экрана, меню сворачивается в бургер, и по клику также открывается поверх контент-зоны
(Tablet and Mobile: < 992 px)
Стиль элементов
Визуальная чистота
Интерфейс чистый, незашумленный. Показываем элементы только когда они нужны. Например:
- показывайте чекбоксы массового выбора только при наведении,
- компонент массовых действий показывайте только при выборе хотя бы одного элемента списка,
- поле поиска сворачивайте до иконки, если оно не используется постоянно,
- окрашивайте компоненты в функциональные цвета только при наведении.
Неправильно
Правильно
Сводите количество линий выравнивания контента и вложенностей к минимуму. Интерфейс должен легко адаптироваться при уменьшении экрана.
Неправильно
Правильно
Цвета
Стремитесь к сохранению монохромности в интерфейсе. Основные цвета: белый и чёрный. Допустимо использование цвета продукта и функциональных цветов: красный, зелёный и жёлтый.
Неправильно
Правильно
Контролы либо чёрные, либо в цвет продукта. Кроме красного и оранжевого.
Неправильно
Правильно
Типографика
Контрастная типографика. Без тонких шрифтов и начертаний близких по толщине и кеглю:
Неправильно
Правильно
Зонирование
Интерфейс плоский, без наслоений и объема.
Неправильно
Правильно
Тень у объекта может быть только, если это другой слой: модальное окно, сайдпейдж, тултип.
У тёмных элементов не может быть тени — она смотрится грязно.
Чтобы зонировать контент, используйте отступы, разделители, заливки или рамки.
Рамки и линии не толще 1 px. Если у элемента есть свой цвет — рамка не нужна.
Неправильно
Правильно
Скругления
Блоки в интерфейсе, контролы, или выделенные области, имеют скругление:
- Для инпутов — 2 px — это позволит отличить их от кнопок;
- Для маленьких блоков и контролов — 8 px — универсальное скругление для всех контролов;
- Для больших блоков и больших попапов — 16 px — для сохранения соотношения скругления и размера элементов.
Блоки не должны быть слишком узкими, например, блок со скруглениями 16 px не может быть высотой 32 px, только 48 px и больше.
Неправильно
Правильно
У блоков со скруглением 16 px нужно применять оптическое выравнивание, когда левая и правая границы выходят за линии выравнивания на 4 px.
