Sidebar
Last updated
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Last updated
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 - шапка и меню приложений не учитываются):
Left. Слева
Right. Справа
Top. Сверху
Bottom. Снизу
Расположение окна зависит от решаемой задачи.
Фон Overlay: #FFFFFF — G1
Обводка: #D6DBE7 — G3
Разделители: #D6DBE7 — G3
Цвет текста: #50546B — G9
Иконка: #777B92 — G7
Заголовок: #20222B — G12
Встраеваемые компоненты, такие как кнопки, имеют свои стандартные цвета, которые можно посмотреть в их описаниях.
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основого интерфейса
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основного интерфейса
