Лейаут

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

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

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

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

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

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

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

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

Подробнее — в гайде «Шапка».

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

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

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

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

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

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

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

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

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

Подробнее — в гайде «Пустые состояния».

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

Подробнее — в гайде «Подвал».