用户研究

一个播放页,QQ音乐就设计了37个功能,11种分享方式,17种歌曲海报

纯纯

一个小小的播放页,虽然看上去那么的不起眼,但为了满足各类用户人群的特定需求,QQ音乐就设计了37个功能,11种分享方式...

你是否每天都在使用QQ音乐收听歌曲,但是你有没有观察到QQ音乐的播放页其实藏着很多功能。一个小小的播放页,虽然看上去那么的不起眼,仿佛它的功能只是用来切歌、看歌词和单曲循环,但随着QQ音乐社交化、娱乐化的发展,如今这个播放页已经成为了一个重要的聚合页入口。本期「设计大侦探」的「细节猎人」,为你解剖QQ音乐播放页的37个功能,11种分享方式以及17种歌曲海报。



一、歌曲
「歌曲」是播放页的默认分类,这个分类的功能比较多,所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置,满足各类用户需求,特别是音乐发烧友;「听歌场景」则是根据场景划分听歌需求,用户可以K歌、发起跟听,甚至邀请好友一起听,把听歌的行为社交娱乐化;「分享方式」则是利用腾讯强大的社交生态优势,为用户设计了丰富多样化的分享方式和个性化海报,吸引用户分享,传播,从而拉新引流。



1.1 个性化设置
1.1.1 银河音效
「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类,多达数十种,完美解决各类用户人群的需求。平台还推出独家定制音效,支持适配各类品牌耳机、音响和汽车,吸引用户购买VIP会员,激活变现。另外QQ音乐还推出一个「声音实验室」的栏目,包含了智能煲机(帮助耳机快速达到最佳状态)、4D震动和动感闪光,黑科技赋能,让音乐更有趣。



1.1.2 播放设置
「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能,包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能,可以满足某部分有特定音乐需求的用户。



1.1.3 播放器样式
平台为用户提供了多种播放器样式,包含了黑胶唱机(深、浅)、静态方形、旋转圆形、静态圆形、歌手写真等样式,还支持智能光效和音乐影片的播放背景,满足各类用户对播放器样式个性化设置的需求。



1.1.4 个性主题
「个性主题」为用户提供了丰富多样的主题装扮和头像挂件,包含明星、星座、影视、文艺等各种主题,当用户使用以后,整个QQ音乐的界面风格都会随之改变,这就像以前的QQ空间装扮,一键换肤,个性又时尚,深受年轻用户喜欢。「个性主题」作为为QQ会员独家专享打造的板块,是实现商业变现的重要手段。



1.1.5 收藏和屏蔽
当你喜欢某首歌曲的时候,你可以点击收藏,自动添加到你的默认歌单,这样对用户建立自己的歌单非常有帮助,从而提高用户留存率。而如果你不喜欢它的曲风,或者特别讨厌,你只需要点击屏蔽,平台在播放时会自动跳过,非常方便。



1.2 听歌场景
1.2.1 唱歌
「唱歌」是直接跳转到腾讯的另外一款音乐产品全民K歌,当用户听歌的时候突然想唱歌,那么可以直接进入全民K歌,有效降低用户的流失率,满足用户多场景的需求。



1.2.2 跟听
「跟听」是一个非常有趣的功能,用户进入跟听模式以后,可以邀请朋友加入自己的播放列表,也可以跟听其他用户的歌单。「跟听」为听歌增加了社交互动的属性,目前功能还比较简单,但让听歌的场景变得有趣、好玩。



1.2.3 一起听
「一起听」是一个社交互动式的听歌功能,用户可以邀请好友一起听歌。当朋友进入后,还支持发表情,就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样,平台还会为用户生成听歌记录,比如一起听歌的时间,听过的歌曲等,甚至还会生成一个心动等级,激发用户为了更高等级使用这个功能。



1.2.4 驾驶模式
「驾驶模式」非常简洁,系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景,提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台,省去了用户开车时候不方便换歌的痛点,用户体验非常友好。



1.2.5 评论
一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式,在评论里,可以找到这首歌很多感人的故事,引发共鸣,勾起回忆。用户进入评论后,除了可以看见其他用户的精彩评论,还可以进入歌手的扑通小组(类似贴吧),和其他歌迷一起交流,从而增加用户时间,提升用户留存率。



1.3 音乐工具


1.3.1 片段播放
「片段播放」提供按歌词选和按音轨选两种形式,用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用MP3或复读机收听歌曲那样,功能虽然简单,但可以满足某些特定场景使用。



1.3.2 倍速播放
用户可设置歌曲播放的倍速,支持0.5x到2.0x播放,这个功能在听书的时候特别实用,非常方便。



1.3.3 定时关闭
用户在音乐播放中可开启定时关闭功能,比如15分钟、60分钟等,这个功能在助眠的时候非常方便,当你慢慢睡着的时候,音乐也随之关闭。


1.3.4 设备投放
「设备投放」就是支持音乐投放到电视等其他电子设备,当一群朋友在家里为你过生日的时候,你可以把你的歌单直接投屏到电视,让大家一起陶醉在美好的音乐夜晚。



1.3.5 设置铃声
当你觉得某首歌曲特别好听,想把它设置为铃声的时候,你不用去应用市场搜寻其它工具,你只需要进入「设置铃声」,你可以自己截取喜欢的音乐片段,系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程,教程非常简单。其次QQ音乐还有一个铃声专区,里面提供了海量的铃声选择。



1.3.6 查看曲谱
查看曲谱是一个非常实用的功能,对于很多音乐爱好者来说,当在某个夜晚抱着吉他想弹奏某一首歌曲,你只需要打开「查看曲谱」,里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后,你还可进行自由编辑,比如编辑和弦、更改时值等。这种实用不起眼的小功能,对提升用户的满意度非常有帮助,可以抢夺用户时间,降低用户流失率。



1.4 分享方式
1.4.1 分享给好友
用户可以把歌曲分享给微信好友、QQ好友,还可以通过私信方式分享给QQ音乐好友。



1.4.2 设置听歌状态
利用腾讯强大的产品生态,用户还可以把听歌状态同步到微信和QQ,这不仅可以满足年轻用户个性化的追求,还能通过外部触发拉新引流。



1.4.3 分享到社区
用户可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博,吸引用户分享传播,拉新引流。



1.5 歌曲海报


1.5.1 音乐卡片
「音乐卡片」为用户提供了8种精美的风格,有复古怀旧的磁带、CD风格,有黑白胶唱机风格,还有专属的VIP会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去24小时收听人数等信息,目的是为了吸引更多的用户扫码听歌,其次VIP会员卡片还加入了QQ音乐豪华绿钻音乐卡片标识,彰显VIP会员地位。



1.5.2 歌词海报
在以前磁带、CD时代,抄歌词是广大音乐爱好者最美丽的回忆之一,「歌词海报」就是利用这样的分享场景,支持用户选择任意歌词,然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片,还支持用户自己上传,甚至还提供歌词字体选择,吸引用户主动分享。



1.5.3 高光视频
「高光视频」就是一段30秒的音频,提供了6个精美的模版,用户保存到手机后,可以短视频的形式分享到视频号、朋友圈等平台,和静态的海报不同,这样的传播形式更能引起其他用户的关注,从而拉新引流。



1.5.4 微信状态卡片
「微信状态卡片」为QQ音乐绿钻会员专享,为会员提供了多种精美的状态卡片,用户需要选择两行歌词,然后才能生成。这样个性化的设置同步到微信状态后,更能引起追求个性的年轻用户关注。



1.5.5 歌词视频
「歌词视频」相比高光视频,功能更丰富,首先不限制用户选择歌词数量,其次提供了风景、科幻、自然等不同主题的视频模版,而且还支持用户自己拍摄。用户还可以选择音乐播放的起点,添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台,传播拉新。



二、歌词


3.2.1 弹幕
听歌弹幕就像视频弹幕,用户可以边听歌边发弹幕聊天,这是一个年轻用户非常喜欢的功能,用巴甫洛夫效应来解释,这就是用户对源源不断弹出的弹幕充满了期待,从而增加了听歌乐趣,提升用户使用时间。



3.2.2 歌词动效
「歌词动效」为用户提供了多种个性化模版,满足年轻用户的各种个性化需求,其次也是实现商业变现的方式之一,用户需要开通SVIP才能享受更多精美的动效模版。



3.2.3 歌词设置
用户可以调整歌词的字体大小、简繁转换、调整进度,还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作,还提供了多种精美模版,吸引用户分享传播。



三、推荐
3.3.1 歌曲信息
用户可以查看歌曲详细信息,包括歌手、专辑、发布时间以及详细的制作详情。



3.3.2 音乐指数
「音乐指数」是一个非常创新的功能,QQ音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据,包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。



3.3.3 相关推荐
根据歌曲的曲风,平台会推荐相关歌曲,这有点像私人电台;其次平台还收录了歌曲的各种演绎版本,这真的非常方便,你可以轻松切换自己喜欢的版本;最后为用户推荐包含此歌曲的歌单、节目和视频,彻底抢占用户的时间。



四、总结
QQ音乐的播放页设计,可以说把腾讯系产品设计的风格发挥得淋漓尽致。为用户提供各种丰富多样的个性化设置和音乐工具,播放器样式、银河音效、个性主题、歌词动效、曲谱、铃声,只有你想不到的,没有QQ音乐无法提供的。然后当你想要享受更多特权,你就需要付费开通VIP,这简直就是腾讯系产品的杀手锏,准备了一千种方式和场景让你很自然的掏腰包。
其次把社交基因发挥到极致。跟听、一起听、弹幕这些都是为了活跃度最高、消费意愿最强的小情侣、小年轻用户准备的。也许有部分用户会质疑,我从来不使用这些功能,但作为一个月活超过2亿的平台型产品,QQ音乐拥有众多各年龄阶段的用户,这就像上期我们分享的《顺丰速运为用户准备了18种寄件方式》一样,看似多余复杂,但其实是为了满足各类用户人群的特定需求。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系

作者:廖尔摩斯  来源:站酷

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



UI必懂的5个心理学知识

纯纯

其实很简单,心理学目的是了解用户真实的想法,希望设计师在注重页面美感的同时也要注重用户的使用,做产品设计最终目的是为了给公司带来价值,给公司带来价值的前提是要给用户带来价值,这就需要我们去了解心理学当然不需要精通,每个心理学如果要去吃透他,需要耗费非常大的精力,对于设计带来的帮助不成正比,所以只需要了解各个心理学法则在产品中如何应用就OK了。

本次继续分享10个心理学的知识,将从心理学的背景定义、重点解析、设计运用、详细案例4个维度进行深度解析

阅读目录

1、峰终定律

简述定义:保证用户在使用流程中的高峰处和结尾处保持较高的愉悦体验

2、蔡加尼克效应

简述定义:用户对未完成的事情、被中断的事情记忆更加深刻

3、五架帽理论

简述定义:基础的信息组织原则,主要提升用户获取信息的效率

4、禀赋效应

简述定义:用户会更加珍惜已经获得的服务、物品等

5、干扰效应

用户同时思考两件事情以上时,思考效率和准确性会下降,做事情难以专注。

什么是峰终定律

用户在使用一个产品流程时的高峰体验和结尾体验。

用峰终法则提升用户在整个产品上或某个功能上的体验,需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析,并绘制出用户的情绪曲线,根据情绪的峰值节点和使用流程的结尾,这两个“关键时刻”,进行体验上的重点打造。

