恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用户界面“科学化内容传达”(年度干货)
0.0°
2020-07-10 原创文章 经验/观点 举报 410 1 1 0

UI设计深度干货。




深入了解体验设计思维下的用户界面设计,让界面设计有完善的思考维度跟方式,从产品、用户与自我创新角度完成传统UI设计师从执行者到驱动者的思维转变。


01

从“美观”到“驱动”



之前无数次的提到过设计师成长的三个阶段:第一个阶段设计师作为修饰者,比如美化页面,这是最底层的基础价值,上篇主要讲解了设计师如何做好这个阶段,初入门的设计师需要先把这些基础打牢;第二个阶段设计师作为区分者。比如根据不同产品,来打造不同调性,把它和同类产品区分开来;第三个阶段设计师作为驱动者。这一点是非常核心的,当设计师作为计划者、驱动者时,类似于我们工作场景中所说的“设计驱动产品”,我们应该了解用户想得到什么,了解不同阶段的产品应该如何控制版面信息的优先级,这应该是我们设计从业者的一种终极梦想,也是价值感非常强的一个阶段。




为了让大家对于这三个阶段有更深的理解,我举个简答的例子来说明。比如我们现在需要设计一个电商类产品的首页,首页大部分都是产品列表,原型如下图:



首先是处在第一个修饰者阶段的设计师,以美观度为目标,进行对齐、对比、亲密、相似、闭合、思考这六大原则的走查,然后会产出如下页面。



修饰者设计思考:

增强Tab标签选中与非选中状态下的对比;价格因素赋予橙红色色相,增强列表标题字重;热门团购与为你推荐增加图标点缀主观增加页面细节提升品质感;由于电商类产品色彩较为丰富,因此将主色应用在导航处,占据主要面积防止色彩混乱,添加微渐变色将现实物理逻辑光影带入页面,营造透气感。

-

那么我们再模拟处在第二个区分者阶段设计师的思考过程。以记忆点跟差异化为目标,会产出如下页面。



区分者设计思考:

基于视觉层面的格式塔6大原则之外,从产品属性出发,通过性格孵化模型确定产品品牌性格,色彩角度蓝色更符合“鲜”的产品形象,并且据色彩心理学资料表明蓝色是机会没有人反感的色彩,而紫色代表着“神秘”“高贵”,与生鲜类属性不符,板式与细节角度来讲圆润为原子DNA,落地到界面中例如页头文字采用圆体,搜索框圆角处理,背景圆角处理的同时营造Z轴空间感。从品牌化角度出发,页头增加品牌露出,背景增加品牌DNA,选中状态增加品牌DNA,“为你推荐”改为“麋鹿推荐”再一次加深品牌印象。

-

区分者角度更多的是在营造记忆点与差异性,设计出更符合该产品属性的界面而非纯设计师个人喜好,从修饰者到区分者的进阶门槛并不高,后面会详细的去讲解如何设计出符合产品属性并且有独特记忆点的设计稿。

-

最后一个阶段是驱动者,一名用户界面设计师如果到了驱动者这个阶段就可以称自己为“产品体验优化师”,因为他需要更全面的思考到产品、用户、技术等多个维度的问题,可以往后退一步从需求角度思考该需求是否合理,内容是否合理,也可以往前一步走从技术角度思考如何更好的适配,如何以最低的技术成本解决问题。(注:案例不考虑产品经理人品及性格,不考虑技术人员脾气与勤快程度因素)最后产出如下图。



驱动者设计思考:

这里为了方便大家理解,我用区分者跟驱动者产出的界面拆分组件来说明设计思路。

首先是导航与分类Tab部分,之前搜索框放置在分类Tab上方,改动后将搜索框放置在分类Tab下方,原因是分类Tab可以通过页面全局左右滑动进行切换,而搜索框比较要进行点击交互,放置在靠下的位置更加方便用户点击,并且作为细分化的电商类产品,带有直接目的性购买意愿的用户较多,因此搜索功能使用频率较高(别问了,数据来源于埋点统计)。搜索功能加入热门搜索项,提高搜索功能利用率。分类Tab之前一行显示5个,更改后一行显示6.5个(375画布下效果,后续安卓尺寸考虑单独适配与验收),提高页面交互效率的同时让用户对于左右滑动交互产生明确预期。



