不同场景下的弹窗使用思考

一、弹窗概述

我们在日常移动端产品使用和设计工作中会遇到形形色色的弹窗设计，那么我理解的弹窗是拉通产品交互与用户操作的核心枢纽，它可以告知用户关键的信息，要求用户去做决定。

弹窗同样可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。

二、弹窗分类

虽然弹窗样式复杂多变，但是归结到交互形式上，可以讲弹窗分为两种形式，模态弹窗和非模态弹窗。

1.模态弹窗

模态弹窗的特征为：当它出现在用户的操作视野内时，用户需要对其作出回应，是可交互的。

常见的模态弹窗有对话框(Dialog)、浮层(Popover/Popup)、操作栏(Actionbar)。

优势：由于可交互的这种特性，它的层级比较高，可以很好的吸引用户的注意。   劣势：中断用户操作明显，会带来顿挫感强烈的体验风险。

a.对话框（Dialog）

以用户和产品为维度，将对话框分为：产品信息下发类、用户信息提交类。

信息下发类：通常指程序运行的过程出现需要用户决策的「即时任务」。比较典型的：系统、版本更新、消息通知、警示栏、运营/广告弹窗等等。

信息提交类：需要用户在弹窗内进行操作，二次提交信息。比较典型的：登录注册，改名分组等等。

b.浮层（Popover/Popup）

浮层是指，用户点击某个功能控件后浮出一个临时界面对其作出补充，它通常会伴随半透明的遮罩/阴影衬底，用户需要点击临时界面的功能区域，或者点击空白处才能进行下一步操作。

c.功能框（Actionbar）

操作栏实际上和浮层很像，都是通过用户主动点击后对某一功能作出补充，只不过浮层通常出现在比较靠上的位置，操作栏通常出现在底部。

2.非模态弹窗

非模态弹窗在特征上则与模态弹窗相反，它从出现到停留消失的时间很短暂，不会强制用户去对它作出反馈，所以它是一种轻量级的反馈机制。常见的种类有Toast（Hud）、Snackbar。

a.Snackbar

Snackbar和Toast一样是Android里的控件，也是现在通用于iOS端App提示提示的弹窗，同样针对用户操作的轻量反馈机制。他们通常可交互，或短暂停留，或滑动页面后就会消失。

b.Toast

Hud是iOS的控件，Toast则是android的，业内大部分 App 在 iOS 提示体系内采用了Toast来设计（如今Toast的概念已经泛化，早已打破了Android的规范）。所以两个端不管从功能还是形式上来看都有异曲同工之处。常用于更新气泡、 更新提示条、操作反馈等。

三、不同场景的应用

在某些场景下错误的操作可能会带来高风险，这时及时使用重度提醒方式例如对话框来提醒用户规避风险才是一个产品该为用户带来的使用感受。比如在手机电量过低时，手机只是toast来展示一下电量不足，是不是感到十分崩溃？再比如某些操作反馈只需要通知用户一下，接下来还有更有趣的操作待继续，这时弹出来一个对话框用户同样会感到崩溃。所以，选择弹窗也需要根据场景。

基于不同的使用场景，可以将弹窗提示分为三种量级：轻度提醒、中度提醒、重度提醒。

1.轻度提醒

a. 应用场景

用户可以预料的变更信息，提醒出现时间及时，操作后马上反馈。如：发送成功或者失败、添加收藏、开启省流量模式……

b. 使用方式与原则

推荐使用提示框、Toast

1.避免对当前任务产生任何干扰，让感兴趣的用户能够发现提示。

2.自动消失，无需任何操作。

c. 在页面中的位置

可以出现在页面的任何位置：页面顶部、中部或者在底部出现（但一般都是出现在页面的中轴线上），具体的显示位置根据页面的实际情况做针对性设计。

2.中度提醒

a. 应用场景

用户可能需要了解、感兴趣的变更信息。如：好友消息、网络错误、账号升级……

b. 使用方式与原则

推荐使用Snackbar、浮层

1.在尽量不打断当前任务的前提下，确保用户可以看到提示。

2.不自动消失，但用户不需要做选择，可以选择忽视。

c. 在页面中的位置

Snackbar 一般出现在页面底部，浮层可能出现在画面各处。

3.重度提醒

a. 应用场景

不可逆、涉及金钱或不建议的变更信息。如：永久删除、购买、取消关注……

产品主推的活动或功能，强烈希望吸引用户兴趣，如营销活动、广告....

b. 使用方式与原则

推荐使用对话框、功能框

1.确保用户能够看到提示，哪怕打断当前任务。

2.必须用户主动操作或进行选择才能继续。

c. 在页面中的位置

对话框一般出现在页面中间、功能框一般出现在页面底端。

四、总结

弹窗设计让用户真正感觉到自己与产品之间产生了某种联系。同时，弹窗的使用方式也影响着用户对产品的使用感受。

不管是模态弹窗还是非模态弹窗，它的出现多多少少会影响到用户当前的体验，所以我们使用弹窗要克制，不能高频率的使用。同时，我们选择弹窗时也要谨慎合理。基于本文以上内容分析，总结出了不同场景下的弹窗使用建议，希望对大家有所帮助。