Sidebar

Last updated 11 months ago

Was this helpful?

Sidebar

Общая информация

SideBar (разновидность Dinamic Dialog) - двусторонний диалог с пользователем (окна включают формы, списки, ссылки и другие управляющие элементы, с которыми пользователь может взаимодействовать). Формат “выезжания” слева / справа / снизу / сверху позволяет пользователю оставаться в контексте основной страницы.

Анатомия

Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.
Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи окна (такие как текст, таблица, поля ввода и прочие элементы).
Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
Кнопка закрытия (Х). Закрывает модальное окно без сохранения введенной информации. В большинстве случаев опциональна.

Описание работы

SideBar может быть как модальным так и немодальным.

Модальные окна

Контент страницы недоступен, пока пользователь не совершил какое-либо действие со всплывающим окном. При появлении модального окна обязательно появление лайтбокса (затемнение основного контента страницы).

Немодальные окна

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

Закрытие

Закрытие SideBar может происходить:

Кнопками действия
Кликом за пределами окна*
Кнопкой закрытия (Х)*
Клавишей ESC*

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

Оформление

Кнопки

Максимальное количество кнопок в блоке - 4.

Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.

В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».

Отменить и закрыть (х)

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

Задача проектировщика:

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

Если разница между закрытием (Х) и Отменой все же есть, используйте следующие варианты (в зависимости от рещаемой задачи):

Откажитесь от кнопки закрытия (Х)
Используйте недвусмысленные текстовые метки (“Отменить расчет”, “Выйти без сохранения” и пр.)

Кнопка Отмены работает по принципу кнопки закрытия (Х) и закрывает окно без сохранения введенных данных.

Блок кнопок

В SideBar схема расположения кнопок горизонтальная.

В нашей дизайн-системе мы применяем единую схему горизонтального расположения кнопок, соответствующую Z-контенту.

Оверлей

Общее

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

На платформе

В этом случае не блокируется общефункциональная оболочка (ОФО). Центральный диалог выравнивается по оверлею.

Не на платформе

В этом случае блокируется овесь экран. Центральный диалог выравнивается по центру экрана.

Цвет и тематизация

В светлой и тёмной темах используется оверлей с одинаковыми параметрами. В светлой затемняет, в темной осветляет.

#777B92
Переменная цвета — G7/G7
Opacity 50%

Размеры

Внешние размеры

Высота и ширина окна SideBar зависит от его расположения.  

Если SideBar расположен слева или справа, то его высота соответствует высоте окна приложения, а ширина не дожна превышать 50% от ширины экрана.

Если SideBar расположен сверху или снизу, то его высота не должна превышать 60% от высоты экрана, а ширина сответствует ширине окна приложения.

Типографика

Элемент

Название стиля

Гарнитура

Кегль

Начертание

Заголовок

Static_title/h4

Inter

14px

Semi Bold

Текст

Main/Body-text 14

Inter

14px

Regular

Внутренние размеры

Контентный блок отделяется отступами в 32 рх
Боковые паддинги - 16 рх

Минимальное расстояние между блоками контента - 16 рх
Вертикальные паддинги для футера - 16 рх
Расстояние между кнопками - 8 рх

Расположение

SideBar может располагаться в 4 позициях относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются):