Модальное окно
Модальное окно - это часть пользовательского пути. При поднятии окна внимание пользователя фокусируется на контенте внутри, а контент за окном блокируется.
Важно. При поднятии модального окна остается возможность переключаться между вкладками. Таким образом, мы не лишаем пользователя возможности при заполнении формы, например, копировать данные из другого окна.
Преимущества
У модальных окон есть существенные преимущества перед открытием контента в новой вкладке:
-
Фокусировка внимания. Модальные окна заставляют пользователя сосредоточиться на важной информации или задаче, так как они блокируют доступ к остальной части интерфейса до тех пор, пока окно не будет закрыто или завершена задача.
-
Улучшение пользовательского опыта. Правильное использование модальных окон улучшает пользовательский опыт, предоставляя информацию и возможности совершить действие в контексте текущего действия пользователя.
Критерии использования
Прежде, чем использовать компонент модальное окно, убедитесь, что ваш кейс соответствует следующим критериям.
Модальное окно можно использовать, если:
Вам нужно выводить дополнительную информацию к записи, а она не убирается в грид. Реальный кейс
Рассмотрим стандартный грид с записями.
Для записи через контекстное меню необходимо проверить полноту проектирования. Данная проверка представляет собой грид, в котором мы должны увидеть статус "Пройдена". Статус, в свою очередь складывается из статусов нескольких записей. Ниже приведен макет этого грида.
- Грид не функциональный, а информационный. Мы ничего не можем в нем делать, он нужен, чтобы проинформировать о статусе.
- С большой вероятностью возникнет ситуация, когда нужно будет проверить полноту проектирования сразу по нескольким записям.
- У каждой записи не много атрибутов.
Из этих пунктов следует, что в данном случае можно поднять информационный грид в модальном окне. Так как будет удобно в контексте одной таблицы (Packaged Business Capabilities) проверять полноту проверки поочередно для каждой записи. К тому же, так мы уйдем от большого количества вкладок, так как будем работать внутри одной.
Вам нужно сохранить контекст. Реальный кейс
При создании новой записи в проекте Дизайнер пользовательского интерфейса поднимается нестандартная большая форма. Поднимая ее в модальном окне, мы избегаем создания лишней вкладки и работаем в контексте всех записей текущего проекта.
Вам нужно создать окно удаления или подтверждения
Больше информации об этих диалоговых окнах вы можете прочитать в статье Стандарты применения цвета в компонентах.
Структура модального окна
Модальное окно состоит из шапки, контентой части и футера.
Шапка модального окна
Шапка содержит заголовок и иконку закрытия pi-times.
Заголовок нужно писать кратко в формате "Добавление..." / "Выбор...", а не "Добавить..." и тому подобное.
Футер модального окна
Футер содержит кнопки. Всегда должна быть кнопка "Закрыть" типа Secondary. Если есть какие-либо еще кнопки, то кнопка "Закрыть" должна быть крайней левой.
🔴 Плохо
🟢 Хорошо
