首页

设计师,如何高效完成竞品分析!

高劲

在工作中,我们经常会去做竞品分析,那么如何才能快速聚焦做好竞品分析?目前也发现有些同学不知道怎么做,有的甚至直接照着网上的框架机械地往里套,结果分析出来的结果不知所云,做了很多无用功。

做竞品分析最重要的一点,要清楚你的目标是什么?需要基于目标去切入分析。而且分析过程切忌大而全,越是细小聚焦的分析价值越大。


正好,最近有些设计师私下问我关于竞品分析的事情,因此写一篇文章,把我的想法与大家分享,下面开始。




1.什么时候开始竞品分析

竞品分析其实一般在任何时候都可以进行,做足市场竞品研究,可以有效帮助我们理解竞品,发现可以使我们产品脱颖而出的机会,同时也可以减少竞品对我们的直接影响。

那么启动竞品分析的几个关键时间节点,新项目启动、项目改版、竞品有重大更新时,这三个阶段去做竞品分析,是相对不错的时间点。



2.竞品分析方法

竞品分析方法有很多,在这里,我分享大家能快速掌握并上手使用的方法。通过以四个步骤,我们可以初步完成一份竞品分析文档。下面我们来看看每个维度如何进行?

(1)寻找合适竞品

挑选竞品是非常关键的第一步,一般需要根据自家产品定位,选择垂直TOP级别的产品几个不同用户群体产品就可以,不需要把所有的都拿来分析。但是除了这个方向,我们还需留意一些潜力较好的产品,比如产品口碑较好、用户下载量增长快,这也是值得我们研究的一个竞品。

挑选完竞品后,我们需要将竞争产品进行分级,比如一级竞争对手,二级竞争对手,细分市场竞争者。因为不同等级,意味着我们花时间会有所不同。最直接竞争产品,当然需要去深入研究。

如果不知道你这个领域那些产品做得好,这里推荐大家一个产品查询的工具Sensortower,可以去看看排名。

(2)定义分析维度


我一直秉承的一个观点,也是在之前一个大师哪里学到,竞争分析切忌大而全的分析,因为越是大范围分析,越是无法分析透彻,从而价值感就会越低。我们在分析时候,需要定义一组关键的维度。


比如,这次竞品分析,只看某个重点功能的内容布局设计趋势,那么我接下来的研究分析中,都只围绕这个主题进行。


(3)将竞品进行比较


针对这一步,需要深入挖掘产品核心亮点,要去思考为什么这款产品是这样的设计?同时将优缺点都说明清楚。这里比较推荐的一种方法就是截图进行对比,快速有效。
比如以音乐软件的搜索入口为例,站在用户视角看,这个产品核心功能是怎么布局的?体验亮点怎么设计吸引用户的?视觉质感呈现如何打造?主流表现技法?需要将每个竞品的做法优劣截图对比,并将优缺点写出来。

同时还可以进入到更深层级,比如,搜索不到情感化如何处理的?搜索过程中加载表现方式等?当然,这些差异化打造,还可以看看其他行业做得较好的产品。


(4)得出关键结论


关键结论,就是将前面分析的重要要点进行整合筛选,得出最终的产品参考策略,后续可根据这份分析策略可作为产品设计参考点。


这里需要注意的是,竞争分析得出结论,是给我们学习别人如何把用户体验做到极致的?关注竞品如何解决用户体验问题的?品牌穿透如何做?我们完全可以充分利用这些打造自己的产品优势。


文章来源:公众号   作者:功夫UX

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

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

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



体验设计师的成本思维

鹤鹤

为什么设计师要有成本思维,以及成本思维在做我们做设计时对我们有什么帮助。



不仅仅在工作中我们需要思考成本,在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩,所以贝克尔在《人类行为的经济学分析》中提到:人的任何行为都是理性选择的结果,无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人,但是大多数人就是如此。



在夜深人静的夜晚你饥肠辘辘想吃夜宵,你可以选择下楼到周边小吃店就餐,也可以选择叫外卖,前者付出的成本是你需要通过身体行动来交换最后的结果,后者则是花费一定的金钱来代替前者的行动。


那么我们通常会如何选择呢?如果这两种成本有很大的差异,比如需要到很遥远的地方那么除了身体行动成本外,时间成本也会计算其中,所以相比后者成本陡然增大,于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵,外卖点餐会特别影响口感,那么你可能会选择前者,这里由于外卖口感和主观意愿影响到了我们理性的选择。‘



1.为什么要关注成本


成本决定了收益的效率、大小和方式,小到你伸手拿一支笔你会选择最近的,大到我们人生的投资。成本与收益之间并非是直接关系,收益的大小的不取决于成本的大小,还有风险因素。例如我们在对UI界面进行优化,可以选择的方式有很多:


1.只调整视觉,替换样式

2.对页面逻辑进行重构

3.整体功能进行重新分类组合

......


我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同,我们都希望付出最小的成本达到最好的效果,于是我们就会考虑到风险因素,假如新流程用户不会用怎么办,假如新版本导致的数据下滑怎么办,假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。



你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间,提供更好的环境与服务,让他们产出更多的价值。还有假如你的车坏了,你最直接的方法就是花钱找人帮你修而不是自学自修,因为你将花费太高的成本。


再举一个例子,我们想提升能力,有的人选择自学、白嫖,有的人选择报培训班,这也只是时间和金钱上的成本选择,如果你的自学(白嫖)在短时间收益很大那就毫无疑问帮你省了一大笔钱,但是如果自学很久都毫无效果,那么时间就是你花费的成本,时间和金钱不同的是,时间不可逆。看起来花钱比花时间更好?不是,花钱也有风险,比如课程质量和服务很差,钱没了还学不到,甚至赔上了时间。但如果你选对了,那么收益就远远会大于自学。




2.设计师可以关注哪些成本


1.实现成本


实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗,例如我们希望提升用户下单的转化率,我们可以选择:1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围,在这几个方案中最低成本是2,因为只需要调整样式和简单开发就可以实现,但收益并不是最高的,而其他的方案需要更多的角色花费更多的时间来参与,但是收益也不是显而易见的。所以如果你的产品比较成熟,那么我们一定选择成本更低的方案,反之我们会进行更高成本的尝试。



还有比如我们找工作,新公司福利待遇比现在公司好50%,平台也更大,是否不需要思考直接去呢?当然不是,你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时,不仅仅是时间精力,还有我们的身体健康的成本,我会觉得远远不值,成本太高。




2.机会成本


我们先来看一下定义:机会成本是指面临多方案抉择时,被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子,比如当前版本我们有1个开发一个设计一个产品,我们面临着两个需求,但是资源和时间只够我们做一个需求,这时候2选1,那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本,相当于我们放弃了那个需求所拥有的价值。


再通俗一点讲,我现在有100万,面临着两个选择:1.银行理财,年收益4%,4000. 2.做生意投资,年收益8%,8000,那么就相当于我花费了这4w的潜在成本获得了8万的收益。



3.边际成本


边际成本的理解很简单,我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲,比如你一共学习10天,第一天学完你考了30分,第二天学完你考了50分……第8天学完你考了94分,第9天学完你考了98分第10天学完你考了100分,花费的单位天数一样但是每次增加的分数却越来越少,收益也就越来越少。



在做产品设计的时候,我们往往会有一个板块叫为你推荐,比如微信阅读中的这个板块,它一次提供了用户6本书,虽然算法可以算出有许多书,但是这里每次只提供给用户6本,是因为涉及到了边际成本,少量多次提供能够让用户更聚焦,更快的选择好书本进行阅读,每多提供几本书,用户选择阅读的时间成本就会越大。有同学会问:那我只给1本不就好了,用户就能马上读了,何必要推荐6本?



我们如何保证那一本刚好是用户想读的,没有办法做到如此精准,如果每次只推荐一本书,而用户尝试了几次都不喜欢,他们就会放弃,所以这里就会选择一个临界值,比如我们可以选择每次放不同数量的书,根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。




4.体验成本

体验成本也是我们设计师需要时刻关注的,俞军老师在产品方法论中提到,用户价值=新体验-旧体验-替换成本,体验成本可以包含很多信息,最主要的就是认知与交互的成本。


4.1认知成本

如何降低认知成本可以从以下这些点进行优化


4.1.1.文案

文案的设计要求是简单易懂,避免产生歧义,之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析,大家可以再思考一下,是否会产生歧义。还有确定、确认大家是否知道怎么用呢?


文案也需要有情感化,避免生硬、带负面情绪的问题等等


4.1.2.样式

视觉最为直观,一个按钮一个控件的样式是否能满足用户的心智和预期,将会影响用户的认知,例如以下的几个按钮,出现在不同场景用户会出现一系列问题:为什么我点了没用?为什么还不能点?我到底该点哪里?



还有你的品牌是否识别度高,也决定了用户对你的认知,最近小米花了百万请大师做了新的logo,在视觉上更加圆润,在圆logo的基础上做了很多的微调,实际上也是避免了太大的logo变化导致品牌认知成本的提高,认知成本一旦太高,品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。



4.1.3.信息

比如我们希望新用户去关注一些大咖、kol获得更好的推荐,但是如果我们只是将推荐者的头像和昵称给新用户,那么这个策略就是失败的。因为我们没有考虑新用户的认知:1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。




4.2.行为成本

我们通过利用肢体来和媒介进行交互,目的是完成某项任务。其实只需要你抬手,那么就是产生了成本,只不过某些成本是固定的无法减少的,比如你要去骑车那就需要去解锁,如果没有锁车可能就会被偷走,这是出于安全考虑。


行为成本在具体数字产品中我们可以发现很多,例如你只需要将手机拿起,屏幕就会亮,相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私,所以还需要通过指纹或者人脸进行识别。


例如几种不同的验证方式,利用滑动拼图来解锁和输入相关验证码解锁,前者比后者的学习成本和操作成本都低。


在移动端我总结了几个减少交互成本的方法,不妨来看下:



1.利用滑动代替点击


soul音频处理

日期选择

iPhone底部横条切换窗口




2.利用点击代替输入

游戏昵称随机

股票买入数量



这里也有同学会问,既然都可以代替,那滑动能否代替输入?必须也是可以的,例如iOS自带的计时器中选择时间的控制器,还有闹钟设置,这里要注意的是,滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的,比如房价筛选,房价本身量级很大,用户筛选也不会精确到个位数,在这里用点击和输入会比滑动的成本更低。


反例就是音量、明暗控制,大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入,需要大致的范围选点击,非常模糊的感受选择滑动。



3.在必要时利用语音代替输入

例如我们在开车进行导航的时候,打字输入非常不便,于是加入了语音输入。还有在微信进行账号切换时,我们可以选择利用语音输入数字来验证身份。



4.给予详细的提示

对于新用户操作复杂功能和界面的时候,提供更多提示能够很大程度上减少用户的操作成本。



5.尽量不使用二级手势

在iOS或者安卓的手势控制中,我们会发现又一些常用的手势比如:点击、拖动、轻扫、双击、缩放,这里我们可以定义为一级手势。还有一些不常用的比如:重按、长按、三指滑动、三指缩放等,这些手势的认知成本和行为成本都很高,定义为二级手势,不建议频繁使用。




总结

设计师在日常工作中接到的需求繁多,无论是在做需求之前还是在思考设计方案的时候,成本思维可以帮助我们很好的规避一些问题和风险,我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。

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

文章来源:站酷 作者:应骏
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


为何深色模式看起来不自然?

鹤鹤

在过去的几年中,深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景,iOS和Android也都在2019年布局了系统级的深色模式,深色模式可获得出色的视觉体验,尤其是在弱光环境中……有助于你专注地开展工作,因为内容会较为显眼,而颜色加深的控制项和窗口则会隐入背景之中。但真是这样吗,或者只是一种实际上弊大于利的操作? 


文章内容:


1、什么是深色模式

2、从可用性角度看深色模式

3、为什么深色模式看起来不自然

4、从设计角度看深色模式

5、结论


什么是深色模式?


虽然各种软件界面的色调和颜色会有所不同,但是对深色模式的处理方式都是在深色背景上显示明亮文本和界面元素的配色方案。相比之下,在浅色背景上显示深色文本和界面元素的配色方案,在这里我们称之为浅色模式。


而事实上,深色模式比浅色模式早了几十年。在其最初的阶段,深色模式并不是一种有意的解决方案,而仅仅是当时计算显示设备是阴极射线管(CRT),且只能显示单色的显示,屏幕看上去就是黑的,黑底白字或者黑底绿字就是计算机行业的早期状态。直到1980年代彩色显示器发明后,微软视窗系统上线之后,黑底显示才退出主流。苹果在1984年推出“麦金塔”个人电脑,第一次发布采用图形用户界面,由此开启了计算机屏幕白底显示的主流之路。


           

          

 ibm 5151单色监视器


浅色模式出现的确切时间很难确定,但可以追溯到施乐Parc图形用户界面,它也极大地影响了早期苹果的“麦金塔”和其他操作系统,该界面使用了以白色背景为主的深色文本和界面元素。它与显示技术的进步和现代图形用户界面的出现密切相关。这种能够显示色彩的且更先进的RGB CRT显示器拉开了浅色模式的序幕。


                      

1973年的施乐Alto是最早使用轻型接口模式的计算机之一


从可用性角度看深色模式


深色模式的实用性有多少,每个人看法也不一样。尽管深色模式的界面可能不像浅色模式那样观感清晰,但深色模式的界面却具有一定的魅力,可以让你联想到新颖,高端,精致,神秘,力量,奢华这些词。但是,黑色也是一种会引起人们强烈的情感一个颜色,并且在过度使用时很容易使人无法承受。