然后是热门团购部分,首先增加换一批功能(按排序先后显示,最多点击4次,第5次进入循环状态)提高功能利用率,由之前3个卡片统一整合为一个卡片容器,卡片容器内所有商品公用一个热区,由之前点击商品进入商品详情页改为点击商品进入团购详情页并且定位到该商品列表处(点击查看全部进入同一页面,页面停留位置有区别),增加团购页面曝光,提高目的性不明确用户的产品使用时长。团购类列表相比成交量用户更关注优惠力度(基于用户问卷调研),参考沉锚效应,原价为一个锚点,传达团购板块特殊价值,因此将原价信息替代销量信息。



最后是麋鹿推荐部分,由之前的半卡片化列表改为全卡片化设计并且改用瀑布流形式,提高页面利用率的同时增加用户停留时长;卡片右下角增加“加号”按钮,点击可直接将商品加入购物车无需进入详情页缩减用户转化流程。




我们再把两个页面全局放到一起进行对比,看似视觉上无明显差异,然而深入细节思考会发现如果以驱动者的角色去解决问题需要“操心”到每个信息的合理性,布局形式,用户体验意图,产品数据意图等,增删信息或功能时更需要考虑实现成本与逻辑,权衡成本与价值。



当然,案例中的界面仅仅作为抛砖引玉,如果深挖仍然有很多不足这里就不再多去赘述了。本文就从区分者与驱动者的角度去切入,如何将用户界面设计的更有差异与逻辑。


02

解读文章框架



Objectives :科学合理性

Key Results :深挖界面信息传递核心目的

Action 01:确保每个信息存在的必要性,查缺补漏

Action 02:确保每个信息的布局形式与信息层级合理

Action 03:根据产品期望反馈数据,引导用户交互



Key Results:

深挖界面信息传递核心目的

界面设计跟平面设计最大的区别就是一个是工具一个是媒介,用户界面是承载于互联网的工具,而平面设计是承载于某种材质下的传播媒介。深耕用户及界面系列的文章“上篇”跟“中篇”都是从单纯视觉角度出发,讲解了如何通过视觉手法让界面板式美观易读,并且凸显自己产品视觉层面的特色与记忆点。

-

这些对于体验设计师来讲只是基础要做到的,再深入一些来讲,体验设计师同样需要对内容负责,更深入推敲PM的需求合理性,深入了解需求,协助PM结合自己交互与视觉的专业知识将需求做到更为合理。

-

从用户角度来讲,设计师需要对用户使用产品的三个环节负责:第一个环节是“开启”,需要让用户在使用产品前有较好的视觉感受,设计师需要做到视觉的基础体验合理,这是“上篇”中主要去讲的内容;第二个环节是“解决”,需要让用户在使用产品的过程中高效解决问题,设计师需要做到通过增删有效信息,合理布局让用户高效获取有效内容,这是本篇文章需要去讲的内容;第三个环节是“离开”,需要让用户使用完产品后有好的印象与情感,设计师需要做到加深产品品牌印象与视觉差异化,这是“中篇”中主要去讲的内容。



第二个阶段是体验设计师拉开差异化的重要能力。界面设计作为上线前的最后一次设计工作,需要对上线后的效果负主要责任,这是一名优秀的体验设计师需要具备的责任感。体验设计本就是互联网流水线的其中一道工序,整个流水线都有着同样的目标。

-

