首页

轮播设计总结-提高用户点击

纯纯

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

本篇文章通过以下几点探索轮播的特性,预计阅读20分钟

目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结

一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。

促销轮播banner

品牌推广轮播banner


产品介绍轮播banner

同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。


轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。

还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。

如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。

国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。

二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。

如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。

在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。

而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。

三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。

如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容


四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。

以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置

随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。

五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。


在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。

如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。

反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。

六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。

此方式更适合一些电商平台、新闻网站这种内容过多的产品


如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。

七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。

相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。

在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。

八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。

如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。

再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。

苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。


九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。

谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。

如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。


十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

文章来源:UI中国   作者:爱吃猫的鱼____
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




浅谈交互设计

纯纯

一、什么是交互设计?

先来看一下百度百科的定义

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。简而言之,交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。


为什么要做交互设计

在使用网站,软件,消费产品或各种服务的时候(实际上是在同它们交互),使用过程中的感觉就是一种交互体验。随着网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候,可能为当初的使用者本身就是该行业的专家,没有人去关注使用者的感觉;相反,一切都围绕机器的需要来组织,程序员通过打孔卡片来输入机器语言,输出结果也是机器语言,那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。


从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达到使用者的目标,这就是交互设计的目的。


二、交互设计常用原则和定律有哪些?


尼尔森十大可用性原则


1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈,例如:页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述,尽可能贴近用户所在的环境,将现实环境的操作功能巧妙的转化为线上功能,使其贴近用户。使用用户能听懂的专业术语,涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物,使用户更容易理解。例如:天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品,降低理解成本。

3、操作可控原则

对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。

例如:删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范/逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等,例如:微信小程序设计规范。

5、防错原则

设置防错的机制,减少用户犯错。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。

例如:用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。

例如:验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如:手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息,如果不是优先级最高,要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。

例如:信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如:新功能引导、解释说明文案等。



七个交互设计定律


1、菲兹定律

点击一个目标的时间同以下两个因素有关:

(1)设备当前位置和目标位置的距离(D)。距离越长,所用时间越长;

(2)目标的大小(S)。目标越大,所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。

交互设计中要合理设置选项,以免用户使用中决策时间过长,降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

例如:手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。

例如:在智能手机出现之前,手机上的操作按钮都是实体按钮。在智能手机出现手,手机被整个屏幕占据后,所有的操作都集合在了手机系统之中,等于把物理操作转移到了系统操作中,其本身的功能复杂程度并没有发生改变,只是转移了而已。


6、防错原则

大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

例如:登录时用户名校验,手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。

”这个原理称为“如无必要,勿增实体”,即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物,从而提升使用效率。




三、交互设计如何开展工作


首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图,而是要先分析需求,了解产品的战略层和范围层的业务目标。把握产品设计大方向,只有方向对了后面的工作才是有价值的。

把握了产品方向,下面就该进行需求的分析,

首先针对需求考虑5个问题:

1、为什么要做这个功能?(业务需求)

2、产品期望得到怎样的成果?(业务目标)

3、谁来使用?(目标用户)

4、他们要怎样使用?(用户需求)

5、如何让他们都来使用?(将业务目标转化为用户行为)

清楚这5个问题后,再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求(业务目的、业务目标)和用户需求(目标用户、用户体验目标),把握关键因素(用户的动机、担忧和影响目标达成的障碍)。

归纳这些需求,明确设计策略。


将“业务目标”转化为“用户行为”,通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”,用户行为决定了用户界面,用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。



四、如何进行用户研究,方法有哪些


评估的形式及方法


常见的评估形式分为三类:

1、评估主体:根据评估的主体不同来进行区分,即谁来做评估。

按照评估主体来区分主要有两个主体:用户和专家

用户评估主要靠收集用户使用数据,也就是用户测试,它的数据相对客观,但时间和费用较多,评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观,但费时少、费用少、评估范围窄。

两种评估方法可以相互补充,并结合使用。


2、评估性质:例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价,如点击量、使用率等,可以用数据来说明。

定性评估是指对非计量性的部分进行评价,如流畅度、舒适性、创造性等进行评价。它只能表示一个度,无法准确用数据来说明问题。


3、评估过程:按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观,从客观的角度出发判断客观事物。

感性评估更为主观,评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用,才能完整的完成我们的任务,达到我们的目标。


常见的评估方法有四种:

1、原型评估方法:在产品研发过程中,对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法,原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型:

(1)快速原型:原型迅速成型并分配实施,在原型实验收集的信息基础上,系统从草案中得以完善。

(2)增量原型:应用与大型系统,从系统的基本骨架开始,需要阶段性的安装,及系统的本质特征是在初次安装完成后允许阶段性测试,以减少遗漏的重要特征。

(3)演化原型:对前期的设计原型不断进行补充和优化,直到成为最后的系统。


2、简易测试评估方法

在条件不允许的情况下,可以采取简易的方法来对用户体验进行评价。步骤是:

(1)实验室环境准备:准备好测试用的电脑或其他媒介。两个房间,房间1用来对被测试者进行测试,房间2用于设计师和工程师的观察。

(2)被试选择:分为用户组和专家组。

(3)进行测试:房间1中被试者根据自己的选择进行操作和测试,同时说出自己的内心想法,观察员在调查表上记录被试者的每一次的操作情况,包括出错情况和被试者的口语描述,当被试者在测试过程中遇到困难或操作无法进行时,观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2,设计师和工程师实时观察和记录被试者的情况,以便今后对产品做进一步的修改和完善。

(4)结果分析:通过多次测试后,将测试结果汇总,提取出交互设计中存在的问题,以及对交互设计有益的建议形成测试报告。


3、眼动评估方法

眼动追踪可以用来评价对产品(包括硬件产品和软件产品)设计的感性意象,评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。


4、脑电评估方法

通过对脑电信号的分析,研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛,被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷,例如空间分辨率上的局限性,因而对某些认知过程和脑区的定位并不是很准确。第二,在许多相似的实验研究中,由于研究者采用了不同的实验材料和方法等,实验结果也存在差异性。第三 ,由于采集记录时间的滞后性,脑电所记录的并不一定是当下被试者所想到的内容。


采取哪种方法来开展用户测试和评估,要根据不同的任务结合不同的环境来开展,比如:时间、成本、资源等。



启发式评估法

是专家评估法的一种,也被称为经验性评估,最初由Nielsen博士提出。简单来说,启发式评估是一种简易的可用性评估方法,使用一套相对简单、通用、有启发性的可用性原则,让几个评审根据专业知识和经验来进行评估,发现产品潜在的可用性问题。


启发式评估的两大要素:评估者和评估参照的原则。   


对评估者的要求主要有四个方面:

(1)人数:推荐3-5人,有时会更少

(2)知识:最好同时具有可用性知识及设计知识

(3)身份:最好是非设计者本人,否者不具有客观性

(4)岗位:设计师或用户研究员


评估参照的原则有:尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择,常用的是尼尔森十大交互原则。


什么时候适合使用启发式评估法?

交互设计和UI设计阶段、测试优化和产品发布后的阶段。


启发式评估的优缺点有哪些?

优点:成本低、效率高、发现大多数可用性问题,甚至是用户测试时不会出现的问题。

缺点:不能代表真实用户,相对主观、有时候发现问题过多、对评估人员知识背景要求较高。


什么时候适用?

(1)适合时间、资源有限的情况下快速发现可用性问题,降低风险及成本。

(2)版本变动不大的情况下,小成本检验。

(3)作为可用性测试的之前准备。


启发式评估流程是什么?

(1)准备阶段:确定范围、背景调查、参考评估原则、评委邀约、材料准备

(2)执行阶段:任务走查、整体走查、结果记录

