Dec 11, 2018 阅读时长10分钟
作者：Fabian Sebastian
翻译：田晓青、fiona、高蓝光、cyruan、罗几
审校：joyking、Dong Cong
大多数年轻设计师靠直觉设计数字产品。虽然在许多项目里靠直觉设计是可行的，但是这里也有很多公认的设计准则可以帮助你有逻辑的设计UI界面而不是靠直觉进行设计。
本文中，我们将要探索其中一个设计准则——用户界面的模态，我们会讨论为什么屏幕的模态只有两种基本类型以及分析为什么App和网页无法将信息架构和用户流转换为直观的用户界面。接下来我们要谈谈小猫了。
让我们先从以下内容开始探索：
屏幕的两种基本类型：
1、模态屏幕
2、非模态屏幕
任何能想象到的视图都属于这两种类型之一。为了理解清楚模态屏幕和非模态屏幕的区别，我们先来看看模态屏幕的定义：
什么是“模态屏幕”？
模态屏幕案例
模态屏幕有不同的形状和尺寸：
- 全屏模态视图（1）
- 弹出窗口（2）
- 浮层（3）
- 灯箱（4）
- 警告/提醒
- （多步骤）对话框
- ...
模态屏幕和非模态屏幕都是子视图，他们从属于App的主要窗口。但是这里有一个重要的区别：
“一个模态窗口创建了一个使主窗口被禁用的模式，但仍然保持主窗口可见。用户必须先与模态窗口交互才能返回主应用。”（摘自维基百科）
大多数模态屏幕，尤其是桌面应用，可以很容易的被识别，因为他们很明显的覆盖在主窗口上：将主窗口作为背景，菜单、对话框、警告等覆盖在上一层。
但是，移动端的屏幕空间是有限的，这就是为什么大多数手机上的模态屏幕占了整个屏幕。他们不再保持底部的主屏幕可见，所以这样就很难区分模态屏幕和非模态屏幕。
案例：手机上的模态屏幕通常将主窗口完全遮盖起来
你和每个屏幕交流最主要的两个位置。非模态屏幕允许用户很直接的回到主屏幕，但是模态屏幕需要用户完成动作以后回到主屏幕，（在我们的案例中是选择“保存”）或者取消当前的动作。
非模块屏幕最显著的视觉标志是导航栏的可见性（在我们的案例中是标签栏）。非模态屏幕允许用户在基础导航中，可以向前后跳转，即使是发生在在子级页面。而另一方面，一个模态屏幕需要用户在重新使用基础导航栏之前关闭窗口（我们的案例中是保存或者取消）。这个区别是大部分的app都做的不好的，这也是我为什么写这片文章其中的一个原因，“标签栏是一个新的汉堡菜单”:
为什么应用模态屏幕?
模态屏幕解决了一个简单的问题：用户很容易分心，所以有时候必须抓住他们所有的注意力(资源) 模态屏幕能准确的完成这个任务，它需要用户在进行下一步之前集中注意在这个简单的任务上。
“模态通过阻止用户做其他事情，直到用户完成了任务或者放弃一个消息或浏览”——苹果。
什么时候用模态?
现在我们知道模态屏幕的样式，和非模态屏幕的区别，以及他的作用，我们必须问自己“什么情况下我们应该使用模态屏幕”
我说过要讲猫，所以我们开始：让我们想象，我们在创造一个精细的，创新性的硅谷app，名叫purrrfect-一个猫咪 数据库可以让用户上传，浏览和评论可爱的猫咪动图，很棒的想法。
我们app的一个（简易的）用户流大致会是这样：用户打开软件，他打开我们一些可用标签中的一个（我们的猫咪数据库），点击其中一只猫咪（进入到一只猫咪的细节浏览），然后点击评论部分（进入到评论区）。
perrrrfect用户流
除此之外，用户还可以在每个阶段进行补充操作。例如，可以在猫咪数据库屏幕上添加另一只猫咪到数据库中。或者可以在猫咪的细节屏幕上编辑信息。这样挺好的。
那么现在，哪些是模态屏幕，哪些不是呢？下面有一个绝不简单的分类方法——也是我自己的经验之谈：
在独立过程中使用模态屏幕，在其他地方使用非模态屏幕。
“独立过程”是指每个操作都有明确的起点和终点。在此操作的有限时间范围内，它将用户从一般的用户流中提取出来，让用户专注于该操作，然后将他带回到开始的地方。
谷歌用下面的短语描述：使用模态屏幕（对话框）来...
“关键信息需要特定的用户任务、决策或者确认”——谷歌
在样例应用purrrfect中，这意味着主用户流(用于探索应用程序)不是模态的。但是，添加猫咪、编辑猫咪信息和编写评论等特殊的时间限制操作是模态的。
在将用户带回主流程之前，所有的模态行为可以被取消或成功完成。因此，模态屏幕使用取消和保存(或其他类似操作)而不是返回按钮。如果你的返回按钮同时在非模式屏幕中触发保存操作，你可能需要考虑切换成具有取消和保存按钮的模式屏幕。矛盾也是(通常)显而易见的:如果两个不同的操作，例如取消和保存，在你的模态屏幕中没有意义(因为它们将触发相同的操作)，你需要切换到非模态视图。在这种情况下，主导航栏(例如标签栏)也应该在屏幕上保持可见。
让我们回到游戏中，修改应用：一个可行的purrrfect界面如下图所示：
一个可行的purrrfect用户界面
在现实情况下，模态和非模态屏幕的区别并不明显。比如说，大多数app中图像的全屏浏览是模态的，尽管它并不是一个特定的过程或对话。为了产生焦点，模态屏幕应该在其他特殊情况下也合乎情理。如果我们猫咪的细节屏幕（在过程中）是一个终点视图，没有其他类似编辑或评论的操作，我们可能已经习惯性地使用了模态（全屏浏览）。但由于它允许用户更深入地浏览信息架构并执行各种其他操作（显示评论，编辑......），因此它不再具有明确的端点，它是主流的一部分。于是，它是非模态视图。
评估一个操作是独立的还是app一般探索流程的一部分，并决定模态是否合理是设计师的职责。如有疑问，记住苹果说的：
尽量减少使用模态。通常，人们更喜欢以非线性方式与app互动。只有在必须引起别人注意，必须完成或放弃任务才能继续使用这个app或保存重要数据时，才考虑创建模态环境。——苹果
免责声明：当然，即使模态和非模态视图间没有严格区分，界面也可以完美运行。但是，模态的概念已经深刻地根植于苹果，谷歌，微软和其他企业的界面生态系统，用户也已经被培养出相应的预期。
如果苹果没有一次次打破自己的规则，它不会成为苹果公司：比如说，新版本App Store“今日”标签中打开最精彩内容就是一个模态屏幕，但仍然允许用户在模态屏幕底部（没有确切的端点）导航到进一步的推荐。这样，用户可以在模态屏幕内部更深入地导航而不需要固定的端点。在这个过程中，不能切换标签，也不能在子页面关闭模态视图。从推荐以外的其他地方打开相同的软件屏幕会导致屏幕显示为非模态屏幕。这将会保留标签栏和返回操作（再次单击当前标签栏图标转到它的主屏幕）。
不一致的苹果用户界面
左边的不一致可以通过以下方式解决…
- A：…在非模态子屏幕通过返回按钮打开精彩内容并保留标签栏
B：…一旦用户点击模态屏幕里的链接，并继续停留在应用程序的父级的非模态子屏幕上，就关闭模态屏幕应该如何使用模态？
到目前为止，我们对何时使用模态有了一个大致的了解。剩下的一个问题是“我们如何设计它？”。以下是模态屏幕的快速检查表：
- 始终在顶部导航栏中显示关闭按钮（或“取消”/“放弃”/“最小化”/…）。当用户迷路时，他可以轻松关闭弹层，并导航回应用程度的顶层。
- iOS和Android上的取消按钮通常放在导航栏的左上方。Android喜欢用“X”图标表示，而iOS喜欢用文本“取消”。然而，图标按钮在iOS上也很常见，并且被广泛接受。
- 默认情况下，iOS和Android上的“保存”按钮都位于导航栏的右上方。但是，这种放置方式在大型设备上是无法触及的。因此，固定浮动放置在屏幕底部，或嵌入在页面的尾部，是我认为最好的替代位置。
多步骤模态
当模式对话框包含多个步骤或子屏幕时，事情就会变得更加困难。默认情况下，“继续”按钮显示在右上角。第二步屏幕不会打开新的模态页面，而是停留在模态屏幕内，并显示为现有模态覆盖的非模态子屏幕。
将主要操作（“保存”、“应用”或“继续”）放在屏幕底部（像前面建议的那样）时，模态第二步的右上区域释放了可选取消按钮的空间。虽然它从左侧跳到右侧，但这种放置仍然比不能在子屏幕上关闭模态屏幕更好。
动画
迄今为止，iOS和Android在使用模态视图方面非常相似。但是，只要你查看动画，这一情况就会发生变化。
- iOS：动画在iOS中高度标准化。非模态屏幕从右侧进入框架。标签栏在屏幕底部保持不变。顶部的导航栏也保持不变，但其内容在自定义转换中淡出。此动画还为用于返回的边缘滑动手势提供了基础，该手势可以容纳后退按钮。另一方面，模态屏幕从框架底部滑入并覆盖整个界面（新的顶部导航栏）。他们不使用边缘滑动手势，如果没有什么可以保存，自定义下拉关闭手势可能会有所帮助。
- Android：Android上的动画更加多样化。Google建议在Material Design指南中使用“有意义的过渡” 。“儿童元素在触摸时抬起并在适当位置扩展”，而顶部导航栏则淡化其内容。但是，Android不区分模态动画和非模态动画。
- 判决书
许多设计师根据他们的直觉设计产品。有时候，直觉比规范更重要。但重要的是要了解通用标准，以便在有意义时适应或忽略它。
在我看来，模态的概念是当今应用程序中最被忽视的UX原则之一。跨平台应用程序和Web本地混合应用程序并不会让使用平台指南和规范变得更容易。但是模态的一般概念是你应该熟悉它，以便在必要时打破它。
原文：https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1
感谢阅读，以上内容由花火译文小组翻译，转载请注明出处！
花火圆桌是由一群热爱设计的BAT设计师发起的分享交流社群，目前已聚集了18000多位来自五湖四海的小伙伴，一起分享、解惑，并常有线上线下活动共同成长进步。
关注公众号：回复以下关键词，会有海量资源哦| UI | 手绘 | 交互 | 字体 | 软件 |
加微信入群：huahuokefu还能得到更多
扫一扫
8744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
