模态是出现在父屏幕顶部的窗口。之所以称为“模式”，是因为它创建了一种模式，该模式会禁用父屏幕，但保持其可见状态。用户必须与模式交互才能返回主屏幕。设计人员使用模式窗口来吸引用户的注意力。模态窗口中的信息和动作将引起整个用户的注意。
在本文中，我想回顾一些关于如何设计更好的模态窗口的简单规则。
01、不要使用模态来显示错误，等待或成功状态
设计人员经常使用模态来显示错误，加载和成功状态。但是模态对于此目的并不有效，因为它们会阻止父屏幕：
模态错误消息示例
错误。错误应在用户输入的上下文中或作为单独的屏幕提供。
对于输入表单，第一种方法更可取，因为它允许用户阅读和理解其输入上下文中的错误。
第二种方法适用于全局错误消息，例如没有Internet连接。
内联验证
加载中。带有“正在加载”消息的模式窗口是长操作的常见解决方案。
在这种情况下，使用模态窗口似乎是合乎逻辑的，因为模态会阻止用户与屏幕进行交互。
但是有可能找到一个更优雅的解决方案-更好的方法是在启动操作的按钮中添加加载状态。它向用户发出必须等待的信号，并防止用户再次单击该按钮。
将加载状态添加到按钮
成功。最好以内联方式或在单独的页面上显示成功消息。
关于将模式窗口用于警告状态的快速注意事项：当用户将要采取严重后果且难以或无法撤消的操作时，可以使用模式窗口。
你可能想要显示不可逆操作的模式
02、小心系统启动的模态窗口
模态窗口有两种类型：用户启动和系统启动。
- 当用户触发模式（即点击按钮）时，用户启动的模式就会出现在屏幕上。用户知道为什么模态变得可见。
- 系统启动的模式会中断用户的当前任务。这种模式所带来的最大问题之一是，他们在模式出现之前就中断了用户的操作。用户可能不知道为什么会看到这种模式。
在网络上，设计人员倾向于出于促销目的使用系统启动的模式。这种模式会打断用户并迫使他们采取特定的行动。不请自来的模式通常会给用户留下不好的印象-人们本能地搜索“关闭”按钮。用户发现这样的窗口很烦人，并且在大多数情况下，搜索关闭按钮。
带有电子邮件注册表单的意外模式窗口
最安全的策略是将模式限制为仅由用户启动的操作或真正紧急的消息。在所有其他情况下，有可能无模式地提供相同的信息/操作（在现有页面的上下文中）。这样，你就可以让用户自由选择他们要消费的内容或要执行的操作。
03、确保用户了解他们需要做什么
人们可能想知道为什么出现模态窗口（特别是当它是系统启动的模态时）。具有清晰描述性的消息将解释该窗口的用法。用户应该能够阅读文本并理解你要告诉他们的消息以及可能采取的措施。
尝试将主按钮文本与模式窗口标题匹配，因为它使用户更容易理解上下文。建议使用明确的按钮标签，该标签明确说明用户单击时将发生的情况。例如，当你要求用户删除其文件时，而不是说“是否释放存储空间？” 如果选择“是”和“否”，则应询问“是否要删除文件？” 操作“删除”和“取消”。
04、在模式窗口中确定内容和功能元素的优先级
尽量避免出现模式窗口中的内容需要滚动条的情况。在长页面上滚动是有意义的，但是模式窗口仅包含基本信息和操作。这就是为什么当你发现自己在模态窗口中添加大量内容时，该停止并重新思考你的方法了。在许多情况下，常规页面将更适合你的用户。
- 理想情况下，你应该在模态窗口中放置一个或两个句子。
- 情态不应包含两个以上的动作。第三项操作（例如“了解更多信息”）通常用于使用户离开对话框，从而增加了未完成任务的风险。
05、使关闭控件可见
用户应该可以随时离开模态状态。为用户提供允许关闭窗口的控件。有几种流行的方法可以实现此目的：
- 在窗口的右上角添加明确的“关闭” /“ X”按钮。
- 在模式窗口的底部添加明确的“关闭” /“取消”按钮。
- 支持在窗口外部单击/轻击以关闭窗口。
06、适当调整窗口大小
模态窗口的大小不应太大-模态窗口不应占据整个屏幕。理想情况下，覆盖屏幕的时间不应超过屏幕的25％。如果你无法将内容放置在窗口中并希望使用滚动条，则为此目的最好创建一个单独的页面。
07、将模式窗口放在焦点上
以下是如何向用户清楚表明窗口是模态的信号：
- 将模式直接放在用户的视线范围内。 当模式窗口在用户视口中不可见时，用户将不得不滚动查找它。问题是用户可能无法识别他们需要滚动，这将导致对应用程序无响应的困惑。
- 确保模式窗口在视觉上与背景页面不同。使窗口的背景变暗将帮助用户理解模态窗口位于父页面上方。
08、使模态窗口中的内容可供键盘用户访问（对于台式机）
模态窗口打开后，需要将键盘焦点移到该窗口。用户应该能够使用键盘在窗口中浏览功能控件。
允许单击Escape键以关闭模式。当用户意外打开模式窗口时，许多用户会本能地按下Esc键以返回上一页。
09、不要使用嵌套模态
切勿设计触发模态窗口的模态窗口。当你采用这种方法时，会给设计增加视觉上的复杂性。
创建嵌套模态是创建不良UX的可靠方法
原文链接：https://uxplanet.org/best-practices-for-modal-window-design-627f7aba57f1