(3)分析阶段:汇总讨论、报告总结、优化方案



可用性测试


先来看一下我们在平时工作中常常会听到这样的问题

产品经理:我们的用户觉得产品好不好用?使用过程中会不会遇到问题?他们是否满意?

设计师:设计的过程有一些纠结的地方,不知道实际用户是怎么理解和操作的怎么办?

产品开发后:想在大推前检验一下产品是否靠谱,适不适合大推?


当我们遇到这样的一些问题时,如何找到方法快速得到答案呢?

那就是接下来要介绍的可用性测试方法。


可用性测试是一种常用的、高效的方法。

它的定义是:通过观察具有代表性的用户,完成产品的典型任务,从而找出产品可用性问题并解决,目的是为了改善产品,让产品更容易使用。


什么时候适合做可用性测试呢?

一般是在:交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好,可以尽早发现问题并及时调整。


类型分为两种:形成式和总结式

形成式特点:小样本、发现问题为主、不能做定量对比。

总结式特点:大样本(30人以上)、定量的评估、可以做对比评估


可用性测试可以解决什么样的问题?

1、发现问题,产品在体验上是否存在问题

2、检验实现,期望的设计目的有没有达成,是否满足了用户的期望

3、产品评估,用户是否会满意

4、理解用户,了解用户行为习惯,了解用户认知,找到某些问题的原因


测试流程是什么?

整体上分为4个阶段:1、准备  2、测试  3、分析  4、优化


1、准备阶段要做的有哪些?


确定目标:确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有:

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议,如何选择解决方案

·某个环节流失率较高,检测是否为设计原因导致

·需要拓展某一类特殊用户,测试针对这类用户在设计上是否需要作出调整


准备测试方案

方案中应当包含以下内容:

·测试目的:明确测试的目的及范围,测试目的决定了测试方案

·测试关注点:与负责的设计师一起梳理测试中要关注的问题

·用户招募:招募要求,样本配比,招募渠道

·经费预算:奖励的形式和额度

·时间计划:用于把控时间计划


撰写测试脚本:设计测试任务,通过用户行为去观察提问来获得我们想要的内容

基本的流程有:

·暖场:3min,简单聊天,消除用户的紧张情绪

·测试说明:2min,对测试内容规则做说明

·测试前访谈:10min,了解用户基本信息

·简单试用:3min,让用户熟悉产品

·测试执行:30-45min,提示任务并观察

·事后访谈:15min,针对疑点问点追问,填写评价表

·道别:5min,支付礼金,送用户离开


招募用户

招募什么样的用户呢?

·根据测试目的来定,找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征,例如竞品使用经验,使用产品的目的,用户的活跃度等

·挑选最核心的纬度,转化成用户招募的条件,并尽量客观化,具体化,可衡量

·避免设置交叉条件过多,导致样本代表性降低

·学会辨别真假的用户信息


招募多少用户合适?

·以发现问题为目的快速可用性测试,6-8名即可

·考虑产品的复杂性,覆盖人群差异性,适当做调整,拓展到10-15名


招募渠道有哪些?

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人,朋友等

·推广渠道:官微、公众号、门户网等

·社区,论坛,qq群等

·第三方调研公司


准备测试素材:低保真或高保真原型,或线上已经可以使用的产品,也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备,摄像头,纸,笔,桌椅等。


测试场地选择:

·专业可用性测试实验室:一般对测试质量要求较高,旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间,一个测试间,一个观察间,中间有单向玻璃分隔。测试间中有多角度的摄像头,用来记录测试过程,观察间可以同步看到测试间里的情况,

·普通测试环境:在观察人数较少(小于3人),条件有限时使用。


预测试阶段:正式测试前进行预测试,保证测试流程通畅

·走查:记录可能出现的问题

·预测试:找人先测试一下

·调整:调整测试流程


正式测试阶段

测试参与人员有

·主持人:引导整个测试流程

·记录员:记录操作行为,访谈内容,发现问题等

·产品团队:参与旁听,观察,结束后交流

·用户:完成测试及访谈任务


测试过程中需要观察的要点:

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意


结果分析

边测试边总结,越及时越好

·测试完一个用户,做一次小结

·测试结束当天写小结,与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改,边改边测

结果分析4个步骤:1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录


撰写报告

从4个方面来写:

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外,还可以围绕关注的问题,未满足需求补充分析


优化跟踪

在测试之后需要出优化的方案,测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决,可以结合其他的一些测试方法来得到。



问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法,研究者将所要研究的问题编制成问题表格,让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写,从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段,也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度,可以使用问卷调研的方法。它比较适合去了解用户的认知态度,也可以附带了解用户的行为习惯,


问卷调研的优缺点

优点:统一性、灵活性、量化性、匿名性

缺点:(1)只能获得书面的信息,而不能了解到生动、具体的情况。(2)缺乏弹性,很难做深入的定性调研。(3)调查者难以了解被调查者是否认真作答,是不是自己填写的。(4)填写问卷比较容易,有些别调查者会随意选择,或者按照社会主流观点选择,这样会使调查失去真实性。(5)回复效率低,对无回答者的研究比较困难。


问卷调查的使用场景

适用于:(1)需要进行定量分析的调研。(2)需要匿名进行调研的问题。(3)对已有假设进行检验。(4)寻找问题隐藏的关联。(5)对产品设计用户认知及态度的评估。

不适用于:(1)发现和描述具体问题。(2)探索受访对象的模糊态度。(3)获取创新想法。(4)获取精确的行为数据。


问卷调研流程

1、确定目标:确定调研目的、对象、分析目的和应用对象。

2、调研方案:通过访谈、经验、理论等,确定调研框架,题目选项,分析思路,投放渠道,相本配比等。

3、问卷设计:问卷设计,问题美化,投放渠道。

4、问卷测试:多人测试,确保问卷的可读性,逻辑通畅

5、问卷投放:按照计划好的投放渠道进行投放,回收数据,数据清洗

6、问卷分析及填写报告:分析及报告填写,调研结果落地



数据分析

概述:通过在网站或应用中进行数据埋点,获取用户对产品的使用和行为数据,并进行基于产品体验优化的数据进行分析。


数据分析可以做什么?

1、可以做到用户从哪里来,来了多少

2、获取用户属性,用户地域,用户设备

3、访问了哪些页面,使用了哪些功能,消费了多少钱,消耗了多少时间

4、哪些流量可能存在问题,忠诚度如何,活跃度如何,有没有达到目标,和行业相比如何

5、流失情况如何,离开之后是否还回来

可以作为产品的眼镜和大脑,提供客观衡量的依据,可以持续优化改进。


数据获取方式的对比

日志文件:优势,完整的服务端请求记录。

                  缺点,日志的获取和清洗有过滤成本,许多页面操作无法记录。

JS页面标记:优势,数据获取可控、灵活,可以对页面操作记录进行记录,获取数据比较完整丰富。

                      缺点,需要在页面植入JS标记代码,某些情况下无法获取,如当用户禁用JS功能时。


常用的数据监控平台

1、第三方监控平台:如Google Analytics、百度统计、腾讯云分析等

2、自研平台


数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化


Web分析常用的指标

PV:是指页面浏览量,网页浏览数实施评价网站流量最常用的指标之一,用户每一次访问网站中的页面均被记录,对统一页面多次访问,访问量累计

UV:是指独立访客,是通过互联网访问、浏览这个页面的自然人

UPV:是指唯一身份综合浏览量

访问:是指在一定时间范围内,网站所有访问者对网站发起访问的总次数,从访客来到网站到最终关闭网站所有页面,记为一次访问

识别用户的方式:IP、IP+User Agent、cookie、User ID、设备ID、其他


