弹窗常见的四种交互情况 / 木子杰软件教程

小编：作为一名UI设计师，细腻、善于观察和总结是必不可少的一些技能。作图时我们要精确到一像素，做到一丝不苟；闲暇时一定要去多多使用、观察别人的作品，然后需要总结别人是如何使用的并归为己用。我们要重视每一个环节、每一个细节。当你用心去看的时候，就会发现很多地方自己是之前没注意到的，也为之后避免犯错提供保障。今天就由@elainezhu来带我们看看弹窗都有哪些交互情况。

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

这段时间一直都在不定的赶需求，虽说实践出真知，但没有总结就没有成长，这两天终于停下来写点总结。

这次总结一下那些弹窗们。

上给出弹窗的定义是指打开网页的时候，自动弹出的窗口。这个说法是十分片面且不负责任的。

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

广告投放
用于系统提示、通知、警告类的消息弹窗。
用户引导
显示加载

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

1、广告投放

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

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

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

比如：

绝对不要声音。这点说一个弹窗之外的视频体验，相信大家都发现了，现在点开手机上的腾讯新闻，视频播放默认是关闭声音的。终于可以在上班时间偷看视频新闻不被发现啦！
关闭按钮位置明显，能迅速关闭。对广告里的产品有兴趣的用户自然会点开，没有兴趣的用户你强制进入只会增加用户的反感。
精准投放广告，让用户看到他想看到的。

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

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

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

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

提示确认弹框

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

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

确定button放在左边还是右边？
确认需要给出指示态hover吗？（将“确认”改变或填充颜色，突出“确认”这个操作来引导用户点击）
关闭icon是否必须

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

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

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

确定button放在左边还是右边？左边
确认需要给出指示态吗？（hove态）需要
关闭icon是否必须。通常要有，但如果必须要让用户阅读后做出选择，则可以没有。

当然，PC端的一些体验，到了移动端就有所不同了，由于界面以及手指触摸面积的限制，手指移动去点击关闭icon显然不如直接选择来的简单便捷。

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

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

因此在移动端的答案是：

确定button放在左边还是右边？区别不大，但在我看来，需要根据操作是否谨慎来定，比较谨慎的操作放在左侧来防止误操作，相对随意的操纵则放在右侧比较符合用户的心理模型
确认需要给出指示hover态吗？需要用户自己决定的操作，不需要给出指示。
关闭icon是否必须。不需要关闭icon

好评提示

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

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

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

在合适的时候给出提示评价的弹框、至少也要是用户使用了一段时间之后，避免在用户刚刚使用，或者正在注册的时候提示评价。
要给出下次再说或者不再提示的选项，如果强制性的让用户评价，即使用户想给好评，AppStore也不给力呀，要等那么久才能连接上，挑战用户耐心的结果可能是：用户本来对APP还是有好感的，结果把对AppStore连接慢的差评一起给你。

通知类弹框

最常见的就是新闻推送了，例如腾讯新闻的通知弹框会把一些热点事件通知给你，你可以选择现在就看，也可以选择暂时不看，这类通知弹窗最重要的也是需要根据用户浏览新闻的习惯和爱好进行通知，有一句话特别形象，你爱的人吻你，那是爱情；你不爱的人吻你，那就是流氓。还有插一句我对体育新闻真的没有兴趣，腾讯下次不要给我推了。