模态是一个很多设计师没有完全理解的UX概念

写在翻译之前：很早以前就有周译这个想法，但一直没有行动，也许有时翻译还会和别人重复了，但也没关系，就是要自己实际学到了这一个知识点就好了啊，加入翻译的潮流，坚持下来，积累学习。

这篇文章以3W1H的方式讨论了模态界面，从模态界面的角度讨论了Apple的新APP Store设计，一个很好的思考点。下面开始正式翻译：

 

 

很多设计师，主要是年轻的设计师，在创造数字产品时依靠的是他们的直觉。虽然在许多产品中这是起作用的，但是已经证明通用标准能帮助你有逻辑的构建良好的UI解决方案，而不是依靠你的直觉。

 

在这篇文章中，我们将探讨模态在用户界面中的通用标准，讨论仅有两种基本类型的界面的原因，分析APP和网页在将信息架构和用户流程转变成直观的用户界面方面是如何失败的。哦，我们将讨论关于小猫们。

 

让我们以一个大胆的断言开始探索：

 

界面只有两种类型：

1. 模态界面

2. 非模态界面

 

就是这样，让我解释一下。几乎每个可以想象的视图都可以归进这两种类型中。为了理解模态界面和非模态界面的差异，我们首先需要明确什么是模态界面。

 

什么是“模态界面”？

模态界面示例

 

模态界面可以是不同的形状和大小：

• （1）全屏模态视图

• （2）弹出窗口

• （3）气泡弹窗

• （4）灯箱效果

• （5）告警／通知

• （6）多步骤对话窗口

• （7）…

   

模态界面和非模态界面都是子视图，这意味着它们都附属于应用的主窗口之下。但是这里有个重要的区别：

 

“【模态界面】是一种主窗口可见但不可用，模态界面作为子视图在最前面的一种方式。用户必须先和模态界面交互之后它们才能回到应用的父级界面” — 维基百科

 

大多数的模态界面，尤其是桌面应用，可以轻松识别，因为它们会可视的叠在主窗口上面：比如淡出背景主窗口的弹出窗口，弹出菜单、弹出对话框、灯箱广告、告警……

 

然而，移动设备的屏幕空间有限，这也是为什么许多模态界面在移动设备上占据全屏的原因。它们不再保持底层主窗口可见，所以也使得它们和非模态界面更难区分：

 

IOS示例：移动设备上的模态窗口通常会完全隐藏APP的主窗口

 

主要的区别在于你和每个界面交互的方式。当一个非模态界面允许用户轻易返回父级界面，而模态界面要求用户在他们回到主界面之前必须完成操作（案例中的“保存”）或取消当前的操作。

 

视觉上最明显的指示就是非模态界面中可以看到导航菜单（案例中的Tab Bar）。非模态界面允许用户在主导航级别来回切换，即使恰好位于子页面中。另一方面，在模态界面中，用户如果想再次使用主导航必须关闭当前窗口（案例中的“保存”或“取消”）。这种区别是大多数APP失败的原因之一，也是我撰写文章“Tab Bars是新的汉堡菜单”的原因之一：

 

Tab Bars are the new Hamburger Menus
In this article we are going to talk about a navigation pattern that got out of hand.uxplanet.org

 

 

为什么要使用模态？

 

模态界面解决了一个简单的问题：用户很容易被分心，所以你需要抓住他们全部的注意力。模态界面正是这么做的：它要求用户在继续之前集中精神在一个单一任务上。

 

“模态通过创造聚焦区域阻止人们在完成任务或删除消息或查看之前分心去做其它的事情”— 苹果

 

 

什么时候使用模态？

 

现在我们知道一个模态界面是什么样的，它和非模态界面的比较以及它的目的是什么，我们必须问自己“我们应该在什么情况下使用它？”

 

来看我答应过你们的小猫们，我们开始吧：让我们来想象我们正在创作一个独具匠心和创新精神的硅谷应用：“purrrfect”——一个小猫数据库，允许用户上传、查看和评论可爱猫咪GIF图片。才华横溢的概念。

 

Source: https://giphy.com/gifs/tDgXAst2PhIYw 

 

一个简单的用户流程图可能看起来这样：用户打开APP，进入几个可用tab选项之一（我们的小猫数据库），点击了其中一只小猫（进入了一只小猫的单独详情页），接着点了评论部分（进入评论部分）

 

purrrfect用户流程

 

此外，用户可以在每个阶段进行补充操作。例如，他可以添加另一个小猫的信息到数据库中。或者他可以在小猫的详情页编辑信息。好东西。

 

现在，这些界面哪些是模态界面，哪些不是呢？这个分类一点也不简单——这是我个人的经验法则：

 

对于自包含流程使用模态界面，对于其它所有流程使用非模态界面。

 

“自包含流程”是指每一个动作有一个明确的起点和重点。在这个操作的有限时间范围内，它将用户从一般的用户流中带出，让他们专注于当前的操作，然后再将他们带回开始的地方。

 

谷歌有这样一句话：使用模态界面（对话框）…

 

“关键在于需要一个特定的用户任务、决策和确认"— 谷歌

 

在我们的purrrfect应用中，这意味着关键用户流（经常浏览应用）是非模态的。然而，一些特殊的有时间限制的操作，比如添加、编辑小猫信息和撰写评论都是模态的。

 

 

