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

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