Dialog

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

Dialog - одностороннее уведомление пользователя о чем-либо с возможностью совершить управляющее действие, но при этом не имея возможности изменять контент.

Анатомия

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

2. Контентная область. Уведомляет пользователя о чем-либо.

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

4. Кнопка закрытия (Х). Закрывает модальное окно.

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

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

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

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

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

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

Закрытие

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

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

• клавишей ESC

Оформление

Кнопки

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

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

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

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

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

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

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

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

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

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

Если кнопка «Отменить» работает по принципу кнопки закрытия (Х), то закрывает окно без сохранения введенных данных.

Блок кнопок

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

Оверлей

Общее

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

На платформе

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

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

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

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

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

• #777B92

• Переменная цвета — G7/G7

• Opacity 50%

Размеры

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

Высота окна Dialog зависит от его контеного наполнения и не должна превышать 60% от высоты экрана. Ширина не дожна превышать 50% от ширины экрана.

Типографика

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Заголовок	Static_title/h4	Inter	14px	Semi Bold
Текст	Main/Body-text 14	Inter	14px	Regular

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

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

• Боковые паддинги - 16 рх

• Вертикальные паддинги для футера - 16 рх

• Расстояние между кнопками - 8 рх

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

Dialog может располагаться в 9 позициях относительно окна приложения:

• TopLeft, TopCenter, TopRight

• CenterLeft, CenterCenter, CenterRight

• BottomLeft, BottomCenter, BottomRight

Расположение окна зависит от решаемой задачи. Для стандартных ситуаций мы рекомендуем использовать выравнивание CenterCenter.

Всплывающие окна позиционируются относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются).

Отступы всплывающего окна от края окна приложения 16рх.

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

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

Цвета

• Фон Overlay: #FFFFFF — G1

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

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

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

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

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