在用户返回主流之前，可以取消或成功完成所有模态操作。因此，模态界面使用取消和保存按钮（或一些类似操作），而不是返回按钮。如果在非模态界面你的返回按钮同时触发了保存操作，你可能会考虑将它转换成有取消和保存的模态界面。这种矛盾通常也是正确的：如果两个不同的操作，比如取消和保存在你的模态界面中无法起作用（因为它们会触发相同的操作），你可能会想将它换成非模态视图。在这种情况下，主导航（比如Tab Bar）也应该在界面中保持可见。

 

让我们回到改变游戏规则的APP， Purrrfect的界面可能是这样的：

 

可能的purrrfect用户界面

 

在现实中，模态和非模态界面的区别可能很不明显。例如，一张图片的全屏视图在大多数APP中是模态界面，尽管它不是一个流程或对话。为了让用户产生聚焦，模态界面在其它特殊情况下可能也有意义。在我们小猫的详情界面(中间)是一个没有其它操作（如编辑或评论）的终点视图，我们可能已经用了模态（全屏视图）。但是，由于它允许用户更深入的进入信息架构并执行各种附加的操作（显示注释、编辑…）,所以它不再具有明确的端点，因此它是主流程的一部分。因此，这是一种非模态视图。

 

设计师有责任评估一个动作是自包含的还是应用程序一般探索流程的一部分，并决定模态是否有意义。如果有疑问，请记住苹果的话：

 

“尽量减少模态的使用。一般来说，用户更喜欢以非线性的方式与应用程序交互。只有在需要引起别人注意的关键时刻、必须完成或放弃某项任务才能继续使用该APP或保存重要数据的时候，才考虑创建一个模态流程。”— 苹果

 

说明：当然，无需严格区分模态和非模态视图，界面就可以很好的工作。然而，模态概念已经深入苹果、谷歌、微软和其它公司的界面生态系统中，并且用户已经形成了相应的期望。

 

如果苹果不时不时的打破自己的规则，它就不会是苹果：例如，新的APP Store在Today选项卡中以模态界面的方式进行高亮打开显示，但仍然允许用户导航到屏幕底部获得进一步推荐的内容（没有明确的终点）。通过这种方式，用户无需固定端点就可以在模态界面中进行深入的探索。在这个过程中，他们失去了更改选项卡的能力，并且不能再关闭子页面上的模态界面。从推荐之外的地方打开相同的APP界面会导致屏幕显示为非模态界面。这将保留tab bar和返回操作（再次点击当前的Tab Bar图标能转到其主界面）。

 

不一致的Apple UI

 

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

• A: 在非模态子界面中使用返回按钮并高亮显示，同时保留Tab Bar

• B: 在用户点击模态界面内的连接时立即关闭模态界面，并在APP的父级继续使用非模态界面

 

 

如何使用模态？

 

到目前为止，我们应该对什么时候使用模态界面有了一个大致的了解。剩下的唯一问题就是“我们如何设计它？”，这里有一个快速检查清单：

 

• 始终在顶部导航栏中显示关闭按钮（或取消/放弃/最小化/…）当用户迷失，他可以轻易的关闭弹窗，并回到APP的顶层界面。

   

• IOS和安卓上的取消按钮通常位于导航栏的左上角。安卓更喜欢用关闭图标，而苹果则喜欢“取消”文本。但是，图标按钮在IOS上也很常见，并且被广泛理解。

 

• 默认情况下，IOS和安卓的保存按钮都位于导航栏的右上方。但是，这种布局在大屏设备上遥不可及。因此，屏幕底部固定浮动放置或在页面底部内嵌是我个人推荐的另一个位置。

 

 

多步骤模式

 

一旦模态对话框包含多个步骤或子界面，事情就会变得更加困难。默认情况下，继续按钮显示在右上角。第二步并不会打开新的模态界面，而是停留在当前模态界面，并显示为现有模态叠加的非模态界面。

 

当将主操作（保存、应用、继续）放置到屏幕底部时，模态的第二步右上角区域就可以为取消按钮腾出空间。尽管它从左侧跳到了右侧，但这种位置仍然比不提供关闭子界面的模态界面的功能要好。

 

动画

 

到目前为止，IOS和安卓在使用模态视图方面都非常相似。然而，当你查看动画时，这种情况就会改变。

 

• iOS:  动画在IOS中是高度标准化的

   

  非模态界面从屏幕右侧进入视图中。Tab Bar保持在屏幕底部不变。顶部的导航栏也保持不变，但其内容在自定义转换中淡入淡出。这个动画还为返回上一层级的边缘滑动手势提供了基础，这也解决了返回按钮不在单手可触碰区域的问题。

  另一方面，模态界面从视图底部进来，覆盖整个界面（新的顶部导航栏）。他们不使用边缘滑动手势，如果没有内容可保存，自定义下拉手势可能会有所帮助。

   

• Android: 安卓中的动画会要丰富的多。谷歌在Material Design的设计指南中推荐使用”有意义的过渡”。子元素在触摸时抬起并展开的同时，顶部导航栏内容淡入淡出。然而，安卓并不区分模态动画和非模态动画。

 

 

结论

 

许多设计师根据直觉设计产品。有时候直觉比标准更重要。但是，重要的是了解公共标准，以便在有意义时适应或忽略它。

 

在我看来，模态的概念是现在的APP设计中最容易被忽略的UX原则之一。跨平台APP或web本地混合应用并不能使平台和规范的使用变得更容易。但模态的一般概念是一个知道原则，你应该熟悉，以便在必要时打破它。

 

PS: 原文链接限制100个字符是什么鬼，为什么定义是100个字符呢，文章链接长怎么了，麻烦想看原文的小伙伴手动粘贴一下吧，原文地址如下

https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1