首页

定量研究进阶:客户满意度模型与卡诺模型

ui设计分享达人

如何提高“数据修养”?

定量研究指的是对用户的某些特性进行数字化测量并进行统计研究。对于定量研究来说,数据的统计以及数据的分析是尤为重要的。

首先,需要说明数据修养,与统计技术的水平无关。

数据修养指的是培养科学的、正确的对待数据的态度,在收集、分析和解读数据的过程中做到求真务实。


1、在研究设计时就考虑到数据分析方法

良好完善的研究设计是正确进行数据分析的前提,如果没有科学的设计,良好的数据质量,那么无论用什么方法和软件都无法获得真实的结果,统计就变成了“数字游戏”。


从预期的研究结果出发,向前逆推数据分析方法和研究设计

Step1 · 要解决什么问题

Step2 · 期望得到的研究结果

Step3 · 需要的统计分析方法

Step4 · 需要的数据类型

Step5 · 对应的调查方法

Step6 · 研究的设计


2、在研究设计时就考虑到数据分析方法

在问卷开始前将问卷框架设计做好


3、数据收集时的注意事项

线上问卷调查是目前我们所用到最主要的调查形式,进行线上问卷调查时,误差的主要来源包括抽样误差和非抽样误差两类。

抽样框误差:抽样框误差产生于目标总体与抽样框的不一致,因抽样框引起的误差主要有样本的代表性问题(如是否能代表网民、是否能代表某类用户总体等)以及抽样框重复(用户重复回答)以及抽样遗漏(如无法包括竞品用户等)。

解决方案:正确界定网络调查的适用范围,网络调查应主要针对以网民为对象的项目。


无回答误差:样本中的部分个体不愿意或是无法完成调查问卷而产生的误差,原因:

(1)激励手段不够,缺乏交流。

(2)技术障碍,如网速不稳,浏览器不兼容。

(3)对隐私的顾虑。

解决方案:网络调查与抽样技术相结合,进行问卷投放跟踪(如提醒用户填写),或者结合有一定激励性质的产品运营手段。


计量误差:计量误差又称登记误差,是指由于各种原因使得调查和计量的结果与真实情况不符而引起的误差,如,问卷歧义,被调查者对调查内容定义和概念误解所造成的误差。

解决方案:科学设计调查问卷,要求调查问卷更易于理解、更加完整、更具有亲和力,保证被调查者做出准确而真实的回答。



顾客满意度模型

是指用户对一种产品或服务进行消费体验后的感知,与其期望值进行比较后,所产生的的一种心理状态。

用户满意度理论的发展

1974年,本田公司就进行了有关客户对汽车评价的调查,但是当时没有“顾客满意”的概念。

1989年,美国密歇根大学商学院质量研究中心的费耐尔博士将计量经济模型引入顾客满意度测评建立了费耐尔逻辑模型,得到广泛的应用。

20世纪90年代后期,CS(顾客满意度)理论已成为在全球工商界开始盛行的一种新型的企业文化和管理哲学。

与此同时,许多国家(地区)先后对顾客满意度指数测评的理论、模型和方法开展了全面深入的研究。


以美国顾客满意度的模型 - 费耐尔模型为例,各模型元素的构成元素参考:


美国顾客满意指数模型主要内容框架:


测评指标体系的量化:李克特量表

对事物的特性变量可以用不同的规则赋值,因此形成了不同测量水平的测量量表。基本的测量量表有四种:类别量表、顺序量表、等距量表和等比量表。顾客满意度指数测评中应用的五级李克特量表就属于其中的顺序量表。一般采用的五级态度是:满意、较满意、一般、较不满意和不满意,相应赋值为5、4、3、2、1。也可为相反的顺序,将五级态度在题目开头给出,然后让被访者根据对每个测评指标满意程度直接在相应的方框上打钩或者画圈。

顾客满意度研究除了通过李克特量表将测评指标体系量化以外,还有一个非常大的特点,即测评指标的权重。

顾客满意度指数测评体系反映测试对象的质量水平状况和特征,而每一测评指标的变化对顾客满意度指数变化的影响程度是有所不同的。反映影响程度的重要尺度是权重,权重的确定与分配是测评指标体系设计中非常关键的一个步骤,对于能否客观、真实的反映顾客满意度起着至关重要的作用。



测评指标权重的赋值方法:

(1)主观赋权法

(2)客观赋权法

(3)直接比较法

即以同级指标集内重要程度最小的指标为基础,其他指标与之比较,作出是其多少倍的重要程度的判断,然后逐一分析,得出各指标的权重。

(4)对偶比较法

我们将重要程度分为非常重要、重要、比较重要和不重要四个等级,把所要比较的指标配成对,然后一对一地对指标的某一特征进行比较,做出重要程度判断:

a、当A与B比较时,A非常重要,B不重要,则A=4,B=0;

b、当A与B比较时,A重要,B比较重要,A=3,B=1;

c、当A与B一样重要,则A与B分别记为2。

(5)德尔菲法

(6)层次分析法

是美国著名运筹学家赛迪给出的1~9标度法,它根据各测评指标的相对重要性来确定权重。层次分析法可以通过测评指标两两比较,使复杂的无序的定性问题能够进行量化处理。

(7)相关分析

(8)回归分析

(9)线性结构方程模型(LISREL)

(10)部分最小二乘法(PLS)

(11)路径系数分析

主要作用是分析顾客满意度指数模型中各结构变量之间的关系,分析顾客满意度指数主要受什么影响,从宏观上如何进行调控才能更有效提升CSI。具体来讲,就是在百分制的计分方式中,因变量变动1分,直接影响到后面结果变量变化的分值。


如图中所示,产品质量提高1分,将直接影响顾客满意度提高0.36分,结构变量除了这种直接影响外,还可以再模型中箭头所指的方向上产生间接的影响。如图中顾客期望除了对顾客满意度的直接影响是-0.11外,还通过顾客对质量的感知和顾客对价值的感知对顾客满意度产生间接影响,间接影响系数的大小可以由所有从顾客期望到顾客满意度的路径上的系数乘积的累加和表示,计算方法为:

(-0.41)x0.94x0.26+(-0.41)x0.36+(-0.01)x0.26=-0.25

顾客期望对顾客满意度的直接影响系数和间接影响系数相加可以得到全部影响系数,即(-0.11)+(-0.25)=-0.36

同理,可以计算出其他结构变量对顾客满意度的直接影响系数、间接影响系数和全部影响系数。

如果能将竞争对手的指标分值也进行路径系数分析,那么多企业的战略决策制定,为推进企业发展将会更具有实际指导意义。


关于路径系数分析结果的应用:

可用于分析顾客特征的类型,例如(1)价值取向型。(2)质量取向型。根据不同顾客的需求和体验,提升其满意程度。更有利于精细化运营。


 “顾客净推介值”理论(NPS理论)

进行顾客满意度研究,其主要目的,就是要不断提升顾客的满意度,从而建立更多的忠诚顾客群,为企业带来更大的利润和收益。通过“顾客净推介值”分析,我们可以进行顾客忠诚度的深入分析、研究,以在这方面能提供更多的数据给企业作为经营的决策参考。


“顾客净推介值”(NPS:Net Promoter Score),顾名思义,“顾客净推介值”指的就是公司现有顾客将公司的产品或服务向其他人推荐的程度如何的测量。这也是预测企业有机增长和区分公司“利润良性”和“不良利润”的一种手段。

分析假设:我们可以把企业的利润分为“不良利润”和“良性利润”两种。


“不良利润”是以损害客户关系为代价换来的利润。如果客户觉得所受到的待遇不周,则产生的利润就是不良的。即不良利润是通过降低客户体验的质量来省钱,是向顾客榨取价值而非创造价值。


“良性利润”则截然不同,如果客户自愿回头购买更多产品与服务,而且还建议其他人购买,这样公司便实现了良性利润。实际上,满意的顾客变成了公司营销部门的一部分,即他们成为了推介型客户,是公司的最佳营销员。


例如:

根据本次调查,我们的问题是“您有多大的可能推荐此产品呢?”这个问题作出评价,并把被访者分成三类,即“推介者”(90分~100分)、“消极满意者”(60分~90分)和“贬低者”(0分~60分)。用推介者所占百分比减去贬低者所占百分比,就得到顾客净推介值。



卡诺模型—理论篇

一、卡诺模型的由来

KANO模型简介

受行为科学家赫茨伯格的双因素理论的启发,东京理工大学教授狩野纪昭(Noriaki Kano)和他的同事Fumio Takahashi于1979年10月发表了《质量的保健因素和激励因素》一文,第一次将满意与不满意标准引入质量管理领域,并于1982年日本质量管理大会第12届年会上宣读了《魅力质量与必备质量》的研究报告。该论文于1984年1月18日正式发表在日本质量管理学会的杂志《质量》上,标志着狩野模式(Kano model)的确立和魅力质量理论的成熟。


双因素理论