它是怎么产生的

2002年的诺贝尔经济学奖得主、美国心理学家丹尼尔•卡尼曼经过深入研究,发现人们对体验的记忆由两个因素决定,即高峰(无论是正向的还是负向 的)时与结束时的感觉,这就是“峰终定律”。关于峰终定律有这样一个实验:让两组人员听相同时间的强噪音,然后一组停下来,另一组接着再听一段时间的弱噪音,就实际遭遇来讲,后一组比前一组受了更多的折磨,但是听到更长时间噪音的后一组的痛苦指数却要比前一组低很多,原因就是对于两组人员来讲,结束时刻的噪音给他们留下的感受最为深刻,因而他们的痛苦指数主要是由噪音结束时的刺激程度所决定的。在另 外一种情况下,令两组人员听相同时间的噪音,其中一组的噪音强度较高,另 外一组的噪音强度较低,但是其中某一时刻听到了极其刺耳的超强度的噪音, 结果就是,后一组的痛苦指数要高于前一组,尽管就总体而言,后一组所听到 的噪音强度要低许多。

这体现的就是感受过程中的“高峰”一刻的决定作用。依照峰终定律,高峰和结束时的体验主宰了人们这段感受的性质和强弱的 程度,而跟感受的总的比重以及体验时间的长短无关。也就是说,如果在一段 体验的高峰和结尾,体验是愉悦的,那么对整个体验的感受就是愉悦的,即使 这次体验更多的是痛苦或不愉快的感受。

需要我们记住

用户根据体验的高峰和结束来判断产品体验是否好坏,并不是根据用户使用产品的每一个节点感受的平均值来判定,我们可以理解为结果比过程重要。

就像我们看电影时,一个电影2小时前1小时都枯燥无味,突然中间有5分钟让你的情绪上升,此时你可能觉得这个电影还行,至少让你达到了情绪高潮,当你继续观看时电影片段又变得枯燥无味,突然最后10分钟和结束时出现了电影彩蛋,并且这10分钟的内容特别符合你的胃口,这时候你就会出现一种“嗯,这个电影不错,结局挺好”这样的心理暗示,此时会发现接近100多分钟的枯燥内容都被你忽略掉了,或者你也记得但是你默认了电影90%的枯燥。

产品中该怎么用

强化峰值

一些app里在用户购买成功后,将已购商品以一种具有仪式感的收藏卡形式展示给用户,给用户惊喜的体验,在盲盒星球内购买盲盒成功后会弹出卡片,把用户获得感拉满,在网易云音乐直播间内如果是新手用户就会弹出新人见面礼,通过视觉的表现形式把氛围拉拉满,当然还有一种反向峰值,当有一些产品进行抽奖时,如果用户未中奖会弹出情感化弹窗,对用户进行安慰降低用户的挫败感。

上面讲的偏向于业务弹窗,还有一种是功能性弹窗, 当用户使用某个产品流程时,这个流程可能通过多个维度才能到达最终的节点,在最后用户完成操作时通过情感化弹窗进行提示,又或者在版本升级时需要引导用户进行更新,使用情感化的表现,能够将产品与用户产生情绪共鸣,增加趣味性,提升体验。

降低负面峰值

当用户使用产品去完成目标时,突然中间步骤出现网络波动、网络断开等不可抗拒的因素,此时在页面中添加一些情感化设计,会缓解用户焦虑情绪,甚至可以在空状态中添加动效来提升趣味性。

我是这么做的

近期在工作中做了一个直播项目,其中的一个功能就涉及到直播抽奖,因为产品奖品比例较多且轮数也多,用户的中奖几率也比较高,所以导致用户在中奖后基本就退出直播间,因此在做设计的过程中为了避免这个问题,我在中间弹窗上做了优化。

通过情感的中奖弹窗形式来强化用户的感知度,在直播过程中提升兴奋感,提升用户观看的直播的欲望。

最后一定是终值

在讲一个案例,去年我们做一个刷题功能的体验优化,用户在刷题场景下会面对几十道甚至上百道题目,整个过程非常漫长,并且旧版的功能交互上并没有展示总共还有多少题的这个提示,用户在刷题过程中会非常焦虑,为了解决这个问题,通过这三个手段改进,1)我在刷题过程中以进度条的形式去实时告知用户刷题进度,减少用户焦虑,2)用户在最后几题的场景中会添加鼓励话语,强化用户峰值,3)在结果页面为用户展示直观的数据变化,强化用户的满足感,同时激励用户进行持续性刷题。

总结

用户只记得使用过程中体验高的场景和结束时的场景。
无论是在交互还是视觉上我们都可以利用峰终定律帮助用户达到好的使用体验。

什么是蔡加尼克效应

蔡格尼克记忆效应(Zeigarnik effect;又称蔡加尼克效应、“契可尼效应”) 是一种记忆效应,指用户在完成一件事的过程中被打断,他会持续关注这件事,记忆更加深刻。


简单理解就是用户对没有完成的事更关注。

它是怎么产生的

该效应由苏联心理学家蔡加尼克在20世纪20年代提出,有一次她在酒馆用餐,遇到了一位记忆力过人的服务生,她不用笔记就能记住所有客人下单的菜肴,奇怪的是当菜肴上齐之后,蔡加尼克再次询问服务生,她竟然完全不记得菜单了,这就是由于她的工作完成之后,紧张状态消失,记忆水平随之下降了。

我们生活中也会遇到相似的场景,考试我们都经历过,在过程中某一道题没答上来,在答后后面的时候脑子里一直会想那道未填的题,而前面填过那么多题,我们却不容易记住。

看综艺大家经常都知道,看到关键节点的时刻总会有广告插入,但是我们又舍不得换台生怕广告结束,错过了什么关键内容,广告商其实就是摸透观众心理,让你又爱又恨的看广告。

生活中还有很多场景,像晚上刷抖音一直想着刷两条就赶紧睡觉,一抬头发现凌晨了...打游戏赢一把就不玩了,但当到了赢一把时一看时间过了好几个小时...小时候买方便面集里面的卡片....

小思考

为什么我们会对未完成的工作事项记忆深刻?

假如我们把事项分为三类:1)我们允许其正常完成,2)我们再完成的过程中打断,过一段时间在接着进行,3)在完成的过程中打断,并且不允许完成。

稍加思考其实会发现,正常完成任务后是没有任何心理负担,完成事项的过程中被打断,这时候人的心理的会时刻记忆这件未完成的事项,就像我现在写这篇文章,如果某个段落我没写完去做一些其他事情,我就会时刻想着我文章的小段还没有完成,那么假如我在写文章的过程中,被打断并且不允许我写后续的文章,我的注意力可能就会完全在写文章这件事,我要去想怎么才能继续写,或者怎么才能让我继续写,这恰恰验证了人们对于未完成且无法继续的事项心理负担是最重的。

产品中该怎么运用


连续不中断-引导持续完成

在一些教育产品或者签到产品中都会有一些进度型的提示,像下面“开言英语”的课程报名页面,在侧面添加了进度条,时刻告知用户当前进度,并且在进度末端提示未到达节点,对用户进行心理暗示,引导完成未来事项。

减少心理负担-任务流程明确

在新用户注册页面时很多产品会收集用户基本信息,通常会使用分段形式把信息分开,减轻用户心理负担,并且在完成任务时会给用户明确当前进度,同样在一些其他场景例如认证信息场景中,哪怕用户中途因为其他时间被打断,回来后也能够很快的定位到未完成事项。

心理暗示-日历添加任务

很多日历产品中会添加代办事项的功能,这个功能就很好的利用了《蔡加尼克效应》有些用户会通过在日历下面添加每天的计划以此来督促自己完成,如果某一天的事项发现没有完成就会有很重心理负担,哪怕到了第二天也会回过头来把错过的事项给完成,像我经常就会使用《滴答清单》来督促自己完成什么事情,如果有哪一天的事项没有在清单上打上勾,我可能好几天都在关注这件事。

我是这么做的


信息收集需求

前几个月的时候我在公司做了一个新用户注册登录的流程,在过程中我主要是负责UI和UX的工作,在这个过程中就使用到了蔡加尼克效应,当时接到的需求是公司战略目标扩张,需要在移动端更针对性的收集新用户信息以此进行内容推荐,提升用户留存。

转化设计目标

在得知业务目标是提升用户留存时,我就思考设计的发力点,通过倒推的方式去一步一步拆解,在这个需求场景内,用户留存取决于内容推荐是否准确,内容推荐准确度取决收集的用户信息是否准确和用户信息填写率,用户填写的准度度需要产品侧通过内容的方式进行发力,而如何让用户信息填写率增长则是设计目标。

发现问题

设计目标已经很明确了,那么如果去优化呢,当时我是先把旧版的问题给拆解出来。

1、交互上旧版把用户信息都堆积在一个页面上,并且对于业务目标上很多信息是无效的并且还在视觉核心位置,如用户头像、用户昵称等这些信息对于内容推荐没有任何作用。

2、视觉上没有核心聚焦区域,用户进来后会措手不及不知道从哪开始下手填写,并且按钮的样式也不够直观对用户造成不可点击的假象。

解决问题

首先从交互上开始优化,因为会新增很多信息填写内容,所以为了避免用户在同一个页面看到很多的表单,把交互流程拆解,按照业务维度把表单拆分成多个页面,在每个流程内给用户传达出这个填写是个简单的事情,从而避免用户从第一步就抗拒。

这里面还涉及到【沉没成本效应】当用户在填写第三步四步的时候会因为前面已经填写了那么多信息花费了时间并不想放弃,沉没成本前面几篇文章讲过设计心理学-5种用户体验法则,这里不详细讲了,其次就是【蔡加尼克效应】用户在每个页面看到当前进度的时候就会产生必须完成的暗示,然后这个心理暗示就会持续推动用户完成剩下的内容填写。

后期我们针对旧版和新版的优化做了可用性测试,结果上也非常正向,新版的步骤虽然被拉长了,但是每一个步骤都比较简单用户填写起来没有门槛,所以填写效率上大于旧版,详细过程之前有复盘过一篇文章感兴趣的可以了解一下注册登录可用性流程最后用户的信息填写率也是非常有效的提升。

上线之后数据也是正向增长,当然不止这一个场景才能用到蔡加尼克效应,比如像一些用户成本要求比较高的健身打卡、学习打卡等任务可以使用一些阶段奖励来激励用户持续完成。

什么是五架帽理论

五架帽理论简称为LATCH原则,它定义了在好的组织性信息才能提升用户体验,使设计更易于理解、灵活和可维护。

它是怎么产生的

LATCH的概念最初由Richard Saul Wurman在他的设计原则和设计模式中提到,后来在他的《信息架构》的书中重新定义了五架帽概念。

LATCH即是Location位置,Alphabet字母,Time时间,Category类别和Hierarchy视觉层级组成,这五种方式目标都是通过高效的信息呈现来提升用户体验。

产品中怎么用

Location位置

理论上讲的是通过位置来组织信息,其实比较好理解,我们可以理解为你本人所在位置是一个坐标点,所有的信息形成都是围绕你的坐标点来组成的。

例如地图软件中你的当前位置不断变换,手机屏幕中不断加载出新的地标建筑,在一些游戏场景,例如绝地求生,随着你的位置变换,不同的建筑环境、人、道具等都会随着在你周围出现,当一些信息组成对用户非常重视时则会优先出现,比如驾驶过程中当前位置不变,地图会优先加载道路信息,其次是建筑信息(网络波动的时候比较明显)。

