弹窗设计的5条基本原则

好的例子：Stripe使用了一个简单并且聪明的弹窗，只显示了最基本的信息，这样不管在桌面端上还是移动屏幕上看起来都会很不错。

图10

操作的数量

弹窗不该提供超过两种选项。第三个选项，例如下图的“了解更多”，有可能会将用户带离此弹窗，如此用户将没有办法完成当前的任务。

图11，“Learn More”操作将用户从这个弹窗指引到其它页面，进而把当前的弹窗置入一个不确定的状态

勿将多个步骤放置在一个弹窗内

把一个复杂的任务分解成多个步骤是一个极好的想法。然而这也会给用户传达一个信号，这个任务太复杂了，以至于根本没法再一个弹窗界面中完成。

图12

如果一个交互行为复杂到需要多个步骤才能完成（如下图的例子），那么它就有必要单独使用一个页面（而不是作为弹窗存在）。

图13，有多个步骤的弹窗 来源：Dribbble

小结

1. 如果你发现你在很努力地把许多元素挤进一个弹窗，这通常代表弹窗已经不是最优的设计方案了。

2. 将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除，以达到简化的目的。

3. 尽量避免在弹窗内安置多个步骤。

原则4. 选择适当的弹窗种类

弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗，强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中：

当不需要上下文就可以决定怎么做的时候。

需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时，它并不会关闭。

当我们不允许此用户的进程处于部分完成状态（即用户必须完成此进程才可做其他任何的操作）。

第二大类则是非模态弹窗，它允许用户通过点击或轻触周围就可关闭。

第一种模式弹窗只在特别重要的交互操作时才须使用，（比如：删除帐户，同意协议）。

图14，模态弹窗：用户必须输入“delete”才能确认删除

另外移动系统的弹窗通常是模态的，并且含有如下的基本元素：内容，操作，和标题。

图15，安卓模态弹窗

原则5. 视觉一致性

弹窗下的背景

当打开一个弹窗时，后面的页面一定要稍微地变暗。它有两个功能，第一它把用户的注意力转移到了浮层上，第二它让用户知道后面这个页面是不再可用的。

图16，安卓的模态弹窗

在调节背景深度时要注意了。如果你把它变得太暗，用户就没法看清背景的内容。如果你调得太浅，用户可能会认为这个页面仍然可操作，并且甚至不会注意到弹窗的存在。

清晰的关闭选项

在弹窗的右上角应该有一个关闭的选项。许多弹窗会在右上角有一个“x”的按钮，方便用户关闭窗口。然而，这个“x”按钮对于一般的用户而言并不是一个显而易见的退出通道。这是由于“x”按钮通常较小，它需要用户准确地定位到该处，才能够成功的退出，而这一过程通常很费事。

因而让用户通过点击非模态弹窗的背景区域去退出，就是一个更好的方法。

图17，Twitter同时使用了点击x按钮和点击背景区域的退出方式

避免在弹窗内启动弹窗

应该避免在弹窗内再启动附加的小弹窗，这是因为此举会加深用户所感知到的网站或app的层级深度，从而增大了视觉的复杂性。

图18，反例：弹窗中的弹窗

小结

1. 在大部分情景下，都允许用户通过点击或轻触来关闭弹窗（除了模态弹窗）。

2. 应该避免在弹窗内再启动附加的小弹窗（即弹窗中的弹窗）。

总结

希望这些有关弹窗的使用案例和使用方法还算有趣，并能在你们设计原型时派上用场。要记住，用户体验是为用户而做的设计，而非为技术。要想知道什么样 的设计最适合你的用户、最适合他们将进行的任务，其实不是一件难事：你只需要模仿那些领先产品的弹窗，然后找到你的用户做一些相关的测试。

英文原文：Nick Babich, UX Design: 5 Essential UX Rules for Dialog Design

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

本文为原创译文，转载/引用皆请标明译者和出处，本文版权归点融设计中心DDC所有

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!