在第二个阶段也就是“解决”阶段我们需要分四步去思考:第一步为“内容需求走查”阶段,我们在设计界面前就需要非常明确的知道当前页面在整个交互流程中扮演何种角色,用户在当前页面有何种痛点,然后带着这个思路去走查页面中每个信息存在的价值;第二步为“信息层级布局”阶段,我们需要根据页面中板块跟信息的重要层级合理化布局信息,从布局样式、位置、面积等多个因素梳理层级;第三步为“产品数据优化”阶段,我们需要从交互跟视觉角度协助产品完成其数据指标;第四步为“界面视觉呈现”阶段,前三步都是基于原型上完成的,最后一步便是将原型升级为高保真页面,只要做好了前三步,最后一步就比较容易了。



这篇文章就从前三步切入,借助设计工具模型深耕设计思路。


Action 01:确保每个信息存在的必要性,查缺补漏

PM给到的原型一般较为简单,并且很多资历尚浅的PM习惯将内容平铺,其中不乏很多“无差异内容”。体验设计师接到原型文档后第一步需要做到的就是深入了解用户需求与产品需求,通俗来讲可以分为三个角度,第一个角度是思考页面核心表意(该页面属于哪个流程,页面在整个流程中有何作用),第二个角度是思考用户在当前页面的需求跟产品原型中的需求是否对应(将用户需求转化成产品需求),第三个角度是将需求查缺补漏,基于奥卡姆剃刀原理用尽量少的内容解决问题。



借助有效信息筛查地图完善原型内容

为了方便大家去理解,这里给大家整理出来“有效信息筛查地图”,通过地图来整理思路会更清晰一些。第一栏为页面流程(该页面所在的完整流程);第二栏为核心表意(该页面需要解决用户什么问题);第三栏为需求对照(思考用户在当前页面的痛点痒点跟爽点,然后将其落地为产品功能);第四栏为需求池(融入KANO模型让需求等级更直观)。



为了方便大家理解,这里我以业务类产品“门票”板块单独拿出来举例,下图为门票页面的需求原型文档。



我们拿到原型文档后如果PM没有给到交互流程图,我们需要进行补全,方便深入理解需求,并且确定当前页面在整个流程中的所在位置跟页面核心表意(即需要解决用户什么问题)。流程可以不用太详细,仅把当前需求的流程写清楚就可以了。



接下来我们需要根据页面的核心表意深挖用户需求,然后将其转化为产品功能需求,也就是传统的需求分析环节。此时可以将PM的界面初始原型作为参考,也将直接竞品的界面也列入参考范围,同时以用户角度进行用户故事头脑风暴(此环节无需组织用户调研,从1到1.2环节需要设计师主观优化而不是全部依赖于用户反馈),最后将获取到的需求放入需求对照池,将初始原型中没有的需求标红。



需求分析环节结束后可以将红色部分根据技术成本评估进行收拢,最后确定需求点,放入需求池,先将需求进行板块归类,然后将有歧义的需求借助KANO模型评估需求等级。



何为KANO模型?一针见血快速了解。

KANO模型也叫卡诺模型,一般用于需求等级的确认。KANO模型把需求分为5个等级,即基础需求、期望需求、亮点需求、无差异需求、反向需求。


这个5个需求是以用户为评判标准的,比如基础需求对于用户来讲就是“没有这个需求不能接受,有这个需求也无所谓”;期望需求是“没有这个需求也能接受,有这个需求会感觉还不错”;亮点需求是“没有这个需求感觉无所谓,有这个需求会感觉很惊喜”;无差异需求是“没有这个需求跟有这个需求都无所谓”;反向需求是“没有这个需求无所谓,有这个需求则感觉很讨厌”。

-

用十字坐标图来展示可以更为清晰一些,X轴为“是否提供该功能”,Y轴为“用户的满意程度”,我们就可以生成以下图表。



以电商类产品为例,“搜索”就属于基础功能,“买家秀”就属于期望功能,“上传照片识别商品”就属于亮点需求,“商品列表一键加入购物车”就属于无差异需求,“商品自动付款”就属于反向需求。

-