双因素理论又称激励 — 保健理论,是美国的行为科学家弗雷德里克·赫茨伯格提出来的。双因素理论认为引起人们工作动机的因素主要有两个:一是保健因素,二是激励因素。只有激励因素才能够给人们带来满意感,而保健因素只能消除人们的不满,但不会带来满意感。

其理论根据是:

第一,不是所有的需要得到满足就能激励起人们的积极性,只有那些被称为激励因素的需要得到满足才能调动人们的积极性。

第二,不具备保健因素时将引起强烈的不满,但具备时并不一定会调动强烈的积极性。

第三,激励因素是以工作为核心的,主要是在职工进行工作时发生的。


保健因素 - 是指造成员工不满的因素。保健因素不能得到满足,则使员工产生不满情绪、消极怠工,甚至引起罢工等对抗行为;但在保健因素得到一定程度改善以后,无论再如何进行改善的努力往往也很难使员工感到满意,因此也就难以再由此激发员工的工作积极性,所以就保健因素来说:“不满意”的对立面应该是“没有不满意”。


激励因素 - 是指能造成员工感到满意的因素。激励因素的改善而使员工感到满意的结果,能够极大地激发员工工作的热情,提高劳动生产效率;但激励因素即使管理层不给予满意满足,往往也不会因此使员工感到不满意,所以就激励因素来说:“满意”的对立面应该是“没有满意”。

二、什么是卡诺模型

 (1)A—魅力质量要素:此质量要素具备时,会让顾客感到满意;反之未具备时,顾客也能接受,同时不会感到不满意。

例如说,海底捞等桌做美甲。

(2)O—一维质量要素:此质量要素具备时,会让顾客感到满意,反之未具备时,则会导致顾客不满意。

例如,火锅店羊肉越便宜越爽,上网的速度越快越爽。

(3)M—必备质量要素:此质量要素具备时,顾客认为这是应该的,反之未具备时,会导致顾客不满意。

例如,火锅店要有牛肉,手机能打电话。

(4)I—无关质量要素:此质量要素无论具备与否,对于顾客,都不会有任何满意或者不满意的感觉。

例如,山寨机可以刮胡子。

(5)R—反向质量要素:此质量要素具备时,会导致顾客不满意,反之不具备时,顾客反而会感到满意。


卡诺模型—实操篇

卡诺模型的两种用途:

1、判断产品的某一质量特性对于顾客而言,属于何种质量要素

“顾客就是上帝,但是用户往往需要的不多,想要的却太多,为了让他们更满意,我们是不是要一一满足他们?”

2、通过满意的敏感性分析来筛选顾客满意度的改进因素

“用户可能根本不知道他们想要什么,而我们能提供的东西很多,但是资源却是有限的,应该怎么利用有限的资源来使用户更加满意”


卡诺模型的研究步骤:总的来说,可以分成以下五个步骤:

Step1,定义质量要素

Step2,构建卡诺问卷

Step3,进行问卷调查

Step4,分析调查结果

Step5,筛选改进因素


Step1,定义和选择质量要素

列出需要使用卡诺模型问卷进行调查的指标,这些指标可以是满意度所涉及的系统指标体系中的所有指标,也可以是关注的部分指标。

“官网中xxx方面的信息”

“产品中的xxx功能”

“线下户外广告宣传”

“......”


Step2,构建卡诺问卷

卡诺问卷的设计思想是从正反两方面进行提问,以便了解顾客对某一改进因素的看法,然后将这些改进因素区分为“魅力质量要素”、“一维质量要素”、“必备质量要素”、“无关质量要素”和“反向质量要素”.


在卡诺问卷中,每个改进因素都由正向和负向两个问题构成。正向问题是测量顾客在具有某项因素时的反应;负向问题则是测量顾客不具有该项改进因素时的反应。卡诺问卷中的问题答案采用五种程度选项,他们分别是“我喜欢这样”、“它必须这样”、“我无所谓”、“我能够忍受”、“我讨厌这样”。无论是正向还是负向问题,都是同样的答案选项。

Step3,进行问卷调查

问卷调查的方法有很多,卡诺问卷并没有限定必须要什么方法调查,例如,入户访问法、拦截访问法、传统访问法、计算机辅助等等。


Step4,分析调查结果

在获得了每个改进因素的卡诺需求分类数据之后,分析调查结果,分析调查结果的目的是为了了解每个改进因素的顾客需求分类状况。需求分类最简单有效的方式是计算每个改进因素在不同需求类型中出现的频率。

将顾客对某项改进因素的正向和负向问题的答案填入卡诺评价表,就可以得到顾客此项因素的需求分类:

如果顾客对正向问题的回答是“我喜欢这样”,对负向问题的回答是“我讨厌这样”,那么在卡诺评价表中,这项改进因素就被分类为“O”,即“一维质量要素”。


如果顾客对某项因素正负向问题的回答结合后,分类是M、A、I或者R,那么该因素就被分别分类为“必备质量要素”、“魅力质量要素”、“无关质量要素”或者“反向质量要素”


另外,卡诺评价表中的分类“Q”,是指有疑问的(questionable)结果,顾客的回答一般不会进入到这个类别,除非这个问题的问法不合理,或者是顾客没有很好的理解这个问题,或者是顾客在填写问卷时出现错误。


Step5,筛选改进因素

对改进因素的顾客需求进行分类,还不能完全说准确的说明这些因素的改进次序,因此,还需要通过满意的敏感性分析来筛选改进因素。

满意敏感性分析是指通过对各种改进因素的满意影响力和不满意影响力的分析,来判断顾客对这些因素满意水平变化的敏感程度,其目的是确定改进哪些因素会更有利于提升顾客满意度。

满意敏感性分析是通过满意影响力(SI)和不满意影响力(DSI)两个方面来测量的,他们的测量公式如下:

满意影响力(SI)

满意影响力SI是以魅力质量要素A与一维质量要素O的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I的评率之和为分母计算得到的,满意影响力的大小显示,如果某项因素得到改进,顾客满意强度会有多大的提升。


不满意影响力(DSI)

不满意影响力DSI是以一维质量要素O与必备质量要素M的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I之和为分母,并乘以(-1)计算得到的,不满意影响力的大小显示,如果某项因素未满足顾客的需求,会对顾客满意的降低产生多大的影响。


例如,对于如下的“改进因素满意敏感性分析表”统计结果:


将各因素以SI值为横坐标、DSI值为纵坐标纳入改进满意因素敏感性比较矩阵中,同时以左上原点为圆点,用半径为0.707的四分之一圆弧将不同的改进因素进行分割,如下图:


在因素选择线右侧的因素就是需要实施改进的因素,并且离圆心越远的因素,顾客的满意敏感性越大。从图中可以看出,A和D因素暂时不需要改进,需要改进的因素为B、C、E和F方面,按照重点次序排列为F、E、B、C。








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

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

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

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




用研方法论:眼动与脑电研究

ui设计分享达人

眼动研究


眼动原理:

眼动追踪

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

眼动仪

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


常用指标:

注视

在获取信息时,眼睛停留在所加工的物体上,称之为“注视”,超过100毫秒,认知加工。

眼跳

在转移加工对象时,人眼在两个注视点之间的快速动,称之为“眼跳”,注视点或注视方向发生改变,获取时空信息,无认知加工。

跟随运动

当测试者与眼睛存在相对运动时,为了保证眼睛总注视这个物体,眼球会追随物体移动。眼球追随物体移动,有认知加工。

眼动的本质 = 人注意力资源的主动或被动分配,选择更有用或更有吸引力的信息。


常用分析:

注视轨迹

记录测试者在整个体验过程中的注视轨迹,从而可知测试者首先注视的区域、注视的先后顺序、注视停留时间的长短以及视觉是否流畅等。  

注视热点图

用不同颜色来表示测试者对界面各处的不同关注度,从而可以直观的看到测试者最关注的区域和忽略的区域等。

兴趣区分析

考察测试者在每个兴趣区里的平均注视时间和注视点的个数,以及在各兴趣区之间的注视顺序。

例如:用户视觉顺序


问题:确认按钮位置不符合玩家浏览路径。

分析:图中是玩家的视觉动线,玩家先看见确认按钮再看见选择角色区域,这不符合操作顺序,很可能导致有些玩家忽略了选择角色。

建议:调整一下角色选择的版面布局,可以考虑将确定按钮放在选择角色之下。


例如:眼动注视时间及频率分析(客户管理软件的导航可用性评估)

测试用户的注视时间统计见表1,可以明显发现两个版本在眼动注视时间区别:用户在使用旧版的系统时,注视的时间比较长;

测试用户的注视频率统计见表2,两个版本在眼动注视频率有明显区别:用户在使用旧版系统时,注视次数频率比较高,无规律性;

通过注视时间、注视频率和方案评价等级的对比分析,可以得出评估等级越低(数值越低表示满意度越高),用户眼动注视时间越短,用户在页面搜寻的频率相对越少,用户在较短的时间内能找到想要的功能,页面影响用户的干扰越小。


例如:网站的可用性对比测试