复合指标

跳出率:指用户来到网站,只浏览了一个页面就离开的访问次数,占全部访问次数的百分比,简称“来了就走”。跳出率可以被用来衡量流量和页面质量,高跳出率表示访问者对着陆页面不感兴趣,没有继续访问更深入的页面。也可能页面设计存在问题,也可能是导入的用户不匹配。跳出率可以通过调整广告渠道,优化页面内容来降低。

退出率:访问者离开网站一次被记录为一次退出,某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高,代表某一页面可能出现了问题。

访问时长:网站停留时长,页面停留时长,应用使用时长。访问量是访问质量的一个衡量指标,较长的访问时间说明用户与产品进行了较多的互动。

访问深度:可以理解为单个用户平均访问的页面数,是PV/UV的比值。访问深度也是访问质量的一个衡量指标,可以考察用户是否和网站进行了较多互动。这个比值越大,代表网站的粘性越高。

转化率:指在一个统计周期内,完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算,例如注册转化率、付款转化率等,是一个重要的分析指标。


移动端基础指标

移动端的基础指标监测与web端略有不同,但分析思路大致相同。指标分为:新增设备、累计设备、启动次数、单词使用时长。


常见分析内容

流量分析(哪里来?)、用户分析(什么样的用户?)、行为分析(如何使用的?)、路径转化(表现如何?)、流失分析(粘性如何?)



A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式,来获得具有代表性的实验结论,从而寻找到更好的产品策略。

简单来说,就是为同一目标制定两个方案,让一部分用户使用A方案,另一部分使用B方案,记录用户的使用情况,对比两个方案的结果,选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用,来验证新的设计是否可以提高产品的表现。


A/B test可以测试的元素有:标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试,这就是两个测试类型单变量测试和多变量测试。


A/B test工具

Google Website Optimizer:搜索巨头提供的免费A/B test工具,一个很好的入门级工具,但是没有一些先进的功能。

Visual Website Optimizer:一个易于使用的A/Btest测试工具,包含功能有所见即所得的编辑器,单机地图,访问者分割和标签等。

Unbounce and Performable:集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企业级测试工具

App Adhoc Optimizer:国内A/B Test工具,同时支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB测试服务的专业Saas平台

Optimizely:是网上现有的最专业的AB测试工具之一,它的价格要比其他的工具高很多(也可以免费使用一个月),它提供了一些非常好的功能。

Unbounce:对于登录页面的测试来讲非常不错,而且它不仅仅是个测试工具,还可以在无需自己编写任何代码的情况下来创建登录页面。


如何做A/Btest

1、确定目标,例如提高网站的付费转化率,降低跳出率等

2、测试方案,建立假设:购买按钮的颜色会影响点击率?缩短流程可以提高复费率?改变导航可以降低跳出率等?

3、创建相比较的两个版本,改变其中的变量

4、发布测试,将部分流量导向B方案,但不一定是5:5

5、数据分析,收集数据,对比AB版本的转化率、跳出率、留存率等


感谢阅读!

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

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

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



如何提升B端界面的精致度

纯纯

于B端,我想刚开始很多同学就直接拿Ant Design套套界面,因为公司要求并不高,随后字节Arco Design也推出了对应的模版和规范,能让我们快速作出一个不出错的方案。

但是随着公司对B端越来越重视,这些模版显然就太烂大街了。公司、市场的要求显然不止于此,我们的设计追求也不止于此。 

那么我们如何才能摆脱套模版,提高界面的精致度,提升界面的交互体验呢?

其实很简单,王阳明先生告诉我们知行合一,知是行之始行是知之成。我们如何才能提升B端界面端精致度?

第一,需要知道什么是好的设计;

第二,需要不断的去实践去练习,缺一不可。

本文先和大家谈谈知的层面,提高我们的眼界,下面就和大家分享一些不错的B端产品,大家有时间可以去慢慢体验。 

PS:作为B端设计师,一定要去多拆解竞品,多研究好的产品,别面试的时候,面试官问你研究的B端产品是什么,你只知道阿里云、腾讯云、百度云哦! 


1、Hubspot

做B端的同学,尤其是做CRM的同学应该都知道Salesforce,他是全球最大的 CRM(客户关系管理) 工具公司。 

Hubspot同样是提供客户管理相关的应用,虽然成立相对Salesforce晚,但是在市场上也占有一席之地。

从设计的角度来看,他的界面风格更加简洁舒适,从体验上来看和国内的CRM系统完全不同,其体验更加自然和舒适。 

这种风格大家看了有没有觉得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是发现风格有一点类似,大家可以对比国内产品去拆解下他们的交互细节有什么不同,完成同样的任务他们采用的方案有何不同,相信你会有很多的收获。 

国外的界面看着总让人觉得很舒适,仅仅是因为克制的设计、中性灰使用得好吗?当然不是,是因为英文本身就是图形化的文字。

如果翻译成中文,你会发现好像不是特别理想。 

这个样子拿给领导过稿,怕是分分钟被拍死,因此我们还是需要多看看国内优秀的产品。


2、神策

神策的设计,我想B端的朋友不陌生吧,国内产品中他的设计一直是我们的参考对象。

不同于其他产品,他的体验门槛比较低,注册后就可以去体验他的demo,也没有试用期限,参考对象从可视化报表,到界面交互均能找到参考。

不过当你参考一次后发现,做出来的界面怎么还是少了一些灵魂,虽然界面风格上了一个台阶,但为什么用户还是觉得产品难用。

 

3、项目管理类

这里不得不和大家推荐项目管理类产品了,这类产品是专门给互联网公司的开发团队使用,他们都是专业用户,同时这些都是提高他们工作效率的工具,因此这些产品投入的成本更高,优化得更好,拆解他们的产品,就是直接观看高手的成长之路。

Jira

Jira是Atlassian公司出品的一款事务管理软件,JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。

同时他也是国内项目管理类产品的学习研究对象,因此大家可以通过文章、B站、界面截图,自己申请体验等方式全面的进行体验。

同时也可借助群的力量,调研下有使用Jira的小伙伴,看看他们在使用中有什么问题,下面是我收集Jira网页版和本地配置版的问题截图,这些都来自不同角色的真实体验,会更有分析的价值。(这部分截图涉及到公司的数据,同时数量多不太方便打码,就不分享给大家了。)

当然国内的项目管理类产品也得去看,我们要对比哪里做得好,哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,这些产品不管从视觉还是体验都非常不错,大家一定要去体验。


5、文档管理类产品

通过不断对竞品进行拆解,你已经不是当初那个小白了,你的行业认知,方案设计能力应该赶超了一大波人。

成长的同时,又发现你设计的界面,不太精致,少了些温度,这时候推荐你看文档管理类产品。

WPS

第一个和大家推荐的是WPS,界面简洁,配色舒适。 


飞书

在管理类的软件中,不得不提飞书的管理界面,从设计到使用体验,他给我的感觉终于不是那么千遍一律,用组件库搭建起来的感觉。

他开始有了温度,开始注重品牌感的打造,用户的引导,符合品牌调性的插画。 

 

对一些体验的细节进行优化,比如传统的编辑都是放在页面顶部,它采用了离光标更近的位置。 

根据菲兹定律,光标当前的位置和目标位置的距离D越短,所用的时间越短,具体好不好用,欢迎大家在评论区留言哦。 


6、概念稿

到这时候如果你觉得线上的产品太禁锢思维,那么推荐你看看dribbble、behance,搜索data、web、dashboard等关键词,去看看有没有新的灵感。

我的花瓣收集了一部分,如果不嫌弃,可以去看看,顺藤摸瓜应该可以找到很多不错的设计。

图片标题

 