了解完了何为KANO模型,我们接下来要知道该怎么去用。KANO模型的难点就在于如何确定每个需求到底属于哪一种需求,这里有个确定需求类型的方法叫“KANO问卷”,通过发放问卷进行用户调研的形式来确定这些需求到底为何种需求(一般有歧义的需求才会用),KANO问卷为如下样式。



我们需要给定量用户发放该问卷,询问用户当有该需求时你的感受如何,没有该需求时你的感受如何,从而确认该需求属于何种需求。然后根据用户的选择从下表中到照对应的需求类别。



其中Q为可疑结果直接忽略不计,因为当一个功能提供或者不提供用户都很喜欢的话,用户的回答本身就是矛盾的。当用户的反馈为:提供该功能“喜欢”,不提供该功能“理所当然”,那么其需求就属于A(亮点需求)。

-

比如我们同时给20名用户发放了问卷,最简单的方法就是看用户最终选择的哪个结果最多,就可以定义其为哪个需求类别。当然还有更准确的计算方法,这里就不多提了。

根据需求的评估结果,我们将需求放入需求池,方便观察。



最后,我们根据分析整理完的需求池根据工作量与需求紧急程度进行优化,优先考虑基础、期望与亮点需求,无差异需求需要后续思考在商业化角度有无作用。优化前后对比如下。



首先进行了文案内容精简,减少用户阅读时间;其次增加“大家都在搜”板块,两个作用:第一个作用是热门搜索涵盖了40%以上用户的搜索意向,减少此类用户输入行为,提高交互效率;第二个作用是提高搜索功能利用率,搜索功能为此页面层级最高的功能,通过增加此需求可以让目的性不明确的用户也能通过搜索解决问题。


首先进行文案优化,“人气榜单TOP”代替“推荐榜单”,文案表意更直接。其次信息进行了筛选,对于用户来讲,榜单的重点在于销售量与评分,门票价格与特色非主要决策信息反而占据了板块太多空间,此处进行了内容替换,更加凸显榜单TOP的功能特色。



列表内容进行了内容调整,增加景点类型与地址区域信息的外露,一句话介绍保留放置在最后面,增加用户关注的决策信息。

-

经过上述调整,在内容需求走查阶段我们最终原型优化稿如下。


Action 01:确保每个信息存在的必要性,查缺补漏

将产品原型中的有效信息进行查缺补漏之后下一步要做的就是将信息进行层级上的划分,让用户在浏览界面时可以更有节奏,更快的获取重要信息。信息层级的划分要分两步进行,第一步是划分功能板块的优先级,第二步再去划分各板块中每个信息的层级。

-

第一步板块层级的划分需要根据使用该板块的用户量跟频率来划分,如果该需求较为重要并且竞品较少且不够权威时,可以借助用户调研来确定用户对于每个功能的意向率,比如就像我们上面所讲的“门票”案例,调研中就可以主要询问用户:“你在购买门票时有无明确意向?”因此此问题很难有绝对答案,所以建议答案有三个:“A:有;B:没有;C:偶尔有”,通过调研结果确定搜索功能的优先级。当然很多时候设计师也会根据自己对于用户的理解结合KOL竞品来确定功能板块的优先级。

-

我们需要给每个板块非常清晰的定义优先级并且贴上标签,当然体验设计并不是需要绝对精确,产品的成功需要一个简单的微创新+疯狂迭代,对于一些有歧义的功能层级,我们可以结合ABtest不断迭代最终确定最科学的设计方案。最后我们需要根据确定下的板块布局生成一个简单的“单页面用户旅程图”,确定板式布局的节奏上的合理性。



所谓的单页面旅程图就是将典型的下限用户(需要用最复杂流程解决问题的用户)在使用该功能板块时的目的(一般PRD文档会有,如果没有需要设计师进行补充)跟想法记录下来,同时模拟用户在每个功能板块的分流数量(上线后根据实际数据情况进行二次优化),然后从用户的角度去评估其功能层级的合理性,大概参考形式如下图。