对某网站改版前(图7)和改版后的主页(图8)进行可用性对比测试,通过让用户浏览首页(不做任何点击)判定网站的主旨和类型,来捕捉用户注视点的轨迹图和记录用户在不同位置注视时间,对比网站主页改版前和改版后信息传达的有效性。

经过对采集到的数据进行分析,可发现用户在浏览改版前的页面时,眼动轨迹混乱,扫描路径长且很多相互交叉,注视点序列分散排布,用户注视点变换快,无明显的兴趣点,如图这些数据表明改版前的网站首页布局不够合理,没有重点。

 

眼动研究的局限性:

1、可以让用研工作变得越来越有技术含量,将会在用研工作中扮演越来越重要的角色。

2、但是需要加以辅助测试(如定性访谈)来收集更多的实验数据,并通过结合分析来得出更多、更有效的结论。


眼动研究的价值:

1、眼动研究是可用性测试、问卷调查、后台数据挖掘等研究手段难以企及的,因为是最直接的反馈用户使用情况的手段。

2、通过眼动研究,不但可以完整地还原测试者在各个页面的注视轨迹,还可以通过划分兴趣分析测试者在各区域内容的关注度。

3、眼动研究提供的信息不只是人们是怎样“看”东西这么简单,眼动反映了人脑的信息处理过程,眼动模式的特点与脑部的信息处理都有密切的关系。


 眼动研究的具体价值的体现:

获取用户浏览的行为和习惯

当用户打开一个页面,用户看了些什么,没有看什么。什么东西最先获得用户的关注?这些信息是很重要的,因为很多时候用户关注的东西与设计希望用户看到的是不一样的,这种差别会通过眼动数据直接显示出来。


帮助研究人员分析和澄清问题

在可用性测试中,遇到用户既无动作也不说话时,研究人员是最为迷惑的。此时用户很可能执行任务受阻,而通过实时的眼动记录观测,研究人员可以间接地了解用户的处境 - 用户是在寻找什么东西,还是有什么东西令用户困惑(来回注视),还是用户忽视了相关的重要元素?研究人员可以带着观点假设,开展眼动研究来验证或否决,发现导致问题的真正原因。


 实现研究结果的可视化

呈现眼动研究结果最常用到的是热点图,顾名思义,热点图呈现的是人们视线的热点,颜色越红代表被聚集的越多。作为可视化手段起到了良好的信息传达的作用。



脑电研究


脑电研究基于脑电波,脑电波是大脑在活动时,大量神经元同步发生的突触后电位经总和后形成的,即由脑内亿万神经元引起的头皮表面的电位变化。含有大量的心理信息,测量脑电信号可绘制成脑电图,以不同的波形反映出来。


不同的波形代表着不同的心理信息,比如:

α波

频率为8~13Hz(平均数为10Hz),幅度为20~100μV。它是正常人脑电波的基本节律,如果没有外加的刺激,其频率是相当恒定的。是大脑皮质处于清醒、安静、闭目状态时脑电活动的主要表现,睁开眼睛(受到光刺激)或接受其它刺激时,α波即刻消失。

β波

频率为14~30Hz,幅度为100~150μV。是大脑皮质兴奋的表现,当精神紧张和情绪激动或亢奋时在额叶出现此波,当人从噩梦中惊醒时,原来的慢波节律可立即被该节律所替代。

θ波

频率为4~7Hz,幅度为5~20μV。在成年人意愿受挫、困倦、失望、抑郁等情绪刺激时以及精神病患者中这种波极为显著。但此波为少年(10-17岁)的脑电图中的主要成分。

这些不同的波形反映了测试者所处的心理状态。


脑电研究是什么?

一般来说,原始的脑电波需要一些技术处理才能读懂,借助脑电数据分析工具,我们可以把复杂的大脑波形整理成有一个起点,然后是不同波形分布的杂合:


经过更复杂的技术处理,我们甚至可以得到一条总体的波形图:


脑电波(EEG)在医学领域已经应用了几十年,通过对脑电信号的处理与分析,我们能了解对象的认知过程和情绪反应,目前已经逐步商用化。

近些年,神经营销学、神经电影学楷书走进人们的视野。前者通过脑电波等手段测量消费者观看广告、描述产品时的脑电情况,以此来解释、预测他们的消费行为。后者采用脑成像技术等手段量化恐怖电影的效果,甚至考察观众们神经活动的同步性(群体卷入性)来检查电影控制人们思维和情绪变化的能力。


脑电研究的应用:

360度游戏研究


基于认知神经科学,无需语言,获知他们对产品的情绪、喜好、关注点、兴奋度...因为它研究的是大脑的源头。

除了学术界,全球众多顶尖的游戏公司公认情绪在游戏中的重要性,并致力于打造更加Emotional(情绪化的)游戏。

  • 并不是越积极越好

  • 必须能够唤起强烈的情绪反应

  • 让玩家情绪不断波动,正负情绪互相转化


 一款成功的游戏:必须要让玩家达到沉浸和心流情绪状态。有三种衡量指标:


沉浸感(IMMERSION)

定义:参与、融入、代入感的程度

游戏体现:故事性、技巧性、策略性、画面效果、音效、风格

心理体验:强参与感、脱离现实、忘记时间、很上瘾

情绪体现:强烈的正负情绪的交替


情绪指数EMO.I

游戏引起玩家的情绪反应。积极的情绪反应体现玩家玩的非常开心,而消极情绪反应可能提示游戏让玩家产生了受挫感。

 

心流体验(FLOW)

定义:非常专注,非常有动力的全身投入,并非常享受的精神状态。

游戏体现:游戏机制、难易度平衡、目标性、反馈。

心理体验:持续专注、忘我投入、成就感。

情绪体现:正向情绪为主,正负形拨动;紧张感积累,完成挑战的成就感。


生理指标

游戏带给玩家生理上的紧张程度,SCL值越大,表示游戏越刺激,玩家玩的越紧张,而SCL越低,表示游戏可能给玩家带来了相对无聊的体验。


脑电波和生理指标告诉你玩家的情绪状态




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

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

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

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




竞品分析-今日头条、一点资讯和网易新闻

ui设计分享达人

随着互联网的发展,人们阅读新闻资讯的方式也从纸质阅读转变为电子阅读。

本文以今日头条、一点资讯和网易新闻这三款应用为竞品,从交互和视觉两方面进行对比分析,讨论一下产品中值得我们学习的设计点以及可以进一步优化改进的地方。

目录

一、体验环境

二、交互对比

三、视觉对比

四、思考与总结

一、体验环境

手机型号:iPhone 8 plus

手机系统:ios 12.1

应用版本:今日头条V8.5.0   一点资讯V5.9.8.0   网易新闻V86.0

二、交互对比

2.1 首页-导航栏-搜索

今日头条:搜索框内有默认的文案,在首页浏览内容时,文案一直处于静态。点击搜索框进入搜索页之后再返回首页,搜索框内文案才会改变,改变的方式是由下往上滚动播出,搜索icon静止不动。或者在刷新界面时,文案也会改变。

一点资讯:搜索框内同样有默认文案,但不是静态的,文案在搜索框内滚动播出。第一次打开应用时,有一条红色渐变线围绕着搜索框逆时针旋转两圈,此时的默认文案是“搜一搜你感兴趣的内容”,渐变线旋转两圈之后,搜索框内文案发生改变,按照搜索页热榜的排序滚动播出。在首次打开产品或者从其它界面跳转到首页时,动态渐变线都会出现。

网易新闻:搜索框内同样有默认文案,而且也不是静态的,文案和搜索icon一起滚动播出,播出顺序按照搜索页热搜话题的排序进行。

对搜索的设计,若搜索框内文案一直处于静态,这对用户实时了解新闻是不利的,当前社会发展迅速,信息更新速度比较快,短时间内就会有不同的新闻出现,文案在搜索框内滚动播出是比较好的选择。这既有利于用户掌握新闻动态,又能增加内容的曝光度。一点资讯动态的渐变线是一个非常有趣的设计点,可以吸引用户更多的注意力,引导其进行搜索。

2.2 首页-导航栏-发布

今日头条:点击发布icon,从屏幕下方弹出发布界面。发布界面承载的内容很多,占据了除状态栏之外的整个界面空间。在发布界面点击输入框,界面还会跳转到单独的编辑内容页,在编辑页可输入想要发布的内容,输入完毕后直接点击发布按钮即可。若编辑内容后不想发布了,点击取消,会有弹窗出现,进行操作提示,点击之后直接返回首页;若把编辑的内容全部删除再点击取消,就不会有弹窗了,界面就会直接回到首页。若用户只是点击了首页的发布icon,进入到发布界面,并没有进入编辑内容界面,要退出的话可以向下滑动,或者点击关闭按钮即可。

在发布界面,有一个“邀请你参与讨论”的模块,该模块的最后一条文案露出一半,告知用户在该部分下方还有未展示的内容,向上滑动可以查看更多。

