弹窗设计常见的四种交互情况

弹窗设计常见的四种交互情况

弹窗经常在哪些情况下使用？设计上需要注意什么？

弹窗，顾名思义，是指弹出的窗口，强调一个弹字。无论是在web端还是在移动端，弹窗都是一种十分常见的一种交互方式，经常被用于以下四种情况：

1、广告投放

2、用于系统提示、通知、警告类的消息弹窗。

3、用户引导

4、显示加载

接下来我们来逐个分析一下这四种情况：

1、广告投放

作为网站的最重要的盈利方式，广告弹窗被广泛使用，但恐怕也是大家最讨厌的一种广告形式了。相信大家都有过类似经历，在家里打开一个网页，你还没反应过来，里面就传出了奇怪的呻吟声或者是打斗的声音，如果父母正好也在，简直超级心虚好嘛，但明明我就是看篇小说而已！而且这些弹窗的暗黑模式要不要那么心机啊，我急急忙点击了关闭，为什么直接进入了，而且声音更大了，这个时候已经是尴尬癌晚期了…

这样的弹窗广告无疑是有悖于用户体验的，那为什么在如此重视用户体验的互联网氛围内，弹窗广告依旧坚挺呢？这就要看网站所属公司的盈利模式了，比如我大学时候很喜欢看小说，但学生嘛没钱，总会去看一些盗版小说，这些小说都是免费的，那网站靠什么盈利呢？就是广告投放，而且这些网站一般也没什么优秀设计师，所以广告们奔放外露，粗暴野蛮，毫不含蓄。这也是特定的环境造成的。

当然作为一个设计师，我们站在公司盈利的角度下，如何设计优雅的弹窗广告，在降低用户厌恶感的同时，提升广告效果，又为公司赚取利益，是我们应该思考的。

比如：

1、绝对不要声音。这点说一个弹窗之外的视频体验，相信大家都发现了，现在点开手机上的腾讯新闻，视频播放默认是关闭声音的。终于可以在上班时间偷看视频新闻不被发现啦！

2、关闭按钮位置明显，能迅速关闭。对广告里的产品有兴趣的用户自然会点开，没有兴趣的用户你强制进入只会增加用户的反感。

3、精准投放广告，让用户看到他想看到的。

如果你想要一种更有设计感的方式，那你可以参考一下知乎上了脚喵说的回答：

我觉得可以用“反向弹窗”，就是刚打开页面的半秒钟之内存在广告，且画面吸引人，在人看清楚之前就收缩到页面边缘变成类似书签的很薄的东西（收缩时最好有动感，比如加速运动等），感觉是被“吓跑”一样，留下干干净净的页面，并让人出于好奇主动用鼠标去点击（不是悬停）那些被收缩的小广告。虽然也是广告，但实际广告效果肯定比弹窗要好。

小结：广告弹窗作为网站盈利的重要模式，是无法杜绝的。设计师需要在商业利益和用户体验上寻找平衡。

2、用于系统提示、通知、警告类的消息弹窗（也称弹框）

提示确认弹框

提示确认弹框是在用户需要的时候呼出，也用来防止用户误操作。看似简单的提示弹框又有哪些需要注意的点呢？

上图是淘宝购物车中删除商品时的确认弹窗，元素很简单，文字+确认、取消button+关闭icon，文字部分主观性较强，就不做探讨了。我们主要针对确认、取消button和关闭icon来做三个方面的探讨：

1、确定button放在左边还是右边？

2、确认需要给出指示态hover吗？（将“确认”改变或填充颜色，突出“确认”这个操作来引导用户点击）

3、关闭icon是否必须

为了解开这三个问题，我们先来对比一下Mac和windoes的系统弹框

上图是UI中国删除评论时的提示确认弹框，一般这种情况纯属开发人员偷懒，直接调用了系统弹框。而对比Mac和windows的弹框，会发现有两个不同点，一是Mac的确认button 在右，而Windows的确认button在左，关于这一点，从用户习惯看来，设计师应该遵从用户比例高达95%的Windows系统习惯来设计，即将确认button放在左边。二是Mac提示框右上角没有关闭icon，这就不是不同平台上用户习惯不同的问题了，更关系到是否强制让用户做出选择。如果没有关闭icon，新手用户必须阅读文字之后再作出一个选择，但如果用户只是无意点开了呢，也必须让用户阅读后再做出选择吗？显然是违背用户体验的。

因此在PC端关于上面三个问题的探讨，答案是：

1.确定button放在左边还是右边？左边

2.确认需要给出指示态吗？（hove态）需要

3.关闭icon是否必须。通常要有，但如果必须要让用户阅读后做出选择，则可以没有。

当然，PC端的一些体验，到了移动端就有所不同了，由于界面以及手指触摸面积的限

制，手指移动去点击关闭icon显然不如直接选择来的简单便捷。

确认和取消的位置在移动端如果确认呢？看上图的例子，IOS系统中朋友圈中的删除是删除后不可恢复的，因此删除放在单手操作不那么容易触达的左边比较合适，而淘宝网删除订单是可以恢复的，因此确认放在右边比较合适。在我看来，虽然移动端普遍遵从IOS规范，但其实确认放在左边或者右边区别并不大，但每个设计师都可以有自己的规范。

而至于是否要有指示hover态，要根据情况来定了，如果是希望引导用户进入下一步操作的，比如希望用户点击确认，那么就将“确认”两个字改变颜色突出出来，以方便用户点击。但如果是希望用户自己选择，则不用给出指示hover态。

因此在移动端的答案是：

1、确定button放在左边还是右边？区别不大，但在我看来，需要根据操作是否谨慎来定，比较谨慎的操作放在左侧来防止误操作，相对随意的操纵则放在右侧比较符合用户的心理模型

2、确认需要给出指示hover态吗？需要用户自己决定的操作，不需要给出指示。

3、关闭icon是否必须。不需要关闭icon

有的APP进去之后就会弹出提示让你好评，可是我浏览页面正high呢，一下子弹出来这个来打扰我，如果我当时心情不错，我可能会选择下次再说或者不再提示，但如果心情不好，我就好想进去给他个差评啊，但是进入APP Store又要连要一会儿，干脆就放弃了。

上图是豆果美食的评价弹框，在我注册的关键时刻给我一个评价弹框，就好像我去你家做客，我还没进门呢，你就问我这次招待的怎么样？这个时间点把握的是非常不合理的。

关于提示评价的弹框，我觉设计师要注意两点：

1、在合适的时候给出提示评价的弹框、至少也要是用户使用了一段时间之后，避免在用户刚刚使用，或者正在注册的时候提示评价。

2、要给出下次再说或者不再提示的选项，如果强制性的让用户评价，即使用户想给好评，AppStore也不给力呀，要等那么久才能连接上，挑战用户耐心的结果可能是：用户本来对APP还是有好感的，结果把对AppStore连接慢的差评一起给你。