弹窗设计常见的四种交互情况.docx
- 文档编号:27267773
- 上传时间:2023-06-28
- 格式:DOCX
- 页数:11
- 大小:1.51MB
弹窗设计常见的四种交互情况.docx
《弹窗设计常见的四种交互情况.docx》由会员分享,可在线阅读,更多相关《弹窗设计常见的四种交互情况.docx(11页珍藏版)》请在冰豆网上搜索。
弹窗设计常见的四种交互情况
弹窗设计常见的四种交互情况
弹窗经常在哪些情况下使用?
设计上需要注意什么?
弹窗,顾名思义,是指弹出的窗口,强调一个弹字。
无论是在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呢,一下子弹出来这个来打扰我,如果我当时心情不错,我可能会选择下次再说或者不再提示,但如果心情不好,我就好想进去给他个差评啊,但是进入APPStore又要连要一会儿,干脆就放弃了。
上图是豆果美食的评价弹框,在我注册的关键时刻给我一个评价弹框,就好像我去你家做客,我还没进门呢,你就问我这次招待的怎么样?
这个时间点把握的是非常不合理的。
关于提示评价的弹框,我觉设计师要注意两点:
1、在合适的时候给出提示评价的弹框、至少也要是用户使用了一段时间之后,避免在用户刚刚使用,或者正在注册的时候提示评价。
2、要给出下次再说或者不再提示的选项,如果强制性的让用户评价,即使用户想给好评,AppStore也不给力呀,要等那么久才能连接上,挑战用户耐心的结果可能是:
用户本来对APP还是有好感的,结果把对AppStore连接慢的差评一起给你。
通知类弹框
最常见的就是新闻推送了,例如腾讯新闻的通知弹框会把一些热点事件通知给你,你可以选择现在就看,也可以选择暂时不看,这类通知弹窗最重要的也是需要根据用户浏览新闻的习惯和爱好进行通知,有一句话特别形象,你爱的人吻你,那是爱情;你不爱的人吻你,那就是流氓。
还有插一句我对体育新闻真的没有兴趣,腾讯下次不要给我推了。
2、警告类的弹窗
网站杀毒软件检测到威胁的消息弹窗,一般都是被用户喜欢的,因为这些给用户提供了很多消息,帮助用户全面了解更多信息做正确的决策。
但是如果频繁出现威胁消息,也容易引发用户内心恐慌与不安。
度要把握好,同时形式也很重要。
3、引导性的弹窗
用户经常需要一些引导,比如在玩游戏的过程中,弹窗告诉你该怎么玩,这种引导在用户需要的时候适时出现,不但不会引起用户反感,还会帮助用户,提升用户好感度
引导性弹窗也常见于产品业务需要而出现,比如游戏中的注册,领取礼物、购买道具等,这是良性的运营推广和商业利益的获取,但是在什么环节,弹出什么功能,哪个时间点上适度出现是设计师需要考虑的。
用户并非都忽略弹窗或者看见付费就关闭,点开后能否继续吸引用户、帮助用户才是最重要的。
4、显示加载进程的弹窗
缓解了用户在等待过程中的焦虑感。
如果能加上生动有趣的动画,还能在加载的过程中提升用户好感度。
总结:
弹窗作为在页面中弹出来的框,自带打扰用户的属性,这个属性是一把双刃剑,如果设计师运用得当,在合适的时机弹出用户需要的弹窗,将会给产品带来良好的用户体验,即使是暗黑模式,也能降低用户的反感。
相信我们通过不断的深度思考,能在商业利益和用户体验上找到平衡点。
沁园春·雪
北国风光,千里冰封,万里雪飘。
望长城内外, 惟余莽莽; 大河上下, 顿失滔滔。
山舞银蛇,原驰蜡象,欲与天公试比高。
须晴日,看红装素裹, 分外妖娆。
江山如此多娇,引无数英雄竞折腰。
惜秦皇汉武, 略输文采; 唐宗宋祖, 稍逊风骚。
一代天骄, 成吉思汗, 只识弯弓射大雕。
俱往矣, 数风流人物,还看今朝。
出师表
两汉:
诸葛亮
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中府中,俱为一体;陟罚臧否,不宜异同。
若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理;不宜偏私,使内外异法也。
侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下:
愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。
将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰“能”,是以众议举宠为督:
愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。
亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。
先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。
侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之、信之,则汉室之隆,可计日而待也
。
臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
先帝知臣谨慎,故临崩寄臣以大事也。
受命以来,夙夜忧叹,恐托付不效,以伤先帝之明;故五月渡泸,深入不毛。
今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。
此臣所以报先帝而忠陛下之职分也。
至于斟酌损益,进尽忠言,则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。
若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。
臣不胜受恩感激。
今当远离,临表涕零,不知所言。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 设计 常见 交互 情况