对话框和弹出窗口

对话框和浮出控件是一些需要用户通知、审批或其他信息的发生时出现的暂时性 UI 元素。

对话 框

对话框示例

对话框是提供上下文应用信息的模态用户界面覆盖层。 对话框会阻止与应用窗口的交互,直到手动关闭为止。 他们经常要求用户执行某种动作。

弹出控件

弹出面板的示例

浮出控件是一个轻型上下文弹出窗口,显示与用户正在执行的操作相关的用户界面。 它包括放置和大小调整逻辑,可用于显示辅助控件或显示有关项的更多详细信息。

与对话框不同,可以通过点击或单击浮出控件外部的某个位置、按 Escape 键或“后退”按钮、调整应用窗口的大小或更改设备的方向来快速消除浮出控件。

这是正确的控件吗?

对话和浮出控件可确保用户了解重要信息,但它们也会中断用户体验。 由于对话框是模态(阻塞)的,因此会中断用户,阻止其执行任何其他操作,直到与对话框交互为止。 浮出框提供较平滑的体验,但显示过多的浮出框可能会分散注意力。

确定要使用对话框或浮出控件后,需要选择要使用的对话框。

鉴于对话框会阻止交互,而浮出控件不会,因此对话框应保留用于需要用户放下一切专注于特定信息或回答某个问题的情况。 另一方面,当你想要引起人们对某些事物的注意时,可以使用浮出控件,但如果用户想要忽略它,就没问题了。

使用一个对话框来...

  • 表达用户必须阅读并确认的重要信息,才能继续。 示例包括:
    • 用户的安全可能受到威胁时
    • 当用户即将永久更改有价值的资产时
    • 当用户即将删除有价值的资产时
    • 确认应用内购买
  • 应用于整个应用上下文的错误消息,例如连接错误。
  • 问题,当应用需要向用户提出阻止问题时,例如当应用无法代表用户选择时。 无法忽略或推迟阻止问题,应为用户提供定义完善的选择。

使用浮出控件...

  • 在完成某项操作之前收集所需的其他信息。
  • 显示仅与某些时间相关的信息。 例如,在照片库应用中,当用户单击图像缩略图时,可以使用浮出控件显示图像的较大版本。
  • 显示详细信息,例如页面上项目的详细信息或更长的说明。

避免使用对话框和浮出控件的方法

考虑要共享的信息的重要性:是否足以中断用户? 另请考虑需要显示信息的频率;如果每隔几分钟显示一个对话框或通知,建议改为在主 UI 中分配此信息的空间。 例如,在聊天客户端中,与其每次好友登录时显示弹出窗口,你可能会显示目前在线的好友列表,并在好友登录时对他们进行突出显示。

在执行作之前,经常使用对话来确认作(例如删除文件)。 如果预期用户经常执行特定操作,请考虑为用户提供一种方法来撤消误操作,而非强制用户每次确认操作。

例子

如何创建对话框

请参阅 对话框文章

如何创建浮出控件

请参阅 浮出控件文章