一点资讯:在首页点击发布icon之后,同样会从屏幕下方弹出发布界面,发布界面承载的内容非常少,仅提供了三个功能,即发视频、拍小视频、写短内容。点击前两者即可进行发布视频的相关操作,点击写短内容之后,界面会跳转到编辑内容页,和今日头条的设计类似,如在编辑界面输入内容后点击返回,会有弹窗提示,若编辑界面没有内容,就会直接返回首页。在发布界面要想退出,可以点击关闭按钮,或者点击黑色遮罩层。

网易新闻:首页没有提供发布功能,在个人中心界面可以发布动态,在发布界面可以直接输入想发布的内容。和前两者类似,在发布界面有内容的情况下退出,界面会有弹窗提示,若发布界面没有任何内容,就可以直接返回个人中心页。

对提示弹窗的设计,今日头条和一点资讯用的都是iOS官方设计指南给的警告框  (Alerts) ,不支持点击遮罩层将其关闭,用户必须做出操作才行。只不过今日头条包括三个选项按钮,一点资讯只有两个。其实网易新闻和一点资讯的设计是相同的,只是网易新闻对源生警告框进行了自己的设计。两者标题传达的主要意思一致,但按钮的位置不同,一点资讯把保存按钮放在了左边,网易新闻却正好相反,放在了右边。但两者都对其进行了重点设计,一点资讯将字体加粗,网易新闻将按钮用颜色填充。

官方给的建议是肯定性操作放在右边,否定性操作放在左边。这里的肯定与否定并不是简单的字面意思,而是说要把用户最有可能点击的按钮放在右边,取消操作按钮放在左边。例如,当用户想删除某些内容时出现弹窗提示,此时用户想要点击的是删除按钮,面对这种情况,就应该把删除按钮放在右边,而非左边。对于文中的情况,用户点击返回或者取消的意图是想退出界面,也就是编辑页输入的内容不想发布了,此时的正向操作是不保存,所以一点资讯按钮摆放的位置是严格按照官方指南给的建议设计的。网易新闻将保存按钮放在右边,其实是想让用户点击保存,即便是出于某些原因用户想退出界面,将输入的内容暂时存为草稿也是满足了一部分用户的需求。

2.3 首页-导航栏-补充

今日头条:无补充。

一点资讯:点击搜索框内的耳机icon,可以直接将滚动选项卡定位到“一点音频”模块,这里的“一点音频”和点击底部标签栏切换到的界面是相同的,可以看出一点资讯对音频模块的重视。

网易新闻:导航栏的顶部左侧是网易的logo,点击可进行刷新。这是与今日头条和一点资讯不同的刷新方式,后面讨论刷新的时候会再次提到。除此之外,导航栏还提供了“网易热榜和消息通知”。

2.4 首页-滚动选项卡

滚动选项卡(scrollable tabs)的切换方式,三者均支持左右滑动和点击两种交互手势。

2.5 频道定制页-编辑标签

点击菜单栏icon,进入频道定制页,界面从屏幕底部弹出,三个产品均是如此。这和前面提到的点击发布icon,进入发布界面的跳转方式一致。

今日头条:点击编辑按钮或者长按可以对某个标签进行操作,拖动可进行排序,标签呈抖动状态。点击添加,可以将感兴趣的话题添加到“我的频道”模块,新增加的标签添加到“我的频道”的最后一项,并且利用徽标 (badge) 进行提示。点击删除按钮,标签从“我的频道”中消失,并且自动归类到界面下方的几个分类中。下拉或者点击关闭按钮可以退出频道定制界面。

一点资讯:点击编辑按钮或者长按可以对某个标签进行操作,拖动可进行排序。点击添加后,新增加的标签添加到“我的频道”模块自定义标签的第一项(即“关注、推荐”之后),并利用徽标(badge)进行提示。点击删除按钮,标签从“我的频道”中消失。想退出频道定制界面需要点击关闭按钮。

网易新闻:和前两者一样,点击编辑按钮或者长按可以对某个标签进行操作,拖动可进行排序。点击添加后,新增加的标签添加到“我的栏目”自定义标签的最后一项,但没有徽标(badge)提示。点击删除,被删除的标签归类到“最近删除”模块。想退出频道定制界面需要点击关闭按钮。

标签呈可编辑状态时,只有今日头条额外进行了动态设计,一点资讯和网易新闻只是从视觉上呈现出来,多了删除图标,告知用户标签可编辑。个人认为,今日头条的设计更合适一些,而且抖动状态也和手机桌面对应用进行调整或删除时的交互状态一致,与用户的认知相符。

添加标签后,新增标签在选项卡中的位置,一点资讯的排序更合适一些。用户将某个标签添加到定制模块,说明近期在使用产品的过程中,更希望看到与所选标签相关的内容,将标签尽量前置是最合适的排序方案,而且最好利用徽标(badge)进行提示。

在删除标签方面,网易新闻的设计更合适,用户将标签删除,说明对相关话题不感兴趣,那么被删除标签的去向就不那么重要,但是也不排除用户因为误操作将标签删除的情况,这时网易新闻就提供了一个让用户反悔的机会,那就是将最近删除的标签归到一类,用户可以一目了然,准确进行频道定制。

2.6 频道定制页-向上滑动

今日头条:在频道定制界面向上滑动,当“热门精选”模块滑动到navbar的位置时,文案置顶显示,“热门精选、生活娱乐、体育财经、科教文艺、其它”几个部分相当于选项卡的形式。随着界面向上滑动,选项卡自动定位到相关模块。这里的选项卡不支持左右滑动的交互手势,但可以通过点击切换。

一点资讯:点击“换一换”,就可以对“添加频道”的标签进行换新。

2.7 新闻详情页-导航栏-听音频

今日头条:在新闻详情页中,导航栏设置了听音频和搜索的功能,搜索功能比较常见,这里着重分析一下听音频功能。点击耳机icon,界面出现弹窗,音符跳动,说明当前新闻正在播放音频,导航栏耳机icon也会变为音频播放模式。再次点击耳机icon,可暂停播放,音符不再跳动。

点击弹窗,新闻文字出现黑色遮罩层,弹窗高亮显示。点击黑色遮罩层,可返回阅读新闻,音频继续播放,弹窗收起,但不会消失。在弹窗内,新闻标题一直滚动播出(无论音频是播放状态还是暂停),操作按钮包括暂停、播放下一个、关闭当前音频。点击播放下一个按钮,弹窗内的缩略图、新闻标题和音频内容变为下一个,当前新闻文字不会变更。点击关闭,退出音频播放,弹窗消失。

音频处于播放或者暂停状态时,退出新闻详情页,弹窗不会消失,位置固定。

一点资讯:在新闻详情页中,没有提供听新闻功能,但是首页滚动选项卡和tabbar都有“一点音频”模块,两者除了导航栏设置不同之外,界面其它内容完全相同,这一点前文提到过。用户可进入该界面播放音频内容,模块分类众多。

在一点音频界面,点击想播放的内容,界面跳转至二级界面,在二级界面用户可见音频详情和播放列表。当前播放内容的字体用品牌色呈现,且有音符跳动提示,百分比按播放进度显示,点击该模块可进入下一级界面。

由二级界面返回一点音频主界面,若此前没有听过音频,那么在主界面会增加用户收听历史的相关模块。在主界面内有圆形缩略图,像唱片一样。点击缩略图,窗口展开,播放时缩略图顺时针旋转,文案滚动播出。只有文案字数过多时滚动播出,字数不多就呈静止状态,而且只有在播放时滚动,暂停状态时,文案静止。和今日头条一样,可对音频进行操作,包括暂停、播放下一个和关闭,但不管用户是否点击上述按钮,窗口在展开几秒之后都会自动收回。今日头条在点开窗口之后会有遮罩层,点击遮罩层,窗口才会收回,这是两者不同的地方。

在使用网易新闻的过程中,没有发现听音频的功能。

2.8 新闻详情页-导航栏-更多功能 

三个产品还把一些功能放在了导航栏的更多中(三个点),点击更多,界面出现底部弹窗,即活动视图(Activity Views)。今日头条和网易新闻活动视图的背景和界面里的icon一起弹出,而一点资讯的背景和icon依次出现,并且icon与icon之间还有时差,这些小动效的运用使产品用起来更加有趣,充满活力。

2.9 新闻详情页-导航栏-字体调整

在更多功能中,三个产品均可以对字体大小进行调整。今日头条和一点资讯只能通过点击icon,之后再拖动滑块进行设置,而网易新闻不仅可以如此,还可以通过双指缩放大小,充分发挥了手势交互的优势,减少了用户的操作成本。无论是调节滑块还是双指缩放,网易新闻都会有toast浮层进行提示,而不仅仅是遮罩下文字大小的变化。

2.10 新闻详情页-向上/向下滑动

今日头条:在新闻详情页,随着界面向上滑动,作者头像、作者名称和关注按钮在导航栏显示,向下滑动,导航栏无变化。

一点资讯:在详情页阅读新闻,导航栏的变化和今日头条一样。向上滑动,作者头像、作者名称和关注按钮在导航栏显示,向下滑动,导航栏无变化。