7、画重点

如何提升B端界面的精致度?

第一,要知道什么是好的设计,多拆解国内外优化的B端产品。

第二,多在工作中时间,有时间多做ABC方案,锻炼自己的方案设计能力,多踩一些坑,时刻保持学习能力,慢慢就成长了。

文章来源:UI中国   作者:风筝KK
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


UI界面设计基础

博博

互联网设计的一些基础知识,写给刚入门或想入门的童鞋们,希望有所帮助


    • 文章来源:站酷   作者:凌坤_Maxidea

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

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

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

圆形元素在界面设计中的运用

博博

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。


一、圆形头像


放眼望去,圆形头像已然占领了我们的手机。不妨看看下面举的这些例子,如下图所示。

43e456a455da32f875520f6db95d.jpg

从左到右依次是搜狗地图、QQ、Instagram。当然,还有很多其它的例子,就不一一列举啦。此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图。d1df56a455f56ac7256cb095c8b4.jpg

方与圆之间,孰对孰错,请继续看下文分解。


1.用户使用头像的目的

不管是圆形头像,还是方形头像,其归根结底都是头像。用户使用头像的目的,主要是作为个人身份的象征。区别于其他用户的特征有很多,例如用户名、用户ID、用户头像。在这些备选项中,头像最便于快速识别和记忆,尤其是帅哥美女。


除此之外,还有一部分通过头像来彰显自己的个性,例如美女通常会使用自己的性感自拍作为头像来表现自己的魅力,又或是使用卡通人物或形象作为头像来表现自己的艺术气息,再或是使用萌宠作为头像来表现自己的爱心或是呆萌。


2.用户使用什么照片作为头像

随着智能手机的越来越普及,人们拍摄照片的门槛也变得越来越低,越来越多的用户使用自拍的照片作为头像。照片的内容五花八门,例如人物、风景、花草、宠物。即使是正常的人物照片,背景中也会掺杂着很多其它的元素,例如下图所示。

5cf056a456106ac7256cb020a2c8.jpg

第一张照片中人物背景虽然虚化了,但背景仍然很凌乱,一些微弱的对比色很容易就抢夺了用户的视线。第二张照片中人物是配角,豪车才是真正的主角,这类型的自拍照不再少数。第三张照片人物拍摄的光线阴影错乱,故意露出一线背景内容,其用意如何昭然若揭。此外,用户手机的好坏、拍照水平也不一致,拍摄出的照片质量也参差不齐。


使用这些照片作为头像时,人物不但不被突出,反而被弱化了。虽然智能手机屏幕越来越大,但是当头像集体在界面中展示的的时候,每个头像依然较小。


3.方形头像和圆形头像的区别

方形头像和圆形头像的区别可以用两张对比图来说明,如下图所示。

5d5c56a456266ac7256cb013db0c.jpg

左图是方形头像,右图是圆形头像。通过对比,可以发现以下几点:


a、圆形头像能够更好地帮助用户聚焦到人脸。虽然左图能够完整地呈现人物特征,但是干扰信息较多,例如背景中的灯光、门柱、屏风。对比之下,右图更为清晰地展示了人物的脸部特征,例如锥子脸、美瞳、假睫毛。在前面的分析中也提到,手机拍摄的照片质量参差不齐。在这种现实情况下,圆形头像更有利于忽略照片的背景,提高头像的识别效率。


b、严格意义上讲左图并不能称之为头像,而更应该称之为照片。原因很简单,头像嘛,自然应该以展示“头”为主,而左图中头像只占画面四分之一不到的区域。从这个角度来说,显然右图更为合适。在选择照片作为头像时,如果是圆形,用户更愿意选择脸部的照片作为头像;如果是方形,用户则相对更随意,通常是全身或是半身照。不信,你可以打开自己的微信,看看自己的好友头像,或者往前滑滑看看前面的配图。


c、日常生活中,我们看到的大多数相框都是方形的,圆形的相框较少,这是因为大多数照片都是方形的。因此,使用圆形的轮廓来表现头像,能够快速地和照片区分开来,更加突出。

当然,使用圆形的轮廓作为头像,还有一些其它的原因,例如技术上的进步。

早期由于CSS等技术的不成熟,圆形、圆角图形的处理非常麻烦,现在变得容易很多。


二、圆形的icon


在APP的UI设计中,我们会经常看到一排排圆形的icon,例如下图所示。


fc6956a4564232f875520ff01b89.jpg

上图中,前面两个分别是美团和淘宝。在设计上,都有两行横排的圆形图标。最后一张图是搜狗地图的服务tab页,可以发现也有纵向排列的一溜圆形图标。

在这里,要回答两个问题:

1.为什么要用圆形?

2.为什么要用圆形而非矩形?


第1个问题很方便回答。每个功能入口的图标都不相同,如果去掉圆形轮廓,势必会显得十分凌乱。大家都知道圆形是一个封闭的形体,加上圆形之后就能够弱化图标的差异性,让其变得更加规整,看起来也更加清爽,整齐划一。同时,在功能上也表明各个图标之间的平等地位,不会因为某个图标形状特殊而有所偏袒。


在回答第2个问题之前,首先回归圆形和方形的基本特征,

圆形:动,曲线,运动,灵动,流动

方形:静,直线,规则,严肃,理性

圆形和方形比起来,显得要灵动很多,不至于那么呆板、严肃。如此,不难理解为什么用圆形而非矩形。


其次,圆形能够使图标在方形页面中脱颖而出——不觉得这几个圆形图标在页面中非常突出抢眼么?原因嘛,很简单。我们的手机屏幕大多是方形的,界面中的大多数元素也是方形的,这时候用一点少量的圆形,自然在界面中形成焦点,这一点在后面的分析中还会见到。


除了这种形式之外,还有一些单个的圆形图标浮于页面底部,通常执行的是返回至顶部的操作。


三、圆形和方形的结合


圆与方就像太极中的阴与阳,相生相克,而又生生不息。巧妙地将圆形与方形进行结合,能够让页面变得生动活泼的同时,也能够更好实现功能上的引导,如下图所示的几个案例。

ebb456a4567032f875520fafc8f5.jpg

第一幅图是谷歌手机地图,地点右上角的出行方式图标刚好被方形的临时层一分为二。从功能上来讲,出行方式是下一步的行为,不属于临时层里的内容,因此置于右上角的位置是比较合适的。从UI角度来说,圆形与方形结合,使的圆形变得更加突出显眼;同时圆形置于右上角,页面也不那么死板,反而让页面变得生动、活泼起来。


第二幅图是宜人贷,微微鼓起的弧度让这个理财项目变得十分突出,同时也打破了页面沉闷的布局。


第三幅图是kitchen stories,整个页面保持左右居中,作者的头像居中现实,对页面进行了分割的同时起到了承上启下的作用。


在页面设计中,圆形元素通常不是独立存在的,而是和其他元素相生相息,相互包容。寻求好的视觉效果的同时,也要弄清楚页面元素之间的相互关系,这样产出的设计才是真的好设计。


四、圆形的轮廓


结合现实物体,借用圆形轮廓,打造页面点睛之笔。还是举几个栗子给大家看看吧,如下图所示。

a29156a4568e6ac7256cb0899d80.jpg

第一幅图所示的是网易云音乐的播放界面。圆形轮廓与唱片保持一致,虽然占据了页面的主要空间,但是使的整个页面变得文艺简洁。


第二幅图所示的是搜易贷的账户页面。可用余额采用瓶装水的设计,余额较多则水涨的越高,同时会有晃动的效果,栩栩如生的同时让页面变得灵动起来。


