当你将弹窗设计和使用得当时，它们将会是有效的用户界面元素。它们可以帮助你的用户更快捷和更容易的完成目标。但是如果被误操作，会给用户带来困惑。懂得如何设计弹窗，会帮助你在使用弹窗时避免打扰用户。

什么是弹窗

弹窗是需要用户去交互的浮层，弹框的设计是为了激起用户的回应。弹窗告知用户重要的信息，需要用户去做出决定，或是包含多重任务的。在APP内，在网页上，甚至是手机上，弹窗被越来越多的用来指引用户完成一个具体的操作，而不需要用户离开当前的页面。

图1，会话过期弹窗

现在让我们来概述一下优秀的弹窗设计应用案例

1.避免打扰

尽量少用弹窗，因为它会中断操作。它们的突然出现迫使用户暂停他们的当前任务，注意力集中在弹窗内容上。如果用户想继续，就必须先处理弹窗，否则不可以操作弹框之下的页面。有时候这是一件好事，比如当用户必须要确认某个重要操作。但大部分时间都不是非常必要的，甚至是经常是引起用户反感的。

弹窗需要确认

当我们需要用户的互动才可以继续或当犯一个错误的成本很高时，使用弹窗是最有意义的。

图2，告诉用户当前情况

不要突然出现弹窗

在用户没有做任何操作的情况下，突然打开一个弹窗是非常糟糕的设计。许多网站页面上用订阅框来轰炸用户，如下图：

图3，这样的弹窗没有键盘给用户带来数不尽的麻烦

只要用户在做个某项操作，可能是点击了一个按钮，进入了一个链接或选择了一个选择，弹窗就总是会出现。

小结

不是每一个选择，设置或细节都需要中断用户操作。

可以取代弹窗的有菜单或页面内扩展，这两者都保持当前页面的延续

不要让弹窗突然出现，让弹窗的出现符合用户的心理预期。

2.弹窗与真实世界的关联

弹窗需要使用用户的语言（运用用户熟知的单词、词组和概念），而不是特殊的系统语言。

去掉问题和选项

在弹窗的内容区域，你应该使用清晰的问题或陈述，比如“清除缓存？”或者“删除账户？”。总之，应当避免使用抱歉的、模棱两可的或反问，比如“警告！”“你确定吗”

图4，左边的弹窗提出一个模棱两可的问题，并且影响范围也不明确；右边的弹窗提出很明确的问题，描述了可能产生的影响并提供清晰的选项

避免给用户呈现模棱两可的或不清晰的选项，应该只使用明确的选项。大部分情况下，用户应该只通过弹窗的标题和按钮的文字就可以知道选择。

举个反例：按钮上面的文字“否”轻描淡写的回答了问题，但是并没有暗示接下来会发生什么

图5，安卓的系统弹窗来源：Material Design

好的例子：按钮上面意思明确的按钮“放弃”很清楚的暗示了选择该选项的结果。

图6，安卓的系统弹窗来源：Material Design

提供重要的信息

弹窗不能将对用户有用的信息表述的模糊。举个栗子：弹窗询问用户是否确认删除时需要列出被删的具体内容。

图7，该弹窗简要而清晰的表明了用户操作的影响

也禁止使用“了解更多”进入帮助文档，应当在弹窗的当前页面展示内容。如果需要更多扩展的信息，在弹窗弹出之前展示出来。

提供有效的信息反馈

当一个进程结束时，记得展示提示信息（或视觉反馈），让用户知道他完成了所有所需的步骤。

图8，操作后返回成功的很好的例子

小结：

弹窗中问题和选项要清晰

设计避免用户关闭的弹窗

用户操作完成后给与提示

3.简约至上

你不需要在弹窗中填满内容，保持干净整洁（遵循KISS原则）。但是简约不代表受局限。所有的信息都应当是相关且有价值的。

元素和选项的数量

弹窗永远不要部分展示在屏幕上。弹窗内容不应该滚动查看。

举个反例：巴克莱银行的支付流程中的弹窗包含很多的选项和元素，部分选项只有通过滚动才可以查看（尤其相对而言屏幕较小的手机端）

图9，来源：Barclays

好的例子：Stripe使用简单而灵巧的弹窗展示必要的信息，在PC端和手机上看起来都很好

图10，执行操作的数量

弹窗不应该包含两种以上的操作按钮。第三种选项，如“了解更多”引导用户离开当前页面，但却没有完成当前的选择。

图11，“LEARN MORE”将用户指引到其他页面，当前页面会处于不确定状态

弹窗中不要包含多步骤操作

把一个复杂的任务转换成多步骤是很好的主意，但这也暗示着任务太复杂了而不能让用户在弹窗有限的区域内完成。

图12

如果一个交互动作复杂到需要用多步骤来完成（以下图为例），那么就应该用单独的页面来展示。

图13，包含多步骤的弹窗，来源：Dribbble

小结：

如果你努力将很多元素都堆放在弹窗上，那么这通常意味着弹窗可能不是最佳的解决方案。

去掉弹窗中那些不必要的或不能帮助用户完成任务的元素或内容

尽量避免有多步骤操作的弹窗

4.选择恰当的弹窗类型

弹窗设计主要有两种类型。第一类是吸引用户注意力的模态弹窗，强制用户在交互之后才能继续下一步，它通常被用在中断的流程中：

不需要看上下文就可以确定选项

需要明确的选择“同意”或“取消”才可以关闭弹窗，点击弹窗外区域不会关闭。

用户的任务处于部分完成状态

第二类是非模态弹窗，允许用户点击弹窗意外的区域来关闭弹窗。

模态弹窗应该被用在非常重要的交互操作上（比如删除账户，同意条款协议）

图14，模态弹窗：用户必须通过知己输入delete来确认删除

（原生）移动系统的弹窗通常是模态的，通常包含以下基本元素：内容、操作按钮和标题

图15，安卓模态弹窗

5.视觉一致性

弹窗的背景

当弹出一个弹窗时，弹窗下面的页面会稍稍变暗。这有两个作用，其一是让用户将注意力集中在浮层上，其二是让用户知道当前页面是不可操作的。

图16，安卓模态弹窗

注意黑色背景的透明度，如果背景太暗，用户就不能看到下面的页面，如果背景太亮，用户会觉得下面的页面还是可以操作的，甚至会因此忽略了弹窗的存在。

关闭选择项要清晰

在弹窗的右上角应该有关闭选项。很多的弹窗都会在角上有X方便用户关闭。但是，X对于一般用户而言并不是一个简单的退出通道。点击X会花费用户更多的时间和精力，因为X很小，而用户必须要选中并点击。

允许用户点击非模态弹窗以外的其他区域来关闭弹窗是一个很不错的做法。

图17，Twitter同时使用X和点击弹窗以外区域实现关闭弹窗

避免弹窗之内有弹窗

弹窗之内应该避免弹出新的弹窗,因为这增加了网站或APP的深度和视觉复杂程度。

图18，反例：弹窗之内有弹窗

小结

允许用户点击或滑动弹窗意外的区域关闭弹窗（模态弹窗除外）

弹窗之内避免有新的弹窗

总结

希望这些实例是有趣的，能在设计原型的过程中有所帮助。记住，用户体验是关乎人的，而非技术。了解什么是最适合用户的，最有利于帮助用户完成任务并不是一件难事：模仿那些比较好的弹窗设计，并找一部分用户进行测试。

谢谢！

英文原文地址：https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116#.mzvfxfjgt