✅Sidebar
Общая информация
SideBar (разновидность Dinamic Dialog) - двусторонний диалог с пользователем (окна включают формы, списки, ссылки и другие управляющие элементы, с которыми пользователь может взаимодействовать). Формат “выезжания” слева / справа / снизу / сверху позволяет пользователю оставаться в контексте основной страницы.
Анатомия
Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.
Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи окна (такие как текст, таблица, поля ввода и прочие элементы).
Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
Кнопка закрытия (Х). Закрывает модальное окно без сохранения введенной информации. В большинстве случаев опциональна.
Описание работы
SideBar может быть как модальным так и немодальным.
Модальные окна
Контент страницы недоступен, пока пользователь не совершил какое-либо действие со всплывающим окном. При появлении модального окна обязательно появление лайтбокса (затемнение основного контента страницы).
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основого интерфейса
Немодальные окна
Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам) при открытом всплывающем окне. При появлении немодального окна лайтбокс не появляется.
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основного интерфейса
Закрытие
Закрытие SideBar может происходить:
Кнопками действия
Кнопкой закрытия (Х)*
Клавишей ESC*
могут быть отключены в случаях, когда без решения пользователя невозможно продолжить сценарий, в других ситуациях отключать способы отклонения модального окна не рекомендуется.
Оформление
Кнопки
Максимальное количество кнопок в блоке - 4.
Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.
В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».
Отменить и закрыть (х)
В некоторых случаях различие между отменой и закрытием не имеет значения - нажатие кнопки X позволяет одновременно закрыть это модальное окно и, возможно, отменить любой процесс, который оно могло запустить.
Задача проектировщика:
определить, есть ли разница между отменой и закрытием
предоставить пользователю четкие варианты.
Если разница между закрытием (Х) и Отменой все же есть, используйте следующие варианты (в зависимости от рещаемой задачи):
Откажитесь от кнопки закрытия (Х)
Используйте недвусмысленные текстовые метки (“Отменить расчет”, “Выйти без сохранения” и пр.)
Кнопка Отмены работает по принципу кнопки закрытия (Х) и закрывает окно без сохранения введенных данных.
Блок кнопок
В SideBar схема расположения кнопок горизонтальная.
В нашей дизайн-системе мы применяем единую схему горизонтального расположения кнопок, соответствующую Z-контенту.
Размеры
Внешние размеры
Высота и ширина окна SideBar зависит от его расположения.
Если SideBar расположен слева или справа, то его высота соответствует высоте окна приложения, а ширина не дожна превышать 50% от ширины экрана.
Если SideBar расположен сверху или снизу, то его высота не должна превышать 60% от высоты экрана, а ширина соответствует ширине окна приложения.
Типографика
Заголовок
Static_title/h4
Inter
14px
Semi Bold
Текст
Main/Body-text 14
Inter
14px
Regular
Внутренние размеры
Боковые паддинги во всех блоках - 16 рх
В блоке с контентом горизонтальные отступы - 16 рх
Горизонтальные внешние паддинги в блоке с кнопками - 6 рх. Расстояние между кнопками - 8 рх
Расположение
SideBar может располагаться в 4 позициях относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются):
Left. Слева
Right. Справа
Top. Сверху
Bottom. Снизу
Расположение окна зависит от решаемой задачи.
Last updated