通过单页面用户旅程图可以发现下限用户对于每个功能的想法,观察用户对于布局形式的接受程度。并且功能板块一定是从高层级到底层级对于用户的包容性越来越高,因为包容性越高解决问题所需要花费的时间越长,这类功能要往后放,作为兜底的功能。一个科学的界面布局形式应该是倒三角的形式进行用户分流,花最少的时间让用户解决问题。

-

确定了板块层级,下一步就需要确定各板块中每个信息的优先层级。一般会通过艾森豪威尔法则快速的进行信息层级梳理,各个板块需要分开梳理。对于一些有歧义的信息可以借助KANO问卷的结果进行二次判断。



何为艾森豪威尔法则?一针见血快速了解。

艾森豪威尔法则也叫四象限法则,一般用于需求紧急程度与优先级的判断。如果把要做的需求按照紧急、不紧急、重要、不重要的排列组合分成四个象限,这四个象限的划分有利于我们对需求进行深刻的认识及科学的层级梳理。具体的做法就是画一个十字象限,X轴为紧急程度,Y轴为重要程度,那么第一象限就是最高层级,第二象限就是第二层级,第三象限最低层级,第四象限是第三层级。



四象限法则最早应用于时间管理,在体验设计领域内这里所指的重要一般为用户的关注程度高低,紧急指对于产品商业角度来说紧急程度的高低。很明显,第一象限为用户即关注产品又紧急的需求,应该在视觉上为最高层级;第二象限为用户比较关注但是产品不紧急的需求,第三象限为用户不关注产品也不紧急的需求,第四象限为用户不关注但是产品商业角度很着急的需求(譬如广告需求)。一般来讲第二象限跟第四象限的需求需要根据产品所处阶段来划分,比如产品初创期到发展期阶段一定是第二象限的需求优先,也就是用户为核心,但是成熟期的产品就可以考虑第四象限的需求优先,也就是产品商业转化为核心。第三象限的需求基本可以排除。

-

如果一些需求设计师无法主观判断其对于用户的重要程度,就可以借助KANO问卷进行科学化评判,如果最终判定此需求为基础或者期望需求,那么对于用户来讲就是重要的,如果此需求为亮点、无差异、反向需求,那么对于用户来讲就是没那么重要的。

-

但是仍旧有一点需要强调,数据跟用户反馈既可以在上线前搜集,也可以在上线后搜集,设计师应该有自己的主观判断能力,如果每次需求都需要大量的调研数据支撑,那么很难可以称其为优秀的设计师。尤其一些非核心需求,可以通过ABtest的方式进行小范围试错低成本的找到最优解。

-

这里我就以门票页面的景区列表信息为例,将之前通过内容筛查地图确定下来的内容利用法则进行信息层级梳理。


经过评估,将重要的信息进行编号,然后剩余信息根据产品所处阶段,视觉美观因素等进行适当主观调整,最后设计出合理的界面视觉稿。

-

这里需要注意,并不是所有信息都需要通过四象限法则进行层级梳理,比如当我们需要给品类区(品类区是不同的景点类型)进行层级划分的时候,很难在用户那里获取到准确答案,因为每个用户对于景点类型都有不同的喜好,此时我们就可以根据一些其他因素进行优先级划分,比如该地点的标志性景区类别优先。


什么时候需要在视觉上区分信息层级?

之前我多次讲到体验设计的核心就是发现问题跟解决问题两点,前面区分信息层级可以说是处在发现问题阶段,而最终的界面视觉设计则属于解决问题阶段。

-

首先大家一定要了解区分信息层级需要有足够的对比,也就是想突出一个信息必须要弱化一个信息,正如物理学当中的参照物,当我们感受到一辆车跑的很快时,一定是有其他建筑或者树木的对比,当所有的元素都跑的很快时,我们是感受不到其速度的(例如地球的自转)。界面设计也是一个道理,所有的元素都突出,那么就等于所有的元素都不突出。

-

