在使用电脑和手机的时候，我们会经常看到大大小小的对话框。对话框是叠加在应用程序主视图上的弹出视图，通常需要用户做出响应。对话框可以分为模态对话框和非模态对话框。为了更好地理解模态对话框和非模态对话框之间的区别，让我们看看术语“模态”和“对话框”的含义。
1. 模态
用户界面模态是指同一系统具有不同用户界面的一种特殊状态。每个模态可能有不同的命令，根据系统的模式，相同的命令或操作可能会产生不同的结果。换句话说，在不同的模态下，相同的输入将产生不同的结果。
例如，打开caps lock的计算机处于特殊模态：输入的所有字母都将显示为大写字母。当caps lock处于打开和关闭状态时，键入字母将产生不同的效果。
或者，在Microsoft Word的“跟踪更改”模式下，所有以前的编辑和注释都是可见的，在正常默认模态下不会跟踪或显示。
模态将阻止用户在当前视图中完成任务，并使用户在模态视图中关注新任务；只有当模态视图终止时，用户才能继续完成上一个任务。
2. 对话框
对话是指两个人之间的对话。在用户界面中，对话是系统和用户之间的对话，通常要求用户提供信息或操作。大多数对话框由标题、按钮和描述性文本组成。如果该对话框允许用户输入或选择，则还需要相关控件。
- 标题：对话的标题应简洁、易懂、一目了然。
-
按钮：模态对话框中通常有两个按钮，一个是默认按钮。例如，“确认”、“打印”、“清空垃圾箱”，另一个是取消按钮。它们应该为用户提供明确的选项。当用户单击任何按钮时，模态对话框将关闭。
-
描述文本：描述文本可以向用户解释对话框中的任务。它应该清晰，避免重复信息。
通过对“模式”和“对话”的理解，我们可以很容易地定义模态对话框。
3. 模态对话框
模态对话框是出现在主要内容上的对话框，它将系统移动到需要用户交互的特殊模式。此对话框将禁用主要内容，直到用户明确与模式对话框交互。
举个例子，假设你养了一只小猫，它每天早上七点钟准时喵喵叫，提醒你喂她。难得不用上班的周末，你正准备呼呼大睡，但小猫站在你的面前不停地喵喵叫，直到你看着她。如果你想完成紧急的工作任务，得立即停止手头的任务来解决猫的事情。
如Pixso社区中的示例，不输入支付密码就无法完成交易。
4. 非模态对话框
相反，非模式对话框不会禁用主要内容，显示对话框不会更改用户界面的功能。当对话框打开时，用户可以继续与主要内容交互，甚至可以通过移动窗口、最小化窗口等。
继续拿小猫来类比，非模型对话就像一只小猫，在用餐时耐心地坐在餐桌旁，等待食物残渣从餐桌上掉下来的机会。小猫咪的举动不会对你造成太多的干扰，你依然可以交谈、享用晚餐，甚至完全不理会它。
模态对话框的最初目的是提醒用户注意错误或其他需要用户立即采取行动的系统状态。在这种情况下，必须中断用户以修正错误。因此，将对话框放在屏幕中间作为界面焦点是非常有效的。这种模态对话的最大优势在于，它吸引了用户的注意力，并让用户承认问题、快速解决问题。
5. 为什么使用模态对话框
如果使用正确，模态对话框可以帮助用户完成任务，创造良好的用户体验。当你有以下要求时，可以考虑使用模态对话框：
引起用户注意
当希望用户专注于一项重要任务时，可能需要使用模态对话框。即使它必须中断用户，但很少有其他组件能够作为模态对话框吸引用户的全部注意力。模态对话框通常位于界面顶层的中间。用户必须先在模式对话框中的任务，然后才能管理其他任务。
在下面的示例中，当用户删除项目时，应用程序将启动一个模态对话框，以向用户确认删除。
显示次要内容
本质上，应用程序旨在帮助用户访问特定内容。主要内容是用户最感兴趣、最在意和最经常访问的内容，而其他内容是次要内容。因此，主内容及其控件不应出现在模态对话框中。
隐藏复杂性
我们希望为用户创建简单而强大的应用程序。在设计应用程序时，我们需要仔细平衡这两个目标。
如果我们想让新用户更快地入门并掌握基本功能，我们需要找到隐藏不常使用的高级功能的方法，以便新用户可以首先关注核心内容。我们可以在模式对话框中隐藏这些高级功能。
Ant Design设计规范 浅色
6. 模态对话框的缺点
需要立即关注
模态窗口本质上是强制性的，需要用户立即采取行动。由于对话将系统置于不同的模态，用户在确认对话之前无法继续他们正在做的事情。
中断用户的工作流程
模态对话框首先迫使用户远离他们正在处理的任务。每一次中断都会导致时间和精力的损失，这不仅是因为用户必须解决对话，还因为一旦用户回到原来的任务，将不得不花费一些时间来恢复原任务。
让用户忘记他们在做什么
一旦切换到不同的任务，人们可能会忘记与原始任务相关的一些细节，这是由于模态对话带来的额外认知负荷。如果是这种情况，则可能更难与原始任务进行衔接了。
允许结束对话
它们允许用户创建并解决另一个目标—结束对话。出现对话时，用户的工作流程中会添加其他步骤：阅读和理解对话，然后对对话做出决定。互动成本的增加可能会延迟用户，除非对话是合理的，并且包含重要信息。
屏蔽背景中的内容
当对话框出现在当前窗口的顶部时，它可以覆盖重要内容并删除上下文。因此，当对话询问与刚刚模糊的信息有关的问题时，回答对话可能会变得更加困难。由于这些缺点，模态对话框在用于非关键活动时可能会出现问题。
Ant Design设计规范 浅色
在设计交互界面时，我们应该注意模态对话框的设计。设计良好的模态对话框可以帮助用户更好地完成任务，而糟糕的模态对话框会让用户感到沮丧。
值得一提的是，以上的案例讲解都来自Pixso社区，Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范，提供海量设计模板和素材，本地化字体资源，热爱设计的你一定不容错过！