网易新闻:随着界面向上滑动,作者头像和名称在导航栏显示,关注按钮消失,跟贴人数按钮由线性改为面性。界面向下滑动,导航栏出现关注按钮。

在新闻详情页阅读内容,向上或者向下滑动的过程中,三个产品界面的设计大同小异。这时与竞品拉开差距的关键便取决于一些小的设计细节,三个产品对比,关注按钮的呈现方式有所不同。

今日头条的导航栏右侧已经放置了三个icon,所以把关注按钮放在了界面左侧,作者名称的后面,在向上阅读内容的过程中,关注按钮一直放置在导航栏。一点资讯的关注按钮放在界面右侧用户更便于点击的区域,和今日头条一样,在向上浏览内容阅读新闻时,按钮一直在导航栏。网易新闻只有当用户向上滑动界面后再向下滑动,反复阅读内容时,关注按钮才会出现在导航栏左侧,作者名称的位置。

个人认为,网易新闻的设计更加的人性化,用户阅读新闻,只有对内容感兴趣才会反复观看。当界面向上滑动之后再下滑,就是用户反复阅读的表现,用户可能会对同一作者发布的其它内容也感兴趣,此时导航栏通过动效呈现关注按钮,恰到好处,刚好可以引导用户关注作者。

2.11 新闻详情页-评论

阅读新闻的过程中,想要观看评论,点击界面底部评论icon,产品会自动定位到第一条评论,今日头条的icon无变化,一点资讯和网易新闻的icon都会随之改变,再次点击icon之后,新闻会自动回到上次阅读的位置。

对于第一次点击评论icon之后,icon需不需要有所变化,我认为一点资讯和网易新闻的设计方式更合适一些,即有所变化。这样用户在浏览内容时,就可以从视觉上充分了解自己处在界面的什么位置,而不需要通过上下滑动界面来定位。

网易新闻:点击底部评论icon,定位到的是新闻详情页的第一条评论,这是上文提到的情况,但若是点击导航栏的跟贴人数按钮,界面则会跳转到单独的评论界面。

2.12 新闻中包含视频

若新闻中包含视频,并且视频处于暂停状态时,三个产品的处理方式是一样的,向上滑动界面,视频和文字一起隐藏,就和阅读纯文字的新闻一样。

若视频处于播放状态,向上浏览内容,三个产品的处理方式各有不同。

今日头条:播放的视频窗口会始终悬浮在界面的上半部分,通栏显示。

一点资讯:和今日头条不同,若视频处于播放状态,向上浏览内容,视频窗口还是会隐藏,并且会一直播放。

网易新闻:若视频处于播放状态,向上滑动界面,视频会在较小的窗口播放,同时右侧呈现新闻概要,该模块会一直悬浮在界面的上部分。点击“放大窗口”,播放窗口被放大,但会留有边距,占据和文字一样的界面宽度。

若在新闻中包含视频,且视频处于播放状态,个人是不建议学习一点资讯和纯文字新闻一样的处理方式的。今日头条和网易新闻的方案比较合适,但两者也有差别。用户能够点击进入新闻详情页,说明已经通过上一级界面的标题文案对内容有一个基本的了解,点击播放按钮就是想观看视频,网易新闻多的一步放大窗口的操作,只是增加了用户的操作成本,没有太大的必要,所以今日头条的处理方式更合适一些,建议学习。

2.13 已读内容状态可见

在详情页阅读之后,点击返回按钮或者向左滑动屏幕返回首页。阅读过的新闻,文案变为灰色,提示用户此条新闻已经阅读过了,做到状态可见。

2.14 同类型关键词条的搜索提示

在详情页阅读完某条新闻后返回首页,今日头条会有同类型关键词条的搜索提示。一点资讯和网易新闻返回后,也只是前文提到的,新闻文案会呈灰色。今日头条根据用户已经阅读的新闻内容提取关键词,进行搜索提示,用户很大程度上会点击,这样就可以提高产品的用户活跃度。这是一个非常新颖的设计点,建议学习。

2.15 点击新闻的关闭按钮 

每条新闻的右下角都有一个关闭按钮,点击之后出现遮罩层和弹窗。弹窗不是显示在界面中某个固定的位置,而是根据新闻模块所处的位置不同而改变,弹窗与关闭按钮之间的距离固定。在弹窗选择想要关闭该条新闻的原因,点击之后,弹窗和遮罩层自动消失,产品给用户反馈“将减少类似内容”的相关推荐。

今日头条给用户反馈的弹窗出现在界面内容区域的顶部,即滚动选项卡的下方区域,且采用灰色不透明背景层承载文案,与产品界面背景的颜色差异性不大,对用户干扰性较小,提示作用较弱。一点资讯和网易新闻的提示弹窗均出现在界面中间部分,且采用的是黑色遮罩层作为文案背景,对用户的干扰和今日头条相比较大一点,更能起到提示的作用。

我个人更倾向于使用第一种弹窗,用户既然选择了关闭该条新闻资讯,就说明对相同类型的内容不感兴趣,基于大数据自然要减少类似内容的推荐,这是意料之中的事,弹窗浮层应该对用户的干扰越小越好,这样用户就可以集中注意力继续浏览其它内容。

2.16 刷新

三个产品都设置了两种刷新的交互手势,点击tabbar的首页icon或者下拉,这两种刷新方式都比较常见。网易新闻除了前两者之外,还设置了第三种,即点击navbar的网易logo进行刷新,这是与前两者不同的地方。

当用户向上滑动,阅读了几屏之后,tabbar的首页icon会有刷新提示,详细情况在视觉分析部分再讨论。用户刷新内容,产品自定义了加载动画,加载完成之后,会有信息反馈给用户,提示其已完成内容刷新,并且标明刷新信息的数量。

个人认为,网易新闻第三种刷新的方式虽然很独特,但是由于logo所处的位置在整个界面的顶部,无论用户是左手持机,还是右手持机,都是很难触控到的区域,这样的加载方式通常也用不到,只是增加了开发成本。我猜测,网易新闻可能是想加强产品的品牌感,所以把logo放在了界面顶部,但又不想仅仅占据界面空间,所以增加了刷新的功能。 

2.17 视频页

三个产品在标签栏都为视频设置了单独的界面。

今日头条:点击播放按钮,视频开始播放,播放过程中点击视频所在区域,进度条在黑色遮罩层上呈现。今日头条有一个和其它产品明显不同的功能,就是在视频区域的右上角支持音频播放模式。

点击音频播放按钮,界面会跳转到下一层级,此时在二级界面,音频会从点击按钮之前视频播放到的时间点开始。

由音频播放界面返回,在视频界面会有音频播放的弹窗,这和前文提到的听新闻的交互状态一致,而且视频画面还是停留在点击音频按钮之前,在视频界面音频仍处于播放状态。倘若点击视频的播放按钮,音频就会暂停播放,视频从音频播放到的时间点开始。

一点资讯:点击播放按钮,视频开始播放,播放过程中点击视频所在区域,进度条在黑色遮罩层上呈现。值得学习的是,在视频处于暂停状态时,作者的关注按钮和视频的分享按钮都是隐藏起来的,在用户点击播放之后,两个按钮才会通过简单的动效呈现出来。

网易新闻:点击播放按钮,视频在单独的界面播放,这是与其它两个产品不同的地方。并且界面背景采用黑色,这样视频区域更加聚焦,各项功能按钮更加明显。当前视频播放完毕之后会自动循环从开始继续播放。若向上滑动则会播放下一条视频,这里的下一条视频不是一级界面视频页排版中排在当前播放视频下方的,而是播放界面根据用户数据另外推荐的其它视频。此时若要播放一级界面中的下一条视频,还需要点击返回或者左滑才可以。视频播放界面提供了一部分功能按钮,还有一些不常用到的收在了更多中(界面右上角的三个点)。

从视频处于暂停状态到点击播放视频,今日头条和一点资讯的界面交互设计是类似的,不同的是一点资讯运用了动效来显示关注和分享按钮。前文提到过,动态设计可以很好的吸引用户注意力,这样既可以引导用户点击关注和分享,从而加强产品的用户活跃度,又可以让产品用起来更有趣味,用户体验更好一些。所以,一点资讯的设计方式更值得学习。

网易新闻将视频放在单独的界面播放,这是和当前两大短视频平台(抖音和快手)相同的表现方式,比较容易让用户集中注意力,关注视频内容。可是,鱼与熊掌不可兼得,若想要播放一级界面内的其它视频,就要增加用户的操作成本,这是与前两者不同的地方。

两种视频的播放方式都比较常见,至于哪种呈现方式更好,就需要具体问题具体分析了,这里不再详细讨论。

2.18 网易新闻-圈子

网易新闻的圈子界面,在浏览内容的过程中,倘若在某个模块停留几秒,产品会自动弹出评论的对话框,系统会认为你对这个话题感兴趣,可能有一些观点要发表,这是网易新闻设计人性化的地方。在我用过的产品中,微博手机客户端也有类似的设计。

三、视觉对比

3.1 整体布局

