Шапка

Шапка в Скетче на Google.Drive

Единая шапка помогает сделать сервисы Контура узнаваемыми. 
Она помогает пользователю быстро найти главные вещи — настройки, помощь, личный кабинет и организацию. Из шапки можно быстро перейти в любой сервис Контура.

Обязательные элементы — логотип сервиса, виджет для выбора сервиса и имя пользователя с кнопкой «Выход». Если имя пользователя мы не знаем, то вместо него пишем электронную почту.

Необязательные элементы — название организации, меню «Настройки и оплата» и «Помощь». Возможны небольшие изменения названий, главный критерий — узнаваемость для пользователя при переходе из сервиса в сервис.

Шапка — это единый блок на единой плашке с тенью.
 Если контент находится на плашке, то шапка отделяется от плашки с контентом отступом в 20 пикселей.

Если контент без плашки (например, монитор узкий и плашка не показывается для экономии места) — шапка остается выше контента (имеется ввиду Z-индекс), тень под шапкой сохраняется, отступа между шапкой и контентом нет.

У поисковых сервисов — Норматива и Фокуса — плашка без тени, сразу под ней цветная полоса с полем поиска.

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

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

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

Список сервисов можно настроить. Для этого нажмите ссылку «Все сервисы» и перетащите нужные сервисы на белую область.

Так выглядят выпадающие списки на примере Экстерна.
 Количество и названия пунктов у сервисов могут отличаться.

Меню «Пользователь» открывает выпадающий список с пунктами из личного кабинета.
 Ссылка для выхода всегда остается рядом с пользователем.

Меню «Настройки и оплата» открывает выпадающий список. 
У некоторых сервисов название отличается — у Экстерна, например, «Реквизиты и настройки»,
т.к. оплаты там нет.

Пункт «Помощь». Этого пункта у некоторых сервисов может не быть.

Уведомления появляются над шапкой и сдвигают страницу вниз. Высота полосы уведомления 40 пикселей.