这里给大家科普一个很常见的定律,即“席克-海曼定律”。此定律在交互设计中多有指导作用,定律内容很简单,即“给予用户的选择越多,用户做出决定的时间则越长。”比如我们在挑选商品时,当一个商品只有俩个型号可选时,我们2选1的时间可能需要两分钟,但是当一个商品有10个型号供我们选择,那么我们可能需要花费十分钟的时间去做出决定。计算公式我这里就不讲了,可以用一个图来表示,如下图所示。



这个定律在视觉角度可以理解为当一个页面内的信息都在同一个视觉层级,没有对比所营造出的差异主次,那么用户在浏览时将会非常的浪费时间。

那么这里就有问题了,给予用户的选择,到底多少个选择算多呢?

这里也是有科学依据的,需要让大家再知道一个定律叫“米勒定律”也叫“7±2法则”,根据米勒(Miller,1956)的分析,人脑处理信息有一个魔法数字7(正负2)的限制,也就是说,人的大脑最多同时处理5到9个信息。原因是短期记忆储存空间的限制,超过9个信息团,将会使得大脑出现错误的概率大大提高。也就是说,比较保守的是同时出现5个以内的信息,当一种信息层级里同时出现超过5个信息时,人的大脑就开始要出错了。

-

这时就有人会有疑问,我们的产品本来就必须要有这些内容,怎么办呢?其实当信息过多时,并不需要进行删减,而可以通过让用户分步认知的方式来解决信息过多的问题,举个最简单的例子,以Banner设计为例,当文案超过9个字的时候,我们就可以通过一分为二的方式把文案折行显示,从而让用户对这9个字分布进行记忆识别,即使第二行文字记不住,也比这9个字全部都记不住的好。



再比如当界面中品类区功能较多时,也可以通过层级对比的方式来最大化的将品类区利用起来,比如类似美团跟马蜂窝APP这种业务类产品都会进行品类区主次分类,并且每一类的数量都不会超过9个,超过9个时会以展开收起的交互形式体现。



视觉角度影响信息层级的因素

了解了为何要区分信息层级以及什么时候需要区分信息层级之后,下一步就要了解在视觉角度优先级会受到哪些因素的影响。当然讲到这里大家一定会想到我们用户一定会优先看大的,其次看小的,想要突出的信息做大不就好了。其实信息的优先级有很多种方式进行区分,除了大小之外,这里我大致总结为4种,即位置、色彩、留白、三维空间。


首先我们知道如今人们的浏览习惯是由上到下,由左到右,我在之前的文章中也着重讲过,由于这个浏览习惯所产生的左图右文跟左文右图的布局差异。所以位置是个很重要的因素,就拿一个列表为例,最重要的因素一定是放在最最左边或者最上面,左右布局时,左边是最高视觉层级,上下布局时上边是最高层级。那么在一个界面内,界面的中上方为高视觉优先级,界面的下方为次要优先级。

-

其次是色彩,消色(黑白灰)中,灰色属中间层级,白色背景下,黑色为最高层级,颜色越浅层级越低,黑色背景下亦然。消色跟有色相的元素相比,有色相的元素优先并且有色相的元素一般都可点击,并且一个板块内色相越多,整个板块的优先级越高,这里可以回头看刚才马蜂窝APP品类区的设计,一级品类色相较多,二级品类保持了单色相。并且如果想突出某个板块的话,也可以给整个板块增加有色相的背景。其次就是饱和度越高视觉层级越高,这里就不多讲了。

-

第三是留白,板块或者内容信息周围留白越多,则层级越高。

-

第四是三维空间,界面中的三维空间多指卡片元素,卡片的视觉层级一般较高,当然带有色相的卡片元素层级则更高。

-

最后我们根据上述理论来进行“门票”页面的视觉层面的信息层级优化。


首先搜索作为层级最高的功能板块,在色彩上跟其他功能板块就做出最直接的区分,让板块层次抬高的同时页面板块分类也更清晰。