并且随着VR/元宇宙等技术,基于位置变换组织信息已经是非常重要的一环。

总结:通过位置结合时间能够给用户展示高效率的信息

Time字母

与字面意思一样,按字母顺序排列信息,当数据量很大时,它是组织信息的最佳方法之一,在产品应用中常见的就是像通讯录、目录等能够快速的定位到信息,通过这种方式延伸出其他场景的排序方式,例如电商产品中的侧边分类,就是利用英文字母的逻辑把商品类别进行分类,在一种就是按照时间的维度进行信息分类。

Category类别

当信息具有相同性需要排序的时候,使用分类的方式能够最快的提升用户筛选效率,在我们生活我们每个人都有分类的习惯,如电脑桌上会放置一些小物件或电子设备相关的,衣柜里统一都放衣服每一层放不同季节的衣服,每当我们想使用到某件物品时第一时间就能定位到它的位置。

在产品中使用最多的是分类和导航,例如同样的鞋子可以用品牌分类,也可以按照季节分类或者性别分类......音乐可以用流行、摇滚、民谣等等分类......

类别是该理论中比较关键的一环,它定义事物按照分类的方式能够让用户快速的查找信息组织。

Hierarchy视觉层级

上面位置、字母、类别都是提高信息查找效率,视觉层级与字面意思相同,当我们满足基本的查找效率后可以使用不同的视觉层级来凸显重要性。

例如在产品设计中可以从颜色、大小等方式来满足我们想要的层级梯度,让产品/用户的核心价值快速的让用户察觉到。

总结

上面只是对每条规则单独拆出来解析,实际中它们是可以共存的,如位置结合时间能够让用户第一时间看到重要信息,类别结合字母就出现了我们看到的通讯录,类别结合视觉层级能够让分类更加重要等。

五架帽理论最终目的都是为了提升用户使用产品时的信息效率,它的五条设计规则也是在产品设计中的必须要遵守的,为什么说要遵守,因为设计中我们可以仔细回想下,基本上每一个页面的诞生都与这五条规则相关,一但违背,这个页面的可用性或者美观就会有所缺失。

什么是禀赋效应

当一个物品用户没有拥有时,对他的价值感相对较低,当用户拥有时会高估和珍惜物品的价值。

它是怎么产生的

心理学家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 对禀赋效应进行了实验,并在他们 1990 年的论文“禀赋效应和粗略定理的实验检验”中展示了这一概念这一现象可以用行为金融学中的“损失厌恶”理论来解释,该理论认为一定量的损失给人们带来的效用降低要多过相同的收益给人们带来的效用增加。因此人们在决策过程中对利害的权衡是不均衡的,对“避害”的考虑远大于对“趋利”的考虑。出于对损失的畏惧,人们在出卖商品时往往索要过高的价格。

比如我们过生日收到的礼物,在没有得到这件礼物之前,我们对他的价值或者吸引力往往没那么高,但是当这件礼物通过生日的形式送给你的时候,他就具有一定的意义并且这件礼物是属于你的,假如此时有人花市场价购买你的礼物,内心更多的想法是不舍得卖,因为这件礼物已经属于你了。

讲个自己真实的故事,我自己是对一些财富手串、事业手串等等相关的东西不感兴趣的,哪怕他很便宜我也不会去买,但是有一天女朋友从雍和宫帮我求来一个财富手串并且还是开过光的,以后我就每天带着这个手串形影不离,有一次放在某个地方找不到了,当时我就很焦虑,感觉自己损失了很大一笔钱,这个其实就是禀赋效应作祟,因为这件东西通过很特别的方式才到我手里,我已经认定这就是我的东西了,所以他对我的价值是极其高,哪怕我之前对这种手串不感兴趣。

产品中的应用

赋予更高的价值

最常见的产品设计场景中就是分享的场景,例如我们常见的一些分享都是底部弹出一些第三方链接方式,那么想一下这样的方式分享率极低,我们可以利用禀赋效应去强化产品的价值感,在学习产品中把学习数据融入分享页面中提升让用户感受到学习的价值增加分享欲望,在旅游产品中一般都会记录用户的旅游足迹,此时把用户经过的城市以地图的形式融入在分享页面中,激发用户的旅游价值,禀赋效应在分享产品中不止这些玩法,商品收货时、贵重物品分享时等等。

诱导禀赋效应

诱导即是向用户赠送免费的东西,通过这种方式提供免费试用服务或者是一些优惠礼包等,当得到免费服务或者优惠时由于禀赋效应用户可能会去进行付费或者深度使用,让用户感受到这是它自己的东西,对产品的价值感加倍。(但是我感觉这种方式效果提升不是很明显,但是确实可以利用这种心理去尝试可能会有意外收获。)

个性化价值

诱发禀赋效应的另一个重要因素是用户的主人翁意识,在一些产品中会有一些个性化的设置,用户可以根据自己的喜好去进行设置,这样可以让用户与产品产生价值联动,比如谷歌浏览器的背景和同步功能就是我一直使用的原因,虽然其他浏览器也有同样的功能,但是在互联网初期谷歌可是用这个功能吸引了不少用户,在比如app中常见的换肤、换色等功能。

反面效应

有正向的也就有反向的,反向指的就是厌恶效应,人们对自己所拥有的东西更加珍视,所以对于损失所表现出来的厌恶要比获取收益表现出的愉悦强烈得多,我们往往会对所损失的东西更为敏感,有心理学家实验过,股票下跌的损失要用双倍的涨幅才能挽回心理痛苦,在产品中常见的就是会员试用服务,当我们给用户7天或者30天的试用期后,时间一到大部分用户都会选择付费,因为他们默认这些服务已经拥有不愿损失。

总结

情绪和社会会影响一个人的决策,因此根据行为经济学,当我们了解这些因素时,我们可以构建设计来帮助用户做出可能的最佳决策,产品设计师可以通过使用价值赋能、个性化、免费试用等简单方法,利用这种效果来提高产品的留存率和渗透率。

什么是干扰效应

指的是用户同时思考两件事情以上时,思考效率和准确性会下降,做事情难以专注。

我们日常工作的时候,如果好几件待办事情同时需要处理,我们自己也是很难去说专注某一件事完成,做设计师的都知道,在设计时如果被别人打扰很容易打断设计思路,我们应该都经历过好不容易沉浸下来去做某个需求,忽然中间有个紧急的需求插过来让我们完成,当我们把紧急需求完成后,再去做被打断的需求发现思路被打断了,这就是《干扰效应》的影响。

为什么会产生干扰效应

人们在处理事情时大脑会给传递出目标信号,根据人的本能认知进行操作,处理收到的反馈信息,最后在反馈给大脑,当多个事情需要处理时,大脑需要同时传送不同的目标信号,身体的各项部位进行执行,这时候我们往往跟不上大脑信号,因为《想》和《做》是跟人能能力反应相关。

人们处理事情就像电脑运行软件一样,同时运行多个软件时,电脑的效率就会出现发烫、卡顿等问题,人处理多项事情时效率就会变慢,无法专注某一个事情。

产品中的应用

好看不好用

看下图中这两组金刚区图标,首先第一组的问题是虽然颜色很丰富,但是没有进行很好的分类,增加用户的思考时间,干扰性太大。

再看第二组金刚区图标,虽然很精致且有食欲,很符合外卖平台的调性,当然有好也会有坏,这么多复杂的图标同时出现,当用户目标很明确的时候,这么多的图标就形成了信息干扰,用户需要配合文字才能减少筛选效率。

下面这组某生鲜的金刚区也是同样的问题,虽然把商品实物图作为信息传达的元素,但商品过于复杂,在移动端屏幕上很难看到细节,这需要用户对商品的认知非常明确,例如一用户来卖水果,如果是第一次使用这个产品可能很难通过图标来找到入口。

避免干扰

我们看下面的美团首页,他的金刚区入口有15个,他们的处理方法在结构上是进行了层级区分,把重要切频率高的5个入口重点突出,使用频率较低的入口弱化,通过层级和减少复杂度避免用户出现迷惑行为。

个人中心是承载功能入口较多的页面,很多功能用户一般很少用到,每个用户的功能使用频率都根据用户习惯而定,在设计上个人中心常见的就是把功能按照维度分类,如设置类、功能类等便于用户查找。

还有一种像站酷这种列表布局也是比较效率的布局方式,这种布局方式按照用户的习惯,由上到下的顺序进行浏览,干净简洁的页面,某种程度是减少了干扰。

我是这么做的

先看一张对比图,简单讲下我是如何运用干扰效应进行设计。

这是去年我对我们产品的个人中心页进行改版,左边是旧版页面,旧版页面无论是视觉上还是交互上都不符合用户认知,在功能层面也是紊乱不够简洁,整个改版流程呢分为分析用户目标、问题梳理、针对优化、结果验证。

如何优化-用户目标

这里主要讲下如何针对用户目标进行优化,用户目标分两个维度,一是个人中心作为管理内容进行使用,二是通过个人中心查看投递简历的进度,其中投递简历对于产品价值是相对较高。

提一嘴当时的用户是技术类居多,大多是求职、学习目的。

如何优化-旧版问题

无论是视觉上还是交互上问题都是比较多,并且结构比较混乱,把一些用户不常用且对产品没有价值的功能点放置层级较高,过多的就不写了,总之都是问题。

如何优化-干扰效应

  • 结构优化:强化个人属性,头部添加用户等级展示,利用攀比心理刺激用户消费,其次将产品价值高的功能进行上调,对其他功能入口进行模块分类,提升筛选效率。
  • 视觉:视觉上重新定义,遵循app的风格进行设计,以简约干净为主(当时技术类用户居多)



作者:爱吃猫的鱼___   来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



B端设计中的筛选研究

纯纯

筛选可以说是我使用比较频繁的一种交互形式,比如我点外卖,会选择满减优惠力度大,同时我也可以选择在哪一个价格区间内的产品,这就会用到筛选,而到了B端产品上来,一个CRM系统当中,筛选的逻辑也会比移动端的复杂,伴随着:且关系、或关系、大于、小于等等这样复杂的逻辑,也为设计本身增加了很多难度。因此,今天我们就来讨论讨论筛选控件

 


1、筛选存在的意义


筛选存在的对于整个表单来说是非常重要的,它可以帮助用户,在表单茫茫多的数据当中进行快速的定位;可以对表单进行快速划分,缩短用户对于数据的寻找时间;能够满足用户在工作中,实际业务场景的筛选。

对于实际B端场景来说,筛选是日常数据分类的一个重要途径,我们先来看看实际场景到底有哪些?

 

用几个我们CRM用户日常使用的场景来说:

 

比如今天作为一个电话销售人员,想要联系最近注册的用户时,通常会通过筛选来选出最近几天注册过,同时又没有销售更进的客户,进行一个优先级的排布;

 

再比如说,在销售周报当中,销售主管可以通过筛选得到每个人这周完成的状态,也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等,这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用



筛选和搜索、导航的区别?

 

筛选可以通过多个筛选条件进行多维度的寻找,而导航、搜索只能通过单一条件进行指定筛选。

虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索,但本质上区别不大

所以在B端项目当中,如果你有表单,那你就需要筛选



2、筛选的类型


我们将筛选分为基础筛选和高级筛选两种,两种筛选会根据业务场景不同,在不同的页面去使用

 

2.1、基础筛选