2019年9月,苹果公司上线深色模式(Dark Model)时,在官网上如是宣传道。从iPhone到Mac,当库克决定在苹果公司几乎所有产品上线深色模式、甚至要求所有在AppStore上架的应用都必须兼容深色模式时,安卓阵营的谷歌、华为、三星等头部公司也纷纷在其最新手机中推出了深色模式,相应地从WhatsApp到微信等全球主流的应用也都推出了深色模式。



            


但是,想要获得良好的深色模式是相对比较难的。一方面,深色模式迫使放大瞳孔来捕获必要的视觉信息,从而导致整体清晰度的降低。而同时界面中高亮的部分又迫使我们的瞳孔缩小去适应亮度,以便提高清晰度。这也就能理解为什么白色背景上的黑色文本在你的眼睛中通常会显得更清晰的原因。


             

扩大的瞳孔让光线更多,但感觉到的锐度受到损害



行业对深色模式追逐的群羊效应,也进一步加剧、放大了一个见解:深色模式对眼睛更友好更健康!


但是,事实并非如此。对于一些有散光的人来说,在某种程度上深色模式对他们的眼睛来说更糟糕,深色模式比浅色模式更友好更健康的科学仍有待讨论。斯坦福·拜尔斯眼科研究所的眼科专家对此表示:“鉴于文献中的数据,我认为深色模式对眼睛没有任何的友好和健康。” 这种深色模式对眼睛疲劳和潜在的眼睛健康的影响时,使用时间可能比设备的亮度或亮度更重要。


根据美国验光协会的说法称,大多数人的眼睛在某种程度上都患有散光,但通常不会引起注意。据美国眼科学院统计,每三个美国人中就一个存在散光的情况,1.5亿美国人需要佩戴眼镜来矫正视力;香港理工大学针对2700多人的临床检测发现,在21岁的30岁的香港人中,近40%以上患有100度以上散光。


一起看下面的说明性图像。即使你有完美的视觉,你也很可能在黑色背景上看到白色文字周围的光晕。



            

浅色模式与深色模式


如果增加文字并降低文字的大小,这种效果可能会更强:


             


右边的图像你应该会看到更多的光晕,如果你有散光症状,深色模式可能会让你看屏幕更费劲。在深色模式下,虹膜打开以接收更多的光,并且瞳孔的变形在眼睛上产生了更加模糊的焦点,因此,当你在深色屏幕上看到浅色文本时,其边缘似乎渗入黑色背景,也就是所谓的“光晕效果”。虽然深色模式可能更适合夜晚等弱光环境下使用,但不一定能帮助更好地阅读,对于散光患者来说,可能还会加剧视疲劳。


当然,从实用性上讲,深色模式也有它的好处,深色模式利用OLED屏幕在纯黑的背景下不发光的特性,确实能有效的省电,让你的电子设备续航上提升很大,这也是很多人一直在追求深色模式的一个重要原因,只要手机续航强比啥都重要!这也可能是苹果公司决定在几乎所有产品上线深色模式的一个原因。


另外深色模式更有利于给用户营造一种沉浸体验,对于视觉娱乐应用尤为如此。当你想突出显示特定类型的内容时,深色模式会特别有用。豆瓣、数字尾巴、网易云音乐是我常用的几个软件,它们都已经适配了深色模式。在这种模式下你的目光会更加注意到电影的海报、数码产品和充满活力的音乐专辑上。



             

豆瓣、数字尾巴、网易云音乐的深色模式


为什么深色模式看起来不自然


一是由于我们人脑的组织结构造成的,从多年来的多项科学研究和调查得出的结论是,从物种进化来看,人类99%的时间都是在白天中活动,人脑更倾向于在浅的背景上显示深色的图像。所以无论白天还是黑夜,浅色的背景都可以让你更快地专注于显示的元素,而深色的背景则使其难以辨别文字和视觉界面元素,从而影响你的阅读效果并最终使你的眼睛疲劳。 其实从世界各地多个洞穴中发现的史前壁画也能说明为什么我们倾向于喜欢浅色模式。



            

追逐猎物的狮子,法国Chauvet Cave,约公元前30,000-28,000


德国帕绍大学曾经做过一次测试。在该研究要求参与者阅读屏幕上的正极性(白色背景上的黑色文本)或负极性(黑色背景上的白色文本)的文本。随后,参与测试的人员会执行基本的校对任务,例如查找拼写或语法错误。研究人员还测量了每种模式下参与者的阅读速度。结果是所有参与者在正极性条件下的表现都会更好,他们检查出更多的错误以及阅读的速度更快。


                       

可读性差异


另一个学习发现正极性对于在显示器上读取小文本特别有利。人脑具有更快的可读性,更喜欢在光线背景下显示的深色文本和物体。


二是由于含有大量蓝光的光源会使我们眼睛不舒服,当我们谈论屏幕对眼睛的潜在破坏性影响时,我们通常是在谈论“蓝光”,这是由短、高能量波长构成的光谱的一部分。研究发现蓝光可能是导致眼睛疲劳的一个因素,但指出长时间不眨眼的干眼也是导致眼睛疲劳的一个更严重的原因,当然也有是因为字体太小,以及散光这样的原因。


当我们身处暗室或是在黄昏或夜晚时,眼睛会切换成不同的视觉模式;在弱光环境下,人眼会从对绿色敏感变成对高能量蓝光敏感,这代表我们在大量的接收蓝光,因此对刺眼强光的敏感度会增强。这类情形对驾驶人而言并不陌生,当他们被来车车头灯的强光照射时,特别是使用现代化氙气灯或LED头灯的车辆,可能会暂时丧失视力。


           

平板电脑、智能手机和其他电子显示屏,不仅改变了我们所接触的光谱,也使我们的视觉行为发生转变。我们必须意识到,我们现在用于“近距离”视物的时间比以往多得多,这通常是因为背景亮度太暗所致。


在德国光学公司蔡司官方网站上,对于蓝光也作一分为二的评价:“好处是当外界环境变亮也就是蓝光较多时,身体便释放出血清素—它是其中一种快乐荷尔蒙以及皮质醇—这是一种压力荷尔蒙。这两种荷尔蒙能让我们保持清醒,富有活力,同时也应用于冬季抑郁和失眠的治疗中。但过多的紫外光和蓝紫光可能会对肉眼造成损伤,除了可能导致令人难受的结膜和角膜发炎,也可能会破坏眼睛的晶状体(例如白内障),尤其是伤害我们的视网膜(黄斑病变)。”


从设计角度看深色模式


在WWDC 2019大会上,苹果宣布了iOS13的深色模式功能,在令人兴奋之余,作为设计师和开发人员,我们应该考虑的该如何去实现它。苹果和安卓已经发布了为应用程序设计深色模式的设计指南。当然,没有硬性规定要求遵循他们提供的设计指南,这些只是指导原则。


             

由于Material Design设计语言的原因,投影的占比是非常大的。在浅色模式下还好,但这不太适用于深色模式,因为深色背景上的黑色阴影在视觉上不容易察觉,为此安卓还提供了在深色模式下不同层级的卡片与投影上的参考。


            

根据设计文档来看,iOS背景为纯黑色,色值为#000000,Google 则更喜欢深灰色,色值为#121212。


            

通过提供的设计指南,我们可以轻易上手来设计和开发我们的软件,但要注意的是深色模式并不是简单的与浅色模式颜色对调,必须为所有的元素进行单独配色。


            

浅色模式下的白色不会在深色模式下转换成纯黑色


这样也就能理解为什么很多软件并没有全部去适配新的深色模式,一方面使用场景决定的,另一方面就是深色模式并不是简单地换个换个颜色就行,很多元素需要重新设计和开发。


结论:该选择哪种模式


在去年的 WWDC 大会上,苹果人机交互团队的设计师曾对 macOS 的深色模式使用场景做了进一步的解释。

他指出,只有阅读浏览或是内容创作型 App 才需要长期启用深色模式,比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中,其它大部分软件对于深色模式的需求反而并不强烈。


或则你可以通过使用场景去选择,在明亮的环境中使用浅色模式,在昏暗的环境中使用深色模式。



            

但是在大多数情况下,真正帮助你避免眼睛疲劳的是不要整天盯着屏幕,而不是纠结到底用深色还是浅色模式。

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

文章来源:站酷 作者:罗小盒
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


Web表单设计——你不知道的冷知识

鹤鹤

当我们设计Web表单时,往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题,但每每到细微之处,又会有无数疑问从细节中冒出来给我们的设计造成困扰。

例如:在表单界面Label(标签) 和 Input(输入框) 上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等......

以上这类问题看起来并不影响用户完成任务,很久以来也少有人关心这些细微之处会不会对用户有什么影响。

以至于,我表达想写一篇探究这些细节的文章时,同事会偷笑说:你都开始研究标签末尾要不要加冒号了吗......,太冷了——真是个冷知识!

确实如此,这些偏门、细碎的内容,鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是:“冷知识虽然冷,但有用”。用我了解的这些表单设计冷知识:启发你的冷思维、引出你的热思考。


话不闲聊,我们开始讨论第一个问题:

 

///


01.标签末尾要加冒号吗


有个表单细节不知道你有没有想过,标签末尾是否要加冒号?

这个问题在我前团队发生过激烈争论,有同事说:“不要加,占用间距,而且没人会留意它......”,也有人说:“要加,从含义上讲,冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联......."。

听起来好像都有些道理,那到底谁更对呢!

首先,我们追溯一下 Web 发展史,早期可访问性核对清单中通常坚持要标签带冒号,因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单


而随着技术发展,Web表单使用“label”标签(tag)可以做正确的标记,那么屏幕阅读器就能通过标记(markup)把标签(label)和相应的字段对应起来则无需再借助冒号。

不过在客户端又有些意外!曾经 Windows Vista 指南中明确要求使用冒号, Mac Aqua 也有此要求但规则会稍灵活一些。这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难,桌面环境不会直接显示代码。也是这个历史原因,造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉,直到今天客户端的表单依旧延续这一规则。

通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别,如今的屏幕阅读器技术已转变为识别标签的底层代码,无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了

 

那从情感角度分析标签带冒号的是否对用户体验有影响呢?

回到最开始,我和同事们的争论……

 

先简单说下答案,无任何影响!

在《Web表单设计·创建高可用性的网页表单》中,作者(卡罗琳·贾雷特)曾经做过大量的表单测试,最终证明从未有一名用户谈论冒号是否出现,即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。

 

从以上两个角度不难发现,无论是从技术发展还是情感体验,都证明可不必要求表单带冒号;因为可用性访问清单不再有这样的要求,用户研究也证明几乎没有人会留意表单冒号是否出现。

这样的结论,看似表单带冒号是失败了……,但这并不妨碍它作为一种习惯或传统延续至今,无论在客户端还是Web设计系统中仍然常见。例如:苹果电脑的Mac系统,国内阿里的Ant Design Web设计系统。

 

因此,得到以下几点建议:

如果你希望自己的网页表单与流行的桌面环境保持一致,请使用冒号。

如果你已有大量使用冒号的表单,请保持继续使用下去。

如果你在建立一个新的系统,你也可以索性抛硬币决定,不过要严格遵循一种方法。


///


02.哪种标签对齐方式更好


在表单中标签与表单域的对齐方式,如果你的团队已有明确的规范和使用场景,你只要拿来主义即可。可如果某天由你主导定义一个新的表单规范时,不知道你会不会重新考虑哪种标签对齐方式更好,怎样区分使用场景!

通过科学实验发现,无论是在眼动仪的热图,还是在许多可用性测试的观察结果中,用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧,甚至都不会瞟上一眼。

以此为基础,我们在网页表单设计中有3种最常见的标签对齐方式:顶对齐标签、右对齐标签和左对齐标签。你可能会说还有混合对齐标签、内联标签、图标标签等,这些确实存在但并不是最核心的几种对齐方式,它们基本是在这3种形式上变化,不脱离本质。

 

下面我们逐个分析一下:

 

1.顶对齐标签:

马泰奥·彭佐从2006年7月进行眼动研究发现,从标签移动到输入框只需50毫秒。比左对齐标签快了10倍,后者需要500毫秒;比右对齐标签方式快2倍,后者高达240秒。能迅速填完顶对齐标签表单的原因之一,是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势:

最利于减少表单填写时间(标签和输入框位置最为靠近);用户视线固定,动线一直向下(清晰的完成路径);节省大量横向空间(可用于以多种方式组合的相关输入框)。

劣势:

占用额外的垂直空间(如果可提供使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签);建议使用输入框50%至75%的高度作为相邻输入框间距。

适用场景:

希望用户快速填写表单,完成任务;同时,当输入项存在主次之分时,对标签扩展性要求高。

2.右对齐标签:

如果要尽量减少表单占用垂直屏幕空间,右对齐能提供快速完成时间。马泰奥·彭佐的眼动研究发现,专家用户和新手用户扫视(眼睛运动)右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒,而填写完成时间比左对齐快2倍。

优势:

标签与输入框相邻(方便快速填写)。

劣势:

右对齐布局造成左侧不齐,影响了快速游览表单的效率问题;若标签文字宽度变宽,右对齐还存在灵活度问题。

适用场景:

既要减少垂直空间,又要加快填写速度的场景。

3.左对齐标签:

在顶、右、左三种方案中,左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多,用户一般情况下都能将左对齐布局中的标签和输入框联系起来,只是花费时间较长。根据马泰奥·彭佐的研究,典型扫视时间为500毫秒,很长说明用户经历了沉重的认知压力。