品类区遵循席克海曼定律与米勒定律,将品类区划分为一级品类跟二级品类,从大小跟色相上面做出视觉差异,提高品类区功能利用率的同时降低用户视觉压力。


根据信息层级做出大小区分,标题增加图标点缀,让各板块之间更清晰易分辨,“查看全部”字号弱化的同时加入箭头元素,视觉层级降低但没有降低功能表意。


根据四象限法则结合KANO问卷的分析结果进行常规优化,同时“5A”修改为“5A景区”,样式上跟标题做出差异化,更方便用户认知

-

经过上述调整,在信息层级梳理阶段我们最终原型优化稿如下。


Action 03:根据产品期望反馈数据,引导用户交互

上一个Action我们解决了如何在现有的内容上进行合理的信息层级梳理与布局,第一跟第二个Action我们更多的都是在从用户角度出发进行原型上的优化,那么原型优化的最后一步我们就需要从产品角度出发,以体验设计师的能力帮助产品提升其期望的反馈数据,引导用户做出产品想要其进行的决策行为。

-

这里会牵扯到一些用户增长相关的知识,我在《体验设计发展观》那篇文章中有提到过体验设计眼中的用户增长观念,有兴趣的伙伴可以回头看一下。产品经理都有需求上线后期望达到的数据指标,也就是OKR里面的KR(关键指标),做到让用户体验流畅易用可以说是体验设计中的其中一大难题,但是第二个难题就是如何在不影响用户体验的基础上利用体验设计相关知识协助产品完成其期望的反馈数据。


确定数据指标与评判变量

如果想要协助产品提升期望数据,首先就要从产品那获取到其希望用户做出的决策行为,可以没有确切的期望数据。我们确定了目标以后需要进一步确认评判其设计方案是否合理的评判变量。


为了方便大家理解我给大家举例说明。

比如我们现在在做新闻资讯相关的产品,现在我们有个需求是“提高Feed列表的CTR(点击率)”,通俗点讲就是要让用户查看更多条新闻。如果我们拿到这个需求以后马上就去提方案可能会有明显的CTR上升,但是从长期来看可能会产生负增长。因为我们只定义了一个数据指标,没有同时确定评判变量。那么什么叫评判变量呢?比如现在我们的需求是提高Feed列表CTR,那么如果确定我们的设计是有价值的,除了看Feed列表CTR之外,还需要同时看哪些数据呢?



这步思考其实很简单,用户进行点击行为只是个交互行为的开始,一个列表点击率上升一定不能伴随跳出率的上升,否则这个点击率也就没了意义,除了跳出率要观察之外,用户阅读的新闻多了,人均使用时长是不是也要伴随着提升呢?最起码要做到人均使用时长不能下降,所以此需求的核心数据指标就是CTR,评判变量数据就是跳出率与人均使用时长。


灵活多维度思维解决问题

我们确定了核心数据指标与评判变量之后,要做的就是利用我们的专业知识提出解决方案,方案可以很小,比如功能位置的调整,也可以很大,比如通过动画解决问题,所以这个时候就不要局限自己的设计思维,从内容角度,视觉角度,交互角度,情感角度多个维度去解决问题。


内容角度指的是文案的删减与调整;视觉角度指的是通过板式布局,功能位置的调整,配色的调整等;交互角度指的是交互形式的改动比如功能前置,交互结构调整(树状结构改为TAB结构),通过微交互动画来提高功能层级等;情感角度就比较综合了,比如更为温和与更具激励性质的文案,或者更具冲击力的视觉设计,再或者可以让用户上瘾的交互动画等,

-

举个最简单的例子,抖音的视频播放页面为了提高视频点赞功能的转化率,从交互、视觉、情感角度都做了足够的思考。


"

视觉角度:增强视觉反馈效果,放大爱心区域并且爱心可叠加,视觉感官上更具冲击力。

-

交互角度:扩大交互热区,由之前爱心icon区域扩展到全屏区域,提高交互效率;双击屏幕爱心无限但只增加一次点赞数据,多次双击屏幕不会取消点赞,考虑容错性

