Лейаут

У продуктов Контура может быть два лейаута: с боковым меню или с шапкой

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

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

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

Лейаут с шапкой подходит сервисам, в которых:

• 1. Мало навигации;
• 2. Навигации много, но большинство времени пользователи проводят внутри одного-двух разделов;
• 3. Поиск — основной сценарий.

Если есть другие разделы, используйте бургер-меню.

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

Смотрите гайд Шапка.

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

На белом фоне:

На серых подложках и белом фоне:

На белых подложках и сером фоне:

В шапке контент-зоны всегда есть заголовок.

Справа от заголовка могут располагаться основные действия для экрана. Главная кнопка выделяется акцентным цветом. Такая кнопка может быть только одна.

Слева от заголовка может появляться стрелка «Назад». При этом отступ от левой границы и со стрелкой и без нее всегда одинаковый, например 48 px. Это нужно, чтобы при переключении между экранами левая граница не скакала.

При наведении стрелка становится черной #222222.

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

Смотрите гайд Пустые состояния.

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

Смотрите гайд Подвал.