第三幅图所示的是乐动力的首页。步数越多,则描边进度条越多,暗色变得越暖。与现实生活中的仪表盘相对应,渐变色搭配圆形,使的页面变得主次分明,极富视觉冲击力。


可以发现,在使用圆形元素时要注意页面的平衡,例如左右和上下的对齐居中。为了保证页面的均衡和清爽,通常会在圆形元素周围保留较多的空白。这些都是在使用圆形元素时需要注意的事项。


    • 文章来源:站酷   作者:Sim_H

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

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

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

7个基础的用户体验设计细节

seo达人


1、专注于20%

maggelato

你可曾听说过80/20法则?简而言之,80%的用户通常只会使用你网站内容和功能的20%,绝大多数的用户只是在扫视网站内容,并且只会挑选真正感兴趣的浏览。

同时这也意味着,剩余的20%就相当重要了。大多数的点击将源自于这一区域,它也是近乎完美的内容和互动区域。

你可以借助数据分析来决定哪个部分是整个网站最被关注的那20%。对于刚刚上线的网站,这个数据搜集的过程可能长达好几周,随后再进行调整。

当然,你也可以通过引导将用户引流到你希望用户去的那20%的区域。借助视觉引导和行动召唤设计来引流,用有趣和有意思的设计来营造令人有兴趣的区域,让他们乐于点击,从而达到目的。

2、架构式的思维

goldhill

设计一个网站和搭建一所房子其实差不多。首先,它需要一个坚实的基础,然后是能够承载所有内容的框架,做好后要好好装饰一下。同样的思维模式可以套用在网站的设计上。

更重要的是,你并不需要为此创造出过去从未在框架中出现过的东西,换言之,框架内的素材、组件和我们常见的并无二致。就像导航设计模式一样,现在的设计都趋于一致,因为这样的导航好用。

当网站的整体结构搭建起来之后,可以将相同的思路套用到内容体系的构建上来。主要的正文内容是整个网站内容的基础,辅以吸引人的标题、图片,配合上其他的次要元素,整个内容体系可以很快搭建起来。

3、不要要求太多

assos

现如今的世界可以说是由数据所驱动,越来越多的应用开始要求用户注册,要用户提供更多的权限,更多的信息,以期为用户提供更加个性化的体验。但是从体验的角度上来看,要尽量规避这一点。

站在用户的角度稍加思考你就明白了。找到一个令你感兴趣的炫酷网站,如果要深入了解更多内容,就需要内容,而如果要注册的话,网站却需要你提供下面10个类型的信息:姓名、邮件、国家、地区、城市、电话、Twitter权限、个人网站、工作职位、以及如何发现这个网站的。

那么接下来,你会怎么做?绝大多数的用户会直接转身离开,这个注册信息填写起来太费劲,体验太差了。

那么,如果你当你点击注册的时候,只需要一键从Facebook或者twitter授权即可,那么你会不会立刻点击呢?至少从目前已有的数据来看,绝大多数的用户会这么选择。

4、令人愉悦的微交互

evernote-1

可能很多时候你都没注意到,你和各种微交互进行的互动一直都存在。

·谷歌日历弹出框提示你每周例会要开始了
·短信提醒
·午睡的闹钟
·微博上的新粉丝和转发提醒

这样的例子我们可以连续不断地说上一个小时。这些带有微交互的提醒和动作会推动用户进行下一步操作,带来愉悦的体验,它们不能设计得非常醒目,但是又需要适当地吸引用户注意。

这些有趣的微交互的加入让用户从中获得好处。而你需要思考的是,有哪些东西是你的网站或者APP当中,用户想要立刻知道和获得、想被提醒的?

5、甚至幼儿都能轻松使用

statusshop

如果要给小孩子设计产品,那么它应该是什么样子?你可能会更专注于色彩的使用,让每一个区块都可以轻松点击,明显的标签,加上拼图式的连接方式。

所以,当我们在设计网站或者APP的时候,我们会说这个产品要足够易用,那么怎么才算得上“足够”呢?让小孩子都可以轻松使用,这就叫足够易用。换句话说,即使是不经常使用网站和APP的成人,也不会存在明显的使用障碍。

超大的设计元素和标签是设计的关键因素。这些视觉线索是帮助用户引导用户的核心,是整体体验设计中最重要的部分。大胆的色彩选择,会鼓励用户点击和探索。

如果它足够易用,用户会继续尝试使用和探索。而难于理解操作不便的导航自然会被用户所嫌弃。如果网站包含太过复杂的媒体和内容,那么不妨从一个设计简单的首页开始,几个简单的导航点击将用户引导到对应的位置。在深入到更复杂的页面之前,用梳理清晰、简单明了的分页让用户感到舒适,这是带来好的浏览体验的不错解决方案。

6、轻拍(Tap)还是点击(Click)?

espns

这一点要说的并不是设计问题,而是一个常见的开发代码的问题。虽然Tap和Click两者都能在点击的时候触发,但是在移动端网页上使用Click事件 的时候,会有200ms 到300ms 的延迟,所以在移动端上最好替换为Tap事件。在进行响应式网页设计的时候,一个事件从头用到尾的错误出现得很普遍,但是有太多的移动端网页在这样的设计下会有明显延迟,更恶劣的情况是无法识别,这样会直接损害到整个页面的易用性和功能本身。

此外,移动端上使用 Tap事件的时候,它所对应的按钮应当相对更大一些,便于小屏上进行交互。

7、像用户一样思考

justact

我们一直在说:“像用户一样思考”。但是实际的情况往往是,我们很难走出设计者和开发者的思维方式,因为我们的思维方式压根就和用户不同,面对每一个交互、每一个元素的下意识反应是不一样的。

所以,还是同设计圈、开发圈和产品圈以外的人去聊聊吧,看看他们对于网站和APP的真实反应到底是怎样的。你可能会在观察中发现,他们对于产品、对于交互、对于界面的反应和你的预期完全不同。将用户的真实反馈记录下来,反馈给项目组,这样可以帮你打造更好的用户体验,创造更优秀的产品。

原文地址:designshack

译文地址:优设

作者:Carrie Cousins

优设译者:@陈子木

转载请注明:学UI网》7个基础的用户体验设计细节

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

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

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

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

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



你的设计有依据吗?详解用户体验设计中的规律与逻辑

seo达人


shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

原文地址:站酷

作者:孔雅轩LineVision

 

转载请注明:学UI网》你的设计有依据吗?详解用户体验设计中的规律与逻辑

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

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

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

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

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



在不同屏幕和设备上创建用户体验设计的8个步骤

seo达人


1. 确定核心用户体验

每个产品都有核心的用户体验,这基本上是它存在的原因。它解决了人们所面临的问题,而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验,就要问自己一个问题:“客户需要完成哪些最常见和最重要的任务?”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如,Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何,此功能都能在每个设备上正常工作实现这一目的。

Image title

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源: Techcrunch

 

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备,但绝对不能定位各个设备,可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是:

移动手机

平板电脑

台式电脑

智能电视

智能手表

Image title

不同的设备组在不同的上下文中提供不同的服务:用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如,手机主要用于微任务,并且具有较短的用户会话。平板电脑主要用于内容消费,目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

 

3. 适应每个上下文使用的体验

确定产品的核心用户体验后,选择一组你希望支持的设备组,你需要调整每个组的体验(对于每个上下文的使用)。上下文的设计在不同设备组设计时尤为重要。

第一,并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景,并设计适合每个场景的体验。例如,通常移动用户比电脑用户想要的不同于产品。以 Evernote为例,可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化:

Image title

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

 

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的:

Image title

Evernote了解移动环境:它利用设备功能,并提供快速保存想法的方式(添加文本笔记,捕获照片或设置提醒)。

 

