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

Описание Вариаций

Вариация	Описание
Диалоговое окно	Название говорит само за себя и подразумевает диалог с пользователем. Используется для проверки решения пользователя или для получения дополнительного подтверждения выполнения действий через нажатие кнопки, где подтверждение действия происходит по нажатию на кнопку primary, а отмена — secondary. Как правило диалоговое окно закрывается только по нажатию на кнопку действия, но опционально может содержать и кнопку закрытия. В таком случае закрытие окна возможно любым способом.
Пассивное окно	Пассивное модальное окно это способ одностороннего уведомления без возможности диалога с пользователем. Такие окна нежелательны и должны использоваться только в случае, если пользователю необходимо предоставить дополнительную информацию без потери контекста основной страницы. Пассивные окна являются постоянными на экране и скрываются только либо по совершению действия с уведомлением, либо при их закрытии пользователем.
Окно с формой	Эти окна включают элементы форм, с которыми пользователь может взаимодействовать. Они могут содержать, но не ограничиваться компонентами формы, раскрывающимися списками и ссылками. При использовании форм всегда используется Submit кнопка. Форма в модальном окне должна быть максимально короткой!

Модальные окна прерывают рабочий процесс пользователя и являются одним из наиболее раздражительных компонентов интерфейса. Они наиболее эффективны, когда задача должна быть завершена, прежде чем пользователь сможет продолжить выполнение сценария. Модальные окна эффективны при правильном использовании, но должны использоваться разумно, в ситуациях когда нужно прервать сценарий пользователя. Не пытайтесь заменить переход на отдельную страницу модальным окном без необходимости.

Используется

• Когда вам нужно прервать действие пользователя для получения подтверждения выполнения действия или сценария.
• Для получения дополнительного подтверждения выполнения значимых действий и снижения риска случайной ошибки.
• Для отображения дополнительного контента без прерывания сценария или перехода на другую страницу
• Для получения небольшого объема данных от пользователя без потери контекста основной страницы

Не используется

• В качестве нотификации, для этого используйте компонент Notification
• Для получения большого объема данных от пользователя. Используйте для этого отдельную страницу.

Модификаторы

Размер Small

Используйте для вывода короткого сообщения или простых форм, например для ввода логина и пароля

Размер Large

Используется для вывода большого контента, например табличных данных.

Правильно и неправильно

Строение компонента

0. Заголовок
1. Кнопка закрытия
2. Контентная область
3. Основная кнопка
4. Дополнительная кнопка
5. Оверлей

Заголовок

Заголовок является обязательным элементом и используется как краткое описание контента или отражает суть действия, которое его запустило

Кнопка закрытия

Закрывает модальное окно с потерей всей введенной информации. Для пассивного модального окна эта кнопка является обязательным элементом. Не рекомендуется использовать в диалоговом модальном окне.

Контентная область

Может содержать любой контент, такой как таблицы, видео контент и формы, которые должны занимать всю ширину модального окна.

Основная кнопка

Является обязательным элементом для диалогового окна и окна с формой, для подтверждения выполняемого действия или сохранение введеных в форму данных и дальнейшей его обработки

Дополнительная кнопка

Дополнительные возможные действия пользователя. Модальное окно может иметь максимум три кнопки.

Оверлей

Частично-прозрачный фон для блокировки основного интерфейса

Встроенные компоненты

• Button

Цвета

Размеры

Мобильная версия

Типографика

Поведение

• При появлении окна обязательно появление оверлея
• Если контент не вмещается в высоту 80% от экрана, то появляется скролл
• В зависимости от содержащихся элементов управления, модальное окно закрывается по нажатию на кнопки действия, кнопку закрытия, клавишу ESC или кликом на пределами окна. Последние три способа могут быть отключены в случаях, когда без решения пользователя невозможно продолжить сценарий, в других ситуациях отключать способы отклонения модального окна не рекомендуется.

Адаптивность

Размер Small

Breakpoint	Значение	Размер	Колонки
xs	320	100%	4 из 4
sm	448	67%	6 из 8
md	352	33%	6 из 16
lg	448	34%	6 из 16
xl	552	35%	6 из 16

Размер Medium

Breakpoint	Значение	Размер	Колонки
xs	320	100%	4 из 4
sm	448	67%	6 из 8
md	352	45%	6 из 16
lg	448	46%	6 из 16
xl	552	49%	6 из 16

Размер Large

Breakpoint	Значение	Размер	Колонки
xs	320	100%	4 из 4
sm	612	91%	8 из 8
md	734	70%	12 из 16
lg	928	71%	12 из 16
xl	1132	71%	12 из 16

Состояния

Ссылки на сторонние полезные материалы про UX

• Modal vs Page: A Decision Making Framework