产品经理如何设计移动端弹窗功能

本文大纲：

(1)  认识APP弹窗的组成要素和使用场景；

(2)  掌握APP弹窗和非弹窗的设计方法

1 为什么要设计弹窗

1.1 什么是弹窗

弹窗是指打开网页、软件、手机APP等的时候自动弹出的窗口。

弹窗实例：饿了么、天天快报、爱奇艺

一般都是页面灰色蒙版，中间一个弹窗。

1.2 为什么要设计弹窗

弹窗是想给用户及时、恰当的反馈，是交互设计非常重要的一项原则。APP提示弹出框是其中一种常见的信息反馈形式。

从用户体验角度看，弹窗并不好，没有用户预期，可能会打断原有的操作和认知，对体验流畅性有一定负面影响。

但从内容推广角度看，弹窗可以在短时间将内容展现在用户面前，一定程度上迫使用户点击和阅读，以达到更强的传播效果。具有兴奋剂的作用。

2 弹窗的组成和场景

2.1 弹窗的组成元素

1）遮罩层（如黑色透明背景）

2）弹出窗体（设计师重点发挥设计创意的舞台和视觉元素）

3）关闭按钮的设计

2.2 弹窗的使用场景

2.2.1 信息通知

1）新的活动

2）产品信息/某个功能：位置、作用、操作等

信息告知实例：天猫

天猫超级品牌日活动的弹窗设计，提示促销信息。（凡是电商类的采用此都比较多，因为活动比较多）

信息告知实例：芒果tv、爱钱进、链家

芒果tv对于新上映影视剧采用弹窗强势宣传推广。

爱钱进是一个理财类app，需要不定期推出新活动、优惠红包让用户感知，促进用户购买理财产品。

链家也是通过弹窗不定期推出房地产相关活动及资讯。

2.2.2 信息确认、选择、修改

在不中断用户操作的前提下，提示弹出框。引导用户完成一些操作

信息操作实例：微信阅读、什么值得买、今日头条

微信阅读新下载用户进入APP后会看到一个弹窗，弹窗的目的主要是引导用户下载推荐电子书。

什么值得买当发现用户没有开启通知时，会提示用户开启通知，并且告知用户开启通知的优势和特权。

今日头条对没有开启通讯录同步的用户，会引导提示用户开启通讯录同步。

2.2.3 重要提醒

对用户有严重影响的重要提醒，必须用对话框。

重要提醒实例：流量提醒

用户设置了流量限制后，当用户超出流量后，以强势的弹窗方式提示用户流量超标。

重要提醒实例：支付宝付款

当用户要调用支付宝付款时，会弹窗弹窗，提示用户付款。

3 弹窗的设计方法

3.1 设计指南

首先看看IOS、Android的设计指南对对话框设计的建议。

IOS：

为不影响用户体验，应尽量减少Model窗出现的次数，但是在以下情况应考虑使用：

1）让用户高度注意时；

2）有必须录入的数据时

可以看到IOS总体是不建议或减少使用弹窗的。

Android：

对话框作为最高层次的控件存在，为整个设计体系的一个重要组成部分。

提出对话框对操作流程的打断降低了操作体验的问题，在设计过程中尽量减少对操作流程的打断。

可以看出，IOS和Android都不太建议弹窗，尽量减少弹窗，必要时才出现。

3.2 设计方法

1）弹窗一般都有重要操作，重要按钮在颜色上突出，突出显示可能造成用户损失的操作项（比如“删除”、“不保存”）

设计方法实例：微博、微信朋友圈

发微博是微博最重要的事情。发微博点击取消时，弹出弹窗向用户确认是否需要保存到草稿，避免因为用户的误操作而导致用户辛苦创造的内容清空。

同样，微信朋友圈编辑取消也会弹窗，向用户确认是否保留此次编辑。

2）弹出窗的说明、按钮上的文字，最好言简意赅、一目了然，能帮助用户快速做出决策。因为通常用户都想赶快关掉弹出框，以便接着完成打断的操作。

4 无弹窗的设计方法

错误反馈

类似登录注册的数据录入画面，格式错误或数据错误反馈提示，很显然可以用体验更好的方式替代。因为弹窗是强硬的，可能给用户不好的感受，采用无弹窗设计，更友好的方式。

进度条

根据IOS和Android的设计规范，建议不使用对话框。

进度条反例：滴滴出行

滴滴-设置-用户指南-顺风车页面，当网络环境不好时，采用的是正在加载的弹窗形式，感觉让用户进入了死胡同，机械化的。

小结

弹窗/对话框是一项独特的交互界面，本质上不是最好的体验，要合理使用对话框/弹窗。