app浮层html,App设计之五：弹窗与浮层

之前在一篇文章里抛出来一个关于弹窗与浮层的问题，当时的背景是这样的，微信和京东在关于密码错误时采用的提示方式是完全不同的。微信采用的是警告框，而京东采用的则是浮层，由于当时自己也是心存疑惑，所以后来查看了一些资料和文章，于是就有了这篇文章。

至于这两种方式哪个更合理一点，现在依然没有得出来结论。

在iOS 9 人机界面指南中关于不需要使用警告框的情况中有这么一条：

若使用警告框来告知用户发生了无法解决的问题时，如果问题是并非决定性的，可以把信息融合到App UI中，如果问题是决定性的，则使用警告框。

那么这样就会延伸出另外的一个问题，怎么定义决定性的和非决定性的？没有统一的标准的话，那这个又是一个主观性的判定了。所以关于之前说的那个问题，我依然没有得到答案，因为两种方式都能够说通。

本文的主要内容是关于弹窗和浮层的，在iOS 9 人机交互指南中关于这部分的分类并不是很清楚，而网上关于这两者的分类也有很多种，有按照模态与非模态来区分的，有按照中断与非中断来区分的，无所谓好坏，只是选择的分类标准不一样。

本文尝试着按照弹窗和浮层来进行划分，其中弹窗下面又会细分为警告框、操作菜单与问题对话框。如有不恰当的地方，欢迎指正。顺便说明一下，鉴于笔者本身对安卓平台的特性并不是很了解，所以本文提到的东西主要是基于iOS平台的，望见谅。

一. 弹窗

弹窗是属于一个比较大的分类，多数情况下弹窗为模态视图，即让用户沉浸在当前的任务中，从而暂时阻止用户与其他元素的交互，简单的说就是用户不处理当前的任务，就不能干其他的事情了。比较常见的为警告框、操作列表和问题对话框。

1警告框

警告框用于告知用户一些会影响到他们使用 App 或设备的重要信息，在iOS中叫做警告框(Alert)，而在安卓平台中叫做对话框(Dialog)。

一般来说尽量减少警告框的使用，因为警告框会中断用户的任务流，并且警告框每次都应该提供重要的信息或者有用的选项，而如果一个App里滥用警告框的话，最终用户可能会不在意所有的警告框。

通常情况下警告框包括：

必须包含标题，有时候会包含正文文本；

包含一个或多个操作按钮。

一般在以下情况下，是不需要用到警告框的：

警告框常见的使用场景为：

二次确认；

重复操作；

操作反馈；

权限获取等。

常见的警告框的方式为一个按钮或者两个按钮，其中一个按钮的警告框通常只是起到了通知的作用，而未能赋予用户对当前状态的控制能力，一般情况下警告框的样式也是可以进行定制的，见下图。

两个按钮的警告框通常是比较便于用户做出选择的，如果操作按钮过多的话，就会不利于用户做出选择，因为每增加一个选项，用户做选择的认知成本和决策成本都会增加。下图为常见的一些两个按钮的弹窗。

对于两个按钮的弹窗中，【取消】按钮到底是放在左边，还是放在右边，曾经我也纠结了好久，后来发现在iOS 9人机界面指南中是给出了建议的：

如果这个按钮不会造成损害性结果，又是用户最有可能会选择的操作，那么它应该放在右边，取消按钮则应该放在左边；

如果这个按钮会造成损害性后果，又是用户最有可能会选择的操作，那么它应该被放在左边，取消按钮应该放在右边。

通常情况下，对于这样的弹窗也会利用视觉上的差异来突出重要操作，或者说突出我们想要用户进行的操作，有时候也会故意利用用户的误操作，见下图。

但是总觉得这样的小技巧是在欺骗用户，到底是善良重要还是是聪明更重要？想必每个人都会有自己的判断…

通常情况下避免使用三个及三个以上按钮的警告框，然而偶尔还是能够看到的。在iOS 9人机界面指南中给出的建议是“如果你需要在警告框中给与用户超过 2 个选项，可以考虑使用操作列表来代替警告”。

2操作列表

操作列表展示了与用户操作直接相关的一系列的选项，通常情况下从界面的底部或者以弹出层的形式出现。

操作列表：

由用户的某个操作行为触发；

包含两个及两个以上的按钮。

操作列表通常提供了一系列的选项来帮助用户完成任务，并且操作列表不会永久的占用页面的空间，通常情况下操作列表包括两种，一种是模态的，一种是非模态的。

模态的操作列表通常会给出取消按钮，并且会用红色标注出来具有破坏性的操作，另外模态的操作列表通常也会采用一些图标或者采用定制化的菜单。

非模态的操作列表一般会有一个指示箭头，指向操作列表的出处，这样有助于用户了解这个浮出层是从哪里来的，以及他们与哪些任务和对象相关。一般情况下，同一时间内屏幕上只有一个浮出层，并且当用户点击操作菜列表外的区域时，操作列表会消失。

3问题对话框

问题对话框是用于向用户提问的窗口，主要有选择和填空两种方式，问题对话框适用于回答单一的问题，如果涉及多个问题时，建议优先使用跳转到新的页面视图的方式。

选择方式的问题对话框在iOS中通常是用列表视图来进行选择的。

填空方式的问题对话框一般包含标题、输入框、操作按钮三部分，通常用于简单的信息填写。

二. 浮层

浮层是指当用户初次进入页面或者在当前页面进行交互时，页面出现的临时视图，该视图用来显示提示信息。而浮层的分类则更加没有什么统一的标准了，形式也更加的多样了。

这里借用新浪UED的一个分类标准，将浮层分为三类，分别是高优先级、中优先级与低优先级。其中高优先级和中优先级的浮层都是采用模态的形式，而低优先级的则是采用非模态的形式。

1高优先级

高优先级的浮层是指用户只有点击操作按钮或者关闭按钮才能够关闭浮层，常见于运营活动、新手引导等。

2中优先级

中优先级的浮层是指用户在屏幕上的灰化区域进行点击或者点击操作按钮都能够退出当前视图，常见于运营活动、新手引导等。

3低优先级

低优先级的浮层一般都是采用非模态的方式，其中低优先级的浮层又分为自动消失和手动消失。

自动消失的浮层多见于操作的反馈，通常也被称为Toast，一般停留1-3秒后就自动消失了，常见的位置为页面中间或者页面的顶部。

顺便说两下：

Toast是安卓系统的产物，iOS上有个类似的控件叫做HUD，但是现在Toast在行业内已经在两个平台上通用了；

安卓上来有个和Toast类似的控件叫做Snackbar(ps.近期iOS上也有了)，它和Toast差不多，唯一的区别就是Snackbar是可交互的。

另外一种低优先级的浮层就是需要手动操作才会消失的浮层，比如下图中的浮层，比如刚刚我们提到的Snackbar。

以上就是本文的主要内容，主要根据弹窗和浮层来对常见的一些临时视图来进行了简单的说明，具体选择哪种方式需要结合平台特性、结合具体的使用场景来进行选择。本文的主旨是为了抛砖引玉，欢迎斧正、指点、拍砖…