基础筛选一般为系统预设好的筛选字段,具有很强的业务和场景的需求。基础筛选一般分为四个部分:


筛选条件:是指用户可以筛选的范围

筛选项:是指用户可以选择的筛选项目

已选项:是指用户已经选中的筛选项

备选项:是指用户还没有选择的筛选选项



基础筛选更多作为用户快捷筛选的一种方式,因为一般使用场景当中用户几个筛选逻辑为“且”

同时筛选的逻辑也为简单筛选,所以在使用场景上只适合在对筛选要求不高的场景下使用。


2.2、高级筛选


高级筛选一般为筛选中含有运算符,同时筛选当中包含条件关系,比如且关系或者否关系。一般高级筛选包含以下几类关键词

 

筛选关系:是指几个筛选条件之间的关系,一般为 且、或关系,即 且 关系为几个条件之间的交集;或 关系为几个条件之间的联集(并集)

筛选字段:是指在筛选当中,所要的筛选项,一般为表单当中的所有可筛选的字段

筛选操作:是指筛选字段和筛选值之间的关系,常见的筛选操作有:大于、小于、是、否、包含、不包含、为空、不为空等等。

筛选值:你所需要筛选的数值



高级筛选一般满足更多的用户场景,为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。




3、筛选的布局


3.1、上下布局


当在筛选器条件少于5个的情况下,最常使用的就是上下布局,这样筛选能与网站保持统一的情况下,上下布局也更方便用户进行阅读

 

当筛选器过多的情况下(一般在5-15个之间),筛选器过多,需要滚屏才能看到筛选结果,用户使用起来会很别扭。所以在5-15个的情况下,一般会将筛选项进行收折,这样保证筛选整体面积不会太大,同时将用户常用的筛选放在前面,可以满足用户基本的业务需求和使用场景



3.2、左右布局


左右布局在PC端一般是以字段选择进行筛选,通俗来讲就是将用户可以筛选的所有字段全部罗列出来,然后通过勾选选,择出你需要筛选的字段,进行筛选器的使用

 

左右布局的好处是能够将筛选的所有条件都直接的展示出来,可以适应很多场景,在筛选器用15个以上时。通过左右布局的方式,能够让筛选条件进行滚动,在最大限度保持用户使用体验




4、筛选的形式


在日常的B端产品中,筛选的形式有哪些?筛选到底应该怎么设计?接下来为大家总结梳理一些在 B端产品 中的筛选玩法,希望为你开启新大陆。


4.1、平铺型



平铺型一般为用户搜索结果数据量过大,使用户搜索出来的结果与其预期差距过大,用户然后可以通过筛选对数据的再一次分类,使用户能够精准寻找其想要的结果。

平铺型一般为筛选条件少于6个,这样能够通过1行或者2行去展示筛选项的结果

 

多用于信息量大的产品,比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式,将所有的筛选条件列出来。

 

平铺型的好处是将筛选项的结果全部或者部分放出,能够帮助用户快速理解筛选项以及快读找到自己想要的结果。

缺点也是很明显,平铺型的控件占比大,需要占据大量面积展示平铺出的筛选结果。

 

比如淘宝PC端,搜索一个产品后花去40%的面积去展示所有的筛选条件,其实就是想引导用户,淘宝搜索过后spu的数量仍然过大,想通过进一步的筛选,让用户明确自己对想要东西。同时因为面积占比大,通常平铺型都是以收折的状态,只有在搜索触发后才会完全展开


4.2、收折型



收折型筛选是一种简单直接的筛选形式,将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框,这种形式看上去很简单,但是在B端场景中,下拉框对于用户来说认知成本低,操作性也较强,同时在用户重度使用时,又能给用户很好的使用体验的一种方式

 

优点:

用户可以直接对其常用的字段筛选进行一步操作,并且没有复杂的筛选关系,全部都是“且”的筛选逻辑,能够保证用户进行快速的筛选选择

 

缺点:

将所有信息全部平铺展开,信息量过于冗杂繁多,同时在做通用性产品时,这种方式很难做到通用性


 

4.3、单侧筛选



单侧筛选是一种更通用的筛选形式,通过对于你想筛选的字段进行勾选,勾选完成后就会出现筛选条件,然后选择筛选字段、筛选操作、筛选值,一般选择完成所有筛选后,还需要点击查询,筛选操作才算完成。

 

整个单侧筛选,大量的筛选条件可以放置在表单的左侧或者右侧,通过表单纵向空间,去承载大量筛选条件。

 

优点:

节省空间、通用性强。因为在很多Saas系统、Paas系统当中,无法针对每一个客户进行设计,就要考虑到系统通用型高,做一些大而全的功能。在每个表单也所需要定制化修改的地方很少,同时能容纳的信息量可以很大。

 

缺点:

就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中,要通过不断寻找,来满足我的筛选需求,操作麻烦。

 

 

我们产品在某一次改版就将筛选由收折式修改为单侧式,因为我们用户使用筛选的场景非常的多,用户每次筛选都要多进行2、3步操作,导致用户进行了大量的吐槽,后来进行修改,将筛选顺序支持手动调整顺序,用户吐槽的次数才慢慢减少。



4.4、表头筛选

 


表头筛选是一种复杂筛选的形式,其最开始是来源于Excel的筛选形式。点击表单的筛选按钮,可以将表头的筛选字段直接带入,方便用户。之后在后台产品的发展中,得以借鉴过来。

 

优点:

可以通过表头的点击,使用户更快捷进入到自己的筛选条件,在通常情况下,在表单越左的数据显然是越重要的,也是使用筛选去筛频率最高的,因此高频的筛选场景基本还是得到满足。


缺点:

用户第一次进入系统很难理解这种交互形式,且在每个表头都会有一个icon,影响用户对于表头的识别。

 

 

4.5、弹窗式



通过点击筛选按钮,展现出筛选弹窗,进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd,在其中筛选不是很强的一个功能,同时也是系统中十分有必要的。

 

优点:

是能够在节省面积的情况下,可以进行很复杂的筛选,同时可以支持复杂情况下的筛选

 

缺点:

弹窗会遮挡一部分表单数据,会影响筛选人的判断,其次筛选条件的添加也相对更加繁琐。

 

 


5、选择更合适的筛选

在我们一系列筛选的调整过后,我们团队也总结了对于我们来说更重要的条件和形式,来和大家分享探讨一下。

 

5.1、使用频率

我们认为影响筛选控件最重要的是用户的使用频率,因为用户的使用频率和使用方式,直接影响到我们筛选是用普通筛选or高级筛选,也会影响到筛选的形式。

 

5.2、满足实际业务所需

筛选功能的做法,取决于我们产品未来是想往哪一个方向发展,如果想把功能做的强大,就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。

 

5.3、用户认知成本

在B端系统当中,最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点,但是用户对于这个点的认知成本实在过低,也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后,要适当引导用户,解释这个功能的使用场景才不会让你设计的功能被淹没。

 

作者:CE青年   来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 


B端组件设计红黑榜

纯纯

最近看到很多美妆博主都在出什么红黑榜,其实就是在说哪些产品是有问题,不推荐大家使用,有哪些东西是可以安利的好物。
想着B端设计当中,也会存在这一情况。然后我在打开 Ant Design ,浏览完所有的组件,你会发现:“组件当中也会存在红黑榜~”
今天就趁着 618 刚过的这个时间节点,我也来“带带货”,说说B端组件当中的红黑榜

首先我先说一下关于红黑榜的定义
1.使用频率高:也就是这个组件我们平时会频繁的使用
2.黑榜:在使用过程中,会遇到诸多问题,导致无法正常使用
3.红榜:往往会更满足B端产品的实际需求,对于组件有更深的认识

通过我的分享能够给大家有一个初步的认识,当然整个组件都是基于我平时的设计观察与使用,目的也是想和大家分享、避避坑,如果有什么疑惑,欢迎在评论区我们一起讨论~

树形选择

树形选择在B端系统当中的出现频率非常高,比如我们常见的:表格、表单、各类详情页,只要涉及到 层级结构的选择,都会有它的身影(注意,这里主要说的是树状的选择类组件)但是作为设计师,树形选择在使用的过程当中,会出现很多意想不到问题

尺寸无法确定

因为树形选择本身这个组件的特殊性,它的大小需要通过内容当中的高度与宽度共同决定,而在设计过程当中,高度与宽度究竟为多少就要仔细的考虑
因为在使用树形选择时,需要思考每一个内容的具体尺寸,太高太低都不行
如果太低,展开树形选择就会非常的麻烦;如果太高,则在数据量较少的时候,会给人数据很空
横向空间也是同理,也就造成了在设计时,需要深入思考

适用性太低

树形选择,作为基础组件,在应付复杂的选择需求时,很明显的会感到“力不从心”,无论是从它显示选中时的内容,还是大量的数据时的选择难度,树形在适用性上,都会大大降低,当遇到这类情况时,建议采取更多 “业务组件” 的方式来对选择进行优化

分类表单

分类表单(也可以叫Tab表单,不过只是代称而已~)在B端产品当中也非常常见,它出现在复杂的表单当中,但是作为设计师,在真正去使用分类表单时,你就会发现会有非常多的问题需要我们去处理

效率低

对于用户而言,分类表单不能够完整的查看表单信息,每一个都需要来回切换。也就意味着填写表单的时候,我们不能通过滚动查看所有数据,而是要去点击每一个单独的分类里面,通过分类了解具体的表单内容
同时必填项的提示,在分类表单也非常难以处理,因为其每一个独立,而作为用户,其实是不清楚具体哪一个分类里面有必填项,也会导致填写的效率过于低下(其实会有处理的办法,只是大家对于这类提醒都不太满意)

编辑模式不易处理

分类表单在编辑状态时,同样难以处理。当提交完分类表单后,我们还需要考虑数据在详情页里的展示形式,因为表单与详情页的映射关系,这时候在设计时,应该提供某一分类下的数据编辑,还是整个分类表单的数据编辑?
其实这种情况,特别是初级B端设计师,处理起来也是非常棘手

顶部导航

顶部导航非常特殊,虽然在我之前 导航菜单 的文章当中提到过,但在使用顶部导航的过程当中,还是会面临很多问题

顶部导航最大的局限性便是展示数量太低,毕竟在空间布局当中,横向空间与纵向空间的差异其实是非常大的,顶部导航的高度设定不能过高,同时 二级、三级菜单 只能够使用下拉菜单,也就导致在导航菜单的设计当中局限性过大,并且项目一旦发展过后,不容易解决问题
当然,顶部导航并不是一无是处,在许多工具型产品、官网 当中,顶部导航都有着它的一席之地,其实这类形式,更多是以内容为主的网站结构,才会采取顶部导航,也就是上下结构会更加合理

栅格

栅格严格意义上来讲不算是组建,但是由于很多设计师 误用、乱用,导致设计师为了栅格而栅格


因为在常见的移动端设计当中,是不存在栅格(主要是移动端横向空间小,使用不频繁)
在桌面端的设计当中,并不是说栅格不好,而是很多时候设计师使用栅格往往会非常盲目,举一个简单的例子,在表格当中是否需要使用栅格?


答案是:“不用使用栅格”,其实这类问题就是目前很多设计师的问题,因为会盲目使用,也就导致了我在做设计的过程当中,出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方,希望大家别盲目使用
至于栅格应该如何使用,在我之前的文章当中都有提到,可以自行点击历史记录查看

滑动输入条

