Поделиться через

Диалоговые окна и всплывающие элементы

  • Статья

Диалоговые окна и всплывающие элементы — это временные элементы пользовательского интерфейса, которые отображаются, когда что-то происходит, для чего требуется уведомление, утверждение или дополнительная информация от пользователя.

Диалоги

Пример диалогового окна

Диалоговые окна — это модальные наложения пользовательского интерфейса, предоставляющие контекстные сведения о приложении. Диалоговые окна блокируют взаимодействие с окном приложения, пока не будут явно отклонены. Они часто запрашивают от пользователя какое-то действие.

Всплывающие элементы

Пример всплывающего элемента

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

В отличие от диалогового окна, всплывающий элемент можно быстро закрыть, нажав или щелкнув где-то за пределами всплывающего окна, нажав клавишу ESCAPE или кнопку "Назад", изменить размер окна приложения или изменить ориентацию устройства.

Выбор правильного элемента управления

Диалоговые окна и всплывающие элементы убедитесь, что пользователи знают о важных сведениях, но также нарушают взаимодействие с пользователем. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном. Всплывающие элементы обеспечивают менее широкий интерфейс, но отображение слишком большого количества всплывающих элементов может отвлекать.

После определения того, что вы хотите использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из них.

Учитывая, что диалоговые окна блокируют взаимодействие и всплывающие элементы, диалоги должны быть зарезервированы для ситуаций, когда пользователь должен удалить все, чтобы сосредоточиться на определенном бите информации или ответить на вопрос. Всплывающие элементы, с другой стороны, можно использовать, когда вы хотите привлечь внимание к чему-то, но это нормально, если пользователь хочет игнорировать его.

Используйте диалоговое окно в следующих целях.

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

Используйте всплывающий элемент в следующих целях.

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

Как избавиться от ненужных диалоговых окон и всплывающих элементов

Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя? Кроме того, учитывайте частоту отображения информации; Если вы отображаете диалоговое окно или уведомление каждые несколько минут, вместо этого может потребоваться выделить пространство для этих сведений в основном пользовательском интерфейсе. Например, в клиенте чата вместо всплывающих элементов при каждом входе в систему вы можете отобразить список друзей, которые находятся в сети в данный момент, и выделить друзей по мере входа.

Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением. Если вы ожидаете, что пользователь часто выполняет определенное действие, рассмотрите возможность отмены действия, если это была ошибка, а не заставляйте пользователей подтвердить действие каждый раз.

Примеры

  • Если у вас установлено приложение из коллекции WinUI 3, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Как создать диалоговое окно

См. статью Диалоговые окна.

Как создать всплывающий элемент

См. статью Всплывающий элемент.