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

产品设计结构基础知识：产品设计师必备的模态体验知识但是有一个重要的区别：模态屏幕和非模态屏幕这两种类型看起来似乎很好理解，它们都从属于App的主窗口。基本每个可视化窗口几乎都属于这两类中的一个；为了理解模态与非模态的区别，我们首先要定义模态屏幕。模态屏幕示例模态屏幕有不同的形状和大小：

我在Medium上看到这篇讲解关于模态与非模态的差别，以及如何根据产品流程选择适合的类型的文章；觉得写的非常不错，所以翻译给大家看看，希望对大家有帮助~

很多设计师根据直觉进行产品设计。虽然大部分情况下是没问题的，但是已经证明了的通用标准可以更好的帮助你从逻辑上构建有理有据的UI解决方案，而不是仅仅依赖于你的直觉。

本文我们将探讨UI设计中的模态通用标准，讨论为什么仅有两种类型的原因，并且分析App和网站在将信息体系结构和用户信息流转换为直观的用户界面是如何失败的，本文将使用“Purrrfect”这个产品来讲解。

两种基本屏幕类型：模态屏幕、非模态屏幕

基本每个可视化窗口几乎都属于这两类中的一个；为了理解模态与非模态的区别，我们首先要定义模态屏幕。

一、什么是“模态屏幕”？

模态屏幕示例

模态屏幕有不同的形状和大小：

• 全屏模态视图（左1）
• 弹出窗口（左2）
• 气泡弹窗（左3）
• 灯箱弹窗（左4）
• 快讯/通知
• …

模态屏幕和非模态屏幕这两种类型看起来似乎很好理解，它们都从属于App的主窗口。

但是有一个重要的区别：

模态窗口：

创建一个禁用主窗口的模式，模态窗口作为前面的子窗口使其保持可见。用户必须先与模态窗口进行交互才能返回父级应用程序。

——维基百科

大多数模态屏幕，特别是在桌面应用上可以轻松识别；因为它们覆盖主窗口并且可见：主窗口背景遮罩的弹出窗，弹出菜单和弹出框对话框，灯箱弹框，警告等……

但是移动设备上的屏幕空间有限，这也是移动设备上的许多模态屏幕占据整个屏幕的原因。

它们不再保持底层主窗口可见，所以很难将它与非模态屏幕区分开来：

iOS示例：移动设备上的模态屏幕

两者的主要区别在于屏幕的交互方式不同。虽然非模态屏幕允许用户简单地返回到父级屏幕，但是模态屏幕要求用户在返回主窗口之前完成操作（示例中为“保存”）或取消当前操作。

非模态屏幕最明显可视信息便是导航栏（示例中为标签栏）；即使在子级页面，非模态屏幕也允许用户在主导航来回跳转。另外模态屏幕要求用户在再次使用主导航之前必须关闭窗口（示例中为“Save”或“Cancel”）。

二、为什么要使用模态？

模态屏幕解决了一个简单的问题：用户容易分心，所以有时候必须让用户全神贯注的进行操作。单一的模态屏幕正是要求人集中在单一的任务上，然后再继续其他操作。

“模态通过阻止人们在完成任务或解除消息或视图之前做其他事情来创造焦点”。

——Apple

三、什么时候应该使用模态？

模态屏幕的规则我们已经了然于胸，与非模态屏幕相比，它能达到的目的是什么，应该在什么样的情况下使用它呢？

试想一下，我们正在创造一个巧妙而新颖的App：“Purrrfect” ， 一个小猫数据库，它允许用户上传，查看和评论可爱的猫�.jpg。

资料来源：https：//giphy.com.jpgs/tDgXAst2PhIYw

我们App（简化）用户流程如下图所示：用户打开App，进入几个可用选项卡之一（我们的小猫数据库），点击其中一只小猫（进入详细的单一小猫视图），然后点击评论部分（进入评论部分）。