滑动输入条在很多概念设计当中都会经常出现,特别是在 Dribbble 上的桌面端设计当中,是每一个设计师的标配,但是在实际的B端项目中,特别是桌面端的B端系统当中,滑动输入条是非常不合理的一个组件


因为B端产品当中,大多数的产品都是需要精准录入,并且数据的区间非常大,因此也就造成了滑动输入条,使用起来给用户的感受是非常糟糕的,并且由于大多数用户的预期还是以直接输入为主,这也就造成了现如今B端产品很见到滑动输入条的原因

面包屑

面包屑导航在实际工作当中经常使用,因为在常见的B端系统当中,导航菜单以及信息结构,一定是非常复杂的(除非你的系统里面就只有一级导航菜单,并且没有其他的页面层级逻辑)


因此通过面包屑导航,能够让我们清晰知道整个页面的信息结构,通过面包屑又因为其 小巧、灵活,无论你是在一个完整大页面当中,又或者是一个小的气泡卡片当中,面包屑都能进行承载,并且它还能够起到 返回 的作用,又能够清晰的展示页面的路径信息,是一个可以一举多得的组件

穿梭框

穿梭框相比大家的不会陌生,在设计B端产品的时候,或多或少都会有所涉及,与此同时,由于穿梭框本身复杂,再加上很多设计师会觉得它占比过大,因此不会去使用


今天安利穿梭框,其实是想安利这一类的穿梭类的组件,你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变,比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置,这些都是传统的数据选择过后一步一步演变而来,因此这类穿梭框型的数据选择
其实更加体现的是设计师基于目前的组件所进行的优化,而分析它为何这样做,这样做的原因,成为了穿梭框上榜的理由

折叠面板

折叠面板就像一个大的“盒子”,当产品经理在你的身后说着:“这个信息我要放,那个信息也不能落下的时候”,拖出一个折叠面板来解决这个问题


其实在折叠面板的使用过程中,主要是在详情页以及表格当中,因为折叠面板本身可以容纳很多信息,并且能够交代具体的层级关系,因此使用折叠面板能够有更多展示数据的可能性,即插即用,非常方便

气泡卡片

在页面当中的任何地方,蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中,经常使用的一个组件,因为它能够容纳下任意的内容,小到一串文字、大到一个视频,都能够在气泡卡片当中进行使用


并且在信息当中,气泡卡片作为一个信息补充的组件,因此在系统当中,需要展示但是又不是那么重要的信息,使用气泡卡片,就会更加的方便

锚点导航

最后一个,自然逃不掉我们的锚点导航。感觉在我的疯狂安利下,越来越多的产品都开始使用锚点导航。因为B端产品必定是复杂且多的信息,自然而然我们在使用的过程当中要更多考虑信息的承载

作者:CE青年   来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 


为什么要用卡片设计?好在哪,怎么做?

纯纯

今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。

 

undefined

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。


作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。


什么是卡片设计?


卡片是一个UI组件,包含了某一个内容的信息和操作。卡片可以包含各种元素,但它们都应该属于同一个主题。

undefined

这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)


为什么它会如此流行?


卡片之所以流行,是因为它们能更好的把控内容。卡片是模块化的,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。


卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。


卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。


卡片 UI 设计流行的原因还有很多:


  • 直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签。卡片代表了一种有益的视觉类比,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。


  • 易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。


  • 有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。


  • 有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。


  • 便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。



什么时候应用卡片设计?


这通常是当你有:

  • 基于搜索的界面:  卡片能通过模块的内容快速显示合适的内容,这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。


  • 信息浏览:当用户浏览信息时,卡片的兼容性更好。


  • 任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。


  • 类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。


  • 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。


卡片解构


卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。

undefined

(1)富媒体: 卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。


(2) 标题: 标题文本可以包含相册或文章的名称或标题。


(3) 描述: 支持文本,如文章摘要或简短的描述。


(4) 行动按钮: 卡片可以包含用于操作的按钮。


(5) 副标题: 副标题文本可以包含详细介绍,如文章的署名或标记的位置。


(6) 图标: 卡片可以包含操作图标。


设计技巧


有一些小的技巧可以快速提高卡片设计细节。


1. 使用相关主题的图片


图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。 

undefined


2. 增加视觉层次


卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要!) 

undefined


3. 限制内容长度


一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。 

undefined


4. 避免嵌入链接


不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。 

undefined


5. 区分操作主次


包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 

undefined


6. 去掉分割线


对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。

undefined


如何做到视觉上更美观?


APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:


1. 使用圆角


在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。 

undefined


2. 增加一个轻微的外边框或者投影


增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。


然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

undefined


3.注意字体和留白


重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。


选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。


一些优秀卡片设计的例子


让我们看看一些真实项目中的卡片设计案例:


信息流中的卡片设计


保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。 

undefined

由Diseno Constructivo和Webpixels设计


他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。


电商卡片设计


产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。 

undefined

由Webpixels设计


产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。


如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。


个人中心卡片设计


简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计


就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。


确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。


仪表盘卡片设计


仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

undefined

由Simmmple设计


仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。


只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。


日常计划卡片设计


看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。 

undefined

由Neelesh Chaudhary设计


卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。


卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。


总结


有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效,而不是简单地作为内容列表的现代替代品。

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


六个方法解决用户决策疲劳

分享达人

决策疲劳在现今互联网深度发展的时代似乎非常常见,面对眼花缭乱的APP页面,我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象,给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述,推荐对此感兴趣的伙伴阅读。


决策疲劳是用户体验圈一个路人皆知的词汇,用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明,它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题,是一件非公众都能做好的少数事件。

在产品设计中,我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务,能够越顺利、越直接。个人在特定时期内被要求做出的决定越多,即使这些决定是微不足道的(比如选择播放那个节目),他们的决策质量也会越低。

当你感到疲倦时,这会显著地影响你的决策能力,而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣,因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。

本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。

一、让用户少做选择

作为用户,每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝,降低我们的满意度,并可能导致我们对体验感到沮丧而不是变得更好。

当给用户太多选择时,他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能,但是当界面因为选择过多而过于复杂时,它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明,当我们有太多选择时,往往会导致决策失误和情绪沮丧。

六个方法解决用户决策疲劳

来自哈佛商业评论的模型

在追求最大化满足商业化可能的产品设计中,老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型,横轴为功能数量,三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化,公司能够根据他们想要的结果找到适合他们的功能数量最佳点。

研究表明,人们更有可能购买提供了有限数量的商品。在这种情况下,他们也会对自己的选择更满意,而不是从购买前的犹豫到购买后的忐忑,从而产生更大的满足感。

关键是很多产品为用户创造了太多的选择,这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品,而不是按照预期进行实际购买。

1. 扯淡的神奇数字7

在用户体验世界中,关于使用多少次点击以及人脑一次可以接收多少信息,存在许多相关的说法。但最重要的是,产品设计师需要在简单性和功能性之间取得平衡,这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。

最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。

这是个谬误,虽然我在某种程度上同意这种观点,因为坚持这样的限制似乎更自然,但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据,而不是早年的4.0英寸的小屏手机,用户可以轻松地一次看到他们的所有选项,并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。

同时现在也有一些研究表明,人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好,因为用户不必花时间深入查找相关信息。

比如主页上最多包含 几十个类别链接的淘宝列表)比仅提供有限选项(如没有子类别的类别)的网站更有用。但这里要强调的是需要考虑实际的用户场景,电商平台的属性导致了要为消费者提供更多的选择,而类似工具产品,尤其是垂直工具产品,在设计选项数量时一定要谨慎。

2. 击规则站不住脚

还有另一个站不住脚的理论:从业者普遍接受但完全不靠谱的“三击规则”,或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响,比方说付费流程,缺少必要的流程硬按点击次数把流程缩短,导致用户错误付费而产生的用户体验变差几乎是不可逆的。

3. 视觉布局用点心

比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论,信息线索的持续感知对你的用户体验很重要。

人们在日常生活中要做出很多选择,而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时,重要的是信息组织方式。

你可以去尝试减少选择的数量,但最重要的是你的信息结构。如果你的信息没有组织好,或者给到用户的决策过程中涉及的步骤过多,用户就不会费心去寻找他们想要的东西,因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。

为了在产品上让用户的决策中有更好的转化,我建议去掉任何不必要的东西,例如无关的标签和链接,这些标签和链接会分散用户的注意力,使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项,平衡简单性和功能性的关系。

二、允许用户后悔

现实中我们都会犯错。它可能发生在我们所有人身上!但是,如果用户犯了错误,优秀的产品设计师应该怎么做?

答案是:让用户轻松回到起点。

通过让用户走上正轨,你更有可能留住他们作为用户,而不是导致他们离开你的网站或应用程序。

下面是我在设计用户流程时的一些最佳实践:

  • 尽可能少制造意外情况;
  • 错误问题尽可能明晰,让用户更容易发现以修复它们并继续用户操作;
  • 在操作错误破坏用户体验之前通过提供保存数据选项来主动防止错误的数据输入;
  • 不要只是弹出一条覆盖整个页面的消息,而是向他们展示哪些字段是错误的;
  • 避免在你的消息中使用苛刻的措辞,因为文案可能会赶走甚至激怒某些用户。

三、视觉提示有助于导航

导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统,对用户体验至关重要。

导航的设计应该直观且易于使用。用户应该始终知道它在哪里,它的意义,以及点击它会去哪。

一个好方法是通过颜色为用户对操作区域进行导航:比如当进行切换、更改等动作时配备不同的颜色,并用文案清楚地说明每个菜单项下是什么功能。

这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。

  • 使扫描和阅读页面更容易;
  • 改善视觉层次;
  • 加强页面导航;
  • 重要位置的鲜艳颜色可以提高转化。

一个例子是 Instapage 登陆页面。如果标题没有箭头,很难看出下方有更多内容:

六个方法解决用户决策疲劳

四、利用习惯动作减少学习成本

在设计新界面时,必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么?

下面是三个常见的 设计惯例,这些惯例可以让你的用户在与产品内交互时感觉更熟悉,这有助于减少他们的学习成本,并让他们更快地开始学习你试图传达给他们的任何内容。

1. 颜色不要缭乱

简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引,因此如果你在整个界面中使用简洁的配色方案,人们会更容易找到自己想要的信息而不是被颜色乱神。

2. 把设计风格重复使用

不仅要遵循常见的用户体验规则,而且要在一个产品里不停的重复,不要轻易作新颖的尝试,前辈们大多已经帮你尝试过了。

这样的意义在于:

人们使用你的产品感觉更轻松,因为这个产品没什么复杂的新东西(降低了学习成本)。

一个例子是,目前无论你在那个浏览器查看哪个页面,你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知,因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。

3. 使用生活中的事物表示符号,比如用于删除文件的垃圾桶。

图标是在你在表示操作对象是什么的好方法,它们易于理解且具有普遍可识别性,因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。

图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。

五、别自嗨

我们都知道应该以用户为中心进行设计,而不是你自己,但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时,其实往往会按照自己的喜好走偏。

一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。

或者某些设计师会讲角色分类,然后全情单线程的专注一个项目,以牺牲时间和效率为代价确保航道的正向。

以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时,请确保在进行原型设计之前先和你的用户聊聊。

可以尝试提出以下问题:

  • “你最喜欢我们上一款产品的哪一点?”
  • “如果我们更改 x 功能,你会有何感受?”

往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。

