Navigation menu
Общая информация
Навигационное меню приложения представляет собой структурированный список ссылок на доступные пользователю элементы данных и функциональные возможности. Содержимое навигационного меню состоит из упорядоченной структуры элементов отображения данных (папок, документов, внешних, внутренних ссылок, мнемосхем, отчётов и так далее, в зависимости от контекста использования). Содержимое навигационного меню приложения формируется в зависимости от прав пользователя. Пункты меню, доступ к которым запрещён, могут быть скрыты или заблокированы для выбора пользователем, если в навигационном меню нет доступных для отображения данных, то в области отображения должна быть надпись: «<Нет данных для отображения>».
Кнопка возврата на предыдущую страницу (опционально)
Заголовочный блок
Инструменты и элементы управления
Описание работы
Режим по умолчанию - режим отображения "Иерархия". Режим отображения "Папки" включается нажатием на кнопку
Возможности навигационного меню портала
может быть как одноуровневым, так и многоуровневым;
может содержать групповые панели (каждая из которых может содержать независимую иерархическую структуру и свою панель инструментов);
может содержать корневые/группирующие элементы. К папке может быть привязан контекст, например, мнемосхема;
может иметь панель инструментов для изменения представления элементов меню и работы со структурой меню (каждая групповая панель может иметь свою панель инструментов);
может иметь поиск и фильтры для быстрого ориентирования в больших деревьях структуры;
может иметь настройки, общие для всех групповых панелей, например: переключение режимов множественного/одиночного выбора.
Структура контента навигационного меню
Навигационное меню состоит из элементов (ячеек), которые собраны в определенную иерархию в зависимости от конфигурации. Чаще всего навигационное меню конфигурируется в виде модели производства или структуры бизнес-процессов. Степень детализации содержимого меню определяется выбранной конфгурацией. Иерархия может иметь неограниченное количество уровней вложенности. Не рекомендуется использовать уровень вложенности более 5 ступеней.
Содержимое ячейки
Каждый элемент (ячейка) навигационного меню может иметь несколько функциональных или информационных пиктограмм (счетчики, тревоги и прочие функции), которые будут описываться непосредственно в каждом приложении. При использовании в приложениях дополнительных пиктограмм и кнопок следует учитывать, чтобы области клика и перехода на пиктограммах-кнопках не пересекались, а каждая отвечала строго за свой функциональный сегмент.
Исключением (при необходимости) могут быть кнопки, содержащие дополнительные стрелки, поля ввода, чек-боксы, радио или кнопки.
Основные области клика
Область клика по наименованию элемента (включает в себя иконку, относящуюся к наименованию - папка, файл и т.п.) работает следующим образом - она открывает соответствующее содержимое в области контента.
Если контент содержит дополнительные иконки, требующие клика, у каждой из этих иконок область клика одинакова по высоте с ячейкой.
Область клика справа и слева от области наименования рекомендуется делать до края панели, высотой равной высоте ячейки. Чтобы ячейка не имела мест без области клика.
Разделитель (сплиттер)
Правый край навигационного меню работает как сплиттер (разделитель областей навигационного меню и контентной области) даёт возможность "нагорячую" задать ширину навигационного меню, необходимую пользователю (минимальный размер навигационного меню составляет 360 пикселей).
При работе на сенсорных устройствах можно изменять размер панели перетягивая ее правую границу в соответствующем направлении.
Ниже приведены эскизы (предупреждение) поведения панели:
Представления навигационного меню
Навигационное меню может иметь два основных представления (при функциональной необходимости может быть третье представление - рубрикатор) – в виде иерархии производственной модели и в виде списка.
Режим отображения "Иерархия"
Если кнопка "Иерархия элементов" активна, отображается вся доступная пользователю иерархия модели производства. Должна быть предусмотрена загрузка всей иерархии с последующим кэшированием. Если кнопка неактивна, то при просмотре отображаются только элементы одного узла иерархии в виде плоского списка. При переключении отображения положение выбранного элемента должно сохраняться. После установки курсора на пункт меню в области просмотра должна отображаться контекстная информация по данному пункту или открываться назначенная ссылка. После выбора новый активный пункт меню должен быть виден сразу без лишних вертикальных прокруток, т.е. курсор должен оставаться на месте, а выбранный пункт должен быть виден в навигационном меню после открытия информации по нему, без пролистывания - позиционирование сохраняется. По умолчанию (если явно не указано другого поведения), при начальном просмотре: нет выбранного элемента, и модель производства отображается в виде линейного списка.
Режим отображения "Папка"
При переходе в режим отображения "Папка" отображается содержимое только текущей папки.
Работа в режиме папки:
можно осуществлять работу в рамках одного выбранного узла
если требуется выбрать другой узел, не выходя из режима папки, то кнопками можно переместиться на один уровень вверх и на самый верх дерева
Режим отображения "Рубрикатор"
Если приложение содержит множество элементов, которые удобно искать по алфавиту (например статьи, перечень документов и т.п.), панель инструментов опционально может содержать кнопку
Данная возможность является альтернативным режимом представления для режима дерева или линейного списка. В этом режиме осуществляется группировка и сортировка конечных элементов не по иерархии, а по первым буквам их названия в порядке возрастания по алфавиту. При этом в рубриках доступен режим свернуть/развернуть рубрику.
Групповые панели
В случае функциональной необходимости навигационное меню может содержать групповые панели.
Например, если в приложении необходимо вывести различные модели или производства с разными функциональными возможностями или ограничениями безопасности. Примером такого разделения может служить вывод каждого структурного подразделения компании в своей групповой панели.
В данном случае можно осуществлять настройки безопасности для каждой групповой панели. Помимо этого каждая групповая панель может содержать свой набор функциональных возможностей, соответственно - свою панель инструментов, свои фильтры и категории для группировок.
Групповые панели могут иметь общую настройку, выводимую в шапке навигационного меню, например, включение или выключение множественного выбора, одиночное отображение групповых панелей, степень компактности элементов списка и другие настройки по необходимости (в зависимости от приложения).
Одиночный режим групповых панелей
Одиночный режим групповых панелей включен
При открытии одной панели остальные автоматически закрываются и перемещаются в самый верх или в самый низ навигационного меню, в один момент времени пользователь работает только с одной групповой панелью:
Одиночный режим с возможностью множественного выбора
Одиночный режим групповых панелей, режим отображения "Рубрикатор"
Одиночный режим групповых панелей выключен
Может быть одновременно открыто несколько групповых панелей, пользователь может одновременно работать с несколькими панелями, может вручную сложить некоторые из них и работать только с необходимыми.
При этом каждая панель может быть отображена в своем представлении: дерево, папка, рубрикатор.
Настройка множественного выбора распространяется на все панели
Содержимое панели инструментов навигационного меню
"Иерархия"
Доступно в режиме множественного выбора и при любой настройке групповых панелей. Для каждой групповой панели можно включить свое отображение структуры
"Рубрикатор"
Если навигационное меню содержит множество элементов, которые удобно искать по алфавиту, например, статьи, перечень документов и т.п., панель инструментов опционально может содержать кнопку "Включить рубрикатор". Данный функционал является альтернативным режимом представления для режима дерева или папки. В данном режиме осуществляется группировка и сортировка конечных элементов не по иерархии, а по первым буквам их наименования в порядке возрастания по алфавиту. При этом в рубриках доступен режим свернуть/развернуть рубрику.
Доступно в режиме множественного выбора и в любом представлении групповых панелей
Чтобы отключить режим рубрикатора необходимо включить другое представление - дерева или папки, или просто отключить режим рубрикатора. в этом случае (при отключении кнопки рубрикатора) структура элементов выводится в представлении дерева (по умолчанию).
Группировка
В зависимости от функциональных требований панель инструментов может содержать кнопку группировки. Группировка может осуществляться по определенным признакам. При включении группировки отключаются режим дерева/папки, режим рубрикатора. Для отключения группировки необходимо выключить кнопку группировки. По умолчанию модель отобразится в режиме дерева.
Также для отключения режима группировки можно переключится на другой режим отображения - дерево, рубрикатор. Может работать совместно со множественным выбором и любым представлением групповых панелей.
Поиск, в зависимости от требований, может быть индивидуальным для каждой групповой панели
Общие условия поиска
Поиск доступен по любому символу, должна быть возможность гибко задавать строку (например, искать по части имени «» - любое количество любых символов, «?» – один символ), после ввода первого символа и/или нажатия клавиши *Enter на клавиатуре результаты поиска выводятся в виде списка, отсортированного в соответствии с иерархией, с указанием пути к найденному элементу.
Пока не заданы поисковые слова, либо нет совпадений с поисковым запросом в поисковой выдаче выдается системное сообщение "По заданным условиям поиска соответствий нет"
Работа с поисковой выдачей\
При перемещении курсора по поисковой выдаче в области контента отображается содержимое выделенного объекта. При этом поисковая выдача остается выведенной до очистки поля от текущего поискового запроса.
Если в поисковой выдаче выбран группирующий элемент - папка, то возможны 2 сценария (зависит от требований в конкретной реализации):
При щелчке по области вывода контента (при его наличии) выводится соответствующий контент в области просмотра.
При щелчке по папке в области просмотра выводится список дочерних элементов данной папки, например, в виде таблицы с расширенными свойствами элемента.
Представление поисковой выдачи
Поисковая выдача выводится в том режиме/представлении, которое включено пользователем в данный момент.
Область применения поискового запроса
Поиск в большинстве случаев осуществляется только по текущей групповой панели.
Стоит учитывать вариант (для будущей разработки), что в зависимости от контекста и требований реализации поиск может быть единым для всех групповых панелей, при этом применение фильтров может быть как единым, так и индивидуальным для каждой панели.
Совместная работа поиска с фильтром
Поиск должен работать совместно с фильтром. Фильтрация помогает уточнить условия поиска, убирает из поисковой выдачи лишние запросы, не отвечающие активным фильтрам.
Автодополнение
Должен быть реализован поиск - автодополнение (autocomplete). При наборе символов существующий список элементов сразу "нагорячую" отфильтровывается в соответствии с набранными символами.
Автодополнение может вернуть очень много результатов. Следует ограничить объём поиска принудительно с индикацией превышения границы (пример: выводим 10 строк, сигнализируем что это результат с использованием ограничения. Пользователю должно быть понятно, что требуется более точное описание маски поиска для уменьшения количества совпадений). Если выводится более оговоренного количества строк, то внизу навигационного меню должна быть кнопка «показать ещё».
Автоподстановка
При частом использовании поиска по модели в приложении может быть реализована автоподстановка из последних пользовательских поисковых запросов. При наборе первых символов отображаются последние пользовательские поисковые запросы, порядок вывода которых обусловлен или их популярностью у пользователя, или временным фактором. Пользователь может выбрать уточненный полный запрос из предложенных в выпадающем списке. После выбора запрос подставляется в поле поиска и отображается поисковая выдача в соответствии с выбранным запросом.
Фильтр
Условиями фильтрации могут быть различные свойства элементов дерева - категории, классы, разделы, разряды, дата или диапазон дат создания, дата изменения, автор, другие признаки.
Оформление
При разработке навигационного меню приложения следует учитывать необходимость наследования им динамической палитры цветов выбранной цветовой схемы.
Ниже наброски возможных решений, они приведены в качестве примера и на них не нужно ориентироваться как на конечный вариант.
Размеры
Внешние размеры
Обратите внимание на минимальные размеры (размеры указаны для размера окна с минимально поддерживаемой шириной - 1280 px)
Ширина навигационного меню по умолчанию (стандартная) - 380 пикселей. Минимальная ширина навигационного меню приложения - 360 пикселей. Таким образом можно посчитать размеры областей при минимальном поддерживаемом размере окна.
Минимальная рекомендуемая ширина навигационного меню приложения - 360 пикселей
Возможно уменьшение ширины НМ в угоду удобства пользователя. В этом случае оно уменьшается с шагом кратным 40 пкс: 320, 280, 240 и тд
Область отображения панелей, например, уведомлений имеет фиксированную ширину - 400 пикселей
Панель приложений имеет компактный вид и фиксированную ширину - 48 пикселей
Таким образом, когда открыто навигационное меню и панель уведомлений, минимальная ширина области просмотра приложений - 472 пикселей (1280-48-400-360)
Если навигационное меню скрыто (панель уведомлений открыта), то минимальная область просмотра - 832 пикселя (1280-48-400)
Если навигационное меню и панель уведомлений скрыты, то минимальная область просмотра - 1232 пикселя (1280-48)
Если экран устройства менее 1280 пикселей по ширине или размер окна браузера изменен, то для корректного отображения должна использоваться прокрутка браузера.
Если размеры окна меньше 1280 - навигационное меню сначала сжимается до минимальной ширины 360 пикселей (для настольного представления), а затем появляется горизонтальная прокрутка (скроллинг) на полную ширину окна
Область клика пиктограмм имеет одинаковые стороны по ширине и высоте и равна высоте ячейки меню, в данном примере - 32 пикселя, для панелей - 48 пикселей. Следует обратить внимание, что высота панелей (заголовок приложения, шапка групповой панели, панели инструментов групповых панелей) равна 48 пикселей, она не изменяется и не зависит от настройки компактности меню.
Область клика пиктограмм по ширине - 32рх, высоте - 40рх. Следует обратить внимание, что высота панелей (заголовок приложения, шапка групповой панели, панели инструментов групповых панелей) и ячеек всегда равна 40 пикселей, она не изменяется и не зависит от настройки компактности меню.
Внутренние размеры
Вложенный контент должен быть выровнен по левому краю по отношению к контенту родительского элемента. Элементы одного уровня должны иметь одинаковый отступ.
Шаг отступа слева в 32 пикселя также соблюдается, если включено представление со множественным выбором.
Шаг отступа слева в 24 пикселя также соблюдается, если включено представление со множественным выбором.
Отступы справа, иконки раскрытия папок (узлов), и самые крайние справа иконки групповых панелей, верхней панели приложения выравниваются таким образом, чтобы центр всех иконок отступал от правого края панели на 24 пикселя (с выравниванием по центру).
Остальные вспомогательные иконки, счетчики (если их наличие требуется, навигационное меню должно поддерживать возможность их вывода) выводятся внутри контейнера с текстовым контентом и выравниваются по правому краю контейнера, текст выравнивается по левому краю контейнера (при описании отступов воспользовались рекомендациями инженера-разработчика Д. Соколова). Контент не должен заходить за границу области клика иконок справа. Все символы, которые не уместились справа не выводятся, они автоматически заменяются на многоточие.
При необходимости, например, если важные символы наименования находятся в конце, обрезка символов может осуществляться не справа, а в середине контентной строки или в ее начале. Следует учитывать, что такая возможность будет реализована не стандартными средствами браузера, что может влиять на производительность при загрузке/обновлении большой модели.\
Если наименование элемента не умещается в зону видимости, при наведении курсора на соответствующую ячейку должна появляться всплывающая подсказка, содержащая полное наименование элемента.
В зависимости от текущей настройки навигационное меню может отображаться в трех представлениях, различных по степени вертикальной компактности.
Режимом по умолчанию является стандартный вид с высотой элемента 32 пикселя (на текущий момент это единственный реализованный вид, остальные размеры описаны для перспективы развития).
Если навигационное меню используется для отображения возможностей приложения и не выполняет отображения сложной структуры, то предпочтительнее использовать высоту элемента 44 пикселя.
Если рабочая производственная модель невелика, или у пользователя имеется устройство с большим разрешением монитора, можно использовать увеличенный вид.
Last updated