优势:

容易游览标签;占用垂直空间较少。

劣势:

标签和输入框的相邻间距增大;适合于用户不熟悉表单要收集的数据或问题无法分成易处理的内容组,左对齐标签游览表单问题会更容易。用户只要上上下下阅读标签左栏,不会被输入框打断。

适用场景:

表单中存在较多的复杂或敏感信息,希望用户放慢速度、仔细思考(在一些注册类表单中较多使用)。

单从效率角度看,顶对齐标签>右对齐>左对齐,但是根据应用场景,效率快并不是我们选择标签对齐方式的唯一的指标。

因此,得到以下几点建议:

如果你希望用户放慢速度,仔细思考表单中每个表单项,左对齐标签是个好选择,特别是含有大量可选输入框或高级设置的陌生数据时;

而顶对齐标签在一些国际化产品的表单设计时,会有更好的延展性;

至于,右对齐标签虽然与表单域联系紧密,便于用户填写,但是要考虑好标签的长短不齐如何解决。能否精简标签内容,以及确定好表单与界面的边距。


///


03.标记必填与可选字段的困惑


许多表单设计中,有个常见问题:是否应该标记必填字段?如果表单中的大多数字段或全部都是必填的,我们是否仍然应该标记它们?

先简单回答:是肯定的,用户有时需要通过必填标记来评估工作量,了解输入信息量的最低限度。我会在下面具体解释原因。

 

了解不标记必填字段的诱惑

通常,设计师会觉得每个必填字段都有一个标记是重复的、丑陋的、占空间,而且干扰界面,甚至可能看起来很扰乱(有认知负担!)。因此通常采取以下一种或两种策略:

1.在表单顶部显示说明,说明中除非另有解释,否则所有字段都是必填;

2.只标记可选字段,因为它们通常较少;

3.在某些特殊情况下,也会什么都不做:相信用户会神奇地知道需要填写什么字段;如果不知道,那么只需要点击提交报错即可。

这些方法有什么问题?如果你这样想,我来告诉你

1.用户一般不喜欢阅读表单顶部说明。不难想象,用户不太可能阅读表单顶部的说明。表单字段需要自给自足,毕竟,每个字段都有特定指令——它的标签,为什么用户需要阅读其他任何东西来填写它呢?

2.即使用户阅读了说明,也可能忘记。你可能会说:用户阅读了顶部的说明,怎么就会忘记——这么简单的事情?

的确容易忘记,特别是当表单很长或填写表单被打断时(这种情况在移动端很常见)。即使用户记得,但这占用了工作记忆,增加了认知负荷。换句话说,你让用户完成任务更难了。填写表单本身对用户来说就相当有挑战性——为什么要让它更具有挑战性?

3.用户必须扫描表单以确定是否为必填字段。不难发现,无论是否在表单顶部包含说明,结果都可能相同,用户会忽略或忘记。他们会扫视表单,找到一个标记为必填或可选的标识。

而且有些用户甚至不会费心去环顾四周,他们只会做出假设。他们会想——“嗯,邮箱——不需要我的邮箱吧?先空着呢”。即使用户没有留空,也不得不暂停来思考一个字段是否需要填写,减慢交互速度并使过程看起来更长、更乏味。

想要解决以上问题很简单:标记所有必填字段。尽量明确和清晰展示每个必填字段,并标记它。当然,就像有些设计师所说:界面出现大量必填标识(红色星号*)确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下,两害取其轻,这些负面因素是轻微的。


如何标记必填字段?

这里包含至少有两种方式:星号*(红色)和“必填”提示。星号*在网页上已经很常见,用户熟悉其含义。优点是它不占用太多空间,也看起来与标签文字足够不同,所以使用它。

可以使用其他标记形式吗?当然可以,但是最好遵循市面上常见的形式(雅各布定律),这样更符合用户认知。

星号应该在字段标签之前还是在字段标签之后?

这不一定有实际影响,但将其放在标签之前的一个原因是,只需扫视标签的最左边字符,就能轻松定位必填哪些字段。

星号*是一种视觉标记,应当仔细考虑表单中的标识位置。标识在标签左边能指引用户迅速浏览界面,并判断出必填项。如果在右侧由于输入框形式、长度各不相同,标识和输入框对齐会导致难以浏览和判断。


是否也应该标记可选字段?

虽然这不是强制性的,但标记可选字段确实减轻了用户思考:如果没有这个标识,用户要环顾四周,并根据其他标记字段推断该字段是可选的。如果“非必填”在字段标签旁边,那该任务会变得更容易。不描述可选字段,这没问题,但这样做会是一个很好的额外帮助。

为什么登录表单没有标记必填?

登录表单很短,一般由两个字段组成:用户名和密码,这两个字段总是必填的。如果使用星号*,标记这些字段的成本很低,并不会出错。但是,绝大多数用户都使用过很多登录表单,他们是知道要登录需要输入邮箱/用户名和密码的。所以,在登录表单中,可以省略这种形式。

而在注册表中不标记必填字段是危险的。注册表单因产品而异——不同公司在创建帐户时需要不同类型的信息。它不仅仅包含用户名和密码,所以请标记所有必填字段(包括用户名和密码)。

 

因此,提出以下几点建议:

基础前提,尽量去除任何不需要回答的问题,特别是涉及到用户隐私的内容。可以更容易让用户填完表单。

为了增加表单填写的机会,请尽量减少用户需要付出的努力和他们需要记住的信息。有很多方面有助于解决这些问题,但标记必填字段(以及可选字段)是最容易的方法之一。


///


04.表单域提供一些默认值有必要吗


先给出答案:这是肯定的!

在《选择的悖论》一书中,作者巴里·施瓦茨讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量——即在满足多数人需要的地方放置选择——来帮助人们做出明智的选择。

而在Web表单中也有很多地方能利用智能默认减少不必要的选择次数或输入,加速表单完成过程。所以,只要合适就在表单域中预先为用户填写你认为他们想要的输入值。

通过提供合理的默认,能有效节省用户时间,就是这么简单。应用分担了用户思考或输入答案的工作。填写表单永远不是一件有趣的事情,如果这个模式能把表单填写的时间减少一半,用户会非常感激。

你可能会问:默认值不是用户想要的,误导用户怎么办?

在设计有默认值的表单域时,你要思考默认值是否是大多数用户可以接受的答案,如果不确信可以先去做一下用户调研,了解用户的心声。

就算默认值真的不是用户想要的,至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。

但并不代表所有的表单域都要给出默认值,我们只是尽可能的让用户节省时间。

 

如何使用:

在第一次向用户显示表单时,用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前提供给应用的信息来动态地给出默认值(例:通过身份证自动识别出生日期;利用邮编,推导出对应省/市)。

如果只是因为你觉得不应该留下空白的输入域,那么不要使用默认模式。只有当你有理由确信绝大部分用户,在绝大多数情况下,不会修改这个取值时才提供默认值——否则,这将会给用户带来额外的工作!


///


05.输入框的宽度如何设定


有一个容易被忽视但实则举重若轻的问题,表单中输入框宽度如何设定?

在表单设计中,对于 Checkbox、Radio 等控件,很明确必须跟随内容自适应处理。但对于Input、Select等你会不会产生困惑,是定宽处理还是跟随内容更好。

不知道你是否试图这么理解过?输入框作为用户填写信息的主要方式,其表现形式是否可以提供给用户填写表单的有用线索。

唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。

在真实场景中,大部分输入框是存在理想长度的,那么就应该向用户暗示所需输入内容的长度来减轻判断负担。

下图就是典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理,反而容易误导用户对输入金额的判断,造成一种不安全感。

表现形式要为用户填写提供有用线索,采用不同长度的文本框提供了暗示;这种暗示是一种有用线索,当输入框长度长短不定时,用户会很自然地思考为什么这样;填写输入框时会自然考虑这些线索。

请注意!保证暗示效果的同时,不要设定太多的宽度,反而会让表单显得凌乱;太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。


什么是模度值和数量呢!

落在具体设计上要先梳理产品中常见的表单类型,然后设置一个默认宽度。以此为基础来有规律的增加长度,并考虑清楚它们的适用场景;从而定义出不同的模度,最终制定出整洁有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思考,快速搭建出合适的表单宽度并合理有效。




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

文章来源:站酷 作者:百度MEUX

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

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

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



设计思维101

鹤鹤

设计思维史

很多人认为设计思维是全新的概念,这其实是一种常见的误解。设计已经实践了很长时间:纪念碑、桥梁、汽车、地铁系统都是设计过程的最终产品。纵观历史,优秀的设计师都应用以人为本的创意过程来构建有意义且有效的解决方案。

在 1900 年代初期,夫妻设计师 Charles 和 Ray Eames 实践了“边做边学”,在设计他们的 Eames 椅子之前探索了一系列需求和限制内容,即使在 70 年后的今天仍在生产中。1960 年代的裁缝师让·缪尔 (Jean Muir) 以她对服装设计的“穿着设计”方法而闻名,她非常重视自己的衣服在他人看来的穿着感受。这些设计师都是他们那个时代的创新者。他们的方法可以被视为设计思维的早期例子——因为他们每个人都深入了解了用户的生活和用户未满足的需求。著名的 I ♥ NY 标志背后的设计师 Milton Glaser 很好地描述了这个概念:“我们一直在寻找,但我们从未真正意识到......正是对人的注意让你真正掌握那些东西。”

尽管有这些以人为本产品的早期例子,但设计在历史上一直是商业世界的事后想法,是仅用于修饰产品的美学。这种主题设计应用程序导致公司创建的解决方案无法满足客户的实际需求。因此,其中一些公司将他们的设计师从产品开发过程的下游(他们的贡献有限)转移到了起点。他们以人为本的设计方法被证明是导致公司差异化的一个因素:那些使用它的公司已经从创造符合人们需求的产品中获得了经济利益。

为了在大型项目中能够采用这种方法,需要对其进行标准化:一种将创意设计过程应用于传统业务问题的正式框架。

1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。


What——设计思维的定义

设计思维是一种伴随着过程而生的意识形态。

定义:设计思维是一种思想主张,一种注重实际操作,以用户为中心的设计方法来解决问题的思路。这种以用户为中心的设计想法有可能会带来创新,而创新可以带来产品差异化和竞争优势。设计思维包括 6 个不同的阶段,如下所示:


How - 过程

设计思维框架遵循 1) 理解、2) 探索和 3) 实现的总体流程。在这些更大的范围内分为 6 个阶段:同理心、定义、构思、原型、测试和实施。


同理心:进行研究以了解用户所做的、所说的、所想的和所感受的。

  • 想象一下,你的目标是改善新用户的入职体验。在此阶段,你将与一系列真实的用户交谈。直接观察他们的所作所为、他们的想法以及他们需要什么,问自己诸如“什么激励或阻碍了用户?”之类的问题。或者“用户在哪里经历了挫折?” 目标是收集足够的观察结果,以便可以真正理解你的用户及他们的观点。


定义:结合所有研究并观察用户存在的问题。在确定用户需求时,开始寻找创新机会。

  • 在定义阶段,使用在“同理心”阶段收集的数据来定义需求。整理所有观察结果,并在用户当前的体验中进行比较分析。不同的用户是否有一个共同的痛点?识别那些未能满足用户的需求。


想法:集思广益,提出一系列疯狂的创意想法,以解决在“定义”阶段确定下来的未能满足的用户需求。给你自己和你的团队完全的言论/想法自由;在此阶段没有任何想法是不合适的,收集大家的各种想法,此阶段想法的数量超过质量。

  • 在这个阶段,把你的团队成员聚集在一起,勾勒出许多不同的想法。然后,让他们彼此分享想法,混合再混合,在彼此的想法上再产生新的想法。


原型:为想法子集构建真实的视觉展示。此阶段的目标是了解以上几个阶段形成的想法中,哪些是有效的,哪些是无效的。在这个阶段,通过输出原型的过程,来权衡想法的影响与可行性。

  • 让你的想法可操作。比如,做一个新的登录页面,画一个线框图,并在内部寻求大家对此的反馈。根据反馈对其进行更改,然后用快速而简单的方式继续进行原型设计。然后,与另一组人分享。


测试:把原型给到你的用户来获取用户的真实反馈。问问自己“这个解决方案是否满足用户的需求?” “它是否改善了他们的感受、想法或完成任务的方式?”

  • 将你的原型展示给真正的客户,并验证它是否实现了你的目标。用户的观点是否有所改善?新的登录页是否会增加用户在网站上花费的时间?在用户操作原型时,持续测试和观察用户。


实施:将设计付诸实施。确保你的解决方案得以实现并触及到最终用户的生活。

  • 这是设计思维中最重要的部分,但也是最常被遗忘的部分。正如唐诺曼所宣扬的那样,“我们需要做更多的设计工作。” 设计思维不是魔法,并不能让你从实际的设计中解脱出来。Milton Glaser 的话引起了共鸣:“没有“创造性”这样的东西。仿佛创造力是一个动词,一个非常耗时的动词。这是在你的脑海中思考一个想法,并将这个想法转化为现实的东西。这将永远是一个漫长而艰难的过程。如果你做对了,那感觉就像是在创作。” 尽管设计思维对产品的影响很大,但只有执行设计想法才能带来真正的创新。设计思维的成功在于它能够改变最终用户生活的某个方面。第六步:实施——至关重要。


Why - 优势