你可以使用多种用户体验研究方法来确保你在设计时考虑到用户:

  1.  做一定的市场调查;
  2.  创建角色故事;
  3.  使用线框或原型快速获得反馈;
  4.  定期和客户服务团队交流。

六、简约至上

不要提供太多的选项或功能让用户不知所措。

每个产品都有自己为用户解决的核心问题,用户希望在产品中获得帮助并快速做出决定。问题是,很多产品经常沉迷于他们产品功能以及他可以为用户实现什么,忘记了如果有太多选项和功能,新用户可能会感到不知所措。

如果你负责一个产品,可以考虑你的用户在面临过多选择或功能时的感受,并尽量优先突出他们最需要的选项或功能。

例如,在电子商务网站中,用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质,如果预先只有三四个选择,可能会带来更好的体验。也可以考虑隐藏一些选项,方法是使用视觉提示,例如类似“探索更多”文字的按钮。

确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状,首先呈现基本信息,不太重要的信息尽量放在不显眼的地方或者想办法隐藏。

七、结论

这里提供了六种方法,帮助你减少产品中的决策疲劳,从而使用户更有可能走上正轨,解决他们的问题,并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考,才能更好的服务于用户


文章来源:人人都是产品经理   作者:公众号:真的不一定


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2022-可用性测试报告输出思路解析

分享达人

整个报告分两个部分,

一部分是调研概述,主要描述调研是如何进行的,包含:用户方法阐述,调研对象说明,用户画像等,简单清晰的告诉别人你数据是如何获取的,增加后期问题及数据阐述的科学性。(还有一部分,就是关于调研涉及人员,可以在合适的时机带一下是UED全员协作完成的整个过程的。)

另一部分是调研结论,我的描述思路是:总-分-总,先描述总结论,让观看报告的人对整体结论有个初步了解,然后详细描述各模块分结论,最后提出各模块共性问题。

结论部分是整个报告的重点,所以前面的概述就简单介绍清楚就好了,不需要占太多篇幅。

调研流程,确定标准,是汇报,也是邀功,调研本身就是个繁琐的过程,我们把过程直观的呈现出来,让老板知道我们整个调研过程,前前后后做了哪些准备。付出了哪些努力,体现工作量的同时,也能体现我们的专业性,但是不是记流水账,得有总结。

第一部分:调研概述

我把整个路程大体分了3个部分,第一个部分是调研前的准备,第二个部分是调研,第三个部分结果阐述。结果汇报,后期工作计划,汇报很重要,调研做得再好,你的结果无法呈现,问题就没办法结论,那就只会停留在发现结论。



评估纬度是为了阐述我们从哪些纬度去收集答案的,想要验证什么问题。



由于大部分人对调研都只是停留在问卷调查的层面,所以对样本量的选择有不理解,可用性测试主要是为了观察用户操作路径及反馈,所以样本量不需要太大,这个可以简单的解释下是如何挑选用户的。



数据整理也是汇报的一部分,一方面,材料佐证我们做过的努力和准备,另一方面,数据存档。

我们整个调研采用了录音与录音相结合,录音是为了便于后期多人协作帮忙整理问题,录屏是记录用户操作路径,收集用户使用过程中的卡顿,去挖掘卡顿原因,这是是我们做可用性测试的主要目的,这也是跟问卷调研最主要的差异。



在写报告的过程中,我一直在想关于整体满意度的结论,是放在第一部分还是第二部分,但是鉴于第二部分主要描述问题,所以思虑再三,还是把他放到了第一部分。

我们拿到各模块的数据后,要怎么用着很关键,单个零散的数据是体现不出问题的,只有对比着看才能看出问题。

通过数据对比我们明显能发现,付费用户对产品的整体要求要比增值服务的要求高得多,毕竟不要钱的,好不好用无所谓,好用我就用,不要用我就不用。但是如果是用户花钱了的,那他就需要考虑,我获取到的服务和花的钱是否成正比,这也就间接确定了我们后面问题处理的优先级。



第二部分:问题整体

这里建议做个中场页。

前面说过,问题描述采用的总-分-总的节奏,所以最开始描述了一下我们收集到的所有问题的概述,包含,总共多少个问题,已经分类类型的分类占比。



这里分享一个问题整理的表格,表格跟PPT的作用不一样,PPT是为了汇报成果,获取支持,表格是为了后续跟进落地,解决问题。

当然,先把问题整理出来也是为了更好的输出PPT。

共享文档可以让更多人清晰的看到问题,因为汇报的效果比较好,老板给了明确支持,所以汇报后我们将表格发给了各个产品,与设计师配合,认领问题,给出优先级和排期计划,整个过程推进的很顺利。



分结论部分,主要通过用户体验地图去描述用户路径,直观阐述用户使用过程中的情绪和痛点,右边整理出来了需要重点关注的一些点。



用户体验地图主要描述的是用户发现,不一定是问题,属于启发类,可以为后期优化方案的输出提供方向引导。

问题整理则是明确的已知问题描述。









各模块可以根据实际情况去描述各自的问题,这里就挑了几个典型的模块举例了一下,就不一一阐述了。

再来说一下,分结论讲完之后,整理的共性问题。先说问题,再说涉及的模块,体现问题的严重性。



到此,整个PPT就结束了,汇报完成后,老板就开始给各业务线下达任务了,就又回到了表格上,我们把之前的问题以界面纬度进行整理,跟产品确认优先级和排期计划,并与老板就排期计划进行了确认,然后责任到人,目前第一轮优化方案已经在陆续落地中,整个发现问题到推进落地的过程,还是比较顺利的,




来源:站酷
作者:北溟khalessi

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端设计:人人都能做用户研究

分享达人

客户与公司的商务售前进行沟通,客户的痛点和建议会传达给产品经理,产品需求明确后,做出原型图给到设计师。等设计师拿到需求的时候,基本已成定局,合不合理、如何优化的空间都会比较小了。造成这个现象的根本原因是设计师能看到的视角范围有限,B端业务场景本身比较专业,难以直接带入使用者的角色,就比较难取得大的突破了。

如何打破这一僵局呢?答案只有一个,那就是设计师要主动更前置的加入到产品方案设计中,深刻理解业务,为产品升级提供助力。这就涉及到用户研究了,本文将和大家分享用研的相关理论基础和方法。

       

undefined

        

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题和发现正确的解决方案。

双钻模型是一个结构化的设计方法,被很多设计师喜爱和使用。

  • 探索/调研——透析问题(发散)

  • 定义/合成——聚焦领域(集中)

  • 发展/构思——潜在问题(发散)

  • 传达/实现——实施方案(集中)


       

undefined


       


实际工作中用到双钻模型会有一些变体,举个例子:

下图是对阿里内部款移动运维产品的分析,分析其从0-1的方向探索和从1-1.5的发展历程:

       

       


下图是曾经在一个设计讲座中,滴滴CDX 一位设计师的分享,她把双钻模型利用到设计的研究和输出阶段,个人感觉此模型的使用场景也很贴切。

       

       


不仅仅是在完整的一个项目中,在单一的某个阶段双钻模型也是理念很好的承载容器。在每一个“确定”前后,都有用研的身影。


       

       

undefined

         

用研旨在通过实验和观察结合的研究方法来提高产品的可用性,指导产品的设计、开发和改进。重点是通过观察技术、任务分析和其他反馈方法来了解用户的行为、需求和动机。

       

undefined

       

             

在获取后台数据之后,我们会分析为什么留存、为什么流失、为什么买这个不买那个,

设计师认为很棒的新功能,真的是用户想要的吗?用户真的会用吗?

观察数据只是一种手段,而非结果。当一个页面中出现值很低的功能时,我们不能直接判断他就是不重要的,也可能是因为视觉上太弱或者交互操作不方便引起的。只有做用户研究才可以真正了解用户的行为背后的原因,真正的动机。

       

undefined

       


如上图,是一个红包发放页面的设计前后对比,从数据中了解到使用优惠券的用户不到30%,埋点发现大多都点击了返回,用户没有按照期望的路径走,调研发现操作路径不清晰,没有形成闭环。由此可见,发现问题时,先埋点细化问题——再分析问题——结合用户研究,提出优化方案,才能真正发现问题解决问题。


       undefined       


产品的发展周期分为产品概念期、设计开发期、宣传推广期、平稳发展期和产品衰退期五个阶段,在每个阶段都有相对应的用户研究测试可以做。

              


               

对应上文的产品发展周期可以做的用户测试,我们要找到相对应的人群:

       

undefined

       

最后就是将用户研究进行落地了,如何让用户研究达到预期的目的和效果呢?可以在开始前的准备阶段问问自己如下的问题:

       

       



接下来我们看看到实际落地环节,有哪些用户研究的类型可以做以及怎么去做。

               

桌面研究

桌面研究又叫“文案研究”,指不进行一手资料的实地研究和收集,而是通过电脑,杂志,书籍,文档,互联网搜索等现有二手资料进行分析和研究的方法。

       

       

完整的桌面研究分为以下五个步骤:

       

undefined

       

在需求细分阶段,可以用到SWOT 分析波特五力模型PEST分析波士顿矩阵等模型

       

undefined

       

收集数据通常可以从内部数据和外部数据来源广泛获取然后结合分析。

内部数据来源:市场营销数据、产品后台数据、其他相关报告等。

外部数据来源:政府部门、国际组织、行业协会、专门调研机构、联合服务公司、其他大众传播媒介、商会、银行等金融机构、官方和民间信息机构等。

      

       

       

undefined

       

               

定性研究

定性研究是指通过收集、分析和解释那些不能被数量化的信息,来挖掘问题、理解事件现象、分析人类行为与观点的方法,主要作用是探索“可能性”。

定性研究专注于更小但更集中的样本,通过非结构询问和观察来获得不能量化的信息。

流程如下:

       

undefined

       

常用的定性研究方法:

我们需要明白访谈适合哪一种项目研究,比如要针对新功能进行一次面访。

接下来我们需要进行用户的招募,因为面访比较耗费时间和精力,所以最好准备一些礼品,否则很难招募到用户。招募用户的渠道可以是产品中投放问卷、社群招募等方式来邀约难度用户。

用户访谈环境,准备一个安静的房间,准备好水、纸、笔、录像、录音笔等工具。

整理访谈内容,每访谈完一位用户进行一次小结。

   

           

接下来模拟一次用户访谈的整个流程:

开场:首先介绍一下自己的情况,并且让用户了解这次访谈的目的,建立一个轻松的谈话氛围。

探索:针对研究目的进行探索,比如目的是做用户体验地图,了解用户在使用过程中遇到的问题。

注意:如果直接问平时怎么使用我们的产品,用户会比较懵。这个时候最好给他一个确定的环境,比如你能不能演示一下你平时是怎么管理货源的,这个时候他就明白原来需要我进行这样一个任务。

观察:在用户回答提问和操作演示中,查看用户碰到了什么难题。比如有超过一半的用户多次点击一个按钮,说明这个按钮设计的大小不太合理。

思考:深层次挖掘。比如用户反馈字太小,但实际操作中并没有眯着眼或更靠近屏幕,可能原因一是他们本身就把手机屏幕文字调为最大,二是信息排布过于密集,效率低,并非因为字小。

         undefined       

定量研究

定量研究是指确定事物某方面量的科学研究,将问题与现象用数量来表示,进而分析和解释,从而获得意义的研究方法。定量研究的数据分析,主要作用是回答“多少”的问题。