第二,不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入(移动手机和智能手机)的设备时,设计师会犯的几个常见错误包括:

小的点击目标。点击目标(如CTA按钮)必须具有足够大的尺寸。通常至少7毫米是足够的,但最好使用10mm触摸目标尺寸。

Image title

                                      图片来源:UXMag

 

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距,因为间距有助于分离控件,并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

Image title

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上,没有“悬停”。

 

4. 最小屏幕设计

历史上,设计师一直从事大屏幕到小屏幕的设计工作,这意味着第一个也是主要设计是为了完整的电脑桌面视图(它具有最多的功能)。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时,我们通常面临“厨房水槽”问题:许多功能被添加到产品中,特别是当涉及多个利益相关者时。这并不奇怪,,当你有很多不动产时,添加功能是比较容易。实践经验清楚地表明,最好使用移动方法进行设计,并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时,它会强制你决定最重要的。一段时间后,你将采用同样的方法仔细选择产品的其他版本,无论是电脑桌面设备,平板电脑还是电视。

Image title

在大多数情况下,手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要,那么你将需要考虑具有更小分辨率的微型屏幕。

 

5. 不要忘记大屏幕

想想大屏幕以及小屏幕,给大屏幕和小屏幕提供同样的注意力:

不只是缩小设计,使其适合那些大屏幕。充分利用你可以使用的额外空间。

Image title

                                                                                           图片来源:Wikipedia

 

确保图像不会因为屏幕尺寸的放大而失去质量。

Image title

                                                左:低质量图像。右:正确的分辨率。

 

考虑大屏幕细节。每个设备组都有自己的不同。例如,电视屏幕的设计被称为“设计10英尺体验”,因为从沙发的距离来看,与电脑桌面屏幕相比,屏幕上元素的明显尺寸明显更小。

Image title

                                                                 电视的用户界面元素应大于电脑桌面。图片来源:Samsung

 

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何,一致的用户体验是成功的全通道用户体验的关键组成部分之一:

对未来与产品的交互设定期望,并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面,而不是将设计定制到越来越多的屏幕和设备中。例如,Google搜索应用在所有设备上提供相同的搜索体验。

Image title

                                                 当设计和功能一致时,用户可以在他们选择的设备上更快更有效地完成任务。

 

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动,完成任务,或当他们从设备转移到另一设备时,他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备,环境的变化或上下文的变化,并且可以依赖于设备良好的功能性和独立于设备的易用性。

Image title

                  大多数人如何走过他们的一天,他们访问的主要屏幕。图片来源:Intercom

 

根据使用情况,你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例:你可以在Mac上设置播放列表,并在iPhone上即时播放,也可以开始听iPhone上的歌曲,当你转到电脑桌面时,你将被拍摄回到你在iPhone上。

Image title

                                                                  Apple Music可以很好地处理多个设备的同步。

 

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试,你可以在发布之前发现用户体验的问题并解决它。

 

结论

在设计多个屏幕和设备时,最好的策略是保持最终的用户体验。作为用户体验设计师,你必须评估产品的使用时间,位置和方式,以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕,用户都希望在各种设备之间获得流畅的体验。

 

原文地址:ADOBE BLOG

译文地址:UI中国

作者:Nick Babich

译者:SKYUI

 

转载请注明:学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

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

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

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

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

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



动效赋能 助力用户体验设计

seo达人


起源发展

动画发展大致经过了三大阶段,分别是从传统动画(纸笔)>>CG动画(离线渲染)>>互动动画(实时渲染)。随着时代变迁、设备以及技术升级,新的动画形式以及呈现载体不断的被创造出来。
动画发展的三大阶段

 

传统动画注重理论基础以及扎扎实实的基本功,并且是艺术学院必修课,宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品,所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。

CG动画是随着电影行业与游戏行业一并发展起来的,由于电影的工业化程度太高,技术积累也越来越深厚,所有游戏使用的工具与技术偏向电影那一套,但不同的是电影是离线渲染的,一部短片渲染几千个小时都算很正常。而游戏与电影不同,实时渲染必须保证帧速率,所以游戏行业最重要的技术核心就是改进游戏引擎。
互动动画想必大家更加熟悉,也就是游戏、web/app、VR/AR/AI、新媒体这些领域的动画,这篇文章我们主要讲的就是Web/App动画。
初期苹果Mac桌面文件夹的打开与关闭

 

从初期的MAC电脑到现在的iPhone X 不过短短的几十年,产品设计中动效的运用已经获得了巨大的进步。动效其实对于用户体验这个大专业来讲是一种新的学科,随着我们的设备的硬件条件越来越好,动效才被支持的越来越好,可实现的难度也才越来越低。
交互动画里有一部分依然是归为传统动画的,比如说Loading/插画动画/载入动画等等。这些可以动画需要多关注迪士尼12大动画原则(节奏&时间、运动曲线、预备动作、夸张、挤压&拉伸、次要动作、惯性、关键帧动画&连贯动画、动作表现力、感染力、角色个性),但是另外一部分则是扎根于产品设计的“交互”中。
CG动画与交互动画的区别

 

CG动画更加注重片子所表达的故事的完整性以及趣味性,大部分运用的都是超现实的手法,时长一般都5s以上,只需要开动脑洞只要软件技术能实现都可以发挥出来。
而交互动画更注重的是动效的合理性和可用性,动力学需符合真实的物理世界,还要注重整个产品内的动效的统一与协调。一般持续时间都很短在1s内,大部分动画在200-500ms内完成。整体来说动效都相对简单,不会太复杂因为要考虑技术可实现性。

 

 应用场景

这里我们只针对我们互联网产品设计讲一下交互动效的应用场景,我总结了以下七大应用场景,分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。

 

图标动效

一般来说图标动效适用于App或者web产品中,单个持续时间在100ms左右,根据图标的复杂程度以及实际使用的场景最长时间也不超过400-500ms。图标动效更注重微弱的变化带来的趣味性以及流畅性,常用于状态反馈以及导航引导,通过小小的变化可以为产品体验增色不少,优秀的还可以给用户留下深刻的印象。

 

界面交互 

一方面界面交互动效可以让人对产品产生深刻的印象,甚至是带来惊喜,另一方面表达了界面之间的交互过程,吸引用户的注意力。通过减少预判误差、增加连贯性、强调叙述、清晰关系四个方面来增加产品的可用性。

 

汽车系统 

汽车系统的用户界面以及动效一般都来说比较有科技感,动画会更加的酷炫。本质上来说汽车系统其实跟我们日常用的产品是一样的,由于行业定位的不同以及用户使用场景的不同造成了这些差异。

 

插画动效 

适用于App的引导页、运营活动、空状态页面、错误页面,展示型网站等等。在产品设计中插画动效一般有2种实现形式,一种是视频或者动态图片直接加载即可,另外一种就是开发同学通过技术手段来实现,SVGA、lottile、apng等等。

 

品牌宣传

http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
这是韩国一家咨询公司Plus X做的一个App的宣传动画,这里说的品牌宣传更像是一个产品的解析以及意义的传达,更轻量化、片长更短、制作技法也相对简单一些。

 

HUD 

HUD可能很多同学都不知道是什么,给大家科普一下。HUD(Head Up Display)又叫平视显示器,最开始呢是运用在航空器上的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为HUD的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装。后面延伸到像大家在科幻电影里面看到的那种智慧大屏,以及政府机关等等我看看到的那种蓝色动态LED大屏都属于HUD。

 

项目包装 