为什么我们要引入一种新的思维方式?采用设计思维的原因有很多,足以值得单独写一篇文章,但总而言之,设计思维实现了这些优势:

  • 这是一个以用户为中心的思考过程,从用户数据开始,创建满足真实的而不是想象的用户需求的产品,然后用真实用户测试这些产品。

  • 它利用集体的专业知识并在团队成员中建立了一种大家都认同的想法,并得到广泛支持。

  • 它通过为同一问题探索多种解决途径的过程而来带来创新。

Jakob Nielsen 说:“一个解决错误问题的漂亮界面将会失败。”设计思维解放了创造力,并将它们集中在正确的问题上。 


灵活性 — 适应您的需求

上面的过程一开始会觉得很深奥,千万不要认为这就是打开成功之门的钥匙,相反,应该把它当作梯子,在需要的时间和地点为产品提供支持。

每个阶段都意味着迭代和循环,而不是严格的线性过程,如下所示。在构建和测试初始原型后,通常会返回到理解和定义两个理解阶段。这是因为直到线框原型化并且想法把变为现实,才能真正体现您的设计。很难一次性就准确评估您的解决方案是否真的有效,在这一点上,循环进行用户研究是非常有帮助的。为了做出正确的决策或确定开发顺序的优先级,还需要了解用户的哪些信息?之前没有研究过的原型产生了哪些新用例?

也可以重复阶段,通常需要在一个阶段内多次进行练习,以达到进入下一阶段所需的结果。例如,在定义阶段,不同的团队成员具有不同的背景和专业知识,因此看待问题的方法也不同。在定义阶段花费大量时间来使团队成员对问题的认知达成一致是很有必要的。


可扩展性——应用广泛

设计思维具有可扩展性。对以前那些无法改变思维方式的公司,现在有了一个大家都可以理解的指南,并增加了产品成功的可能性。这不仅适用于产品设计等传统的“设计”主题,还适用于各种社会、环境和经济问题。设计思维很简单,可以在各种范围内实践;即使是棘手的、未定义的问题。随着时间的推移,它可以应用于改进搜索等小功能,也可以应用于设计颠覆性和变革性的解决方案,例如:重组教师的职业阶梯,以留住更多人才。 

结论

我们生活在一个体验的时代,无论是服务还是产品,我们都对这些体验抱有很高的期望。随着信息和技术的不断发展,它们在本质上变得越来越复杂。每一次迭代都会带来一系列新的未满足的需求。虽然设计思维只是解决问题的一种方法,但它增加了成功和突破性创新的可能性。




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

文章来源:站酷 作者:ZZiUP

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

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

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



怎么将画像与体验工具打通赋能设计

鹤鹤

什么是体验可视化地图

它们是一种体验洞察和形成参考材料的工具,能够帮助业务人员探讨决策使用,它们都是结合真实用户反馈形成的。另外这些地图本身并不能直接提供答案,而是用于促进对话或作为决策导向,它能跨部门让人们聚在一起讨论业务目标,指出潜在的机会或达成一致的价值观与目标,使解决方案更可行。即促进共同参与、共同思考、共同目标、共同发力。像心智模型、空间地图、服务蓝图、用户体验地图、客户旅程地图都属于体验可视化地图,也有称为对齐图。


用户画像&用户体验地图介绍

用户画像 本身可以反映出服务对象的特征,便于改进业务服务,帮助研究用户需求或产品痛点,因此在一些体验可视化地图中会配合使用。并且可以帮助设计师指导产品功能、导航、交互、甚至视觉设计方面的决策,是一种联系用户诉求与设计方向的有效工具,总之它能让你知道产品是给什么人用的,他们有什么特征或诉求。


用户体验地图 以个体在某个产品或领域中的体验经历为主,关注产品是如何契合个体用户体验的,通过用户个体的行为触点与视角来洞察商业机会。是一种比较视觉化、有助于引发共鸣和聚焦用户体验的工具,比较贴合情感化设计的理念,适用于洞察用户视角下与产品系统交互的可视化地图。


所以在作品集里经常看见这些体验地图就能够理解了,一方面是作为战略层的研究报告说明,用于佐证设计或决策的依据。另一方面是为了其他读者达成共识,便于共情设计目标。当然丰富和美化作品集也是一方面,更多的则是希望不要滥用起来,形同虚设,成了一个没有深入作用的装饰工具。


两者工具的差异与特性

用户画像的因素

用户体验地图的因素

如何打通用户画像与用户体验地图

方便直观易懂的去解释用户画像与用户体验地图之间的关系作用,这里我通过流程、相互作用来解释一下;

从流程上看

体验地图是基于用户研究开展的,所以要考虑研究谁,研究什么问题,在什么场景或领域进行,因此就需要借助用户画像去界定范围,以及形成用户材料,再去考虑用何种体验可视化地图展现,而用户画像也将一直贯穿始终提供可参考的用户信息;

相互作用上看

用户体验地图一般都是聚焦于既定范围的目标群体,一份完整的用户体验地图应该包含用户画像信息,应交代清楚目标用户的背景、场景、需求、痛点等关联信息,方便读者了解,以便于代入用户视角深入到用户体验地图的讨论中。


而用户画像尽管提供了由外而内的视角或部分设计见解,但并不能满足项目多样化视角的需求,且不足以形成一系列的设计见解洞察,所以用户画像始终需要与心智、情景、体验地图或研究报告等结合使用。也就是说用户画像需要与用户体验地图配合输出,两者谁也替代不了谁。


体验可视化工具的一般流程简述

一个正式且有效的体验可视化地图一般必须经过四个阶段才能完成,最后再得出结论达成一致;

一、项目启动;通过内部识别或收集用户反馈找到需求点,计划研究目的,制定目标。

二、开始调研;通过研究手段向用户收集优化资料或数据,为创造体验可视化地图提供可靠的数据。

三、阐述分析;选择阐述方式,通过体验可视化地图将研究结果与核心价值进行呈现,为后面探讨做准备。

四、达成一致;使相关业务人员共同参与研讨,结合地图报告进一步的思考,指出潜在机会或达成一致的观点。

五、展望未来;根据研讨结果设计解决方案,提出价值主张,进一步跟进和实施起来。

真实应用中不用急着画图准备填充,先明确目标再从用户研究或资料收集开始。如果没办法找到目标用户进行访谈或测试研究,那么至少找到一线的人员进行访谈或测试,不要依赖自己的见解或认知套用,这些地图的精髓在于打破内部视角建立起一场具有包容性的对话,不同部门的参与者多多益善,所以这些地图只是研讨中心的参考物。


如何正确Get用户原型与画像

构建和使用画像时大致可以分为两类;

1. 根据用户研究建立正式的用户画像

2. 建立人物角色原型

具体取决于用途与条件情况等,制作任何一组用户画像都非依托想象力,都是基于事实或用户研究的。并且不只是简单的人口数据或个人信息描述,如果一组不能达到共情效果的用户画像也就失去了核心价值《如何有效快速共情-点击查看》,就像一份简历,没能体现出个人能力与专业素养一样。


人物角色原型

制作一个正式的用户画像是一个漫长的过程,还需要开展用户研究,如果你没有现成的调研对象或调研条件,你就可以采用人物角色原型,该方法是由《Lean UX》的作者Jeff Gothelf提出的,他描述到;

“人物角色原型是一个正式人物角色的变式,其最大不同在于人物角色原型不是用户研究的结果,而是更多的源于头脑风暴的结果。公司成员会从公司理念出发,基于自身领域的专业性和直觉,来明确谁是公司产品或服务的目标用户,用户的动机和需求是什么。”引:Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

这类角色原型不用花费大量时间去做用户调研,它们是基于已知的特征情况或预期的目标用户,适合临时性使用,便于开展前期工作或达成一致的见解,但是人物角色原型并不能代替基于可靠数据的用户画像。


构建人物角色原型的方法

就是跨部门集体参与贡献观点与数据来构建。前线相关业务人员是必备的,人数控制在5-8个人就行,要有主持人把控节奏和参与度,尽可能收集到不同业务视角下的问题反馈,讨论开始前可以提出一两个角色原型来激发讨论,然后充实起来,尽管最后可能形成了多个角色甚至有些看起来有冲突,不过没关系,重点是让这些人物角色清晰明确下来,不一致的地方可以进一步的讨论。


人物角色原型的构成内容

一般人物角色原型在一页的篇幅内就可以显示完,主要五个板块。值得注意的是,一定不要脱离了产品主题的范围;

一、角色基本资料:角色头像、姓名、头衔、单位或一些可用的辅助资料。

二、人口统计特征:一般包含性别、年龄、职业、收入等与主题相关的人口统计指标(类似简历中的个人信息)。

三、心理统计特征:与主题相关联的因素,主要指不可轻易观察的心理活动、态度、信仰、动机、观念的个人特征。

四、产品相关行为:指与产品体验有主要关系的行为或是行动,包括兴趣爱好、个人习惯、专业活动等。

五、需求与痛点:用户有哪些与主题相关的需求或痛点,你的设计可以满足用户那些需求和痛点缓解。



用户画像

用户画像本身可以帮助发现问题或进行决策,同时也反应出了对用户或用户视角的共同理解,并且可以在日常研发工作中持续使用,例如一些材料归档、分享、更新、辅助其他可视化地图等,以发挥出更多的余热。


如何打造可用的用户画像

定性还是定量类型

根据产品需求选择定性还是定量分析,亦或者结合,一般定性适用于用户需求深挖或业务创新等情况,讲究的是“为什么”,而定量更像是通过数据验证“有多少”,常用于数据分析、趋势分析、数据验证、做精细化运营和用户精准投放。  

定量需要足够的数据支撑,如果项目需要画像且企业不稳定、用户量级不够不能满足数据需求,则可以借助市场数据报告、白皮书、第三方数据服务平台、调研服务公司等来参考,这些数据也都是可靠的。大数据杀熟就是数据画像的反面引用,通过画像对用户进行分层,再挑出用户中的软柿子或老实人欺负。


识别用户群体优先级

对目标群体要有认知,要根据特征划分层级或类型,例如典型用户、潜力用户、专家用户。这些用户的界定范围需要业务相关人员去制定,类似一份简历我们可以根据能力对标级别,一般我们可以通过4个比较有影响力的指标进行划分,至于权重我们可以采用常见的四象限或卡诺模型;

在制作用户画像前可以合理的根据人物角色原型的特征过滤目标用户群体,但不要过分依赖,你只是需要找到符合的目标群体,而不是根据原型找到理想的那个人。

最终调研对象的关系表呈现;

定性类画像不用邀请很多用户参与研究,一般在5人左右,只有研究资源充沛时才会考虑邀请更多研究对象,一方面是研究发现5人左右就能反映出绝大多数问题了,另一方面是出于时间精力和预算情况考虑。


定性类用户画像要做什么

一、确认研究对象的优先级,根据需求背景或目标确认重点跟次要群体来挖掘不同用户视角下的问题;



二、通过线上招募(APP内或相关平台发布有偿邀请,亦或者寻求第三方服务公司帮助)、客户群(相关的用户答疑群邀请)、论坛社区(发布招募帖子等)、专家咨询、产品线上推送等方式,寻找目标群体并建立联系;


三、选择线上访谈、可用性测试、问卷调查、焦点小组等有效的用户洞察方式,并设计好相关问题或材料准备与用户进行深入研究(主要围绕已知问题或新的设计方案验证,再就是新的业务需求洞察为主);



四、整理用户资料,围绕研究主题建立用户画像信息,完成主要信息模块,可以根据业务需要,将用户技术特征、职业特征、环境因素进行补充(需要考虑是否与业务有一定关联或影响,否则无意义);



五、完善用户画像的细节,将价值信息同步到画像中,并对有效信息的细节进行补充,增加可信度还原真实性;


用户画像并没有一个模版标准,具体还是要看业务需求,而且网上的模版挺多的,自己甄别吧。另外在用户洞察的过程中,我们可以结合可用性测试、绘制故事板(这两种研究方法有兴趣可以查阅资料,一两句讲不清楚,有机会展开讲)等方式一同进行,而不只是把目的停留在建立用户画像上,这样反而获取的有效信息受限了。


定量类用户画像要做什么

一、数据采集

通过有效途径将用户产生的数据集中,不论是产品数据库、数据埋点、第三方数据统计或是定量调研的结果,这些数据都是重要构成部分,同时也决定了信息的范围,比如你拿不到用户的出行数据,那么就根本没办法构建相关标签或指标。

二、数据定义

对数据进行清洗整理,识别出用户行为数据、用户偏好、生命周期等数据,并进行标签化分类整理,这些标签或指标可以体现出某些维度的趋势或用户行为预测。不过值得注意的是,在构建这些标签或指标时尽量结合业务流程或生命周期来梳理,考虑画像建成目的与业务场景同时,也要思考标签的权重问题,标签不等于越多越好。 

三、构建画像

根据产品阶段或业务需要,把相关业务标签结合用户群特征信息整合成用户画像,一般的业务标签类型有增长策略、用户偏好、用户价值、营销触点等,这类画像可以包揽多个维度信息,还能对周期数据可视化显现趋势变化,但是在用户痛点或需求上,可能不会很直观,需要进一步的结合用户场景带入思考。



通常互联网产品前期,没有构建标签或数字画像的经验,可以考虑让团队引入相关第三方数据画像服务,它们可以更便捷的接入到你的产品中并帮助你打标签做统计;

以下截图来自第三方大数据画像工具(神策)

*第三方数据分析辅助产品也不少,这里只做交流使用


如何让画像角色更生动

画像中的角色应该更加生动,能够让我们感受到真实的存在,只有这样才能产生共鸣,赋予画像价值,为此我们可以通过控制以下六点来做的更好。


