Confirm dialog
Общая информация
ConfirmDialog - модальное всплывающее окно, которое содержит дополнительную информацию и используется для проверки решения пользователя или для подтверждения выполнения действий через нажатие кнопки.
Анатомия
Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись. Допускается использовать без заголовка.
Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи модального окна.
Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
Описание работы
Позиционирование
ConfirmDialog позиционируется относительно окна приложения и блокирует содержимое приложения появлением лайтбокса (затемнением основного контента страницы), пока пользователь не совершит какое-либо действие.
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основного интерфейса
Также, относительно задачи, могут быть и другие паттерны использования
Хорошим тоном считается, если после подтверждения действия система дает пользователю обратную связь (message).
Оформление
Кнопки
Максимальное количество кнопок в блоке - 3. Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.
Важно в качестве текстовой метки использовать слова, описывающие действия. Например, «Добавить», «Удалить», «Сохранить» и так далее. Не допускайте расплывчатых формулировок, таких как «Готово» или «ОК».
Блок кнопок
В ConfirmDialog схема расположения кнопок вертикальная.
Так как в ConfirmDialog не применяется кнопка закрытия (Х), используйте кнопки действия для завершения процесса. При этом старайтесь избегать общих формулировок, текст кнопки должен максимально четко отражать последствия нажатия на нее.
Оверлей
Общее
Основной фон страницы перекрывается оверлеем, полупрозрачным фоном блокирующим взаимодействие с контентной частью. Бокировка контента на экране зависит от того приложение на платформе, либо нет.
На платформе
В этом случае не блокируется общефункциональная оболочка (ОФО). Центральный диалог выравнивается по оверлею.
Не на платформе
В этом случае блокируется овесь экран. Центральный диалог выравнивается по центру экрана.
Цвет и тематизация
В светлой и тёмной темах используется оверлей с одинаковыми параметрами. В светлой затемняет, в темной осветляет.
#777B92
Переменная цвета — G7/G7
Opacity 50%
Размеры
Внешние размеры
Высота ConfirmDialog зависит от его контеного наполнения и не должна превышать 60% от высоты экрана. Ширина не дожна превышать 50% от ширины экрана.
Типографика
| Элемент | Название стиля | Гарнитура | Кегль | Начертание |
|---|---|---|---|---|
Заголовок | Dynamic_title/h4 | Inter | 14px | Extra Bold |
Текст | Main/Body-text 14 | Inter | 14px | Regular |
Внутренние размеры
Боковые паддинги - 16 рх
Контентный блок отделяется отступами в 32 рх
Минимальное расстояние между блоками контента - 16 рх
Вертикальные паддинги для футера - 16 рх
Расстояние между первой и второй кнопками - 8 рх
Кнопка с контекстом “Отмена” отделяется от других кнопок расстоянием в 24 рх
Расположение
ConfirmDialog может располагаться в 9 позициях относительно окна приложения:
TopLeft, TopCenter, TopRight
CenterLeft, CenterCenter, CenterRight
BottomLeft, BottomCenter, BottomRight
Расположение окна зависит от решаемой задачи. Для стандартных ситуаций мы рекомендуем использовать выравнивание CenterCenter.
ConfirmDialog позиционируется относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются).
Отступы всплывающего окна от края окна приложения 16рх.
Приложение на платформе
Неплатформенное решение
Цвета
Фон Overlay: #FFFFFF — G1
Обводка: #D6DBE7 — G3
Разделители: #D6DBE7 — G3
Цвет текста: #777B92 — G7
Заголовок: #50546B — G9
Встраиваемые компоненты, такие как инпуты, чекбоксы и другие, имеют свои стандартные цвета, которые можно посмотреть в их описаниях.
Last updated
