关于弹窗设计的分析

在日常使用和设计过程中，经常会遇到各式各样的弹框，也会从不同的产品或交互设计师手中接到不同的原型，里面涉及到的弹框结构也是各有不同，到底弹框应该怎么设计呢？我带着这个疑问，去查阅整理出了这篇关于弹框背后涉及到的原理的文章。

常见的弹框根据其不同的使用场景主要分为警告框（Alert）和操作列表（Action sheet）这两种形式，本文也主要针对这两种弹框来展开说明。

弹框涉及到的结构：标题、内容、否定性按钮、肯定性按钮或者操作性按钮

首先了解下警告框（Alert）在各平台上展示形式的不同之处：

一、警告框（Alert）——非用户发起的

（1）苹果系统的弹框

mac系统:

ios系统：

通过上面这两种可以看出，苹果系统将自家的系统弹框都做到了统一性，将肯定性与操作性的按钮放在右边并通过加粗、颜色等视觉效果强调突出，同时在左边提供否定性的按钮，以便用户可以安全地选择退出破坏性操作。

为何苹果系统会采用这种结构的弹框？之前看到一篇文章，里面总结了以下的三点原因，特别具有说服性：

1、符合阅读视线流

2、扫视时的阅读顺序

3、逻辑顺序

理由一：符合阅读视线流

按照阅读习惯，会从左边开始往右边阅读，将目标按钮放在右边，可以在完成阅读的同时触达到这个需要引导用户按下的按钮。

理由二：扫视时的阅读顺序

警告框的出现会严重打断用户的当前任务与操作，吸引用户的注意力，所以要在尽可能短的时间里引导用户完成操作。针对每次出现的弹框，用户也希望在尽可能短的时间里完成操作。根据用户从左上角往右下角扫视信息的阅读顺序习惯，采用了这种右置的布局按钮。

理由三：逻辑顺序

还可以根据页面现有的状态是否发生根本性的改变来分析这种按钮布局的合理性。“取消”放左对应于“上一步”，而“确定”放右对应于“下一步”，当用户点击“确定”，页面的现有状态会发生变化，也符合点击“下一步”的性质。

这里顺便也讲一个特殊的情况：

ios10之前：

ios10之后：

在iOS10之前，当操作涉及到风险时，两个按钮中的“取消”会放在右边，而操作性的按钮会放置在左边，比如在ios桌面删除一个应用，“取消”放右边，“删除”放左边同时不用常用的红色作为警示，而是采用常规的蓝色弱化这种警示的提示，以此来尽量减少点击“删除”的可能性来减少风险。但是在iOS10更新之后，这种情况有了变化，“删除”像其它操作性按钮一样放在右边，但是用红色作为警示色强化了提示效果，“取消”放回左边，这样整个平台的按钮放置的位置都有了统一性。

（2）Android系统的弹框

先来看下下面这一段有趣的小故事：

之后Android的弹框：

在Android 4.0之前，iOS和Android弹框的“确定”按钮一个放右边，一个放左边，后来从Android 4.0开始，“确定”按钮也都统一改成放右边。

这里不能判读孰好孰坏，但是在保证各自平台统一的前提下，规范的规则才能够确保不对用户在使用上造成困惑，同时也能让产品提供合理的体验和服务。如果无视弹框的重要性而滥用的话，会导致用户认知疲劳和视觉失调，以至于大大降低了其效用。

（3）Windows系统的弹框

不同于苹果的macos系统弹框，Windows系统将肯定性的的操作按钮放在左边并强调突出，将否定性的按钮放在右边，所以按照自然阅读顺序，从左边开始就能触达到目标按钮，但是如果想要仔细阅读内容，其实正常的阅读逻辑是要看完两个按钮之后再返回到这个目标按钮，也就是上图所示的1、2、3这个顺序浏览。

二、操作列表（Action sheet）—用户主动发起的

其实这里有一个重要的决定因素可以判断啥时候使用这两种弹框，那就是判读是否是用户主动发起的。警告框（Alert）非用户主动发起，而操作列表（action sheet）是用户主动发起的。比如下面两个例子：

（1）针对当前任务提供多操作列表选项。

（2）确认一个用户发起的有潜在危险的操作。

如果该操作执行的时候是有破坏性和危险性的，应该使用红色作为警示。

除上面提到的这几种，还有其它一些比如浮出层、安卓的toast、日期选择器等控件类弹框甚至于可以自定义样式的弹框，都应该在最恰当的时机按照合理的形式弹出，引导提示用户完成操作才能确保其用得其所，用户才会把它当做一回事，否则，不仅对用户造成了干扰，大大降低了效用，严重的话，还会导致用户对产品产生抵触情绪而流失。

更多关于弹窗的设计可以下载素材：网站设计页面小弹窗模板

原文作者：Bruce_菜

参考文章：https://www.zhihu.com/question/35141228