一、不要特殊化

特殊能加深印象,但是特殊化并不代表产品的典型群体,同时在实际应用时容易扰乱共情或分散注意力,例如用户群体是普通青年,就不要描述成一个帅气的学霸,也不要为用户添加一些奇怪的癖好,这些不相干的信息并不能让画像更加生动;



二、合理应用头像

通常作品集中的头像都比较美观个性,这没事儿。但实际画像应用中,头像也是很重要的一部分,会马上映入眼帘,这些头像不要使知名人群的,且贴合真实用户标签,不用暴露性感或是丑陋异样的,也不要使用插画、卡通、3D形象,不要有奇怪或不自然的行为动作。


三、充实细节

以一款线上教育产品作为背景,举例原本我们的用户信息写到:

那么即可根据产品属性结合实际情况进行丰富补充,例如调整为以下描述;

虽然没有过大的变化,但是已经将贴合教育产品的地域信息、课程阶段、收入情况进行了完善刻画;

接着再例如,虞溪女士的需求写到;

简单来看确实是透出了线上教育产品的需求,但是需求并不深刻,也没有刻画出虞溪女士的核心诉求,为此我们可以结合创造情景故事的方法,融合角色、场景、行动、事件、评价、情节这些元素去深度刻画描述,例如以下调整;

结合创造情景故事的办法是为了刻画出更多细节,不仅可以让浏览者更好的沉浸在角色视角,也能在完善的过程中深挖出更多有价值的思考;


四、创造情景故事

情景故事不会很枯燥会更抓人心,能够传达更多信息的同时,将产品信息与真实情景交融在一起,方便团队记忆理解以及更好的促进讨论。创造情景故事的元素通常有:角色、场景、行动、事件、评价、情节。看起来就像是在描述“我与xx产品的一天”。

  1. 角色:故事的主人翁或是参与者,不可缺少的重要部分;

  2. 场景:故事发生的时间地点物理环境,例如早上八点半我在拥挤的地铁上抢到了座椅,并打开了手机;

  1. 行动:能够观察到且与主题有影响的行为动作,例如我被这个问题难住了,解锁手机并打开了这个APP;

  2. 事件:发生了什么事儿,角色间做出了什么反应产生了何种结果;

  1. 评论:角色怎样评估并作出决策,有了怎样的目标,并如何进行下一步。其中任务目标是驱动的核心;

  2. 情节:一系列行为与事件的演变过程再到结果,从问题的发生到角色推进目标到结局。例如经典的戏剧结构:

*创造情景故事是要花费时间精力的,如果时间充裕你可以慢慢将相关描述进行转换,时间有限责挑取重点转化;


五、不要孤立使用画像

在前文就有描述到画像需要配合其他体验可视化地图一起才能更好的发挥效用,画像通常始终保持着个体视角,而且没有办法传达一系列完整的体验报告,所以为了更好的满足项目多样化视角的需求,尽量不要孤立的使用画像。



六、定期更新

产品发展中,会经历不同的阶段与市场变化,用户群体自然会变。如果说产品在研发新的功能去开拓年轻化的市场,那同样意味着目标群体趋向年轻群体,这种时候就需要变更或新增用户画像,就不要使用旧的画像起步了。



基本上做好以上细节,你的用户画像就大功告成了,这就像是结合STAR法则优化项目经历一样。最简单的标准就是业务人员能够去理解这些角色并代入角色视角思考,可以有效共情或决策。


如何用好用户体验地图

首先我们回顾一下用户体验地图的关键词:既定的用户群体、应用场景或领域,用户以某个持续性目标驱动与你的产品或服务发生交互,并且涉及多个阶段来实现目标,地图会通过由外而内的视角洞察产品服务是否契合用户的体验。



由此可见在与用户研讨时,我们的问题或测试任务应该覆盖相关阶段或重要的任务流程,以此来获取体验地图的相关重点信息。另外很多产品比较庞大,服务颇多,因此控制好体验的阶段范围也很重要,不仅会拉长工期也会使得焦点分散。

用户体验地图的构成简述

用户体验地图主要包含三个层面的内容,一、用户目标阶段,二、用户与产品服务交互,三、痛点机会洞察;

其实碍于不同产品和服务类型,体验地图的构成元素也有差异,不过在漫长的应用发展中也逐步趋于稳定。



常见的构成元素:

一、用户需求或目标:
在体验地图中,用户以需求或目标驱动与产品发生交互,需求或目标既定了要做什么,应该需要什么服务。


二、行为阶段:

行为阶段是界定场景的重要部分,以目标任务阶段的生命周期或者关键节点展开,不一定所有阶段托盘而出,阶段太多则不聚焦,细分太多则费时间也不一定快速见效。


三、采取的行为触点或步骤:

用户使用产品或服务展开的行为或接触的设备、泛功能应用等。


四、想法与问题:

在体验服务的过程中出现的问题或是一些真实的想法感受。


五、情绪波动与精神状态:

情绪和精神状态通常是反映服务好坏或用户满意度的重要因素,但同时也难以观察或量化,通常会根据用户对问题的描述来共情情绪,亦或者向用户提供情绪表情标签。


六、痛点或机会揭示:

结合上层阶段行为与用户的反馈信息向下垂直洞察产品服务的痛点或机会。


七、设备或其他图例补充:

例如跨端跨设备或包含特殊标签信息的补充说明。


*示例模版


用户情绪板怎么用才对

表情包早已成为网友互动和情绪表达的重要部分,但是在实际的可用性测试或访谈中,用户会相对拘束一些,也不会把各种各样的表情挂在脸上,所以才说用户情绪很难研究和洞察,更别说量化执行了。有些人可以进行表情管理,情绪更是难以琢磨;


那么体验地图中的情绪板怎么搞定呢?


就用户体验地图中的情绪块来讲,通常一定不只是表情icon来做表达,这样费解还缺乏实际价值,所以一定会加上相关描述来揭示用户情绪与观点。心智模型中用户情绪感受便是靠的文本描述来传达。


早期Pieter·Desmet在其《Designing Emotions》一书中提出了如何衡量情绪的研发方法,他开发了一款叫做产品情绪度量仪的工具,其原理就是为用户提供各种表情表达的卡通形象,用户在体验过程中根据自己情绪选出最匹配的那个卡通形象来示意自己情绪。这个工具经过不断迭代并丰富声音后已授权到:https://www.premotool.com/,我们可以在度量用户情绪或其他体验可视化地图中配合使用。 


另外在使用表情标签应用时,并不大推荐常见的微信表情、QQ表情等,这些表情在长时间的使用中,用户都会形成一些偏好,这会影响使用决策


在服务体验的过程中,很多时候情绪变化并非是单一线型上起伏变,例如:

我在观看电影高潮的部分突然网络异常,那么我的情绪应该是多样化的,一边是代入高潮部分的激动,另一方面是网络带来的失落感,同时还有等待网络恢复的焦急。

为此我们通常有两种方法来传递情绪变化;

1、将喜、怒、哀、乐、悲、恐、惊或需要的情绪标签化,每种情绪用一个颜色表示,然后使用同轴的趋势图结合用户行为阶段来表示;


2、即使一次展示多种情绪,也难免有积极情绪与消极情绪同时出现的情况,这种时候可以围绕一条分界线划分两类情绪区间,使用情绪曲线结合关键因素描述来显示更加全面而复杂的情绪心理,对应每个关键情绪节点可以使用不同表情图标细化辅助,使得情绪起伏的信息更充实有价值;


怎样完善用户体验地图

1、建立正确的项目目标是第一步,用户体验地图的优势与作用都有在前面讲过(如果忘了可以在“两者工具的差异与特性”中开始回顾),使用用户体验地图是有目的性地,它不是优化体验的万金油,通常都是收集用户反馈知道某一些阶段或环节存在问题,而建立优化目标开展的工作;



2、锁定存在问题的阶段,建立用户问卷、焦点小组或用户测试进行聚焦研究,尝试收集用户的意见或优化方案;



3、通过白板或线上协作工具建立简易的用户体验地图框架,并将研究用户的画像信息与碎片信息填入地图。白板共创的办法其实就是根据用户体验地图的框架,结合用户视角将自己的观点写到便签贴到对应的区域,避免你一句我一句难以记载和整理;



4、关注每个阶段的过渡,通常问题很容易出现在这些地方,例如付费前到付费后阶段,如何进入后者阶段就成了关键点,另外没啥优化空间或体验良好的阶段可以折叠起来留出更多空间关注核心;



5、用户体验地图的画龙点睛之处在于跨部门协作完成,而不是闭门造车,邀请一两个其他部门的人说明要求和完善地图并不是什么难事,只有这样最后的结果才能达成战略一致,而不是自己绘制完后要求其他人被动接受结果;


检验用户体验地图的标准

一、首先看你是否与用户建立联系,用户体验地图的个体对象是用户不是你自己,尽可能的获取真实的用户的信息。

二、一个产品运作是需要多个部门协作的,所以至少要有三个不同部门的人员参与进来。

三、协作完成用户体验地图和达成共识后,你会惊奇的发现问题如何解决,各个部门该怎么配合实现都清晰明朗了。


前一阵子跟UXren社区主理人宝珠老哥讨论过,就如截图所示,更重要的是将企业各部门协同在一起,达成一致的战略目标,共同参与探讨出解决方向为业务赋能,这才是体验地图的精髓所在。


什么是触点模版工具

用户体验地图通常包含了一系列阶段,而每一个阶段都会由多个触点编排成一段微型体验,而触点模板工具将会很好的为你建立和打开一片微型的体验模型,这种模型是由罗伯特·罗斯曼(j·Robert·Rossman)[美]与马修·迪尤尔登(Mathew D·Duerden)[美]在《最佳体验》中提出的一种体验洞察工具,它可以很好的结合体验地图去进一步的深挖某段流程或阶段里需要优化的体验,它们之间的关系就像一条路线图与一份详细的指引说明。当你完成某个触点模版时,你会对该触点上的体验设计有清晰的认识,并且会形成一份书面报告与执行团队共享和交流,触点模板可以很好的解释体验是如何设计的,并且将相关执行团队的角色联系在一起,这不是噱头,你可以根据后文指引进行尝试。


体验类型的框架

体验是复杂的,在用户触点模版工具中,体验被划分为平淡的、专心的、难忘的、有意义、革新性五种类型,并且它们具有连续性,是通过关键特征与关键属性定义出来的,它们结合了心理学理论基础,目的是方便更好的理解体验,并在设计实践中起到指引作用促进交流,因此我们在设计时也应该对用户体验结果有意向性的去设计,框架如图;

*关于参与感的两种系统思维是两种不同的思维状态,系统1更像是惯性思维,凭借认知或经验更加快速和自动化的思考,而系统2就会开始更主动的更深入的进行思考,参与阶段越高思维越深思。


而三个阶段分别是;

一、接受:个体意识到和接受体验过程中正在发生的事情。

二、思考->处理->计划:个体开始积极的思考体验,并对正在进行中的事物做出处理与反应,同时可能开始计划各种应对方案。

三、行动:深入的参与到体验中并引入新的触点和元素来维持互动,从而共同创造体验,例如《鱿鱼游戏》上映后,影片中的“扣糖饼”又带火了糖饼。

当新的事物被第三阶段引入后,又会重新开始接受并循环,不过这并不代表所有的体验都能够完整经历这三个阶段。


触点模板框架

触点是用户进行交互的重要部分,其周期可长可短,会产生不同感受,而一系列的心理感受会促成最终阶段或完整的体验。触点模版由11个部分组成,它们互相作用指导和揭示体验设计的方向与细节,并把设计结果引向预期的体验方向。


抬头信息

  • 编号:对应到体验地图的阶段编号或是触点编号,随着触点设计逐步完善,对应的位置可能会发生转移。

  • 标题:对应该触点模版主题的标题或是任务触点的名字。

  • 体验类型:触点的体验类型或整体的体验目标,从平淡的到革新性的五个体验类型。

  • 期望的反应:我们把期望的反应视为触点预期结果的北极星指标,它可以是多个。我们通过用户反应逐步提炼出预期的结果供予用户体验,例如期望的反应是笑容,那么我就可以提炼出“讲个笑话、开黑游戏”等可以促成反应的体验结果,同时期待的反应应该尽可能的传递用户价值。

核心组成部分

  • 期望的结果:根据期望的反应,我们要提供给用户哪些体验来实现。同时期望的结果应该跟类型相匹配。一般我们可以根据 “1. 产生积极情绪、2. 吸引注意力、3. 帮助发展和加强关系、4. 从更宏大的视角给人来带意义、5. 提升能力、6. 孤立自由选择” 这些类型内容作为起点,并根据体验项目的情况细化,例如“心情低落想要刷刷手机产生积极情绪”Change“在App上刷会儿短视频,看点有趣搞笑的段子来缓解下低落的情绪”


  • 体验场景元素:触点模板工具没有特定的行业或业务模式,因此这些元素根据需要完善即可。而实际的元素应用中也会有不同的权重,注意重点元素的设计应用。

  • 互动设计:可以是人与人互动、人机交互或更为复杂的互动,就是有意向性的将元素进行编排与用户产生互动获取必要的信息或传递。


  • 贡献者:整个体验阶段中,可见的幕前服务人员与后台的服务员,他们是组成完整体验的重要部分,例如餐饮店的服务员与传菜员就是可见的幕前服务贡献者,而厨师们就是幕后的贡献者。


  • 共同创造:共同创造和可供性是促进用户参与的两个重要的方法,并且参与度有高有低。好的体验更多是与用户共同创造的,建立合适的触点与用户共同创造体验是重要的!以微信的“拍一拍”来看就是个很好的例子,拍一拍功能本身是加强了微信聊天的可供性,给用户提供了更多的互动可能,同时用户可以自己编辑被拍以后的文本,加强了体验的趣味性,这便是共同创造的过程。可供性为用户提供更多互动体验的可能,而共同创造为用户提供DIY的空间。

  • 优化:对触点进一步的优化,加深体验感受。一般分成了两大类型,一类是技术优化、一类是艺术优化。例如让一个App加载短视频更快更流畅,这就是技术型优化,如果为一个服务器未响应的404界面配上缓解焦虑的插图,这便是艺术型优化。


  • 过渡:触点与触点之间的过渡可能波动、异常、缓慢、复杂等,如何引导用户正常的过渡到下一个触点也是重要的一部分,它可以是自动化的隐式过渡也可以是引导性的显式过渡,就像是安全通道的指示灯一样将用户从一个地点带往另一个地点。