https://v.qq.com/x/page/r0824uenul0.html
上面的视频是腾讯的ISUX部门2018项目包装的视频,当时这个视频上线后,各大公司的UED部门竞相模仿,这个项目包装里面有很多项目都用到动效设计,包括礼物动效,表情动效、插画动效、logo演绎等等,这说明动效设计在互联网产品设计中的应用已经相当的广泛了,作品本身的效果加上简单的动画包装就可以做成一个动态的作品集,对于宣传团队是一个很不错的点,个人作品集也可以按照这个思路来做,肯定也会有很不错的效果。

 

设计语言

设计语言是指导统一产品设计的大脑,所以了解设计语言对于我们无论是做界面还是做交互设计以及动效设计等等都有很大的指导性作用。
上图中的6个是国内外比较知名的设计语言系统,大家应该或多或少了解一点,推荐大家有兴趣可以去看看他们的设计系统,相信会对你们有很大的帮助,对帮助构建你的个人设计体系也有很大的参考作用。
这里我们以Material Design为例进行讲解,给大家介绍一下这套设计语言以及设计语言内的动画模块在我们的工作中是如何运用的。
Material Design,是由Google在I/O 2014大会上推出的全新的设计语言,其灵感来自与真实物理世界及其纹理,包括真实物理世界如何反射光线和投射阴影,通过材料来重新构想纸张和墨水的一种介质。

 

其主要目标是:
创建:创建一种视觉语言,将经典的优秀设计原则与技术和科学的创新和可能性相结合。
统一:开发单一的底层系统,统一跨平台,设备和输入方法的用户体验。
定制:扩展Material的视觉语言,为创新和品牌表达提供灵活的基础。

 

基本设计原则:
大胆,图形,有意:Material Design以印刷设计方法为基本指导:排版、网格、空间、比例、颜色和图像。即创造层次、意义和焦点,让观众沉浸在体验中。
动效有意义:通过微妙的反馈和连贯的过渡,集中注意力并保持连续性。当元素出现在屏幕上时,它们会转换和重新组织环境,交互产生新的转换。
基础灵活:Material Design系统旨在实现品牌表达。它与自定义代码库集成,允许无缝实现组件,插件和设计元素。
跨平台:Material Design使用跨Android,iOS,Flutter和Web的共享组件跨平台维护相同的UI。
Material Design的要解决的问题以及设计原则大家应该都了解了,我们针对设计语言内的动效有意义做一下延伸,让大家对动画有一个再深入一些的了解。

 

那么Material Design动效的用途主要有以下四点:
层级关系:通过动效反映父级元素(收件箱)与子级元素(收件箱邮件)之间的层次结构关系。
状态与反馈:动效提供及时的反馈和用户操作状态。
用户引导:动效为用户如何执行操作提供有用的建议。
个性化:动效为产品设计提供可更多的趣味性、个性以及吸引力,对品牌的提升和认知有很大的促进作用。

 

了解了设计语言的动效模块,相信大家应该有一个系统的认识,在方寸之间进行动画设计,考虑的就是毫秒之内,而在毫秒之内最应该考虑的就是速度,研究发现,在界面设计中最合适的动画时间为200-500ms之间,时间太短,用户难以感知,时间太长,用户又会觉得整个过程太缓慢不够流畅。
当然了根据设备的不同动画内容的不同,动画持续的时间自然也是不相同的。动画时间的长短与动画路径的远近是成正比的一般。另外平台的不同,动画持续的时间也是不相同的,在pc端内的动画要比移动端的动画持续时间普遍少50%左右,这是因为平台的属性所造成的。但是要是单纯的做装饰动画是可以单纯发挥的,不用遵守上面的几个原则,所以进行动画设计的时候都需要考虑到具体的场景以及具体的需求,灵活运用。
说完了时间,我们来说说跟时间息息相关的动画曲线,我们都知道在几百ms内表现出动画的特点是有点难度的,所以精细的运动曲线对我们就显得格外重要,这里我总结一下Material Design内提到的几个常用的动画运动曲线,大家有兴趣可以去Material Design的官方文档内详细查看:
上述的几个运动类型以及动画曲线我们在产品设计内经常会用到,希望大家打好基础,灵活运用。
我们知道任何一件事情都有存在的价值和必要,动画也不例外,如果动画没有体现出他应该有的价值,那么做的再好看也只是仅仅局限在了好看这一个层面,下面我们就看看动画到底能在产品设计中带来什么样的价值。

 

动画价值

有时候现代科技产物使用起来非常复杂,但是其实“复杂”本身没有好坏之分:不好是因为没有处理好这个复杂所以产生了“混乱”,所以应该被批评的不是复杂而是因复杂所产生的混乱。——唐纳德·诺曼

优秀的动效可以帮我们解决产品设计中的很多问题,可以从用户体验的五大要素来进行价值的拆解:

 

战略层

战略层本质上来说大部分设计师其实是接触不到的,当然接触不到战略并不能代表我们不需要了解,作为设计师我们必须了解公司对产品的战略定位以及期望,也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层,所以单纯来讲,动画在这一层面上可以发挥的余地是是不多的,因为更多的这一层更加关注意识形态的战略思考。

 

范围层

范围层是通过战略思考来思考明确产品的大概功能和内容,有很多产品的功能复杂,交互繁重,内容很多,在这种情况下动效就派上了用场,我们可以尝试通过动效来解决内容过载,优化交互模块,扩展产品内容功能范围。

 

结构层

这一层主要确定产品的功能结构以及层级,主要设计用户如何快速,准确的触达某个界面完成某个任务,要考虑用户体验地图,用户整个的任务路径,简单来说就是用户要做什么事情,如何做,做完之后应该干什么,如果能对动效巧妙的运用,就可以做到引导用户,练习上下流程的作用,降低用户理解成本,提搞产品的操作效率,提高产品的可用性和易用性。

 

框架层

从这一层开始,UI设计师接触的内容逐渐多了起来,大家也会更加熟悉工作的内容以及范围,这一层主要体现在优化页面布局,确定元素摆放位置,涉及到具体的信息、界面、导航设计等等。通过利用格式塔,栅格,设计语言等方法确定产品功能具体页面内容布局,我们可以通过动效来进行辅助设计,例如强化元素的位置、颜色、大小,优化页面的切换、跳转的流畅度以及自然度等等。

 

表现层

表现层具体涉及到视觉、听觉、触觉的体验设计,也是做为视觉设计师、UI设计师发挥最多的一层,在表现层动效的展现形式会多种多样,这里不展开讲解,大家应该都明白。在表现层加入适当的动画能够提升产品趣味性,加强用户与产品的情感链接,增加用户对产品的友好度。

 

未来发展

5G

5G时代已经到来,5G的普世将会为科技发展带来更多的可能性,众所周知5G的速度是4G的百倍,那么意味着我们的设计的动画会加载的更快,动画文件的大小限制将会被打破,另外也可以在某些领域的产品内设计更复杂更酷炫的动画。

 

人工智能(AI)

它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内,我们能参与到的动画设计必然会更多样,形式也会更丰富,挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来,让我们拭目以待。

 

虚拟现实(VR)

是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体,其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展,各行各业对VR技术的需求日益旺盛,VR技术也取得了巨大进步,并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计,并且我相信未来会逐渐的变成主流。

 

参考资料

material.io/design/motion
https://www.zcool.com.cn/article/ZODIzMzky.html
https://zhuanlan.zhihu.com/p/27114894

 

原文地址: 小凯的设计笔记(公众号)
作者:小凯君
转载请注明:学UI网》动效赋能 助力用户体验设计


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

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

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

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

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



你想要的,用户体验设计中的心理学

seo达人


变色龙效应/镜像效应

图片

俗话说,“有样学样(Monkey see, monkey do)”,包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验,我们进行的互动具有亲密性和即时性。

你有没有试过听了朋友说的话之后又说给对方听?这是变色龙效应的完美例子。

 

