✅Dialog
Общая информация
Dialog - двусторонний диалог с пользователем (окна могут включать формы, списки, ссылки и другие управляющие элементы, с которыми пользователь может взаимодействовать).
Обязательно наличие primary button в контексте “Применить”.
Анатомия
Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.
Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи модального окна.
Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
Кнопка закрытия (Х). Закрывает модальное окно без сохранения введенной информации. В большинстве случаев опциональна.
Описание работы
Dialog может быть как модальным так и немодальным.
Модальные окна
Контент страницы недоступен, пока пользователь не совершил какое-либо действие со всплывающим окном. При появлении модального окна обязательно появление лайтбокса (затемнение основного контента страницы).
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основого интерфейса
Немодальные окна
Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам) при открытом всплывающем окне. При появлении немодального окна лайтбокс не появляется.
Приложение на платформе
Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений
Выравнивание всплывающего окна - относительно окна приложения
Неплатформенное решение
Лайтбокс перекрывает основной интерфейс
Выравнивание всплывающего окна - относительно основого интерфейса
Закрытие
Закрытие Dialog может происходить:
кнопками действия
кнопкой закрытия (Х)
клавишей ESC
Оформление
Кнопки
Максимальное количество кнопок в блоке - 4. Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.
В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».
Отменить и закрыть (х)
В некоторых случаях различие между отменой и закрытием не имеет значения - нажатие кнопки X позволяет одновременно закрыть это модальное окно и, возможно, отменить любой процесс, который оно могло запустить. В этом случае использйте текстовую кнопку
Задача проектировщика:
определить, есть ли разница между отменой и закрытием
предоставить пользователю четкие варианты.
Если разница между закрытием (Х) и Отменой все же есть, используйте следующие варианты (в зависимости от решаемой задачи):
Откажитесь от кнопки-иконки закрытия (Х)
Используйте недвусмысленные текстовые метки (“Отменить расчет”, “Выйти без сохранения” и пр.)
Если кнопка «Отменить» работает по принципу кнопки закрытия (Х), то закрывает окно без сохранения введенных данных.
Блок кнопок
В окне Dialog схема расположения кнопок горизонтальная. В нашей дизайн-системе мы применяем единую схему горизонтального расположения кнопок, соответствующую Z-контенту.
Размеры
Внешние размеры
Высота окна Dialog зависит от его контеного наполнения и не должна превышать 60% от высоты экрана. Ширина не дожна превышать 50% от ширины экрана.
Типографика
Заголовок
Static_title/h4
Inter
14px
Semi Bold
Текст
Main/Body-text 14
Inter
14px
Regular
Внутренние размеры
Боковые паддинги во всех блоках - 16 рх
В блоке с контентом горизонтальные отступы - 16 рх
Горизонтальные внешние паддинги в блоке с кнопками - 6 рх. Расстояние между кнопками - 8 рх
Расположение
Dialog может располагаться в 9 позициях относительно окна приложения:
TopLeft, TopCenter, TopRight
CenterLeft, CenterCenter, CenterRight
BottomLeft, BottomCenter, BottomRight
Расположение окна зависит от решаемой задачи. Для стандартных ситуаций мы рекомендуем использовать выравнивание CenterCenter.
Всплывающие окна позиционируются относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются).
Отступы всплывающего окна от края окна приложения 16рх.
Приложение на платформе
Неплатформенное решение
Last updated