*触点模版(可直接下载原图进行打印使用)


如何构建一个触点模版

通过一段音频聊天室互动体验之旅来揭示触点模版用法与效果,音频聊天室大家应该都熟悉了,这里就不聚焦用户画像与用户体验地图了,触点发生在用户第一次进入歌厅音频房间,那么应该怎么设计体验来为用户留下好印象呢?



触点是发生在注册后的第二个阶段,即首页房间列表(编号A02),完成注册阶段后见到的第一个界面。标题则暂定为“一次非凡的音频互动之旅”,我们希望新用户在选择好一个房间进入后能够有一次愉悦难忘的体验经历,而相应的期待反应则是“有人带我玩真棒!这个声音我好喜欢,下次还来找Ta们”。体验类型则希望是从平淡的体验类型升华到难忘的。

其中体验场景除了设备自身与软件环境,更多真实的环境因素碰撞我们无法预测和控制,因此仅锁定软件自身的场景元素。互动设计则是关键,软件本身更多是工具支持,我们需要利用好运营资源跟用户产生互动来促成体验结果,这里我们会根据技术可行性优先考虑能为用户提供的体验结果,再到互动设计部分。其次就是过渡部分,预期的过渡触点实际上会有多个方向,我们优先以充值消费作为一个触点(转化)、私信关注为另一个触点(形成互动联系方式),完善后的触点模版如图;


在该触点模版中,主要揭示了如何为用户打造理想的体验之旅,不仅涉及到运营方法也包含了软件的重点优化部分,它很好的展示了如何通过角色之间在软件中的互动来促成体验与商业价值,当你把这份资料在团队里分享后,完全可以清晰的对体验设想进行解释,以促进团队内的深入讨论与细节推进。至于相关功能的细节推敲同样可以采用触点模版继续深入。



接着A02触点模版中提到的标签体系优化,我们再一次的结合触点模版进行标签的体验设计,编号设定为“A03”,这是一个泛触点,它涉及到用户注册进入时、房间互动、系统消息、消费与充值、装扮标签的着落页,但归根还是在应用内。标题为“让标签为用户赋能意想不到的体验”,在这段泛触点中我们期望围绕标签为用户打造难忘的体验,让标签产生更多的价值与业务转换,经过初步的体验设计后,新的触点模版如下;


在这个触点模版上我们对标签的作用价值进行了定义,并对功能及业务流程上进行了设想,已经初步的形成了标签体验的设计,接下来只要将装扮标签的着陆页与房间内的应用进行完善设计,在辅以条件判断与消息通知打通闭环就算是完成主要工作了,再此后的内容你是继续用触点模版还是设计交互原型都是可以的,至少目标是明确的。相信写到这里,触点模版的应用与功效你已经一目了然了。


触点模版小结

触点模版的板块跟信息维度较多,但是考虑到触点或项目的实际情况,模板内的信息填充不用完整。并且它的确可以很好的将体验设计的思路整理出来并形成材料分享,对于多个触点只需要根据体验地图上的顺序打上编号后,即可将多个触点模版的关系连接起来,你可以将打印填充后的模版依次排列或张贴在白板上的体验地图上。


触点模版就像是一份交互自检表,它从多个维度去考虑和解释了触点体验的设计,尽管没有勾画出详细的设计细节,但是体验设计思路与执行团队的任务已经很明确了。


另外完成触点模版时,并非是要按照模版里的板块顺序作业,比如有时候我们是根据体验结果考虑运用哪些体验场景,如果有固定的场景,那么你就可以根据场景情况开始考虑,一般更倾向于先设定体验结果进行倒推。再就前面啰嗦过的,我们根据项目情况完善需要的模块即可。


服务蓝图介绍

更完整的服务流程可视化工具,可以结合用户体验地图对服务流程进行优化或调整,相比传统的业务流程图,它在用户角色关系与前后端分离上有明显优势。是一种服务可视化的工具,利于让产品保持精益(识别价值点、优化流程)

多角色的引入,虽然使得蓝图更加复杂,但是能够反映出更多角色的交互与流程关系。

服务蓝图的因素:

服务蓝图的构建元素:


结语

客观来讲,这些体验地图时常保持争议,特别是逐步大范围在业内曝光后,形式化、假把式、滥用等标签也愈发明显呐,这些体验洞察工具并不总是能够在项目中发挥预期作用,它们也需要区分使用场景跟项目需求情况,如果你没有尝试过,可以积极引用,当你熟悉应用后你会发现收获更多的是一种体验设计的思维,一旦需求或痛点摆到面前时不再像一只无头苍蝇。

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

文章来源:站酷 作者:泡泡bing

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

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

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

产品工作中的信息处理——收集、认知、重塑

涛涛

作为产品经理/交互设计师,我们无时不刻都在处理信息,我们调研用户收集需求信息,从用户反馈了解产品使用的问题。我们从接收的有限信息整理信息发散思维,我们在工作流程中需要不断地处理和重塑信息,最后落地到实际产品上。这里就作者在实际工作中的应用与理解给大家阐述一点小知识,希望能够给疑惑的你们带来一点帮助。


一、方法提炼

我们首先需要思考一个问题:在产品设计中信息处理的本质是什么?

两个关键词:挖掘和理清。

  1. 挖掘:挖掘事件本身的正确信息
  2. 理清:理清解决问题的关键思路

整理信息的方法都有哪些呢?在《超级整理术》这边书里的讲述了作者关于他如何整理的方法。

如下图:

通过这一方法的实践与优化,我把应用到产品设计中的方法提炼。

信息处理的三个阶段:

  1. 信息收集——收集相关信息,辅助认知
  2. 认知思辨——对信息进行深度认知与思考,提炼深度信息
  3. 重塑解决——根据信息找出本质问题,进行解决

二、信息收集

1. 如何进行信息收集

在工作项目中,我们要如何进行信息的收集呢?分为四步走:

明确目标——确定信息源——建立收集器——整理分类

首先要明确目标,为了达成怎样的目标,建立目标关键筛选集合,锁定要收集信息的范围。

例:为了达成需求到产品转化,我们在产品工作中需要收集需求信息,建立目标关键筛选集合。

  1. 需求来源:战略决策、用户反馈、产品分析…
  2. 明确信息源:领导小组、用户、产品内用户反馈…
  3. 建立收集器:战略计划书、产品线上反馈、产品部会议记录…
  4. 整理信息:我们从多渠道获取到了需求信息,最终需求整理分类记录在需求池…

其次,建立需求池。

产品设计中最常见的需求收集工具——需求池。

进行需求的收集,是产品日常工作中最常见的工作之一。

运用多维表格进行需求池管理,从多个维度来进行需求的数据统计分类。

两个软件:【飞书多维表格】和【维格表】,都是做需求整理的好工具。

可以根据数据关键字快速筛选展示。

2. 感观生活的信息

我们处在一个大世界中,作为一个独立的个体,我们无时不刻都在接收着来自四面八方各色各样的信息,有人的地方就有“信息场”。

例如我们用“五感”在生活的场景里进行着信息交换:

  • 视觉——去超市买菜,看到浮动的菜价
  • 听觉——去坐公交,听到旁边情侣的对话
  • 嗅觉——经过饭店,闻到飘出来的香气
  • 味觉——中午吃饭,吃到很好吃的红烧肉
  • 触觉——点了一个冰镇饮料,手握着有点冰冷

做为一个产品设计者,做产品设计,研究用户使用场景,为的就是更好的应用到用户的生活、工作、学习等场景中。

我们需要保持信息的敏感度,学会观察周围的信息,无论来源于生活、工作、学习。

对他人时一个微不足道的小信息,可能就是触发你某个灵感的契机。

三、认知思辨

就和推理悬疑剧里破案一样,从案发现场收集的信息,通过信息关联,挖掘更多的信息,这样才能更好的辅助我们找到“嫌疑人X”。

同样,接收信息后,发现这些信息无法立马精准到“关键X”,这个时候,我们需要通过自身的经验、知识库、知识搜索、外界帮助来找寻更多的信息线索。

因此我把信息的认知思辨切分为两个维度,由点拓展到线,再由线拓展到面。

  • 在信息的深度上拓展
  • 在信息的广度上拓展

1. 信息深度上

在信息深度上拓展,指的是当我们接收到信息后,对问题本身的解构,具体问题具体分析,深挖问题背后的本质原因,从而解决它。

1)怎么挖掘信息的深度

怎么挖掘信息的深度——5W法则。


What什么事:

一定要明确是什么事,才有行动的标准,行动之前先思考后行动。

what能让你定位到事件本身,此时需要挖掘更多信息来帮助你解决这个问题。

WHO什么人:

一定要弄清你服务的对象,问题提供者可能不是真实发生问题的人,在信息传播过程中,信息是会损耗的,我们需要明确实际发生问题的人,再切入解决问题。

Why原因是什么:

用户为什么要这么做,这个信息很关键,促使他想加功能的动机是什么?

Where什么场景:

什么场景下发送的问题,促使他想要加功能,通过场景分析可以帮助我们分析是不是真的是需要这个功能才可以解决用户的真实问题。

When什么时间:

发生时间:发生问题的时间,用户发生问题的时间点,有利于缩小日志排查范围。

关键时间:什么场景下触发的这个“关键节点”,这个关键节点的时间,我们可以称它为“关键时间”。

2)产品信息结构的设计

怎么进行产品信息的拆解——用户五要素。

这里我们可以利用信息层级递进的方法来进行信息深度的挖掘。

引用用户五要素的方法细化自己的产品设计工作流程形成逐步递进的工作流程。

如下图,是我在工作当中常用的工作流程。

业务目标-业务流程-系统框架-功能结构-信息结构-交互设计-用户体验

2. 信息广度上

怎么挖掘信息的广度?

信息广度的挖掘,和在一本探案小说里找寻各个人物之间的人物关系的方式很像,只不过从找寻人物之间的关系变成了找寻信息之间的关系。

我将信息与信息之间的关系归纳为三个维度的关系:

直接关系、间接关系、隐藏关系

往往深层信息都埋藏在“隐藏关系”里。

通过不同信息关键点的三层关系挖掘,最终我们可以找到很多信息的关联度,这就像下面这张网一样,极大的拓展了原本单一的信息。

例如:通过苹果这个意象

  • 通过“水果”这个类别想到香蕉,苹果和香蕉通过“水果”建立了直接关系。
  • 通过“苹果”咬一口的形状想到科技行业的“苹果公司”从而再联想到同样做手机的“小米公司”,苹果和小米公司通过“苹果公司”建立的间接关系。
  • 通过“苹果”流行叫“平安果”是让人喜悦满足的象征,而在《隐蔽的角落》这部剧里,经常出现削苹果的画面“用刀削”便有了危机压迫感,苹果和削苹果产生的危机压迫感通过象征属性建立了隐藏关系。

四、重塑解决

重塑解决最重要的两大关键是:解构与重塑。

接下去我们来具体展开来谈谈如何结构信息与重塑信息。

1. 如何解构信息

在我的理解上解构信息做的其实是:整理和关系。

如下图所示,我们可以看到在进行文件夹目录的梳理中,我们通过大模块+细分类的方式将文件目录进行了梳理。

在这个环节做的就是“整理”各个目录分类,将分类处理好了之后,后续的文件就可以按照文件与分类的“关系”放进文件夹目录。

我们再来看一个APP页面的解构信息的案例。

从页面中拆解商品卡片的关键信息。

缩略图、产品名称、促销语、销售价、原价、抢购进度、已抢购数量、抢购按钮。

从五个维度去看这个页面,我们可以得出五个信息的关系:

  • 从框架上区别,我们可以把页面划分为:头部区、内容区、底部操作区;
  • 从信息模块区别,我们可以把内容区划分为:消息提示模块、商品卡片模块;
  • 从功能性区别,我们可以把商品卡片信息划分为:展示信息、操作按钮;
  • 从信息用途区别,我们可以把信息划分为:商品信息、价格信息、抢购信息、操作按钮;
  • 从信息变化区别,我们可以把信息划分为:运营触发变化信息、用户触发变化信息。

2. 如何重塑信息

在我的理解上解构信息做的其实是:理解和表达。

  • 理解:理清和整理信息,解读信息
  • 表达:传递与表达信息,输出价值

1)理解信息的方法:拆解组合

拆——做的是信息的单元拆解。

在我们之前的案例中进行Axure组件化打造时进行的就是信息的拆解,把需要用到的单元组件都拆解出来,作为素材库。

组——做的是信息的单元组合。

当我们拆解得到了组件库之后,在进行新的页面的构建中,使用这些单元组件进行重新组合从而得到全新的页面。