定量研究的意义:

用一个数值来表示你产品的可用性。数值有时比质量检测的结果和视频更有说服力(特别是当你试图说服像高管或客户这样的人)时。

比较不同的设计(比如,你的产品的新旧版本,或者是你的产品与竞争对手的产品相比),并且确定你观察到的差异是否具有统计学意义,而不是随机的。

改进用户体验权衡决策。比如,如果预期的设计改进成本很高,那么它值得做吗?定量研究方法可以帮助你验证重新设计是否值得。

常用的定量研究方法包括:可用性研究、A/B Test、问卷调查和满意度调查。


       undefined

       

             

测试的重点是收集数据指标,比如任务时间或者成功率,一旦你收集了相对较大的样本量(大约35个或者更多),你就可以使用它们来跟踪产品的可用性,或者将其与竞争对手产品的可用性进行比较。





               

               

在A/B测试中,团队需要创建同一界面的两个不同的最新版本,然后将每个版本展示给不同的用户,用来确定哪个版本的性能更好。基于分析的实验,对于决定同一个设计的不同变体非常有用,并且可以结束团队关于哪个版本最好的争论。


               

              

问卷调查是一种灵活的用户研究工具,调研时可以同时获得定量和定性的数据,比如评分、多项选择题中的答案的比例,再加上开放式问题的答案。你甚至可以把对调查的定性回答转化为数字数据。

问卷的一个优点是:可以经常将你的调研结果与行业或竞争者的分数进行比较,看看你做得怎么样。即使你创建了自己的自定义问卷,也可以随时间的推移对自己产品平均分数进行追踪,来监控产品的改进情况。


               

      

可以根据你的研究问题进行定制,这些方法通常会首先让参与者接触到产品(通过向他们展示静态图片或者要求他们使用现场产品或原型)。然后,要求用户通过从描述性的词语列表中选择一个来描述当前设计。

如果你获取自身目标用户的样本量足够大,那么整体趋势就会显示出来。例如,你可能会有84%的受访者将此设计描述为"最新"。

   

           

明确调研目的

比如这次改版用户对新版本的满意度怎么样。只有确定了目标,你的问卷才是有价值的。

回收数量

因子分析法要求调查数量是调查问卷问题数量的5-10倍,因此,如果调查问卷中共有20个问题,那么调查样本数量可以大概确定为100~200个,有效回收样本30份即可。

问题顺序的基本原则

往前放:

  1. 熟悉的问题

  2. 简单的问题

  3. 引起兴趣的问题

往后放:

  1. 开放式的问题

  2. 个人背景资料

题目的设计技巧

简洁明确:

•你用了多久的Google map?(❌)

•你第一次使用Google map是什么时候?(✅)

这两个问题看似类似,但是当用户在思考的时候,第一个问题显然会思考更多的时间,用户很可能在想,是想知道我第一次用的时间,还是我用了多久的时间。


中立、无诱导性:

•你喜欢这个功能的设计吗?(❌)

•请您对这个功能的满意程度进行一个打分,最低1分最高5分?(✅)

避免使用带有引导性的问题,问用户是否喜欢、是否满意,这样通常用户都会偏向于回答喜欢。

设置选项时,要做到:

       

       


定量分析的结果多以数据、模式、图形等来表达。

       

       

前沿研究

•眼动追踪,英文Eye Tracking,是指通过测量眼睛的注视点的位置或者眼球相对头部的运动而实现对眼球运动的追踪。

眼动仪是一种能够跟踪测量眼球位置及眼球运动信息的一种设备,在视觉系统、心理学、认知语言学的研究中有广泛的应用。

               

常用分析

注视分析——分析注视轨迹、先后顺序与流畅度

注视热点图——分析最关注区域和忽视区域

兴趣区分析——分析平均注视时间与各兴趣区注视顺序

局限

通常需要辅助测试(如定性访谈)来收集更多实验数据

•脑电研究,大脑活动时,脑内亿万神经元活动引起头皮表面的电位变化,含有大量心里信息,测量脑电信号可绘制脑电图,以不同波形反映出来。


       

undefined

       


脑电的本质

利用生理探测技术,研究用户对产品的情绪反应

优势

相比传统调研,更加能够排除从众行为、事后回忆偏差、社会赞许效应等的干扰

       

undefined

文章来源:站酷   作者:爱吃炸鸡的SHS

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

想要引导用户行为转化,设计师必须深刻理解这 4 个认知心理学理论

分享达人

很多网站在短时间内就取得了巨大的进步 —— 那些过去十年里最知名的品牌网站,与第一次迭代相比发生了很大的变化,这令人感到无比惊讶。 


网站最初用于商业目的时,人们并没有过多地关注用户体验。过去的目的是将尽可能多的内容塞进一页里。现在,设计师们通过大量研究、数据挖掘和优化等方式来吸引用户的注意力,同时在正确的时间提供合适的内容、功能和选项。 


越来越多的公司正在采用先进的心理学研究,以推动用户参与更多的互动和付费项目,这一现象使得曾经被认为是一门艺术的东西转变成了一门科学。





1997 年的 Apple 网站




说服式设计


除了许多必要的元素之外,好的设计总是会考虑到用户的情感和心理需求。让我们来看看什么是「说服式设计」,并探索如何将影响人类行为的心理过程应用到设计中。


“说服” 这个词往往与操纵、欺骗相关联,尤其是对一个善于使用「互联网陷阱」的设计师来说。但是,我们要明确一点,说服式设计中的 “说服” 并不是这个意思。说服式设计可以使网站易于使用,从而改善用户体验。因为,说服式设计是源于对心理诱因、用户行为的理解和运用。


(互联网陷阱:兴于 2010 年,由当时英国用户体验咨询师 Harry·Brignull 首次提出,指的是网站或应用程序采用诱导性或胁迫性设计,迫使用户采取或不采取某种行动)


例如,亚马逊就很好的运用了说服式设计,它通过推荐其他产品和配件,以及展示 “查看过此商品的顾客也购买了某物品” 的选项,引导用户继续购买更多商品。为了快速完成销售,他们还为购物者提供了一键购买商品的功能。




亚马逊运用说服式设计的案例


我们都一直在花费大量时间上网,设计师可以利用从线下行为中学到的知识来创造更好的用户体验。无论你是想优化现有网站还是构建应用程序,说服式设计都将引导和支持用户的在线体验。


设计师要如何利用心理学的研究成果来增强其设计的影响力呢?


理解心理学原理可以让你对工作的基本原理有更透彻的理解。它可以:


  • 在缺乏用户研究的情况下,作为研究和论证的来源 
  • 帮助客户验证你的设计和推理

让我们来讨论一些心理学理论。




控制感


作为人类,我们天生就需要控制。这可以追溯到我们最本源的需求。在划分需求层次时,心理学家亚伯拉罕·马斯洛(Abraham Maslow)在提出需求层次时,将我们最基本的需求命名为:健康、食物和睡眠。所有这些都需要我们对环境进行一定程度的控制。




马斯洛需求层次


作为 UI 设计师,我们需要确保用户在我们为他们创建的环境中拥有积极的体验。这就意味着需要通过提供合适的工具来增强用户的能力,以帮助用户在产品的使用过程中获得控制感。


“今天,你可以调整屏幕的亮度,禁用通知,并可以决定手机是否应该同时连接蜂窝数据和 Wi-Fi …… 即使这些调整只会将手机的电池寿命延长几分钟,但这种可以掌控一切的成就感也会使用户感到温暖。” -- 用户体验顾问 Nadine Kintscher 


我们需要创建能够平衡功能和视觉吸引力的界面,并将掌控权提交给用户,以便他们有更满意的体验。


澳大利亚房地产搜索网站 Realestate 成功的做到了这一点,它让用户能够根据自己的偏好筛选所有房产,并让他们可以选择按不同的标准进行排序。





澳大利亚房地产搜索网站 https://www.realestate.com.au


动机、能力和诱因


我们该如何设计一种数字体验,才能使用户在适当的时候进行所需的行为?这需要了解一个简理论 -- 「福格行为模型」:一个人行为(Behavior)的发生需要满足至少三个条件,动机(Motivation),能力(ability)和诱因(trigger),用公式表示即 B = MAT,这三者必须同时具备,缺少任一条件都不会导致行为的发生。对于任何试图实践劝导心理学的人来说都是理想的选择。理论表明,一个行为得以发生,行为者首先需要有进行此行为的动机和操作此行为的能力,接着,如果他们有充足的动机和能力来实施既定行为,他们就会在被诱导时进行此行为,预期的行为就会发生。


(福格行为模型:由斯坦福大学「说服技术研究实验室」Persuasive Technology Lab 创始人 BJ Fogg 研究而来)


动机 -- 人们做出这一行为的原因是什么,做出这一行为的原始动因是什么; 


能力 -- 人们做出此行为需要满足什么能力,人们是否有条件来完成这个行动或者做这件事; 


触发 -- 是什么诱发用户会做出这个行为,什么因素会导致用户会完成这个。




