田晓青：移动端的屏幕空间是有限的的

翻译：田小青、fiona、高蓝光、cyruan、罗辑

审稿人：joyking、董聪

大多数年轻设计师依靠直觉来设计数字产品。虽然直观设计在许多项目中都有效，但有许多公认的设计原则可以帮助您以逻辑而非直观的方式设计 UI。

在本文中，我们将探讨这些设计原则之一——用户界面的模式。我们将讨论为什么屏幕上只有两种基本类型的模式，并分析为什么应用程序和网页无法将信息架构和用户流程转换为直观的用户界面。. 接下来我们来聊聊小猫。

让我们从以下内容开始探索：

有两种基本类型的屏幕：

1、模态画面

2、非模态画面

任何可以想象的观点都属于这两种类型中的一种。为了理解模态屏和非模态屏的区别，我们先来看看模态屏的定义：

什么是“模态屏幕”？

模态屏案例

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

模态和非模态屏幕都是属于应用程序主窗口的子视图。但这里有一个重要的区别：

“模态窗口创建一个模态窗口，它禁用主窗口，但保持主窗口可见。用户必须在返回主应用程序之前与模态窗口交互。” （来自维基百科）

大多数模态屏幕，尤其是桌面应用程序，都可以很容易地识别出来模态对话框是什么时候实例的对话框，因为它们清楚地覆盖在主窗口之上：以主窗口为背景，菜单、对话框、警报等都覆盖在顶​​部。

然而，移动设备上的屏幕空间是有限的，这就是为什么大多数手机上的模态屏幕占据了整个屏幕的原因。它们不再保持底部主屏幕可见，因此很难区分模态屏幕和非模态屏幕。

案例：手机上的模态屏幕通常会完全覆盖主窗口

您与每个屏幕交流的两个最重要的地方。无模式屏幕允许用户直接返回主屏幕，但模式屏幕要求用户在完成操作后返回主屏幕（在我们的例子中选择“保存”）或取消当前操作。

非模块化屏幕最明显的视觉标志是导航栏（在我们的例子中是标签栏）的可见性。无模式屏幕允许用户在底层导航中来回跳转，甚至在子页面上也是如此。另一方面，模态屏幕要求用户在重用底层导航栏之前关闭窗口（在我们的例子中是保存或取消）。这种区别是大多数应用程序做得不好的地方，这也是我写这篇文章的原因之一，“标签栏是新的汉堡菜单”：

为什么要应用模态屏幕？

模态屏幕解决了一个简单的问题：用户很容易分心，所以有时必须抓住他们所有的注意力（资源）。模态屏幕正是这样做的，它需要用户在继续执行这个简单任务的下一步之前集中注意力。

“Modal 的工作原理是阻止用户做其他事情，直到用户完成任务或放弃消息或浏览” – Apple。

什么时候使用模态？

既然我们知道了模态屏的风格，与非模态屏的区别，以及它的作用，我们就必须问自己“什么时候应该使用模态屏”

我说的是猫，所以我们开始吧：假设我们正在创建一个名为 purrrfect 的复杂、创新的硅谷应用程序——一个允许用户上传、浏览和评论可爱猫咪 gif 的猫数据库 好主意。

我们应用程序的（简化的）用户流程如下所示：用户打开软件，他打开我们的一个可用选项卡（我们的猫数据库），单击其中一只猫（进入猫的详细视图），然后单击评论部分（转到评论部分）。

完美的用户流

除此之外，用户还可以在每个阶段进行补充操作。例如，可以在 Cat Database 屏幕上将另一只猫添加到数据库中。或者，可以在猫的详细信息屏幕上编辑信息。如此精细。

那么现在，哪些是模态屏幕，哪些不是？这是一个绝非简单的分类方法 – 根据我自己的经验：

在独立进程中使用模态屏幕，在别处使用非模态屏幕。

“独立流程”是指每个操作都有明确的起点和终点。在这个动作的有限时间范围内，它把用户带出一般的用户流程，让用户专注于这个动作，并把他带回到他开始的地方。

Google 用以下短语对其进行了描述：使用模式屏幕（对话框）…

“关键信息需要特定的用户任务、决定或确认” – Google

