Header

Обзор

Header (шапка) занимает всю ширину окна приложения и находится в самой верхней его части. Наполнение Header может меняться в зависимости от сложности навигационной структуры, нахождения системы на платформе, необходимости в модулях и контроллах. Однако вариативность наполнения шапки должна подчиняться ее логической структуре.

Анатомия

Header состоит из:

Logo + Navigation menu. Обязательная часть, содержит блок с логотипом системы и кнопку, вызывающую Navigation menu (опционально).
Page name / Navigation. Обязательная часть, название страницы или простая навигация.
Global system filters. Фильтры или конролы, глобальные в рамках системы (применяются ко всей системе, не только к текущей странице).
System modules. Системные модули.
Platform modules*. Модули уровня платформы.
Platform menu*. Меню приложений платформы.

в случае платформенного решения

Logo + Navigation menu

Блок с логотипом системы может являться:

Ссылкой на главную страницу. В случае, когда навигация приложения представлена только при помощи шапки.

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

Система-одностраничник:

Навигация без разделов (табы):

Навигационная структура через хлебные крошки:

Навигация с разделами (1 уровень)

Такой паттерн рекомендуется использовать для малого количества разделов (2-4). Так как пользователю придется “проходить” по каждому разделу в поисках нужной страницы.

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

Выбор раздела:

Дополнительно

Простая навигация может быть реализована в сочетании с панелью:

Навигация состоит из Header и Navigation menu

Для более сложных вариантов навигации стоит использовать сочетание Header + Navigation menu.

В таком случае в блоке с логотипом появляется иконка Navigation menu.
За ней следует название выбранной страницы или простая внутренняя навигация страницы

Global system filters

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

Не используйте системные фильтры, если они не применимы ко всем разделам / страницам системы - используйте в таком случае фильтры для страниц (например, в панели под шапкой):

System modules / Platform modules

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

Модули могут быть как системные, так и платформенные.

В Header модули представлены в виде кнопок-иконок, которые могут содержать счетчики событий.

Нажатие на кнопку модуля вызывает появление окна модуля или Overlay-menu. Например:

Примеры модулей:

Пользовательские настройки
Уведомления о событиях и работе системы
Уведомления о качестве предоставляемых данных
Техподдержка
Отображение даты и времени (дополнительно для приложений, которые используются в полноэкранном режиме) и др.