今日头条:对内容进行划分的方式有两种,首页、视频、放映厅三个主要界面,均采用白色背景+浅灰色分割线,个人中心界面采用灰色背景+白色圆角卡片。

一点资讯:同样采用了两种方式进行内容划分,其中首页和一点音频页采用的是白色背景+浅灰色分割线,其实一点音频页的多彩图标区和相声评书之间也可以算是留白分割,短视频页和个人中心页采用的是灰色背景+白色通栏卡片,小视频页则是两列feed流卡片。

网易新闻:四个主要界面均采用的是灰色背景+白色圆角卡片,但是个人中心页的卡片宽度比其它三个界面略窄,这一点不太符合统一性原则。

内容分割的方式一般有三种,分别为留白分割、线性分割、卡片分割。留白分割适用于内容较少的产品,这样界面简洁清晰。当信息内容较多时,若采用留白分割的方式就会浪费很多空间,这时就可以采用线性分割的方式,让信息内容展示清楚的同时又可以充分利用界面空间。卡片分割是将信息模块化,每个卡片单独承载一组内容,卡片与卡片之间的区分更加明显。无论是什么产品,最好不要出现两种以上的信息分割方式,不然界面会显得很混乱。

新闻资讯属于高密度内容的产品,最好是采用线性分割或者卡片分割的方式,这样既可以把信息内容展示清楚,又可以提高屏效。此次分析的这三款产品基本上也都是采用的这两种分割方式。个人更建议学习网易新闻的设计,每个卡片单独承载一组内容,卡片与卡片之间区分明显,卡片内部利用留白进行信息层级的划分。

3.2 首页

产品品牌感传递的方式有很多种,色彩的运用是很重要的一个途径。比如,提到蓝色大部分用户首先想到的产品是支付宝,提到绿色首先想到的是微信。除了用在logo中,在产品的界面元素中合理恰当的运用品牌色,也可以进一步加深用户对产品的印象。

首页statusbar和Navbar的背景色,今日头条采用的是品牌色。一点资讯默认是白色,但可以在设置里对背景色进行定制。网易新闻默认是品牌色,同样在设置里可以更换。

一点资讯:设置里的主题包括官方经典、天空蓝、太阳橙、翡翠绿和海军蓝一共五种颜色,滚动选项卡字体选中状态跟随主题颜色同步变化。

网易新闻:设置里的主题包括官方经典和极简主义两种模式。

三个产品tabbar的未选中状态均为灰色线性icon,选中状态均为品牌色面性icon。首页icon在不同情况下,会有不一样的呈现方式,见下图。

3.3 搜索页

今日头条:搜索页热点新闻会用红色描边+红色文案的标签来呈现,以此来吸引用户注意力。并且头条热榜的排序也会用红色数字来呈现前三名,灰色数字呈现之后的名次。

一点资讯:搜索页的热榜文案前面还添加了小的icon,并且榜单排序的数字从第一名到第三名虽然都用了彩色,但随着热度的递减,颜色从红色到橙色渐变,这样设计比今日头条单纯的用红色更能突显层次。但是,今日头条运用了红色描边+红色文案的提示标签,一点资讯却没有类似的设计。

网易新闻:“网易热搜”文案进行了单独的字体设计,排序数字前三名用彩色icon呈现,提示标签根据“沸”、“热”和“新”的区分,背景采用不同颜色。在搜索页点击“查看完整榜单”可跳转到网易热榜单独界面。在该界面,头部用红色作为背景,这点符合用户的认知,红色是热闹与沸腾的代名词,同时用橙色和黄色作为辅助色,来表现界面的装饰元素。

三者相比较,网易新闻的搜索页设计感更强,值得学习的地方更多一些。

3.4 频道定制页

今日头条:频道定制界面分为“我的频道、为你推荐、热门精选、生活娱乐、体育财经、科教文艺、其它”几个模块。“我的频道”部分主要采用灰色底+黑色文案。“为你推荐”模块采用彩色底+黑色/灰色文案,每个细分部分还有与背景色同色系的icon。“热门精选、生活娱乐、体育财经、科教文艺、其它”几个部分均采用灰色描边+黑色文案。每个标签文案的字体大小一样,均为15号。

一点资讯:“我的频道”和“添加频道”的标签均采用的灰色底+黑色文案。每个标签对文案字数进行控制,最多为4个字。文案字体大小保持统一,均为14号。

网易新闻:“我的栏目”和“更多栏目”的标签均采用的灰色描边+黑色文案。文案在保证辨识度的情况下,在标签内显示,字体最小为9号,最大为16号。

三个产品均采用了4列的排版方式。个人认为今日头条的设计更合适一些,“我的频道”的标签采用灰色底+黑色文案,未添加进“我的频道”的标签采用灰色描边+黑色文案,两者不仅可以从位置上进行区分,从视觉样式上还形成了对比。

3.5 首页排版

首页信息流主要包括大图、三图、左文右图和视频,三个产品均采用的是样式穿插的排版方式。这样设计,于产品而言,体现了内容的多样性,避免信息流结构过于单一;于用户而言,可以减小阅读过程中的视觉压力,使眼睛得到缓解,一举两得。

新闻资讯类产品排版采用左文右图还是左图右文,一直是一个值得讨论的点。分析的这三款产品均采用的是左文右图的排版方式,但是也有一些产品采用的是左图右文,例如澎湃新闻。到底哪种排版方式更适合自己的产品,我们需要具体问题具体分析,这里不再详细讨论。

3.6 新闻详情页-字体

字体属性是在将文字大小设置为标准的情况下个人手动测量,可能存在误差。

三个产品的标题和正文均采用的是iOS默认字体苹方-简,但网易新闻在设置里还提供了其它几种字体选项,用户可自行下载使用。字体的字号、字重和行间距,各产品相差不大,只是一点资讯正文的字间距和今日头条、网易新闻相比有一些差别,一点资讯字间距相对较小一些。

排版方面,中文文案的段落与段落之间是通过首行缩进或者段间距的方式进行划分。今日头条的段间距和其它两者相比较小一些,所以又进一步采用了首行缩进的方式,一点资讯和网易新闻的段间距较大,完全可以起到划分段落的作用,所以两者均采用了左对齐的排版方式。

其实,这两种排版方式都比较常见,首行缩进两个文字是我们一直以来的中文排版规范,相对规矩传统一些;左对齐排版从视觉上来说更加美观、整齐。

3.7 新闻详情页-评论区

评论区的设计基本上都是用户个人信息+评价文案+其他用户回复。今日头条和一点资讯的评论与评论之间用留白的分割方式,网易新闻采用的则是灰色通栏分割线。

今日头条用户昵称字体使用黑色,将其加粗,与评价文案形成对比,而一点资讯的用户昵称用的是蓝色字体,从颜色上形成反差,对比更加明显。网易新闻用户昵称的字体颜色根据用户等级不同,颜色分为红色、橙色和黑色,昵称后面还用彩色icon+文案给用户贴上了等级标签。

三个界面一对比明显可以看出,网易新闻评价文案的字间距太小了,过于密集,这样不利于对文案内容的识别,今日头条和一点资讯对字间距的设置更合适一些。网易新闻这里的截图评价文案字数比较少,视觉感受可能不太明显,感兴趣的朋友可以亲自打开应用体验一下。其他用户对评价的回复,今日头条和网易新闻都放在了下一级界面中,一点资讯则在当前评论区内展示,并通过灰色背景进行对比区分。

今日头条和一点资讯评论区的设计简洁清晰,网易新闻则更注重热闹氛围的表现,除了对用户等级进行了划分,对比较精彩的评价文案还加盖了印章,这也是对用户的一种鼓励机制,可以激励大家多发表评论,从而加强用户活跃度,提高产品的用户留存率。

3.8 视频页

视频界面三者均采用的是竖向单列信息流的形式,并且视频播放区域大致都是16:9。

今日头条将作者信息、视频文案和操作功能按钮都放在了播放区域之外,所以一屏之内仅展示一个半视频模块。一点资讯将视频文案放在了播放区域,用黑色遮罩层做背景,增强文案识别度,这样就提高了界面空间利用率,一屏之内可以容纳两个半视频模块。网易新闻的视频界面留出了运营资源位,banner占据了一定的界面空间,虽然将视频的作者信息进行了弱化,但是文案字体和其它两个产品相比较,又占据了较多的纵向空间,所以一屏之内可以容纳一个多的视频模块。

个人认为,一点资讯的设计更好一些。将文案放在播放区域,这样可以提高屏效,让一屏之内尽可能展示多的视频模块。同时为了让界面更有呼吸感,将关注和分享的按钮隐藏,点击播放之后,按钮才会通过动效呈现出来。

3.9 个人中心页

三个产品的重点都在引导用户进行注册或登录上,因此界面最吸引人注意力的就是品牌色的登录按钮。

今日头条:界面简单清晰,把较重要的功能icon用品牌色呈现,并且根据统一性原则,与其它icon保持一致,采用线性。由于首页右上角有发布按钮,这里再一次提及此功能,就没有重点表现,同样采用了线性的按钮。

