Sidebar

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

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

Анатомия

1. Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.

2. Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи окна (такие как текст, таблица, поля ввода и прочие элементы).

3. Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.

4. Кнопка закрытия (Х). Закрывает модальное окно без сохранения введенной информации. В большинстве случаев опциональна.

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

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

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

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

Приложение на платформе

• Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений

• Выравнивание всплывающего окна - относительно окна приложения

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

• Лайтбокс перекрывает основной интерфейс

• Выравнивание всплывающего окна - относительно основого интерфейса

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

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

Приложение на платформе

• Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений

• Выравнивание всплывающего окна - относительно окна приложения

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

• Лайтбокс перекрывает основной интерфейс

• Выравнивание всплывающего окна - относительно основного интерфейса

Закрытие

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

• Кнопками действия

• Кликом за пределами окна*

• Кнопкой закрытия (Х)*

• Клавишей ESC*

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

Оформление

Кнопки

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

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

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

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

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

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

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

• предоставить пользователю четкие варианты.

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

1. Откажитесь от кнопки закрытия (Х)

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

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

Блок кнопок

В 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 - шапка и меню приложений не учитываются):

• Left. Слева

• Right. Справа

• Top. Сверху

• Bottom. Снизу

Расположение окна зависит от решаемой задачи.

Left Sidebar

Right Sidebar

Top Sidebar

Bottom Sidebar

Цвета

• Фон Overlay: #FFFFFF — G1

• Обводка: #D6DBE7 — G3

• Разделители: #D6DBE7 — G3

• Цвет текста: #50546B — G9

• Иконка: #777B92 — G7

• Заголовок: #20222B — G12

Встраеваемые компоненты, такие как кнопки, имеют свои стандартные цвета, которые можно посмотреть в их описаниях.