您以前可能去过那里。我们如何选择向用户显示模式，以及何时将他们导航到单独的新页面？这有什么关系吗？ 事实上，确实如此。该决策会影响用户的流程、上下文、查找细节的能力，以及错误频率和任务完成情况。这两种选择都可能在错误的时间、错误的地点造成破坏性和令人沮丧。 所以我们最好把事情做好。好吧，让我们看看如何做到这一点。 模态、对话框、叠加、灯箱 虽然我们经常谈论单个模态 UI 组件，但我们经常忽略所有不同类型模态之间细微、复杂的细微差别。事实上，并非每个模态都是相同的。模态框、对话框、叠加层和灯箱——听起来都很相似，但实际上有很大不同：
Dialog“对话”的通用术语（用户↔系统）。 覆盖显示在页面顶部的小型内容面板。 ModalUser 必须与禁用的覆盖+背景交互。 NonmodalUser 必须与启用的覆盖+背景进行交互。 Lightbox 调暗背景以将注意力集中在模式上。
正如 Anna Kaley 所强调的那样，大多数叠加层出现在错误的时间，在关键任务期间打断用户，使用糟糕的语言，并破坏用户的流程。它们本质上是干扰性的，并且通常具有很高的严重性，但没有强烈的需要。
当然，如果用户的行为后果具有很大的影响，则必须放慢速度并打断用户，但对于大多数情况而言，非模态更加微妙，并且是引起用户注意的更友好的选择。如果有的话，我总是建议将其作为默认值。 模态 → 用于单一、独立的任务 作为设计师，我们经常认为模态是无关紧要且令人讨厌的，而且事实往往如此！ ——但它们也有其价值。它们对于警告用户潜在的错误或帮助他们避免数据丢失非常有帮助。它们还可以帮助执行相关操作或深入了解详细信息，而无需中断页面的当前状态。 但模态框的最大优点是它们可以帮助用户保留当前屏幕的上下文。它不仅仅意味着 UI，还意味着编辑输入、滚动位置、手风琴状态、过滤器选择、排序等等。
有时，用户需要快速确认选择（例如，如上所示的过滤器），然后立即从那里继续。当然，自动保存可以实现相同的目的，但并不总是需要或期望的。阻止 UI 通常不是一个好主意。 但是，模态框不用于任何任务。通常，我们将它们用于单个、独立的任务，用户应该跳入其中，完成任务，然后返回到原来的位置。毫不奇怪，它们确实适用于高优先级、短时间的交互（例如警报、破坏性操作、快速确认）。 当模态有帮助时： 🚫 模态框通常具有破坏性、侵入性和混乱性。🚫 它们使得比较和复制粘贴变得困难。✅ 然而模态框允许用户维护多个上下文。✅ 可用于防止不可逆转的错误和数据丢失。✅ 如果将用户发送到新页面会造成破坏，则很有用。 ✅ 仅当用户重视中断时才显示模式。 ✅ 默认情况下，更喜欢非阻塞对话框（“非模式”）。 ✅ 允许用户最小化、隐藏或稍后恢复对话框。 ✅ 使用模式来减慢用户的速度，例如，验证复杂的输入。 ✅ 使用“关闭”、ESC 键或单击框外为出路。 页面 → 适用于复杂的多步骤工作流程 模式中的向导或选项卡式导航效果不太好，即使在复杂的企业产品中也是如此——侧面板或抽屉通常效果更好。当用户需要比较或引用数据点时，麻烦就开始了——但模式会阻止这种行为，因此他们会在多个选项卡中重新打开同一页面。
对于更复杂的流程和多步骤流程，独立页面效果最好。当页面需要用户的全部注意力时，页面也会更好地工作，并且参考上一个屏幕并没有多大帮助。抽屉适用于对于简单模式来说过于复杂的子任务，但不需要完整的页面导航。 何时避免情态动词： 🚫 避免使用错误消息模式。🚫 避免使用功能通知模式。🚫 避免使用入门体验模式。🚫 避免使用复杂、冗长的多步骤任务模式。🚫 避免多个嵌套模式，并使用上一个/下一个。🚫 除非绝对必要，否则避免自动触发模式。 避免两者对于重复任务 在许多复杂、任务繁重的产品中，用户会发现自己一遍又一遍地重复执行相同的任务。在那里，模式和新页面导航都会增加摩擦，因为它们会中断流程或迫使用户收集所有不同选项卡或视图之间丢失的数据。 很多时候，用户最终会得到一种破碎的体验，充满了永无休止的确认、夸大的警告、冗长的说明，或者只是缺少参考点。正如 Saulius Stebulis 提到的，在这些场景中，可扩展部分或就地编辑通常效果更好 - 它们将任务固定在当前屏幕上。 实际上，在许多场景中，用户并不是孤立地完成任务的。他们需要在完成任务时查找数据、复制粘贴值、优化不同位置的条目，或者只是查看类似的记录。 覆盖层和抽屉对于在任务期间保持对后台数据的访问更有帮助。因此，上下文始终保留在其位置，可供参考或复制粘贴。将模式和页面导航保存在中断真正增加价值的时刻，尤其是为了防止出现严重错误。 模态与页面：决策树 不久前，Ryan Neufeld 整理了一份非常有用的指南，帮助设计师在模式和页面之间进行选择。它附带了一个方便的 PNG 备忘单和一个 Google 文档模板，其中的问题分为 7 个部分。 它很长，非常彻底，但很容易理解：
这可能看起来令人畏惧，但这是一个非常简单的 4 步过程：
屏幕的上下文。首先，我们检查用户是否需要维护底层屏幕的上下文。 任务复杂性和持续时间。更简单、更集中、不分散注意力的任务可以使用模式，但长而复杂的流程需要页面。 对底层页面的引用。然后，我们检查用户是否经常需要在后台引用数据，或者任务是否是简单的确认或选择。 选择正确的覆盖。最后，如果覆盖确实是一个不错的选择，它会指导我们在模态或非模态之间进行选择（倾向于非模态）。
总结 尽可能避免阻塞整个 UI。有一个浮动对话框，部分覆盖 UI，但允许导航、滚动和复制粘贴。或者将模式的内容显示为侧抽屉。或者使用垂直手风琴代替。或者，如果您需要显示大量详细信息，请将用户带到单独的页面。 但如果您想提高用户的效率和速度，请不惜一切代价避免使用模式。使用它们来减慢用户的速度，集中他们的注意力，防止错误。正如 Therese Fessenden 指出的那样，没有人喜欢被打扰，但如果必须的话，请确保它绝对值得付出代价。 认识“智能界面设计模式” 您可以在智能界面设计模式中找到有关模态和替代方案的整个部分，这是我们的 15 小时视频课程，其中包含来自现实项目的 100 个实际示例 - 今年晚些时候还将提供现场用户体验培训。从大型下拉列表到复杂的企业表格，应有尽有，每年都会添加 5 个新细分。跳转到免费预览。使用代码 BIRDIE 可节省 15% 的折扣。 认识智能界面设计模式，这是我们关于界面设计和用户体验的视频课程。
视频 + 用户体验培训 仅视频视频 + 用户体验培训$ 495.00 $ 699.00
获取视频 + 用户体验培训25 个视频课程（15 小时）+ 实时用户体验培训。100 天退款保证。仅限视频$ 300.00$ 395.00
获取视频课程40 节视频课程（15 小时）。每年更新。还可以作为包含 2 个视频课程的 UX 捆绑包提供。
有用的资源
不同类型的弹出窗口，作者：Anna Kaley 设计 UI 模态的最佳实践，作者：Uxcel 我们使用了太多该死的模态：用户体验指南，作者：Adrian Egger 模态和非模态对话框，作者：Therese Fessenden 现代企业 UI 设计：模态对话框，作者：James Jacobs 设计系统中的模态