2)表达信息的方法:建立关系

在认知思辨的过程中我们挖掘信息的广度,找寻信息间的关系,而在做信息重塑时,这个过程正好是一个逆向的过程,我们在搭建关键信息间的关系网,让他们彼此更加可靠具有意义。

五、小结

谢谢大家的观看,到此本次关于高效处理信息的内容分享就到此结束了,希望大家能够从中获取到一点收获。

最后回顾一次:

  • 信息收集——收集相关信息,辅助认知
  • 认知思辨——对信息进行深度认知与思考,提炼深度信息
  • 重塑解决——根据信息找出本质问题,进行解决


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

文章来源:人人都是产品经理   作者:时光若刻

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

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

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


 

标签栏设计有哪些不易察觉的「小细节」?

鹤鹤


Tab Bar 


Tab Bar「标签栏」一直是UI设计师值得学习和研究的内容,因为当设计师在构建一个新的应用程序时,都可能需要搭建标签栏,建议设计师们根据实际情况去判断是否使用。

流行常见的应用程序,如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在使用标签栏,但这并不意味着你的应用程序、你的用户是真的需要或真心喜欢。像计算器、日历等应用,就没有涉及此功能。


为什么应用程序会有标签栏?答案显然是「易于使用」。加入标签栏可以帮助用户更轻松地导航到页面,不用再特意点开菜单,选择想要浏览的页面。带有标签栏的应用程序,通常会与多个页面联动。而类似计算器这种工具性质的程序,用户可能会重复打开使用,所以其展示重点在主屏幕上,点击后直接进入功能页面。


为什么标签栏不是菜单?有些应用会使用菜单罗列页面,虽然占用的屏幕空间更少(菜单图标),但缺点是用户点击菜单进行多次跳转。为了更好地使用,设计师发明了靠近拇指的酷炫标签栏, 方便用户点击,以获得更好地导航和更轻松地冲浪体验。接下来我将为大家介绍几个应用标签栏时的小技巧:


01 展示最重要的目的地

标签栏应只包含最有用的目的地,应是被高度精简过的,避免变得混乱。许多应用程序在其标签栏上添加了搜索屏幕,这有助于更好地导航内容。结合自身程序,为用户针对性地添加一些重要的功能,提升体验。

比如Spotify的标签栏,使用了音乐播放器中常出现的几种功能:Home,主页标签用于播放或可能收听的内容;Search,搜索标签用于检索其他歌曲和播客;Library,库标签用于播放列表中用户喜欢和保存的歌曲。Premium则是结合了公司业务,帮助用户轻松完成费用支付。


02 把相似的内容放在一起

体量大的应用程序,它们更喜欢使用4-5个标签,不仅让标签栏变得整洁,还能帮助用户快速点击。如果超过5个图标,用户受拇指大小的影响会无法准确地点击。

Pinterest的标签栏虽然只有4个标签,但它在通知标签内设计了置于顶部的标签——消息选项卡,最大程度的拓展了用户在此标签内的应用。


03 如果需要,尽量使用标签

任何流行的应用程序都在使用标签,因为它们清楚地说明了当用户点击特定标签时会做什么。

Youtube和宜家这两款应用复杂程度各不相同,宜家的内容主要是家居家具,YouTube则是不同类型的视频。YouTube使用的搜索标签,与其他程序相比,也更具自己的特色。

Pinterest的标签栏相对设计的专业一些,会将标签上的文字隐藏起来。当用户习惯使用后,标签上的内容会随之隐藏,我个人非常喜欢这种设计。不过,我建议大家根据自己的选择,再去确定是否要这么做。


04 文本标签应该简短

标签栏内的标签应简短与清晰,就像设计按钮标签时一样,请使用准确的标签。TikTok的所有标签都是短标签,并且还加入了创建按钮,如果你想吸引用户的注意力,你也可以这样做。


05 避免隐藏标签栏

避免对用户隐藏标签栏,因为其包含了最重要的导航功能。大多数的应用程序都遵循了这条规则,除非有些是出于测试目的,会选择隐藏。Pinterest的标签栏在滚动浏览图像时完全隐藏,我个人猜测,是希望用户可以最大幅度的查看感兴趣的图像。


06 按顺序排列标签

按顺序排列标签非常有必要,每个应用程序都会参照清晰度和可用性这两个维度去设计。用户喜欢看到排列好的东西,而标签栏就是其中之一,大型的应用程序也基本上遵循类似的设计规则。

打开Pinterest会看到瀑布流形式的主页面,重要的内容都被呈现在了主页上。Spotify、Youtube、Pinterst、TikTok等应用程序都比较相似,将重要内容放在了主页上。个人建议大家可以参考,但最重要的是将内容井井有条地呈现,并始终如一地遵循着设计规则。


07 传达位置

标签栏帮助用户轻松导航,如果用户不知道自己的位置所在,也就无法进行有效地浏览。比如Duolingo和Headspace的标签栏,就向用户传达了其所在的准确位置。


08 从数据中学习并持续优化

如果你想改进应用内的标签栏设计,数据是关键点。你可以测试用户最喜欢的、不使用的以及需要增加的标签分别是什么。

一款成功的应用是需要持续迭代优化的,就像灵感平台Pinterest,虽然它不急于测试新事物,但却与用户建立了深深的羁绊,慢慢沉淀积累,再去提升应用程序的用户体验。


文章来源:站酷  作者:UX词典

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

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

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



简约有效的设计,让产品变得不一样

涛涛

编辑导读:随着产品的迭代升级,增加越多功能,设计相对地也会越复杂,用户需要花费更多的精力来理解产品逻辑和使用具体功能。因此对产品进行简约有效设计是十分有必要的。本文作者对此进行了分析,与你分享。

一、简约有效的含义

产品是一个功能集合体,随着迭代优化,会变得越来越复杂,这也意味着用户需要花费更多的精力来理解产品逻辑和使用具体功能。因此对产品进行简约有效设计是十分有必要的。简约有效原则跟一致性原则比较类似,本身的含义比较广泛,此文中,对简约有效的原则作如下约定:

“简约有效设计指的是设计方案在满足用户和产品需求的前提下,应该最大程度的降低产品复杂度和用户使用成本,以保证用户使用产品的体验和效率,最终达到为用户和产品提供更多价值的目的。”

简约有效的设计最大特点是“简约”和“有效”。

简约——能降低产品的复杂度

“简约”指的是在满足需求的前提下最大程度的降低产品复杂度。从普遍的角度来讲,一个简约的设计一定能够极大的提升用户的使用体验和产品的使用效率。

有效——能满足用户和产品的需求

“有效”指的是设计方案必须能够满足用户和产品的需求,这是设计最为基础的要求,如果设计方案不能满足用户或产品的需求,那什么样的设计都是没有意义和价值的。

二、简约有效设计的价值

在设计中,遵循简约有效原则不仅可以保证设计方案的合理性,还可以为用户和产品提供更多的价值和服务。

1. 提升产品的用户体验

简约有效设计对用户的价值主要体现在提升用户体验方面。

1)降低用户使用的成本,提升产品使用效率

简约有效的设计可以降低产品逻辑结构 、页面布局、交互操作等的复杂度,从而减少用户的认知和使用成本以及提升产品的使用效率。

2)更好的情感设计化

从心理学角度来讲,越简单的东西会越符合用户预期,也越容易获得用户的信赖和好感,而简约有效的设计可以降低产品的复杂度,降低用户的而使用和认知成本,因此简约有效的设计可以有效地提升产品的情感化设计,为用户提供更好的使用体验。

2. 保证产品的健壮性和可发展性

简约有效的设计对产品的价值主要体现在保证产品的健壮性和可发展性。

1)减少产品逻辑的复杂度和耦合度,保证产品的健壮性

产品功能的复杂和逻辑耦合是一个无法避免的问题,越是复杂的逻辑其犯错的可能性越大,其普适性也越差,但利用简约有效的设计可以降低产品功的复杂度,去除不合理的设计,减少各个功能模块之间的耦合度,从而保证保证产品结构的的合理性和健壮性。

2)为产品预留更多的拓展空间,保证产品的可发展性

从设计经验上来讲,产品做减法的成本远远大于做加法。利用简约有效的设计在一定程度上是可以避免产品“过度”发展的问题,因为其目的就是降低产品的复杂度,这也意味着为产品预留更多的拓展空间,保证了产品的可发展性。

三、如何做到简约有效设计

简约有效设计的内涵是非常广的,不是简单的删减功能或者减少页面的中元素就是简约有效的设计,其最基本的原则是“先有效,再简约”,即在保证设计“有效性”的基础上,再进行“简约性”设计,“有效”比“简约”的优先级高且重要。设计中,可以从以下几个方面和角度进行简约有效的思考和设计。

1. 保证设计的目的性和价值性

设计中的任何逻辑或元素都必须要有明确的目的和价值,如果设计的目的性和价值性不明确或者达不到预期,那么这样的设计是不合格的。设计的目的性和价值性可以说是所有设计的基本原则和要求,同样也是是简约有效设计的重要评估标准和指导原则之一。

2. 保留设计的特征性

简约有效原则本质上就是对设计进行“简化”设计,但不能为了单纯的简化而无限制的“删减”设计,其中重要的一点就是需要保证设计的特征性。设计的特征性能够表明设计的特点,用户通过这些特点性,以快速的辨别,理解和使用产品。例如在剪切板图标中,其剪切的含义就是其非常重要的特征,一般来说就是剪刀元素,而这个设计特征是不能被删除简化的,需要在设计中进行有效地表达。

3. 合理规划产品功能结构层次

产品功能结构层次是产品的主要框架,决定了用户的主要体验路径,其设计的好快直接影响了用户体验的好坏。利用简约有效原则不仅可以合理规划产品功能结构层次,还可以降低产品结构层次的“复杂度”,提升用户的使用体验。设计中,可以从以下几个方面考虑产品结构层次的“简约有效”设计。

1)合理的横向和纵向结构层级数

产品结构层级设计中既不能让横向结构层次过于扁平,也不能让竖向结构层次过于纵深,前者容易导致产品功能结构分散和用户认知混乱,后者容易导致用户操作路径过长,操作成本过高。

2)同级结构层次之间的独立性

简约有效的设计可以让产品同级结构层次之间保持相对独立,这样不仅可以减少结构层次之间的交叉和耦合,减少后续产品迭代优化时的“耦合障碍”,还可以保证层级结构本身逻辑的“简约性”。

3)父子结构层级之间的关联性和逻辑性

简约有效的设计可以让产品父子层级之间有含义明确的逻辑性和关联性,从而减少用户的理解认知和操作使用成本。一般来说,父级层次结构趋向于展示概括信息和重点信息,子级层级结构展示详细信息和次要信息,从而使产品结构层级更加符合用户的认知和习惯,提升产品的使用效率和使用体验。

4. 简单有效的任务操作路径

产品中用户的操作任务是相对是确定的,但同一个任务,可以通过不同的方式和路径来完成,其成本和体验也是不同的。利用简约有效的设计原则可以让产品的操作路径更加合理有效,降低不必要的操作和路径,提升用户的操作效率和使用体验。

1)用户路径长度的合理性和逻辑性

用户的操作路径的总长度应该相对较短且合理,一般来说不建议超过5个环节,否则用户任务完成率和体验会有断崖式的下降。此外,用户的操作路径中上下文前后操作节点应该有着合理的逻辑性和关联性,以便保证用户对整个操作路径的理解。

2)单个操作环节的目的性

每一个操作环节应该有着明确的目的和主题,即操作环节需要让用户集中精力处理一个重要的操作任务,不能让没有意义的任务和信息分散用户注意力。

3)单个操作环节内容的有限性

每一个操作环节中,用户需要处理的任务以及信息应该是有限的,不能让用户同时处理过多的信息或者过于复杂的任务,否则会极大地增加用户的负面体验。如果单个任务环节中包含的信息较多或操作任务较为复杂,可以考虑拆分任务和适当的增加用户操作路径的长度。

4)线性的操作路径

不要为用户操作路径设置过多的分支路径或选择,而是应该让用户操作路径趋向于串联且线性的,这样不仅可以降低产品的复杂度,还可以可以降低用户的理解和使用成本,从而提升用户体验和操作效率。

5. 简单有效的页面布局

简单有效的页面布局不仅可以更好的帮助产品达到预期目标,还可以极大的提升用户体验。设计中,可以从以下几个方面考虑页面布局的“简约有效”设计。

1)页面布局符合用户认知和习惯

页面的布局一定要符合用户的认知和习惯,否则再怎么“简单”的页面,用户理解起来也会费劲或者产生理解歧义。例如中文用户的阅读习惯都是从左到右和从上到下,用户的操作习惯大多是先阅读信息再进行操作,因此常见的布局都是将操作按钮布局在页面右侧或者底部。

2)页面布局的信息是有价值且有效的

页面中布局展示的信息一定要对用户或产品有价值,如果对用户和产品都没有价值的信息,那页面中就不需要这个信息,这是简约有效设计的基本准则之一。此外页面布局中的信息一定要是有效的,不能让用户产生歧义,从而达到降低用户使用成本和提升使用体验的目的。

3)页面信息布局的规律有序

页面中布局的信息一定要规律有序,其主要目的是方便用户阅读以及理解,从而提升用户的使用效率和体验。让页面中的信息规律有序,最常见最简单的方法就是将信息分类成组后再在页面中展示。

4)避免页面信息过载

