5分钟交互设计指南系列：对话框

框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图，一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

模态 (modality) 会阻止用户完成当前视图上的任务，使用户专注于模态视图 (modal views) 里的新任务；只有当模态视图被终止后，用户才能继续完成之前的任务。

在下面的例子中，提示框阻止用户继续查看地图，使用户专注于提示；只有当用户轻点 OK 后，用户才能继续查看地图。提示框是 iOS 中常见的模态视图之一。

对话框一般由什么组成？

大部分对话框都由标题、按钮和说明文本组成。如果对话框允许用户输入或选择，则还需相关控件。

• 标题：对话框的标题应该简洁易懂、一目了然。

• 按钮：模态对话框上一般有两个按钮，一个是默认按钮（比如，“确认”、“打印”、“清空回收站”），另一个是取消按钮。它们应当给用户清晰的选项。当用户点击任何一个按钮后，模态对话框就会关闭。为了提高熟练用户的效率，我们应该允许用户按 Esc 键终止对话框（效果和取消按钮相同）。

• 说明文本：说明文本可以向用户解释对话框里的任务，它应该清晰、避免重复信息。

什么是模态对话框？

当模态对话框打开后，用户不能继续之前的任务，除非模态对话框被终止。

在设计交互界面时，我们应该重视模态对话框的设计。设计良好的模态对话框可以帮助用户更好的完成任务，而糟糕的模态对话框则会让用户感到沮丧。Alan Cooper 将模态对话框比作界面设计中的”配角“。因为模态对话框会打断用户的心流 (flow)，所以主要的内容和相关控件应该放在主视图中，而不是散布在不同的模态对话框中。此外，当一个对话框层叠在另外一个对话框之上时，它们往往让人摸不着头脑。

△ 级联对话框 (Cascading Dialogs) 往往令人困惑

为什么使用模态对话框？

如果使用得当，模态对话框可以帮助用户完成任务，创造良好的用户体验。当你有以下需求时，可以考虑使用模态对话框：

1. 获取用户的注意力

当你希望用户专注在一项重要的任务上时，你可能需要使用到模态对话框。尽管一定会打断用户，但很少有其他组件能像模态对话框一样获取用户的全部注意力。模态对话框一般处于界面的最顶层的中间位置。用户必须先处理模态对话框里的任务，然后才能去处理其他任务。因此，用户不太可能错过它们。

在下图的例子中，当用户删除项目时，应用启动了一个模态对话框向用户确认删除操作。