在示例应用程序 purrrfect 中，这意味着主要用户流（用于探索应用程序）不是模态的。但是，添加猫、编辑猫信息和撰写评论等特殊的限时操作是模态的。

在将用户带回主流程之前，可以取消或成功完成所有模态行为。因此模态屏幕使用取消和保存（或其他类似操作）而不是后退按钮。如果您的后退按钮也在非模态屏幕中触发保存操作，您可能需要考虑切换到具有取消和保存按钮的模态屏幕。矛盾也（通常）很明显：如果两个不同的操作，例如取消和保存，在您的模态屏幕中没有意义（因为它们会触发相同的操作），您需要切换到非模态视图。在这种情况下，主导航栏（例如标签栏）也应该在屏幕上保持可见。

让我们回到游戏并修改应用程序：一个工作正常的界面如下所示：

一个工作完美的用户界面

在现实世界中，模态屏幕和非模态屏幕的区别并不明显。例如，在大多数应用程序中全屏查看图像是模态的，尽管它不是特定的过程或对话框。为了产生焦点，模态屏幕在其他特殊情况下也应该有意义。如果我们的猫的详细屏幕（在此过程中）是一个没有其他操作（如编辑或评论）的端点视图，那么我们可能习惯性地使用模态（全屏浏览）。但由于它允许用户更深入地挖掘信息架构并执行各种其他操作（显示评论、编辑……），它不再有明确的端点，它是主流的一部分。所以，这是一个无模式视图。

设计者有责任评估一个动作是独立的还是应用程序的一般探索过程的一部分，并决定该模式是否合理。如有疑问，请记住 Apple 所说的：

尽量减少模态的使用。通常，人们更喜欢以非线性方式与应用程序交互。仅当您必须引起注意、必须完成或放弃任务才能继续使用应用程序或保存重要数据时，才考虑创建模态环境。 – 苹果

免责声明：当然，即使模态视图和非模态视图之间没有严格的区别，界面也能完美运行。然而，模态的概念在苹果、谷歌、微软和其他公司的界面生态系统中根深蒂固，用户已经接受了相应的训练来期待它。

如果不是一次次打破自己的规则模态对话框是什么时候实例的对话框，苹果就不是苹果：比如，在新版 App Store 的“今日”标签中打开最好的内容是模态屏幕，但仍然允许用户在模态屏幕底部（没有确切的端点）导航到进一步的建议。这样，用户可以在模式屏幕内更深入地导航，而无需固定端点。在这个过程中，不能切换标签页，也不能关闭子页面的模态视图。以非推荐方式打开相同的软件屏幕会导致屏幕显示为非模态。这将保留标签栏并返回（再次单击当前标签栏图标以转到其主屏幕）。

苹果用户界面不一致

左侧的不一致可以通过以下方式解决…

B: …一旦用户单击模态屏幕中的链接并保留在应用程序父级的非模态子屏幕上，就关闭模态屏幕

模态应该如何使用？

至此，我们对何时使用模态框有了一个大致的了解。剩下的一个问题是“我们如何设计它？”。这是模态屏幕的快速清单：

多步模态

当模态对话框包含多个步骤或子屏幕时，事情会变得更加困难。默认情况下，继续按钮出现在右上角。第二步屏幕不会打开新的模态页面，而是停留在模态屏幕内，并显示为被现有模态覆盖的非模态子屏幕。

当将主要动作（“保存”、“应用”或“继续”）放在屏幕底部时（如前所述），模态第二步的右上方区域为可选取消腾出空间按钮。虽然是从左到右跳转，但是这个位置还是比在子屏上不能关闭模态屏要好。

动画片

到目前为止，iOS 和 Android 在模态视图的使用方面非常相似。但是，一旦您查看动画，这种情况就会发生变化。

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

在我看来，模态的概念是当今应用程序中最容易被忽视的用户体验原则之一。跨平台应用程序和网络原生混合应用程序并没有使平台指南和规范的使用变得更容易。但是模态的一般概念是你应该熟悉它，以便在必要时打破它。

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

感谢您的阅读。以上内容由花火翻译团队翻译。转载请注明出处！

烟花圆桌是由一群热爱设计的BAT设计师发起的分享交流社区。目前已经聚集了18000多位来自世界各地的朋友一起分享解谜，并经常线上线下活动共同成长进步。