Оповещение — элемент интерфейса, предназначенный для передачи важного сообщения, которое требует внимания пользователя. Оповещения не должны быть навязчивыми и могут оставаться на экране, пока человек не совершит определенное действие, или информация не потеряет актуальность (например, потому что ее уже точно успели прочитать). Оповещения используются для таких сообщений, как успешные операции, предупреждения, ошибки и т. д.
Базовая анатомия
Основой оповещения является контейнер с чётко выраженными границами или фоном. Обычно внутренняя структура состоит из иконки, обозначающей тип сообщения, заголовка и текста сообщения. Цветное кодирование поможет пользователю быстро определить характер информации: успех, предупреждение, ошибку или информационное сообщение.
Анатомия с действиями
При необходимости оповещение может быть дополнено кнопками для выполнения действий или ссылками, ведущими к решению проблемы. Также можно добавить кнопку закрытия, таймер для автоматического скрытия или индикатор прогресса. Важно соблюдать иерархию информации: от главного сообщения к второстепенным действиям.
Оповещение должно очень активно взаимодействовать с пользователем, временно перетягивая на себе внимание, ведь оно содержит в себе важную информацию.
Default
Стандартное состояние оповещения делают заметным, но не слишком навязчивым. Цвет, иконку и текст логично проектируют, чтобы чётко передать суть сообщения и не запутать пользователя.
Hover
При наведении на интерактивные элементы внутри оповещения (кнопки, ссылки) происходит стандартная реакция, а сам контейнер может слегка поменять свой внешний вид, указывая на возможность взаимодействия.
Active
В процессе взаимодействия с кнопками или ссылками внутри оповещения должна быть обеспечена чёткая обратная связь. Кроме того, анимацию закрытия этого элемента стоит сделать плавной и ненавязчивой.
Disabled
Неактивное состояние оповещения встречается реже, но может быть полезным, когда оповещение нельзя закрыть до выполнения определённых условий.
