弹窗设计 - 模态窗还是页面：决策模型 - 《偷偷厉害-C端设计》

模态窗还是页面：决策模型 - 图1

思考以下产品场景：

你正在为一款制定健康计划的公司设计其产品的用户注册流程，而当前的的用户正处于表单填写的中间流程，用户需要获取有关如何查找和填写其 “保险证书编号” 的更多信息才能继续。一部分用户并不知道这意味着什么。而另一部分用户则需要知道在哪里可以找到它（提示：它在另一张纸上）。

作为设计师的你此时会怎么做呢？你会打断用户当前的操作流程吗？添加一个额外的页面说明当前用户需要的信息？还是使用模态窗口提示用户？你应该如何决定呢？

模态窗还是页面：决策模型 - 图2

AKIRA 公司的健康计划 Manulife Financial 的注册流程

对现有可用文献的大量回顾清楚地表明，没有使用模态叠加的定义规则，只有一些建议和指南。

有人问过一个问题：“我们如何在不跳出当前屏幕上下文的情况下，传达重要信息？”

意识模式叠加层诞生了！模态屏幕要求人们在继续进行操作之前，在应用程序的信息体系中自由移动的情况下，专注于单个独立的任务。保持当前屏幕的上下文，同时传达用户所需的重要信息。

是否曾经有人问过你：“模态（modal），覆盖（overlay）和对话框（dialog）之间有什么区别？”。通常来说，人们只会从技术层面上来区分他们之间的不同之处。因此，在继续阅读下面的内容之前，让我们先在认知层面上达到一致：

对话框（**dialog**）：两个人之间的对话。在用户界面中，对话框即是系统与用户之间的 “对话”。
模式（**Mode**）：系统的一种特殊状态，其中同一系统具有一些不同的用户界面。每种模式可能伴随不同的操作，或者相同的操作可能会产生不同的结果，具体取决于系统的模式。
覆盖（**Overlay**）：显示在页面层之上的内容容器。内容容器的覆盖框通常明显小于基础页面。
Scrim/Lightbox**：** 可以应用到页面表面的一种临时处理方法，目的是使表面上的内容不那么突出，从而导致使用 “灯箱” 一词来描述对叠加内容的高度聚焦的视觉效果。
模态化的（**Modal**）：用户将不能操作页面层上的内容，只能操作页面层之上的内容容器，直到用户明确与内容容器的交互结束。
非模态化的（**Non-Modal**）：即使出现了内容层之上的内容容器，用户仍然可以与背景页面的内容进行交互（例如，选择某一链接或点击某一按钮）。