一点资讯:除了登录按钮之外,最重要的就是运营区域了,界面中的其它icon均采用的是线性呈现。

网易新闻:界面承载的内容很多,除了登录、运营资源位,还提供了签到功能。网易新闻把发布功能放在了个人中心页,其它的界面没有提及此功能,因此,为引导用户发布自己的动态,按钮采用面性呈现。界面其它icon也根据功能层级不同分别采用线性和面性呈现。

其实很难准确的说哪种设计方案更好,每个产品都有自己的考量,界面承载的信息量也不同,说到底,选择与自己产品更相符的方案那就是最好的。

3.10 夜间模式/深色模式

今日头条和一点资讯的设置文案均是“夜间模式”,可是设计方案却不同。今日头条只是在日常的白色界面上覆盖了一层黑色遮罩层,把整个界面的亮度降下来。一点资讯则是重新进行了界面设计,将界面背景和通栏卡片改为了深灰色,同时将文案和按钮的明度降低了。网易新闻与前两者不同,它的设置文案是“深色模式”,但设计方案和一点资讯类似,将界面背景和圆角卡片改为了偏蓝的黑色,不同的是网易新闻的文案明度更高。

这里需要明确两个概念,夜间模式和深色模式。夜间模式注重的是弱光环境下的用户体验,通过降低屏幕的亮度来减弱对眼睛的刺激,这种模式在强光下体验不佳。而深色模式也就是苹果从iOS13开始推出的DarkMode,它是一种界面设计风格,在强弱光下均可,只是通过深色的背景突显文字和图片,使用户的注意力集中在界面内容上。针对这一模式苹果官方和Google的MaterialDesign都有给出相关色彩运用的建议。

其实无论是iOS还是Android,官方明确说明了并不强制使用设计指南,而且近些年来iOS和Android之间的差异也越来越小了。例如此次分析的iOS端产品,一点资讯夜间模式的界面背景采用的是MaterialDesign的建议用色,其色值为#121212,而卡片颜色却没有严格按照官方的建议,一点资讯通栏卡片的色值为#181818,MaterialDesign给的建议是100%的#121212叠加5%的#FFFFFF,但从视觉上看这两种颜色差距不大。网易新闻背景的色值为#141416,圆角卡片的色值为#1D1D1F,这些都与官方建议有所不同。当然,这些数值都是个人手动测量,可能存在误差,但想说的重点是,官方设计指南是给我们一个参考值,按照参考值设计界面,内容有比较好的可读性,至于具体的设计方案还是要根据自己产品的实际情况而定。

四、思考与总结

总的来说,今日头条算是中规中矩的产品,一点资讯比较注重动效的运用,网易新闻在视觉表现方面更加突出。以上就是我在使用这三款产品时,遇到的一些比较有趣的设计点,如有分析不对的地方,望各位海涵。文中提到的许多细节,不仅可以运用在新闻资讯类产品的设计中,其它类型的产品也可以借鉴。当然,在这三款产品中还有许多功能没有体验到,如果大家发现有什么值得讨论的细节,欢迎各位朋友留言。

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

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

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

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



用户满意度评估模型搭建和检验方法探讨

ui设计分享达人

如何科学有效的度量用户体验是企业和用户体验从业者一直在思考和研究的课题。用户满意度作为量化体验度量的方法也一直备受关注。那么用户满意度指标是怎么来的?评估模型该如何搭建?模型好坏又要如何判断?本篇文章聚焦用户满意度模型搭建与检验,分享模型搭建与检验过程中的方法与技巧。


早在20世纪30年代,就有学者在社会和实验心理学领域对满意度展开研究,研究表明用户满意度反映的是用户的一种心理状态,是用户对其明示的、隐含的需求和期望被满足程度的主观感受。用户满意度评估对企业生存和产品体验提升都有重要的意义:一方面,随着移动互联网人口红利逐渐消失,手机应用获取新客的成本和难度变得越来越高,通过提升用户满意度充分激发现有用户价值成为企业非常重要的商业策略。如美国顾客满意度指数ACSI数据表明,用户满意度的提升能带来用户消费频次的增加,同时也会为企业赢得更高的声誉,带来拉新、促活成本的降低。此外用户满意度通过度量产品体验现状和迭代动作有效性,对助力产品体验提升起着重要作用。


用户满意度模型的构建流程如下图所示,接下来我们一起看看:



用户满意度模型构建流程可分为「明确目标」「指标收集」「指标定义」「指标归属」「指标赋权」5个步骤:


///

Step1 明确目标

第1步是明确评估目标。明确评估目标包括明确评估用途和范畴,用户满意度评估的用途不同,在评估侧重和衡量方式上会有不同:


如衡量产品改版效果的用户满意度侧重关注改版目标是否达成,更关注改版前后影响体验目标达成的体验点变化。用于摸底产品体验水平的用户满意度侧重了解产品对用户需求和期待的满足情况,更关注产品自身体验长短板以及相较于其他同类产品体验优劣势。

此外需要考虑评估范畴,一方面需要明确仅评估本品还是同时覆盖竞品,对于未在行业中取得绝对领先地位的产品,更应考虑覆盖竞品评估,明确体验竞争优劣势的同时寻求竞品借鉴点。另一方面需要明确评估产品全局还是聚焦部分模块,全局评估能获取用户对产品的整体感受,但在产品模块繁多或复杂时,受制于用户参与调研的耐心有限,针对每个模块的评估问题数量无法设置太多,导致评估颗粒度较粗,可考虑聚焦重点模块单独评估。

///

Step2 指标收集

第2步是收集评估指标,用户满意度指标收集可结合案头侧、用户侧和专家侧三方信息获取:


  • 案头侧指标收集方式主要是案头研究和产品走查。案头研究可重点关注成熟评估模型以及行业趋势、产品模式和用户需求分析报告,结合对产品的走查分析,提炼“好的产品体验”需要包含哪些要素。常用的案头研究渠道和可查询的信息如下图:

  • 用户侧指标收集方式主要有用户座谈会和客诉反馈,座谈会把目标用户邀请到一起畅谈对产品的需求和期待,邀请对产品使用程度较深的“专家级”用户能贡献更多有效信息。另外客诉反馈也是能集中了解用户对产品关注点和痛点的数据渠道。

 

  • 专家侧指标收集方法主要是专家访谈,通过向专家了解产品目标、目标实现方式及后续主要动作来拆解对当前产品体验重要的维度和指标。专家访谈需要覆盖到能决策产品方向的人,且专家职能身份尽可能的多样化,如覆盖产品、运营、设计、技术、市场等不同职能角色。


///

Step3 指标定义

第3步是指标定义,给指标下定义需考虑指标的体验标准高低和文案描述两方面:


体验标准选择要符合产品本阶段的目标,标准定得过高或过低都会让指标丧失灵敏性失去价值。指标描述一般要遵循通俗性、简洁性和单一性原则:


///

STEP4 指标归属

第4步是将定义好的指标进行维度划分与归属来构建评估模型。维度初步划分有「用户接触产品的触点」和「产品功能模块」两种方式。


拿用户一次外出就餐的满意度举例,按用户接触产品的触点可以分为就餐前(选餐厅、查信息、订座等)、就餐中(菜品、服务、环境等)、就餐后(买单)满意度。而按功能模块划分可以分为餐厅信息、评论信息、优惠信息满意度。无论采用哪种先验假设,模型构建都需要遵循“完备互斥”原则,即指标既齐全不遗漏,也没有重复。



///

STEP5 指标赋权

因为不同评估指标的重要性程度不一样,拿汽车产品的用户满意度评估为例,对普通轿车的满意度评估更看重实用舒适,而对越野车的满意度评估更看重汽车性能。因此在完成评估模型搭建之后,需要赋予评估指标权重,指标赋权的方法按照打权重的人不同可以划分为专家赋权和用户赋权两大类:

 

  • 用户赋权是根据用户对某个体验点(指标)满意度打分和对产品整体满意度打分之间的关系测算出来的间接赋权方法,体验点满意度分数变化对产品整体满意度分数变化的解释程度越高,体验点对应的指标权重就越大。常用的指标赋权方法有“线性回归”、“因子分析”和“结构方程模型”。

 

  • 专家赋权是领域专家,如产品、运营、设计等对指标重要性进行主观判断,因此又叫直接赋权法,常见的直接赋权法有“直接评定法”、“分值分配法”和“层次分析法”。“直接评定法”就是专家逐个判断指标重要性,“分值分配法”是预先给定所有指标一个总分,专家把总分分配到各个指标上,“层次分析法”是专家对指标重要性进行两两对比,因为能更好地在对比过程中帮助专家理清指标的相对重要性,层次分析法是专家赋权中更为常用的方法。

