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

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

第一篇：弹窗设计常见的四种交互情况http:///弹窗设计常见的四种交互情况弹窗经常在哪些情况下使用？设计上需要注意什么？弹窗，顾名思义，是指弹出的窗口，强调一个弹字。无论是在web端还是在移动端，弹窗都是一种十分常见的一种交互方式，经常被用于以下四种情况：1、广告投放2、用于系统提示、通知、警告类的消息弹窗。3、用户引导4、显示加载接下来我们来逐个分析一下这四种情况：1、广告投放作为网站的最重要的盈利方式，广告弹窗被广泛使用，但恐怕也是大家最讨厌的一种广告形式了。相信大家都有过类似经历，在家里打开一个网页，你还没反应过来，里面就传出了奇怪的呻吟声或者是打斗的声音，如果父母正好也在，简直超级心虚好嘛，但明明我就是看篇小说而已！而且这些弹窗的暗黑模式要不要那么心机啊，我急急忙点击了关闭，为什么直接进入了，而且声音更大了，这个时候已经是尴尬癌晚期了„北京千锋互联科技有限公司版权所有http:///这样的弹窗广告无疑是有悖于用户体验的，那为什么在如此重视用户体验的互联网氛围内，弹窗广告依旧坚挺呢？这就要看网站所属公司的盈利模式了，比如我大学时候很喜欢看小说，但学生嘛没钱，总会去看一些盗版小说，这些小说都是免费的，那网站靠什么盈利呢？就是广告投放，而且这些网站一般也没什么优秀设计师，所以广告们奔放外露，粗暴野蛮，毫不含蓄。这也是特定的环境造成的。当然作为一个设计师，我们站在公司盈利的角度下，如何设计优雅的弹窗广告，在降低用户厌恶感的同时，提升广告效果，又为公司赚取利益，是我们应该思考的。比如：1、绝对不要声音。这点说一个弹窗之外的视频体验，相信大家都发现了，现在点开手机上的腾讯新闻，视频播放默认是关闭声音的。终于可以在上班时间偷看视频新闻不被发现啦！2、关闭按钮位置明显，能迅速关闭。对广告里的产品有兴趣的用户自然会点开，没有兴趣的用户你强制进入只会增加用户的反感。3、精准投放广告，让用户看到他想看到的。如果你想要一种更有设计感的方式，那你可以参考一下知乎上了脚喵说的回答：我觉得可以用“反向弹窗”，就是刚打开页面的半秒钟之内存在广告，且画面吸引人，在人看清楚之前就收缩到页面边缘变成类似书签的很薄的东西（收缩时最好有动感，比如加速运动等），感觉是被“吓跑”一样，留下干干净净的页面，并让人出于好奇主动用鼠标去点击（不是悬停）那些被收缩的小广告。虽然也是广告，但实际广告效果肯定比弹窗要好。小结：广告弹窗作为网站盈利的重要模式，是无法杜绝的。设计师需要在商业利益和用户体验上寻找平衡。2、用于系统提示、通知、警告类的消息弹窗（也称弹框）提示确认弹框提示确认弹框是在用户需要的时候呼出，也用来防止用户误操作。看似简单的提示弹框又有哪些需要注意的点呢？北京千锋互联科技有限公司版权所有http:///上图是淘宝购物车中删除商品时的确认弹窗，元素很简单，文字+确认、取消button+关闭icon，文字部分主观性较强，就不做探讨了。我们主要针对确认、取消button和关闭icon来做三个方面的探讨：1、确定button放在左边还是右边？2、确认需要给出指示态hover吗？（将“确认”改变或填充颜色，突出“确认”这个操作来引导用户点击）3、关闭icon是否必须为了解开这三个问题，我们先来对比一下Mac和windoes的系统弹框北京千锋互联科技有限公司版权所有http:///上图是UI中国删除评论时的提示确认弹框，一般这种情况纯属开发人员偷懒，直接调用了系统弹框。而对比Mac和windows的弹框，会发现有两个不同点，一是Mac的确认button在右，而Windows的确认button在左，关于这一点，从用户习惯看来，设计师应该遵从用户比例高达95%的Windows系统习惯来设计，即将确认button放在左边。二是Mac提示框右上角没有关闭icon，这就不是不同平台上用户习惯不同的问题了，更关系到是否强制让用户做出选择。如果没有关闭icon，新手用户必须阅读文字之后再作出一个选择，但如果用户只是无意点开了呢，也必须让用户阅读后再做出选择吗？显然是违背用户体验的。因此在PC端关于上面三个问题的探讨，答案是：1.确定button放在左边还是右边？左边2.确认需要给出指示态吗？（hove态）需要3.关闭icon是否必须。通常要有，但如果必须要让用户阅读后做出选择，则可以没有。当然，PC端的一些体验，到了移动端就有所不同了，由于界面以及手指触摸面积的限制，手指移动去点击关闭icon显然不如直接选择来的简单便捷。北京千锋互联科技有限公司版权所有http:///确认和取消的位置在移动端如果确认呢？看上图的例子，IOS系统中朋友圈中的删除是删除后不可恢复的，因此删除放在单手操作不那么容易触达的左边比较合适，而淘宝网删除订单是可以恢复的，因此确认放