产品设计结构基础知识：产品设计师必备的模态体验知识

产品设计结构基础知识：产品设计师必备的模态体验知识如果在模态屏幕中有两个不同的操作，例如取消和保存，则无意义（因为它们会触发相同的操作）您可能希望切换到非模态视图。在这种情况下，主导航（例如标签栏）也应保持在屏幕上可见。在用户返回主流程之前，可以取消或保存完成所有模态操作。因此模态屏幕使用取消和保存按钮（或其他类似操作）而不是后退按钮。如果您的后退按钮在非模态屏幕中触发保存操作，您可能需要考虑使用取消和保存按钮切换到模态屏幕。“需要特定的用户任务，决策或确认的关键信息”——Google对于Purrrfect App来说，这意味着主要用户流不是模态的；但是特殊的限时操作，如添加小猫，编辑小猫和撰写评论都是模态的。

Purrrfect用户流程

另外用户可以在每个阶段执行补充操作；例如他可以在小猫数据库页面中将另一只小猫添加到数据库中，又或者他可以在小猫详情页中编辑数据。

如何分辨模态与非模态，其实没有那么容易，这些只是我个人的经验总结：对自包含过程使用模态屏幕，对其他所有内容使用非模态屏幕。

“自包含过程”是指每个操作都有明确的起点和终点。此操作有明确的时间范围，将用户从一般用户流中移出，让他专注于操作，然后再将他带回到开始的位置。

“需要特定的用户任务，决策或确认的关键信息”

——Google

对于Purrrfect App来说，这意味着主要用户流不是模态的；但是特殊的限时操作，如添加小猫，编辑小猫和撰写评论都是模态的。

在用户返回主流程之前，可以取消或保存完成所有模态操作。因此模态屏幕使用取消和保存按钮（或其他类似操作）而不是后退按钮。如果您的后退按钮在非模态屏幕中触发保存操作，您可能需要考虑使用取消和保存按钮切换到模态屏幕。

如果在模态屏幕中有两个不同的操作，例如取消和保存，则无意义（因为它们会触发相同的操作）您可能希望切换到非模态视图。在这种情况下，主导航（例如标签栏）也应保持在屏幕上可见。

让我们回到我们改变游戏规则的App，Purrrfect界面如下图所示：

Purrrfect用户界面

在实际情况中，模态和非模态屏幕之间的区别通常没那么明显。例如图像全屏页面在大多数应用中都是模态的，尽管它不是进程或对话框。在一些特殊情况下，模态屏幕可能会承载页面的焦点。

如果我们的App屏幕中间是没有其他操作（如编辑或评论）的情况，我们可能使用模态（全屏视图）。但由于它允许用户更深入地进入信息架构并执行各种附加操作（显示注释，编辑……），因此它不再具有明确的终点，因此它是主流程的一部分，所以应该选择非模态视图。

设计师有责任了解清楚App的流程，评估某个操作是否应该单独展示，从而决定来模态是否有意义。

如有疑问，请记住Apple的指导方针：

尽量减少模态的使用。通常人们更喜欢以非线性的方式与应用交互。只有在获得某人注意、任务必须完成或放弃，以继续使用应用或保存重要数据时，才考虑创建一个模态来连接上下层级。

—— Apple

虽然不需要严格区分模态和非模态，界面也可以完美展现。但是模态的概念深深植根于Apple，Google，Microsoft等企业的界面生态系统中，且用户已经形成了相应的期望值。

如果Apple时不时的违反自己的规则，那么Apple将不会是Apple。例如，新版App Store在“今日”标签中打开亮点作为模态屏幕，但仍然允许用户在屏幕底部导航到下一步（没有明确的终点）。

这样用户就可以在模态屏幕内部更深入地导航到其他流程。从推荐以外的其他内容打开相同的App屏幕会导致屏幕显示为非模态屏幕。这将保留标签栏和后退操作（再次单击当前标签栏图标以转到其主屏幕）。

不一致的Apple UI

左边的不一致可以通过……来解决：

• A：……在非模态子屏幕中打开高亮显示，并带有后退按钮并保留标签栏
• B：……一旦用户点击模态屏幕内的链接并继续在App的父级别上的非模态子屏幕操作，从而关闭模态屏幕。

四、如何使用模态？

现在我们对何时使用模态有了一个大致的了解。那么“我们如何进行设计？”这是目前唯一的问题。

下面是对模态屏幕检查后得到的列表：

• 顶部导航栏始终显示关闭按钮（或“取消”/“丢弃”/“最小化”/ …）。当用户迷路时，可以轻松关闭叠加层并导航回App的顶层。
• iOS和Android上的取消按钮通常位于导航栏的左上角。Android更喜欢关闭/“x”图标，而iOS则喜欢“取消”文本，但是图标按钮在ios也很常见，经常使用ios设备的应该都知道。
• 一般情况下，iOS和Android上的保存按钮都位于导航栏的右上角。但是这种放置规则在大屏幕设备上是不可取的。所以在屏幕底部固定浮动或页面末端的内嵌是我个人推荐的放置位置。

五、多步模态

一旦模态对话框由多个步骤或子级页面组成，事情就会变得更加复杂。一般情况下，继续按钮显示在右上角。第二步不会打开新的模态屏幕，而是保留在当前模态屏幕，并在现有模态上覆盖非模态子屏幕。

当在屏幕底部放置主要操作（“保存”，“应用”或“继续”）时，模态第二步的右上区域释放了可选取消按钮的空间。虽然会从左到右跳转，但这种方案仍然比不能在子屏幕上直接关闭更好一些。