-

情感角度:通过夸张式的反馈增加用户点赞交互过程中的愉悦感,满足用户对于优质内容的“超级”赞赏。

"

内容角度指的是文案的删减与调整;视觉角度指的是通过板式布局,功能位置的调整,配色的调整等;交互角度指的是交互形式的改动比如功能前置,交互结构调整(树状结构改为TAB结构),通过微交互动画来提高功能层级等;情感角度就比较综合了,比如更为温和与更具激励性质的文案,或者更具冲击力的视觉设计,再或者可以让用户上瘾的交互动画等,

-

举个最简单的例子,抖音的视频播放页面为了提高视频点赞功能的转化率,从交互、视觉、情感角度都做了足够的思考。

-

最后我们根据上述理论来进行“门票”页面的产品数据角度的优化。



此版本新上功能“网红打卡”,通过KOL提高优质景点门票的曝光与转化,此功能为未来版本的重点发展功能,因此通过位置调整提高视觉曝光量,同时考虑后续加入MG动画,提高功能CTR,根据初版本的用户数据反馈持续优化该功能。


人气榜单TOP对于用户的决策具有非常强的指导意义,然而目前门票页面只显示3个,需要跳进下级页面查看更多,功能利用率不高,因此考虑将人气榜单板块改为十字交互,最多显示9个(米勒定律);同时左上角加入“TOP”标签,赋予功能视觉特色。


偏好筛选与列表板块在用户没有选择偏好时也遵循系统的推荐机制,具有随机性,因此在用户没有做出偏好筛选之前,将筛选项前置作为推荐板块,提高板块初始状态下的价值;并且该属于常规功能板块,可以将“全部景点”标题去掉,提高页面一屏曝光信息数量。

-

经过上述调整,在产品数据优化阶段我们最终原型优化稿如下。


最后,我们将优化完的原型进行色彩填充,图标绘制等工作(在“上篇”美观篇与“中篇”差异篇主要讲解了此阶段知识)



总结


体验设计师应该为最终的上线效果负责

体验设计师需要同时为产品跟用户考虑,也需要为内容跟视觉做最后审核,当然,作为一名驱动者,也一定要于最终的上线效果负责。一个需求的上线并不是结束,而是开始,我们需要不断跟踪其需求用户的跟数据的反馈,不断优化,必要时可以借助设计工具让设计方案更合理。

-

此篇完结,字字原创,更多内容可以跟前辈学习,有了方向才能举一反三,国内新锐一代的用户体验设计深耕者——孔雅轩。


孔雅轩


人人都是产品经理 起点学院讲师

站酷推荐设计师

曾任今日头条UED部门用户界面设计师

像素范儿济南校区UI教育联合创始人


为解决设计师职业困境突破职业瓶颈从“美工“变身”体验设计师”跃进大厂,挑战40万年薪数艺设&PRD联合出品PRD高级UI体验专修课


毕业季学生,0基础↓零基础入门UI,知识储备高人一筹1-3年设计师↓突破职业瓶颈,了解体验设计3-5年设计师↓掌握更多方法论,晋升团队管理 两位专家级讲师主讲各种迷茫纠结和设计难题都迎刃而解


看这诚意满满的课程安排

更新:2020-07-10

收藏

1人已收藏

数艺设

人民邮电出版社数字艺术分社

  • 491

    作品

  • 1108

    粉丝

  • 0

    关注

  • 分享一个普通插画师,很难Hold住的画法!
  • 为什么现在学Photoshop,也不算晚?
  • 乌江榨菜国风新包装!设计师画了40多稿
  • 你感受过五彩斑斓的孤独吗?这些高饱和度插画里隐藏着生活的力量
相关标签
设计ui

    猜你喜欢

      2020-07-10 原创文章 经验/观点 举报 410 1 1 0

      用户界面“科学化内容传达”(年度干货)

      0.0°

      你确定要举报用户界面“科学化内容传达”(年度干货)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录