福格行为模型(https://behaviormodel.org/)


尼尔·埃亚尔(Nir Eyal)和瑞安·胡佛(Ryan Hoover)合著的书籍《上瘾》中曾提到过 福格行为模型,揭示了很多让用户形成习惯,甚至“上瘾”的互联网产品服务背后的基本设计原理,告诉你怎样打造一款让用户欲罢不能的产品。作者根据自己多年的研究、咨询及实际经验,提出了新颖而实用的 「上瘾模型」(Hook Model),即通过四个方面来养成用户的使用习惯。通过连续的“上瘾循环”,让用户成为“回头客”,进而实现循环消费的终极目标,而不是依赖高昂的广告投入或泛滥粗暴的信息传播。




上瘾模型


一个很好的例子是 TurboTax,在《为心灵设计:劝导式设计的七个心理学原则》一书中讨论过。


即使交税不会使我们感到开心,我们仍有很强的动力来报税。然而,与其他所有国家一样,美国的税收制度过于复杂,难以理解。TurboTax 在书中提到,使用户能够通过询问基本问题更轻松地完成纳税,可以有效的提高用户的纳税能力。在 TurboTax 的设计中,他舍弃了冗长的文档,相反,创建了一个工作流,使用户可以进行简单的逐步操作。最终便捷的操作方式会成为诱因,使用户愿意尝试在线提交税款。




TurboTax 设计的报税系统


用户有充足的动机和能力,同时又具备诱因,三个要素完美结合的情况可能会让人感到过于理想或不自然。事实上,其中某一因素占比多也没关系。发微博就是一个很好的例子,没有什么重要事情的话,发微博的动机可能很低,大多都是浏览;但触发因素随时都可能出现,提醒你可以开始行动了,可能是一个转发抽奖的活动、可能是朋友正好生日;同时,发微博的操作非常便捷,用户具备能力随时都可以发布。


作为设计师,我们可以使用该理论来检查是否为用户建立了足够的动机和能力,并提供诱因来引发他们的行为。


  • 动机为某人提供了从事这项工作的理由 
  • 能力为某人提供了完成任务的机会 
  • 诱因存在于我们的环境或大脑中,并促使某人做某事

以上两种理论(控制感,以及 动机、能力和诱因)都需要进一步的研究,它们在设计界面时非常有用。


或者,有一些更简单的心理学理论,不需要较复杂的研究,即可用到你的设计中,比如 稀缺 和 害怕错过(FOMO -- Fear of Missing Out)的概念。




亚马逊在商品上增加 “只剩下 1 件存货” 强调库存不足,使用 FOMO 加强紧迫感






吸引注意力


几十年来,心理学家一直对人们保持注意力的能力不断下降而感到困扰。


眼动追踪已经存在一段时间了,它主要用于测量用户注视某一点的位置和持续时间。研究表明,互联网的平均注意力持续时间不到几秒钟,用户会立即做出有关网站的决定,如果不适合,就会离开。




数据驱动的设计(https://www.eyequant.com)


EyeQuant 将这一想法向前推进了一步,利用眼球追踪数据构建了一种预测算法。你无需自己进行眼动测试,而是将设计上传到他们的网站,他们会告诉你用户在使用你的网站时关注点在哪些地方。


他们找了德国的参与者,并利用这些参与者建立了一个庞大的数据库,该数据库包含了大量吸引用户注意力的内容和不吸引用户注意的内容。研究发现,高对比度色彩比较容易吸引用户,表情和粗体的文字也是如此。


眼动追踪软件可能很昂贵。取而代之的是,诸如 Sumo Heat Maps 的在线分析软件,可用于显示访问者单击的内容和位置,以及吸引最多注意力的内容。然而,请记住,虽然我们可能会抓住大脑的注意力,但我们也有可能会把用户从更重要的事情上拉走。


使用眼动追踪或热力图可以使设计人员立即获得有关其设计的客观反馈。作为设计师,它可以用作用户体验想法的验证,并为你的设计决策提供数据,允许你通过 A / B 测试来优化设计。




眼动追踪可获得用户行为的客观反馈




模仿欲


你是否曾经注意到人类天生会有模仿他人的欲望?一个人的欲望也会促成他人的欲望。这种理论是由勒内·吉拉德(Rene Girard)提出的,理论认为,如果某人表现出对某件物品的渴望,你也会渴望得到这件物品。广告商就是利用这一方式促成人们对某物的渴望,显然,广告成功的激发了人们更多的欲望。


你我都是模仿生物。Darren Bridger 的《神经设计》一书就探索了这一理论,研究发现我们有一个镜像神经元系统。换句话说,仅看到某人执行某项操作(例如捡起一件物品)就会使你的大脑反映出该活动。




模仿一词的英文解释


模仿欲理论意味着如果我们看到别人拥有某样东西,我们便也想拥有 —— 这一点可以用 「社会认同」(或从众心理)来解释。


一种社会认同是来自 “用户的认同”,就像是推荐。推荐之所以有效,是因为它们来自拥有共同愿望和价值观的人。例如,专门为企业家服务的媒体 Foundr 不仅使用用户的声音,而且还显示人脸,从而触发了镜像神经元系统。




Foundr 专门为企业家提供媒体服务


另一种社会认同是来自 “专家的认同”,即你的产品获得了专家的认可,例如你的产品被 Twitter 提及、新闻引用、甚至有大 V 专门为你的产品撰文。Google 在其最新的 Pixel 手机广告系列中使用了这种技巧,用 Google 自身的品牌影响力作为最强力的背书推荐这款手机。




仅仅强调这款手机是 Google 出品,无须多言




当今及未来的设计心理学


对于设计师来说,现在是一个令人激动的好时代 -- 有丰富的资源和研究可以支撑我们的工作。


设计趋势正在向体感,语音、虚拟现实(VR)、增强现实(AR)、混合现实(MR)和物联网(IoT)转变;随着这些交互技术的不断发展,人们需要以更直观的方式来使用界面。


我们将迎来许多新的设计机会,而心理学将在其中发挥着重要的作用。


下一个我们日常生活中与设备交互方式的重大转变,将从触屏变为使用脑电波交互。该技术已经可用,使人们能够通过思想直接控制其设备。


随着我们逐渐接近人们的真实想法,心理学在设计中的应用以及设计师的道德责任将发挥越来越重要的作用。


除了使用分析法、用户研究、用户体验地图和其他方法来帮助做出设计决策并迭代产品外,设计师还应考虑使用上述四种有说服力的设计方法来完善其 “技巧工具包”。


有说服力的设计并不邪恶。它是一种工具,并且像任何工具一样,它可能被滥用。然而,通过正确的研究和深思熟虑的应用,它可以成为任何设计师工具箱中的宝贵补充。

文章来源:站酷   作者:三分设

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

需求太碎?如何在小业务中提炼价值

分享达人

背景


在日常工作中,身为设计师的我们时常有这样的情形:身兼多个业务,但大部分的业务都是小业务,业务方给的需求也是七零八碎的小需求居多。面对该情况设计师有时会觉得没有一点挑战,限制自己对美好设计,给用户创造美好生活的想法,总想要去搞个大新闻。


不妨回头看看小业务,自己真的对它了解了么?这里提供一种视角,小业务也可以做大视野的事。通过一个小业务的案例改版,讲述如何从小项目中出发。


曾经负责过一个基础模块支持:设计详情。它是设计师用酷家乐设计工具设计方案产出的载体。该模块在之前有过改版迭代,迭代对业务目标(留存活跃)的提升并不理想。那从哪里入手呢?


方法流程
  1. 理清业务目标

  2. 挖掘用户需求场景

  3. 梳理产品功能

  4. 拆解设计目标

  5. 设计策略实施

  6. 验证迭代



一、理清小业务的业务目标


相对于大业务(例如网站改版),小业务因为简单,其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况,直接从梳理小业务具备哪些功能直接入手,分析下现状问题后开始制定设计策略,这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体,只是策略的表象。理清小业务所承担的业务目标是前提,那么如何理清呢?



理清业务目标

小业务目标来自大业务目标,对大业务的业务目标进行一级级向下拆解后,即可获得小业务对应的目标。目标拆解需要遵循MECE原则,拆解方法包含:二分法、过程法、要素法、公式法、矩阵法。(tips:目标的拆解有一定难度,)



Dapp设计详情为例,在酷家乐大增长业务背景下,用户活跃和用户留存为核心的目标,设计详情处于设计路径的一个节点,拆解得到设计详情的5个主要业务目标:

  • 设计详情-用户周活跃

  • 设计详情-新用户留存

  • 设计详情-老用户留存

  • 设计详情-内容投稿数

  • 设计详情-内容分享数



业务目标可分为2个类别:

  • 第一类别:符合用户意愿,如活跃、留存,在满足用户需求的情况下可以自然达成;

  • 第二类别:不符合用户意愿,如内容投稿、内容分享,用户不太会主动去完成,需要去创造动机,激励用户进行。



二、挖掘小业务关联的用户需求场景


有小业务的业务目标后,第二步就需要给用户提供价值满足用户需求,以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提,那如何获取用户需求场景呢?



1. 用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定,包含四个关键要素,其中需求本身最为核心,需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】,【某用户】做了【某事】来满足【某需求】”



用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组(1-3年、3-5年、5年以上),每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景



访谈信息整合如下





2. 规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的,碎片化场景对设计指导容易出现偏差,需要把场景结构化,为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整,按设计前、设计中、设计后三个阶段进行划分。



以上梳理了设计详情相关的用户需求场景,再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景,在设计师的整个设计流程中只占了一部分。从设计层面来看,该2个场景局限在方案设计大场景中,设计更多做的是对其方案设计操作的体验优化,在原有较好操作体验的现状下,其对给用户创造价值上没有很大增量。再从以上业务目标来看,2个单一场景很难去促使用户对内容进行分享和投稿。



三、梳理产品功能矩阵


在理清小业务的业务目标和需求场景后,下一步就是按照场景去梳理产品能力。


1. 小业务功能现状分析

老版app设计详情的功能进行初步的现状分析,设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看,多个场景无法实现,如营销、谈单;从业务目标来看,通过当前功能有较大的优化空间,如当前投稿很难让用户知道投稿有什么价值。




2. 产品能力梳理

分析现状发现功能不足以支撑用户需求场景,有获取功能2个方向:

  1. 挖掘现有能力:可以扩大梳理范围,从小业务所在的上一级业务到整个平台,一级级往上梳理场景对应的现有功能。

  2. 打造新能力:围绕场景,打造出新的功能



挖掘平台上现有能力,可对业务的能力价值最大化利用,与其他业务形成互通,实现1+1大于2的业务价值。亦可围绕场景打造新能力,可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵,从平台获取到了很多全新的能力,以及对原有的能力进行了能力拓展。




四、拆解每个场景的设计目标和策略


在梳理出产品能力后,需要通过设计策略把产品能力有效组织起来,让用户快速感知快速上手使用。设计策略推导自设计目标,那如何得到设计目标?


基于用户需求场景将行为事件拆分,提炼行为事件再推导出设计目标,再基于设计目标给出设计策略。



Dapp设计详情受制于移动端能力,只涉及设计详情中5个相关场景,其设计目标和设计策略的拆解结果如下



拆解出设计目标后,基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状?首先需要明确什么是问题,问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题,很多情况是默认假设了一个预设目标,但这目标得到不严谨、不全面,容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出,其最终都来自设计目标。



对老版Dapp设计详情现状进行了分析,得到了问题




五、设计策略的落地


在上一步得到设计策略后,围绕着设计策略是设计方案。本段将不全部展开说明,只选3个关键点讲述设计方案的思考


1. 设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多,设计三步思考:

第一步:简化功能认知,对功能结构化,以场景的维度重组织功能,并以场景打造功能集合的认知,建立场景能力区;

第二步:梳理场景共同涉及的内容,作为联系的载体承载场景的放置,设计详情中展示态的方案涉及到了5个场景中的4个场景

第三步:提取场景中即时性和高优先级功能,打造快捷功能区

框架如下



建立框架后,填充具体的能力和内容。如场景入口放置于底部,并根据场景优先级做了主次的区分。


设计详情框架建立后,打造细分场景中的设计


2. 营销获客场景设计

营销场景的设计,将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类,就可以清晰去梳理出现有的功能,以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后,再传达各渠道提供的价值激励用户去触发行为。




3. 谈单场景设计

谈单场景关键在方案详情上,谈单面对不同情况,存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容:图文方案、全屋漫游、渲染图册。在方案详情中,头部承载了全屋漫游、图册,如图文方案过于繁琐可直接点击全屋漫游图进行讲解,亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航,可快速切换到需要讲解的地方。




六、上线验证


上线后数据平稳后观测,设计详情的周活提升了89%,每个场景下的功能数据都得到显著的提升(tips:有部分数据因技术原因没有采集到)。除了改版了Dapp侧的设计详情,后续对PCweb侧的设计详情进行迭代,同样起到不错的结果。数据的结果验证了方法的可行,并起到了积极的效果。




最后的思考小结


以上是我应用这套设计方法去做了块小业务优化,反向推动进入产品迭代,上线后取得了不错的成绩。在本次赋能后,对小业务中多了一些感悟

  • 小业务是大业务的缩影,可以作为去赋能大业务前沿验证的实验田,大概率可以快速验证自己的想法,即使方向错了因为小业务改动影响面也小

  • 因知识广度和深度的限制,不是所有设计师都可以一开始就可以把控大业务,小业务可作为打磨设计深度专业度,一些小业务的复杂度并不低于大业务

  • 该设计方法同样适用于大业务,但方法是死的,不是所有情况都套用,得需要把握重点灵活应用

  • 不要总想着搞个大新闻,在能力未被业务方认可时,小业务的赋能可以成为一个很好的发声口

  • 不要轻视小业务,有可能是你根本还不了解

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档