页面中的信息密度必须适中,不能信息过载,否则就会导致用户浏览效率低,理解成本高以及操体验差的后果。简约有效原则是避免页面信息过载的基本方法之一,其原则就是重点信息优先展示,删除不必要信息或者隐藏次要的信息,利用不同的页面和层级结构将信息的“复杂度”转移分摊出去,从而保证用户当前操作页面信息密度的合适。

5)页面应该聚焦用户当前任务

页面布局的信息应该与用户当前正在处理的任务紧密关联,不让无关的信息分散用户注意力以及干扰用户当前的任务流程。如在自有账号登录页面中,忘记密码,注册以及第三方登录等次要信息的布局和样式就不能过分显眼,否则就会影响登录页面主要任务的完成——输入账号和密码。

6. 简约有效的UI设计

UI设计是产品功能逻辑的视觉化表现,其直接影响了产品的使用体验。与其他设计原则一样,简约有效原则也是UI设计的重要的标准之一,设计中,可以从以下几个方面思考和衡量简约有效的UI设计。

1)一致的设计语言和风格

一致的设计语言和风格可以确保产品在视觉上的统一性和规范性,进而降低用户认知和使用成本,即从视觉形式上和用户认知层面,降低了产品的复杂度,提升了用户信息浏览、理解以及操作的效率和体验。

2)正确无误的信息传递和表达

UI是各种产品信息的视觉载体,因此其一定要能够准确无误的传递和表达出信息的真实含义,不能因为UI设计而导致用户对信息产生误解或者歧义,这也是“简约有效”的UI设计中“有效性”的重要组成部分之一。

3)重要信息重点表达

UI设计需要做到信息表达准确且层次分明,即重要信息重点表达,次要信息次级表达。这样设计的目的就是利用UI设计增强重要信息表达和传递的“简约性”和“有效性”,即从信息层面上降低了页面的复杂度。重点信息重点表达的最基本的方法就是在视觉上让重要信息和次要信息形成较为明显的对比,如常见的文本加粗,使用高亮颜色(彩色)等。

4)清晰正确的逻辑表达

UI也是功能逻辑的可视化载体,因此UI设计一定要保证产品功能逻辑表达的清晰和准确,不能因为UI设计而导致用户对功能逻辑的错误理解。如账户模块中,账号密码的校验过程 和出错提示等逻辑必须能够通过UI清晰正确的表达出来,保证用户在登录过程中,能够通过UI理解这些逻辑,且不会产生任何歧义。

7. 简单有效的逻辑设计

产品功能逻辑设计是产品和用户交互的直接决定因素,可以说,功能逻辑设计的好坏直接决定了产品体验的好坏。简单有效的逻辑设计不仅可以降低功能逻辑的复杂度,还可降低产品的迭代开发的成本和用户使用成本。设计中,可以从以下几个方面考虑“简单有效”的逻辑设计。

1)在保证逻辑完整性的基础上,尽量降低功能逻辑的复杂度

在设计中,保证产品功能逻辑的完整性是基础的且必要的条件,在此基础上,再考虑降低功能逻辑的复杂度,不能为了简约而简约。

2)功能逻辑的独立性

在功能逻辑设计中,应该尽量保证功能逻辑的独立性,减少功能逻辑之间的耦合性和依赖性。因为功能逻辑的耦合性和依赖性必然会导致对逻辑本身和用户产生更多的限制性和要求。此外,功能逻辑之间的耦合性和依赖性不仅会提升产品的复杂度,还会影响产品的健壮性、后续的拓展性以及造成迭代成本的提升。

3)为用户设计,转移逻辑设计的复杂度

产品功能逻辑的复杂度是可以降低的,但是不可能无限制的降低。当无法降低功能逻辑的复杂度时,可以使用其他方法来降低功能逻辑的“复杂度”,最常见的就是“转移复杂”,即不改变逻辑的设计,而是改变这些逻辑的表现形式和方式,将逻辑的“复杂度”转移到不同的功能模块中或者不同的形式上。例如在线请求数据的异常逻辑有很多种,这些异常对于逻辑设计和产品优化是有很大价值的,但对用户来说这些异常可能是难以理解或者是没有价值的,可以将这些异常逻辑进行归类分组,同一组的异常使用相同的提示设计,如网络故障相关的异常,都可以提示用户去检查手机中的网络设置,而不用每一中网络故障的异常都单独设计一个异常提示。

4)提供合理的参数值和默认项

功能逻辑设计中涉及到大量的设置项和参数,为这些设置项和参数提供合理的数值和默认项,可以极大降低的用户的理解和使用成本。例如在地图导航软件中,用户选择导航线路时,需要确定起点位置和终点位置,常见的起点位置默认参数就是当前用户的位置,这种设计逻辑可以满足绝大部分用户在绝大部分场景下的导航需求,减少用户起点位置的输入。

5)更少的操作和选择

在设计中,任何的操作和选择对用户来说都是一种负担,所以应该避免为用户设计过多的操作和选择,较少的操作和选择就是降低产品功能逻辑的复杂度。如果无法减少功能的操作和选择,那么应该优化页面信息层次、操作路径和具体的页面布局来使逻辑操作和选择更加合理,使用成本更低,使用体验更好。

6)为绝大部分场景和用户设计

逻辑完整性是设计的基本要求,但在实际中经常会碰到低频场景、小部分用户群体需求或者大部分用户群体的低频需求等“异常条件”,这些都可能对产品的功能逻辑设计带来影响,但是绝对不能因为这些“异常条件”去更改主体设计方案,即在任何时候,都应该为绝大部分场景和绝大数用户设计,按照经验来讲,是不可能有满足100%需求的设计方案。类似的,我们应该更多的考虑产品的正向使用场景,不要让负向场景过多的影响功能逻辑的设计方案,即这些非正向场景可以为设计提供参考,但不能决定设计方案。

简约有效是一个非常普适性的设计原则,其可以为产品和用户带来非常多的好处,其具体内涵是非常广泛的,其中有些内容不仅仅是简约有效原则独有的,可能与其他设计原则有着较强的关联性和交叉性,如“一致的设计语言和风格”,虽然是一致性设计原则的内容,但却可以让设计很好的表达出“简约有效”。

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

文章来源:人人都是产品经理   作者:小乞丐

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

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

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


交互式数据可视化设计思维

鹤鹤

      随着大数据时代的快速发展,日常生活中对数据信息的接触场景越来越多,我们在做数据展示设计前首先要梳理数据重点,数据结构关系得到的结论结合用户需求产品需求等进行合理的设计。

      最初的数据展示接近于数据报表的形式,而现今数据展示有两种:静态数据可视化、交互数据可视化。它们的设计基础均基于数据可视化的设计要点进行延展的,而数据可视化要点已有很多优秀的设计师进行总结,因此我重点介绍一下我对交互式数据可视化的理解(仅代表个人观点),希望对大家有所帮助。

      什么是交互式可视化

      静态与交互式数据可视化的区别

      交互式数据可视化中的用户体验

      交互式数据可视化设计思维

      开源数据可视化库



什么是交互式数据可视化

      交互式数据可视化是一种更能够吸引用户的数据信息交流形式,在BI中的应用也变得越来越流行,并且由于其有较强的易用性以及能够为用户体验带来更多附加值而逐渐成为大多数数据分析系统的常见部分。它通过数据动态演示的交互方式,使用户可以直接与信息交互,用以构建自己对信息的理解,交互式可视化必须具有与人机交互方式,如单击按钮,移动滑块,快速响应以显示输入和输出之间的真实关系。

      有效的交互式可视化能够保持展示形式和数据功能之间的平衡关系。简单的图表可能因为太无聊而无法引起用户的注意,复杂数据可视化可能完全无法传达正确的信息。因此数据视觉和交互形式效果需要协同工作。



静态与交互式数据可视化的区别

      静态数据可视化是不包含任何交互功能且不随时间变化的数据可视化,从单一视角关注特定数据故事的信息图。图表中没有可操作的交互功能来调整静态可视化的数据展示结果,更适合不太复杂的数据故事、建立概念之间的关系以及传达预定的视图。其构建成本远低于交互式设计。因此在设计时必须充分考虑如何展示当前显示的数据拟定好数据故事。

      交互式是可视化设计中的绝佳工具,因为它们能够优化信息的显示方式,减少视觉噪音,降低用户对数据阅读的难度。系统中最常见应用之一是数字化仪表板或数字看板,如果直接从枯燥的数据表格获取信息这样的体验是非常原始且视觉干扰过多。而通过梳理数据结构使用适当的交互可视化使看板,能够成为用户快速汲取主要数据信息的理想工具

    设计时决定应用哪种数据可视化形式一方面需通过用户画像分析了解用户偏好如何,另一方面则需要结合数据故事复杂程度采用哪种才能够更全面更准确的传达数据信息,以及在构建项目的过程投入成本最终回报率的高低也起着决定性因素。




交互式数据可视化中的用户体验

      大量数据可用于帮助用户做出更好的业务决策。为了实现这一点,并从数据中获得最大价值,用户必须能够理解它;提出问题、体验模型并识别异常。

      在设计数据可视化面板时,最至关重要的是,需要考虑用户将如何使用这些数据。让更多的用户会使用数据面板而不是让他们去创建面板。强迫用户按照我们设定的规则去破译图表含义不仅不切实际且学习成本高昂。

      用户需要在不受额外功能干扰的情况下看到我们所展示的内容,当我们使用太多的颜色、形状、图案和大量的数据时,容易使用户迷失在数据展示中。我们的工作就是为用户处理数据信息结构降低用户对数据认知的难度。


视觉成像基础

      我们的大脑处理视觉图像要比处理文字内容快 60,000 倍,能够在13 ms内处理一张图像,然而,大脑的处理能力也是有限的。为了展示最优效果,数据可视化必须基于人类认知速度提供信息。需要设计输入来将信息分解成可管理的模块并以用户能够简易处理的方式呈现它。

 

用户分析

      我们在构建任何类型数据可视化时都需以用户为中心,了解用户的目标、动机和需求,经营环境,需要解决什么问题,以及用户语言和特定领域的知识;

在做这方面用户分析不需要耗费大量的时间,只要足以使我们能够进入下一阶段——设计用户路径上即可


用户体验路径

      系统用户的体验建立在两个主要元素上:关键点可视化以及交互路径。而用户路径中每个关键点需设计为对应特定的业务问题。

      可视化工具能够以丰富而复杂的方式与图表交互:筛选、缩放、细分、导出值等。它们都有助于将信息分解为更易于管理的块,因此我们需要考虑多种操作结果,综合起来能够串联出具有多个分支交互路径和图表用户体验路径。




交互式数据可视化设计思维

      可视化中的交互改变了数据的视角,始终致力于简单的可视化而不是复杂的可视化。目标是使其更易于理解和阅读。因此,需要避免使因使用过多的图表引起页面结构混乱,意味着通过过滤某些数据点,选择数据的不同区域,甚至完全改变可视化的类型。重要的一点是:交互式可视化不再是静态的,也不代表数据的单一视图。交互使人们能够根据自己的需要调整可视化并提出不同的问题。


寻找理论依据

      通过了解受众群体是谁,需要展示哪些数据,了解他们将如何使用这些数据。这些都将作为我们设计的理论依据,用以解决设计中哪些图表是可以快速应用到实际场景中,如何为数据结构做简化等问题;在数据的展示形式上通常是使用图表、线条或点、条形图和地图来实现的。万变不离其宗,交互可视化也是同样在此基础上进行扩展发挥作用。


遵循设计原则

      在设计中需要为数据可视化创建各种交互式小部件,但首先需要遵循数据可视化交互设计的三个基本设计原则——可用性、可访问和可操作。

       是否有直观的交互功能和数据可视化?

       用户是否可访问数据,并且能够快速理解其含义?

      是否为用户提供简便易上手的可操作的系统平台?

      当我们有了一个粗略的理论基础模型,就可以搭建数据模型来记录每条数据和相关的元数据,接下来是通过各种交互形式设计用户界面。


清晰的架构

      可视化架构是映射数据故事的形式化基础,在此基础上通过线条、图标和颜色等设计元素的视觉工具进行展示。为了利用这些工具,我们责需要运用对比关系、比重关系、颜色差异、位置信息和象征意义等突出显示信息所呈现的目的及数据间的结构关系。


可视化美学

      设计美学中少即是多的设计理念经久不衰,我们在进行可视化设计时也可按照这一标准在有限的设计空间内为用户提供最多的想法,清晰准确的传达复杂的想法


交互式绘图

     交互不一定发生在页面中明显可点击的事物上,也可融入在图像结构中,用图表中交互的小部件,扩展到其他类型的内容上,通常需要一个或多个UI 元素进行转换提示。

如在做地图中的交互可视化时要探索当前特定点或区域的实时信息,此时需要将图标或交互功能融入在地图上


开源数据可视化库

      简单介绍一下开源的交互可视化数据库,如果对数据没有什么概念在图表设计前可以参考一下数据库中的样式及类型,然后根据自己实际项目的需要进行设计。

D3.js 可能是最流行和最广泛的 Javascript 数据可视化库  专为基于数据操作文档而构建,并使用 HTML、SVG 和 CSS 使数据栩栩如生。

还有很多开源数据库可以查看- 11 个 Javascript 数据可视化库-里面有详细的介绍,这里就不一一说明了,希望在你们的设计中有所帮助。

结论

为了提高交互式数据可视化易用性以及为用户体验带来更多附加值,我们需要基于数据调研,用户分析,场景模拟等方向逐一解决相对应的问题,才可从各项结论中得出设计方向和目标。

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

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



文章来源:站酷    作者:胖Kuan

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

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

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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档