那么到底应该使用用户赋权还是专家赋权呢?这两类赋权方式具有不同的特点,用户赋权反映了用户对评估指标所反映体验点的需求强度,在初次搭建模型对用户需求强度优先级不明确时可以考虑使用,但用户赋权受产品现状影响较大,产品当下已经成熟和形成规模的方向更容易获得较高权重,而对产品未来重要但目前规模较小的方向权重则可能较小。专家赋权反映专家对产品现状和产品未来方向的综合判断,可以在产品较为成熟或开始尝试创新方向时考虑使用。


为了衡量用户满意度模型的好坏,完成模型搭建后需要对模型进行检验,模型检验分为「指标内容检验」和「结构归属检验」两类:



///

STEP6模型检验

  • 指标内容检验

指标内容检验关注指标描述对想要评估体验点的符合程度和可理解性,即指标的内容效度。

 

指标内容检验可通过领域专家完成,邀请至少3名以上专家对指标内容有效性、易理解性等维度打分,专家一致评价为符合的指标占比即为模型内容效度(S-CVI)。对于专家认为不符合或专家打分不一致的指标需要咨询专家具体原因并作出适当修改。一般而言专家一致评价符合的指标不应低于80%。常见的指标内容问题包括指标描述未能准确概括体验点、指标描述有歧义、指标定义的体验标准不合适等。

  • 结构效度检验

结构归属检验是判断评估指标与想要测量概念(归属维度)之间关系的方法,判断归属关系的方式有看同一维度下指标间的相关关系,指标对测量概念的解释程度等。常用的结构归属检验有同质性α信度检验、探索性因子分析和验证信因子分析。

每种检验方法都有自己判别指标归属和模型可靠的标准,但是在做指标归属调整和指标删减的时候不应该盲从于统计数据是否达标,还需要充分考虑指标实际意义、是否有助于我们实现评估目标等实际情况进行综合考虑。



///

结语

用户满意度模型需要跟随用户需求和产品发展变化而不断迭代更新,保证评估模型能反映用户需求和业务工作。以上是我们在用户满意度模型搭建和检验方面的一点经验,希望能抛砖引玉,欢迎大家交流探讨。


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

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

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

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


B端体验设计-与复杂共处

ui设计分享达人

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。

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

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

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

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





详解|用户体验地图,到底该如何使用?

ui设计分享达人

用户体验地图是什么 | WHAT

用户体验地图(Experience Maps)旨在通过描述用户历程和故事,使设计师、产品经理等项目成员更好地了解用户和洞察诉求。所以对于用户体验地图,我们可以将其定义为以下内容:

- 是一种描述用户故事的可视化工具;

- 是一种帮助设计师、产品经理等更好地了解用户的共创工具;

- 从用户视角出发,直观展现产品流程各个触点上用户的痛点、需求和情绪;

- 用户体验地图绘制的形式并不唯一,可以根据项目需求,增减内容。


undefined  

△ 途家 App 用户租房 · 用户体验地图案例



通常在接触到需求之后,设计师就可以开始梳理现有流程、使用用户体验地图了。要注意的是:

- 需要梳理的功能不分大小,都可以使用;

- 做之前,务必要先调研和访谈用户使用产品的情况。

建议时长:

- 重要项目:120~180 分钟- 日常项目:60~120分钟

参与者:

- 必选:设计师、产品- 可选:研发、市场、其他

工具:

- 电脑或白板+便利贴

 

为什么需要用户体验地图 | WHY

需要发现和拆解产品现有问题,梳理用户流程时使用用户体验地图,可以在聚焦阶段,整合用户诉求和业务诉求,共创机会点,找出解决方案,通常在以下场景中使用:

- 新产品设计:需要对需求进行拆解和优先级排序;

- 产品优化:发现产品现有问题,洞察设计发力点。

 

由此可见,在设计过程中使用用户体验地图作为设计工具,有以下益处:

- 更好的以用户视角来看产品的体验;

- 通过共创,项目成员达成共识;

- 确认触点,作为我们的设计方向;

- 通过用户痛点找到机会点;

- 帮助梳理产品流程。


undefined


△ 用户体验地图共创现场

 

用户体验地图操作流程 | HOW

我们通常会将流程分成4 个阶段:定义原则和目的 —— 梳理阶段流程 —— 洞察痛点 —— 寻找机会点。


1. 定义原则和目的

首先要了解我们做用户体验地图的原因和目的,包括用户是谁、解决什么问题、用户的目标、产品的整体目标、限定条件等等,对用户群体、整个项目背景和共创任务目标有清晰、全面的认知。


undefined


2. 梳理阶段流程 

首先是划分阶段,将用户的行为拆分成几个大的阶段,在整理时要注意:

- 在整个产品的范围之内尽量把故事、流程讲完整;- 以广度优先,而非深度,不要过早的沉浸到细节中。

接下来我们要将主要阶段拆分成单个任务,并梳理具体的任务和触点,罗列出过程中的任务和各个触点,要做到事无巨细。


undefined


然后根据任务和触点,整理对应的用户疑问、用户感受/情绪。通过对用户的观察和访谈进行梳理,客观的描述事实,切勿自说自话或是将自己的情绪代入其中,也不要急于猜想与分析。


undefined


3. 洞察痛点

这一步需要我们汇总用户的痛点,并将痛点分级,洞察用户痛点背后的真实诉求。这个过程中可以先让大家在一定时间内写出自己的想法,每一条写在一张卡片上,做到先相互不干扰,之后再统一整理和总结。


undefined


4. 寻找机会点

通过上述总结,思考新的机会点、解决方案、优化整体流程,并对新流程下的功能做优先级排序。可以通过准备一些问题来刺激大家脑爆出更多的内容,比如:用户还有其他选择么?怎么做用户才能更爽?其他用户来到这里该怎么处理?等等。在这个阶段需要:

- 对内容进行对标、讨论,把公认的点保留下来,无用的点剔除出局;- 根据实际情况和项目成本、进度等条件,对新流程下的功能做优先级排序。


undefined


 

如何为过程提效 |TIPS

在实际的工作过程中,因为项目时间都非常紧张,绘制这样一个完整的用户体验地图比较耗费时间,所以推荐大家几个提效的技巧,既可以减少时间浪费,也可以提高共创质量:

1. 事前

充分做好用户调研,提前准备好用户地图模板,可以在开始之前的一到两天发给参会人员,让所有人对产品有一个整体梳理和思考,有助于提高大家的产出质量。

2. 事中

如果是优化的产品,可以将设计稿 demo 或者线上产品截图打印出来,这样可以增强大家的代入感,有利于想法的输出。

3. 事后

整理电子版体验地图,需要跟随产品的演进进行更新,上传到项目共享空间随时查看。


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

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

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

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


B端产品界面高屏效初探

ui设计分享达人

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

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

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

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

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

设计模式 | 多级撤销 Multilevel Undo:让用户更有安全感

ui设计分享达人

What 是什么

简介:「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录,根据原始执行顺序,一步步返回历史操作。


例子:用 Sketch 画设计稿时,可以多级撤销,允许用户返回上一步或更早的历史操作


undefined


Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索,不必担心造成某些不可取消的修改。例如,如果单击了错误的菜单项,不需要进行复杂的恢复,不需要退回到此前保存的文件版本,或者寻求系统管理员的帮助。


多级撤销也让专家用户更快更容易地探索工作路径。举例而言,一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作,研究那些结果看是不是他喜欢的,然后再逐一撤销,回到起点。


When 什么时候使用

需要用户频繁在单一页面上交互的用户界面,相比普通的网站或者移动端 APP,交互操作要复杂得多。例如:文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。


使用条件:该软件的单一界面交互比较复杂和频繁


How 如何使用

软件首先需要一个强大的模型,这个模型是关于动作是什么样的——动作的名称、动作所关联的对象,以及如何返回历史动作。


决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言,在大部分应用里,人们期望能撤销下面这些改变:

  • 文档或表单的文字输入

  • 数据库

  • 图片或画布的修改

  • 布局上的变化位置、大小、顺序或分组在图像应用程序中

  • 文件操作,例如删除或修改

  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列

  • 任何剪切、复制、粘贴操作


下面这些修改基本上是不可撤销的:

  • 文本或对象选择

  • 窗口或页面之间的导航

  • 鼠标光标和文本光标的定位

  • 滚动条的位置

  • 窗口或面板的位置和尺寸

  • 在一个未提交的对话框或模态对话框上的改动


展现方式

然后,决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。


Example 案例

案例一:Microsoft OneNote 笔记编辑器

用户需求:撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销,或者使用编辑菜单下的按钮帮助用户返回上一步。

undefined


案例二:Photoshop 多级撤销

用户需求:回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作,由于 PS 的操作修改繁琐且复杂,所以为用户提供了历史记录面板,用户也可以点击历史操作步骤回到想要的历史操作记录。

undefined


案例三:美图秀秀图像处理 App

用户需求: 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时,常常会返回查看对比不同的效果,或者操作错误时返回到前几步,顶部的撤销按钮可以让用户回到任何历史操作步骤。

undefined

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

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

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

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



浅谈Windows 11用户体验设计中的不足

ui设计分享达人


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

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

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

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

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

ui设计分享达人

在过去的几年中,深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景,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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档