启动效应(Priming)

图片

指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后,跟看喜剧相比,屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。

启动效应会塑造我们对环境的行为和反应,而且往往是有效的捷径,让我们可以迅速做出决定。这也是一种有效的说服工具,已经广泛应用到产业的营销和广告领域。

 

冯·雷斯托夫(Von Restorff)效应

图片

德国精神病学家和儿科医生海德维希·冯·雷斯托夫(Hedwig von Restorff)在1933年提出的理论。冯·雷斯托夫有一次实验,涉及到让受试者观看一系列相似的物品。结果他发现,如果其中某个很特别的话,那么相比其他物品,受试者就更容易回忆起这件物品。

冯·雷斯托夫效应又叫做隔离效应(isolation effect),或者新奇效应(novelty effect),其预测是当存在多个相似的对象时,跟其他有所不同的那个最有可能被记住。

 

序列位置效应

图片

该理论由赫尔曼·艾宾浩斯(Herman Ebbinghaus,著名的艾宾浩斯遗忘曲线也是他的发现)提出。它描述了序列中项目的位置是如何影响回忆的准确性的。

这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应;系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。

用户往往最容易记住系列中的第一项和最后一项。

把最重要的信息放到开始和结尾。把最不重要的信息放在中间,这是吸引用户注意力的高效方法。

 

格式塔原理

图片

在格式塔原理之下,派生出了很多的其他原理。我们会在下面进行简要讨论:

 

负空间:

图片

在设计周围留白,从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说,格式塔理论是基于这样一种思想,即人脑会下意识地把各个部分组织成一个系统,从而创造出一个整体而不是一系列的离散元素,通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式,从而更好的理解我们生活的环境而构造出来的。

 

相似:

图片

在格式塔里面,相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。

 

连续性:

图片

不管实际画出来的线条如何,人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时,这种连续性会是很有价值的工具。

 

闭合:

图片

这条原理反映的是人会把设计或图像缺失的部分自行脑补,创建出一个整体来。或者说得简单点,在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。

 

相邻性:

图片

这条原理是指元素之间的距离如何。在UX设计当中,运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起,用户就会感觉它们是相关的。

 

图形与背景关系:

图片

跟闭合原理类似,这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时,用这条这真的很方便。

 

共同命运律:

图片

这条原理是指,沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行,我们就会把它们组合在一起,并将它们看作是单个刺激物。

 

认知负荷

指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。

认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。

 

希克定律

以英国心理学家威廉·埃德蒙·希克(William Edmund Hick)命名,其理论指出当选项增加时,下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此,如果选择的数量增加,则做出决定的时间将对数增加。

决策所需的时间随着选项的数量和复杂性增加而增加。

图片

 

菲茨定律(Fitt’s Law)

图片

这条定律规定,任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

获得目标所需的时间取决于到目标的距离以及目标的大小。

可以利用这条定律来影响互动按钮的转化率,尤其是用手指操作的移动设备上的设计,可以把希望互动的按钮设计得更大一点,把不希望用户点击的按钮设计得小一点,更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。

 

美即适用效应

图片

这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。

用户往往会把美观的设计看作是更实用的设计。

对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。

 

双重编码理论

这一理论是由心理学家佩维奥(Paivio)提出来的,他强调在信息的贮存、加工与提取中,语言与非语言的信息加工过程是同样重要的。佩维奥(1986)指出:“人的认知是独特的,它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。

我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”,我们的大脑就会自动想到球的形象,运动员的形象。通过将文字跟图像配对,可以更容易记住东西。

 

直觉检查

我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具,用它就可以确定你的设计是不是一看就明白。

所谓5秒测试,就是让受试者观看网站或应用5秒钟,然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样,那就说明设计没有达到原先的目的,需要继续改进。

 

说服心理学

图片

这条原理来自罗伯特·西奥迪尼(Robert Cialdini)的著名著作《影响力:说服心理学》(Influence: The Psychology of Persuasion),里面列举了类似互惠、一致性、社会认同,权威以及稀缺性等原理。

这些原理往往决定了我们在社会当中的行为方式,我们可以用它们来识别人类行为。

互惠:这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话,他们应该会觉得有责任给予一定程度的回报。提供免费的电子书,博客文章,播客或其他免费内容,然后换取用户提供的电子邮件地址,这就是现实生活当中互惠的好例子。

权威:权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以,我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从,因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及,好建立一定程度的尊重和可信性。

一致性:这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究,他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。

第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访,请求房主在他们前面的草坪放一块很小的标志牌,“做一位安全的驾驶员。”

结果第二组的成功率高出450%。这就是(承诺与)一致的一个例子,因为房主会觉得自己有义务在这种情况下保持一致性。

社会认同:大家未必总能知道自己为什么会这么做。大家是不是都在跳舞?如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗?是的话会更多人会点击它。是不是每个人都在买你的产品吗?是的话,你想拦都拦不住。在电子商务的实践当中,我们使用的网站会社会认同(比方说点评、评论和推荐)来吸引其他用户,并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示,希望强化你跟商品的关联性,让用户认为“如果别人需要它的话,那我也需要它”。

稀缺性:在塑造行为的原理方面,这是我的最爱之一。稀缺性原理是说,如果东西有限的话,大家就会更想得到它。能得到的人越少,吸引的人就越多。

为什么有的商店会推出限量版服装?这就是原因,这样可以吸引更多的顾客。

变化盲视(Change Blindness):指观察者不能探测物体或情景所发生变化的现象。

 

记忆限制

图片

记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。

我们的工作记忆能力大概就只有10到15秒,一次只能记住3到4个东西。

研究表明,大家往往会制造出错误的记忆,要么会记住了没有发生过的事情,要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性,所以根据大脑的习惯或心智模式来进行设计就非常重要,因为这样会更容易记住。

尽可能为用户提供帮助和反馈,并提供撤销选项,以减少用户犯错时的沮丧情绪。让体验个性化,好迎合我们用户的喜好。

 

单纯呈现效应(Mere Exposure Effect)

图片

单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前,就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上,我们在不连续的时间段内见到某人的次数越多,我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。

了解单纯呈现效应及其机制,会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感,进而带来舒适感,从而让转化率优化整体上得到显著改进。

 

色彩心理学

图片

色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳,女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。

所以,作为设计师我们应选择能够传递含义与正确信息的色彩。

红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受,比如爱、自信、热情、愤怒等的象征。

橙色。充满活力的暖色,给人以兴奋的感觉。

黄色。幸福的色彩。象征着阳光、喜悦和温暖。

绿色。大自然的色彩。给人以来平静和新生的感觉。另外,也可能用来表示经验不足。

蓝色。一般用来表示企业形象。往往表现出冷静的感觉,但是作为一种冷色,也跟距离与悲伤有关。

紫色。由于很多国王都穿紫色的衣服,所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。

黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的,也可以是现代的。一切都取决于怎么用,以及跟哪些颜色一起用。

白色。意味着纯洁和纯真,以及完整性和清晰度。

 

本能反应

我们一般是从大脑负责本能的部分得到这种反应,本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中,所以很容易预测。

作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看,以及为什么他们是我们的目标受众,他们的需求是什么,这些都不难猜测。

用户体验设计的概念根植于认知和行为心理学,那是人类与机器交互的蓝图。当然,本文仍还没有涵盖到所有的设计心理学原理。但是,作为设计师,我们还需要观察和理解最终用户,并且加深对用户的理解与共鸣。在产品开发过程中,了解用户的互动、行为和情感可以增加更多的价值。

 

原文地址:追波范儿(公众号)

作者:terechen

转载请注明:学UI网》你想要的,用户体验设计中的心理学

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

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

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

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

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




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档