Confirm dialog
Last updated
Was this helpful?
Last updated
Was this helpful?
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
Встраиваемые компоненты, такие как инпуты, чекбоксы и другие, имеют свои стандартные цвета, которые можно посмотреть в их описаниях.
