首页

app中的交互手势和意符设计

纯纯


PART 1 - 唐纳德诺曼关于交互设计的可视性的基本原则


唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典,我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》,而是第一本《日常的设计》,这本第一本书最精华的内容是阐述了交互设计的基本原则,这个原则无论是对工业设计中的人和物件交互,还是说是建筑中的人和空间交互都有很深刻的指导意义。

作为一名app产品设计,对于这几个含义理解之后,融汇到app设计的情境下,会让你对之前工作流中的『交互设计』有全新的认识。

众所周知,交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科,本质在于可交互,而可交互的前提,是可以被感知(这个我在app的视觉美成因分析那篇文章里面已经说到过了),那么被感知的方式,往往是和人的五感有关。

触觉,听觉,视觉,味觉,嗅觉。只要能被人的五感所感知到,不论是和空间,和机器,和生活中的物件还是和人,只要发生五感的共情,我们就说是可以被交互的。(注意,本文中不考虑复杂多感交互,并且只考虑交互的一方是正常生物人。)

在人的五感之中,本文依旧着重讨论视觉,因为科学研究表明,在人五感的感知信息中,视觉视觉占比达到了惊人的83%。(其中听觉11%,嗅觉、触觉、味觉机加起来占比6%),而不管是什么设计,如果可视性不佳,都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关,这五中基本概念分别是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反馈(Feedback)和概念模型(Conceptual Models)。


i.示能(Affordance)

示能的概念和内涵来源于吉普森(J. J. Gibson)。此外,关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。

"示能"这个词,狭义的理解一下,是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现,由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。

还是举那个诺曼最经典的例子,如下图所示:

从视觉上看这张图,我们从以往的生活经验联想一种方形的,带纹路的黄色物质,再配合长期的视觉线索,我们会知道这张图上是一个木块,那从我们的视觉线索上,知道这个木板很细,(应该)能够轻易被折断;而且很轻,(应该)可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能",而明确的我们和图上这个木材的交互关系。

那再看这张图:

我们通过生活经验的联想可以知道这是一个木门,为什么会区别这是木门而不是上面的木材呢?主要原因是因为这上面有个『把手』。在人的视觉中,有时候观测物体的某项"示能"是清晰可见的,比如上图那个木材可以被轻易搬动,而有很多物品的"示能"是不可轻易被感知的,比如上面那张木材的图,我们就不能感知到这个木材是可以被『轴转动』的。

而这张门的图上,大家想象自己是一个什么都不知道的野人,看到上面这个图,只有一块特别显眼的『把手』,你作为高智慧生物,是不是应该去触摸一下,并且企图能够与『把手』进行互动?

所以总结一下,如果这个门上没有把手,作为我们人类的认知而言,可能会认为这个门不能从外面被打开,但是如果这就是一个能从外面被打开的门,但是忘记设计外面的把手,那就意味着,这个物体"示能"的视觉通道被堵塞。(视觉通道被堵塞的"示能"可以被认为是一种"反示能"),"反示能"对交互作用是起到抵制作用的。也就是说,如果这个门是可以从外面被打开,但是我为了不让大家从外面打开,我在设计之初不加从外面打开的把手,一定程度上就可以抑制大家从外面打开的这种行为。

大家明白了么?

所以为了更有效的展现某些物体的视觉可交互,示能和反示能都必须被揭示出来,即可被觉察到。如果示能和反示能不能够被觉察到,就需要人为的把它们都标识出来,我们听过一些有效的手段就可以做到,比如在直立的木头一侧加上一个『把手』,这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索,你只需要旋转把手,稍加用力即可发现这个"示能"。

所以,我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』


ii.意符(Signifiers)

划重点:示能决定可能进行哪些操作。意符则点名操作的位置。

在我的文章《交互闲谈02丨app中的非必要功能和用户界面上的流量法则》中,我对app中的意符进行了自己的定义:

用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

但是这是在以屏幕为介质的用户界面中我个人下的定义,但是在实际生活中,人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索,就是意符。

这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因,他在视觉上示能和意符都及其突出,一块屏幕和一个按钮,屏幕用户点击滑动交互,按钮用于点击交互,学习成本很低。大家试想一下之前的塞班系统,左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射,虽然也很易于理解,但是当大家看到苹果这么简单的手机的时候,相信所有人都是惊讶的:



△.示能和意符的关系

示能揭示了世界上作为主体的人(这里只考虑人),如何与其他东西进行互动的可能性。

一些示能是可视觉感知的,一些则是需要视觉之后联想感知(即不可直接感知)的。

意符指示能操作的位置。

一些意符是生活中的符号、标签和图样,如门上用符号标记的“推”、“拉”或“出口”,或指示所要采取行动的箭头和图示,或是朝向某个方向的手势,或其他的说明。一些意符仅仅是预设用途,譬如门的把手,或某个开关的物理结构。

划重点:在设计中,(尤其是UI设计中)意符比示能更重要。

示能和意符是本文中最重要的,下文会说到在app中的意符设计。


后面的映射,反馈和概念模型内容我简略说:

iii.映射(Mapping)

有一些自然映射是生物本能的或者是文化赋予的,比如如按照通常的习惯向上移动手势意思是增加,向下移动意味着减少,。当一系列可能的操作是可见的,当控制和显示契合自然映射时,设备就会容易使用。(具体参考我写的交互闲谈丨01里面那个视频手势的例子)

iv.反馈(Feedback)

反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候,内心的预期是需要获得反馈的,如果在一个该获得反馈的地方没有获得反馈,人就会很疑惑,比如如果一个app的按钮点击之后没有跳转或者没有新的变化,那么人就会呆滞,如果反馈不及时,人还有可能会放弃。(比如网络不好导致的跳出率,比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的 = =)

过多的反馈可能比过少的反馈更恼人。设计拙劣的反馈可能是旨在降低成本,最糟糕的是不恰当的无法解释的反馈。指手画脚的人通常是正确的,但他们的评论和意见如此之多,唠叨不停,会令人分心,而不是给予帮助。我记得很多年前(大概是2010年左右),还曾经见到过一款应用,用户但凡点击无效位置就会弹出一个Error的模态框,简直是令我绝望。 = =

v.概念模型(Conceptual Models)

概念模型通常是高度简化的使用说明,告诉你事物是如何工作的。概念模型只要有用就行,不必完整或准确。概念模型通常可以从设备本身推断出来,一些模型通过人与人相授,还有一些来自手册。(比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种,手游中一开始的新手指引也是。)




PART 2 - 屏幕的示能与基本的交互方式


一个人和一块(未通电的)触摸屏幕,在不借助道具的情况下到底能衍生出多少种交互方式?从五感出发去深入剖析的话大概分为:

嗅觉:用鼻子闻一闻这块屏。(发现并没有味道)

听觉:用耳朵听那块屏发出的声音。(发现并听不到什么声音)

味觉:用舌头舔一舔这块屏。(诶有点咸?)

视觉:用眼睛去看这块屏。(这是一块光滑的类似于玻璃的物体)

你们发现了么,对于一个原始的屏幕设备,比如手机,我们忽略按钮什么的物理按键,光思考那块没用通电的屏幕,如果你作为一个心智未开化的人(或者现在假设你就是一只猴),你真正对屏幕有建设的交互一定是在触觉上,我这么说大家能理解吧。我们不妨换位思考一下下,你现在是20年一个准备做概念手机的交互专家,你去穷举任何人和屏幕的交互,唯一有『肢体接触』的方法就是用手指(或者脚趾)去触摸,还有就是用舌头舔。用舌头舔会有口水,不利于屏幕的识别,万一漏电了画面太美不敢想。

所以,结论是,人类看到一块屏幕设备,这块屏幕设备的视觉示能最终导向了,人和屏幕的交互手段被定位在触觉上,而脚趾相对于人类来说没有手指灵活,所以最终我们把交互规定到手与屏幕的交互(简称交互手势)。

触觉:

我们来穷举一下手指和屏幕的交互方式:(图片来自Graphicpear,中文是我自己加上的。)


不要纠结于图,往下看,其实现今的所有的手势交互,我们基本操作分为:

一根手指:单击、双击、长按、拖动、上下滑、左右滑。

两根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

三根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

四根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

五根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

双手双指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

双手十指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

(上面写的双手双指是指每只手出一个手指,比如你们在手机修图时候的某些旋转操作)

其实你如果还要穷举的话,还有双手每只手一个指头、双手每只手两个指头、双手每只手三个指头、双手每只手四个指头这些奇怪的情况,但是由于现阶段手势足够完成日常操作,所以日常的人和屏幕交互并没有引入这些别的奇怪的方案。

我相信随着科技的进步和发展,其他的双手的交互操作也会大面积的被引入进来,起码我个人在看类似于黑镜啊还有别的欧美科幻片的时候,不止一次见到了这样的画面。(我印象最深的是黑镜第三季06,女主角操控手机方式是四指横滑,然后胖大叔操作无人驾驶的骑车的时候是双手旋转打开一个屏幕,然后再通过指头拖动目标完成导航交互。)这些电影里面反应的人的未来科技中蕴含了很多交互方法,大家可以看电影的时候多留意一下。

有点扯远了,回到手机app的交互手势,(除开游戏以外)一般单指双指即可解决。而先现今科技下,相对于大屏幕一些的平板电脑,无论是ipad还是Andriod厂商,都会引入三指,四指甚至五指的部分交互手势。

由于今天的主题是手机app,那我们下一部分就着重主要来说说手机app的交互。

PART 3 - 手机app中的意符分析


在设计中,尤其是UI设计中,意符比示能更重要。

理解这句话的本质是因为一块屏幕上人需要设计图形、按钮、内容。去让他完成一些具体事情,所以在屏幕显示的软件中的意义符号就需要有很深的引导性。

还记得之前我的定义么?用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

我们闲言少叙,先来看一个例子:

如图是喜马拉雅FM的app首页UI,我将从功能属性、视觉焦点两个角度,一排一排的进行分析:


角度一、首先从功能属性上进行分析:

第一层:NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』,本质上是以功能名字命名的意符,其意符的表现形式为图片+文字。没啥好说的,每一项映射到自己的功能详情。

第二层:Tab的分类共有『热门』、『分类』、『康永来了』、『直播』和『广播』,其意符的表现形式为文字,这里大家看到『热门』标签本身变成橘黄色且下面有一个橘黄色细线,这是两个符号是通过这么多年的用户教育之后形成的意义共识,意义为:当前页面状态。这里我有一个小问题,大家猜如果这时候我右滑界面(采取的交互手势是单指向左轻滑),会发生什么事情?提供两个选项:

A、到『分类』页面。
B、到『订阅』页面。

详细绝大多数人都能答对,这里的正确答案是A,滑动到下一个tab『分类』。大家只知其所以然,感觉这里的tab本身就是靠滑动手势来控制的,但是更深层次的原因呢?为什么?

这里涉及到一个滑动切换tab的遍历解构,关于这个,我的网友@HoZiN老法师(大雾)的《浅议滑动Flick切换Tab导航 - 知乎专栏》这篇文章写得很棒,大家可以去看看。在这里我做粗浅的解释,在喜马拉雅这个app中,『首页』UI中的TabBar上的『热门』、『分类』、『康永来了』、『直播』和『广播』都是归属于当前BottomBar『首页』的,所以我们在滑动操作的时候应从当前深度的最近层开始交互。

如@HoZiN的下图所示:


如果用户滑动这个页面只能在首页的5个tab之间切换,我们认为他是下图的第一种,也即是在单一Bottom模块下切换(Hozin将其命名为独立Sub Navi切换,Sub Navi的意思其实也就是底部的Bottom navigation bar的意思,我上文中就直接简称BottomBar了,个人命名习惯而已大家能懂是这个意思就行),而另一种情况是有些app当滑动到最后一个tab,再右滑屏幕会进入到第二个Bottom模块,既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了,但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于,一般情况下,b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了,关于这个更深层次的原因可能是开发的原因,可能是产品没法做到每一个Bottom都有tab,也可能是因为别的app信息架构方面的原因,在这里就不展开了。

我们再继续单独看这个第二层:

215b59510beda8012193a31bbb4d.jpg

是不是发现有一个奇怪的格格不入的叫做『康永来了』的东西混了进来?这里我就必须吐槽一下喜马拉雅的产品设计团队了,作为一个普通用户,我本能的以为这个tab下一定是和康永来了有关的内容整合,放在这里是因为运营需要,这个其实在内容平台上很常见,大家看QQ视频和爱奇艺他们不也经常这么干,本身是一件无可厚非的产品推广的入口常态,然后我滑过去了发现其实他是『每日优选』的一个频道,只不过最近主推蔡康永的这挡音频节目:

如上图所示,这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页,而是一个『每日优选』的列表页,那我就认为这个设计是欠妥的。

我为什么说这样的设计欠妥,其原因如下:

因为我确实是有几个月没有使用过喜马拉雅了,我不记得『康永来了』这个位置之前是不是叫『每日优选』,还是之前首页只有四个tag,这个希望有关注的读者下方给我留言确认一下。

那既然我不确定,我们不妨分两种情况去分析:

第一种情况:之前首页只有四个tag,而新加了一个以具体内容ip产品名(比如康永来了也好,或者明天老罗来了也罢)作为显示,实则是每日优选的一个强视觉tag,为的是引导用户点击具体ip产品之后看到每日优选的这个列表,从而为别的每日优选这个列表页导流。(我认为对于一个成熟的产品团队,不太可能是这种情况)

第二种情况:之前首页就有『每日优选』这个tag,只不过后来为了运营或者强视觉需求,改成了具体ip产品名。(我倾向于第二种假设)

我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出,通过从视觉上的突出(视觉突出这一点确实做得很好)从而博取用户流量,然后让用户通过查看『康永来了』这个具象的兴趣点tab,进入每日优选的这个列表,从而为别的每日优选产品导流。

从文案层面来说『康永来了』确实比『每日优选』更吸引人,但是如果是我来设计这个地方的话,我个人倾向还是放一个每日优选的tag,毕竟这是所有用户都能懂的语言,而康永是谁?这个问题毕竟不是所有人都知道的。

如果实在是通过数据或者产品运营需求表示,我们需要强调『每日优选』的话,那我会把每日优选的视觉也做得像现在康永来了一样突出,但是名字不能变,还得叫『每日优选』。

那如果康永来了这个ip市场运营那边吩咐了,确实需要持久强推怎么办?

办法有,比如banner位就可以直接推,而且banner位可以直接跳转到具体ip的详情页,路径更加简短,用户马上就可以购买,不像现在跳到的是一个每日优选的列表,用户还得通过一次点击才能进入详情。

还有另一种极端的情况,如果有一天运营同学告诉我,banner位不允许一直放康永来了,但是市场同学又告诉我康永来了这个ip很重要,需要长时间强推。那我的办法可能是有以下两种:

第一种办法是在第三层的最前面(必听榜的前面)加一个独立的康永来了tag,这样的做法是开发成本简单易行,但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了,多放一个运营强推ip也没毛病啊。_(:зゝ∠)_

第二种办法虽然比较decent一些,是在第四层和第无层的中间开辟一块很小的次banner位去放,如下图所示:

但是我个人是不推荐这种做法的,哪怕未来这个次banner可以扩展为多个次banner轮播我也不推荐,因为如果是这样的话,用户首页第一屏留给『猜你喜欢』的内容展示就很有限了。

总而言之吧,第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解,不一定对,大家切勿偏听偏信。好了我们继续往下看。

第三层和第四层:图片banner和分类频道icon,其意符的表现形式为纯图片/图像+文字,banner嘛这个没啥好说的,通过自动左右切换的图片告知用户一些产品需要告诉用户的信息而已。分类频道icon我之前的几篇文章里面都有提到一些,记得在我的文章里我说到的格式塔原理么,大家打眼一看这个分类频道icon就知道右侧还有一些,是可以滑动的。

第五层和第六层:这个就更没啥好说的了,就是一个常规的带图片的宫格列表(我习惯这么叫他们,你们想怎么叫都行)页,其意符的表现形式为图片+文字,右上角有点击更多有一个向右的图标表明是可以点击跳页的(具体参看我写的分割线那篇文章)。到一个内容更丰富的item列表页。那么我问大家一个问题,为什么猜你喜欢的这个图片不也做成左右滑动的而要做成这样固定展示6张的呢?

这里主要是有两方面的原因,第一是做成左右滑的话,屏幕空间最多只能展现三张半,不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点,大家看如下图所示:

我标记蓝色线框的部分大家看到了没,这个banner也是可以滑动,分类频道icon也是可以滑动的,整个页面Tab也是可以点击跳转的。这也就意味着,如果要执行tab滑动跳转这个交互手势,我想能采用的滑动热如右图红色所示,区域本身就已经很小了。如果下面猜你喜欢也做成可以左右滑动的话,那么Tab的滑动手势热区面积更小了。如果真是那样的话,那这个Tab就不该设计成可以滑动加载的。

所以说嘛,app中的意义符号设计直接决定了这个app的易用性。不要乱来。

第七层:这就是bottombar具体没什么好讲的了,也就是五个图形意符,各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的,有些是带了icon也带了文字的,带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。


角度二、从视觉上进行分析:

按照视觉强弱来看,『康永来了』、『banner』、『猜你喜欢』是页面最重的视觉部分,其次是频道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、历史和下载。从视觉上看,其实作为内容平台的喜马拉雅设计的很赞,没有任何问题。内容产品本身占有最强视觉强度,功能意符占有较弱视觉强度。这就是为什么猜你喜欢要用图片+文字的宫格列表,不用类似于item之类的原因,因为比如这里的每一个节目都换成是一个item,那视觉只集中左边的图片上,而不像现在三张图片这样聚焦。

最后抛出一个视觉上BottomBar的问题,现在很多app会在实心icon还是线性icon上面纠结,知乎的BottomBar一直采用实心icon,而Airbnb一直采用线性icon,到底为什么?

我会在下一期的交互闲谈里面说这个问题,大家也可以想一想,其实(如果我理解的没错的话)答案就在我上面这段论述中。



PART 4 - 手机app中的意符设计需要辩证的几小点


一个擅长app中意符设计的人,本质就是对appUI设计有十足把握的人,关于这里的几点辩证只是提出来说一下,具体的UI设计过程中这样的问题不胜枚举,大家可以留言交流。


一、BottomBar上的意符到底要不要加文字?

手机中可供点击反馈的意符设计分为很多种,有纯图片的(比如banner),有图形+文字的(比如BpttomBar上的那些),有纯文字的(不如上文中喜马拉雅的切换tab,比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案),还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』,还有一些是按钮形式的。

在这些意符的设计中,意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义,那就一定要在附近加上文字形成一个完整的意符。

举个例子:已下载这个icon已经被所有app用烂了,大家一听就知道应该包含一个向下的箭头,比如历史记录也是,大家都能想到是一个时钟,这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计,一个是带文字,一个是不带文字,都不影响用户识别体验。

但是比如再举一个例,『我的』图标,现在大家都习惯用一个『人头像』,而一切新奇的产品比如说『氧气app』,才用的是一个圆圈,那么这个时候如果是意义识别为主导的产品(比如电商啊或者用户不是那么年轻的)就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别,也可以借助文字瞬间映射到。

那比如像『一个One』、『Medium』和『500px』这样的众多app,他们的BottomBar都是一个纯图形:

纯图形带来的其实是一种新奇感和简洁的设计感。相对的,和用户需要花更长时间的视觉判断,比如第一张图是『一个One』,第2,3,4个icon其实很易识别:一本书,一个音符和一个播放三角能够很简洁的代表文章,音乐和视频。第二张图相对就没有那么容易识别了,尤其是第三个图标,意义指向不明确,但是由于Medium是一个国外设计师聚集的网站,所以其实也还好,设计感在一定程度上会优于识别也没问题。图3是500px,这5个icon就更易识别了。

所以,如果你采取无文字的BottomBar,那么请UI设计师用心设计你的icons。


二、设置引导用户点击加载的意符应该如何设计?

有一个app需要设计这样一个功能:文字默认折叠展示3行,但是点击之后需要(非跳页)加载全文,那么请问需要设置怎样的意符引导用户点击?

传统的大概是三种方案:

第一是在文字第三行的前四个字用其他颜色(比如蓝色)标记为『加载更多』,用户一点之后加载全部(早期知乎的做法)。

第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』,用户点击之后加载全部。

第三种是在文字第三行结束的位置放一个省略号即可,用户阅读之后发现没读完,自己会尝试点击。

显然,第三种方法仅适合社区类app或者贴吧或者问答类app,因为一般用户读都很难读完,更别说给你点击一下了。第一种和第二种也是见仁见智,一般情况下我个人推荐第一种,因为需要文字折叠成三行的页面就说明本身画面排布很紧张,就不要另起一个第四行放『点击加载更多』了。


三、app中的按钮设计,什么时候应该有push色,什么时候应该没有?

这是我的微信公众号后台有一个小伙伴的提问,push色这个东西在网页上有别的更多作用,但是在app中,一般就只用来反馈行为。

有两种情况:

第一种是你点击某个意符,这个意符发生变化(颜色或样式变化)同时跳转。

第二种是你点击某个意符,这个意符完全不发生变化但是页面跳转。

从用户期待每次行为都得到反馈的心理上来说,我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的(也就是上面的第一种)。但是有时候由于反馈动效我们写得不尽如人意问题,我们看到冗长(哪怕只有半秒)切重复的的反馈内心就会就会很烦。

举个例子比如原生安卓的Material Design点击每个item都会出现一个水波动效反馈,当然原生Material Design的动效是足够优秀的,所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍,拉长三分之一。你们一定会崩溃的相信我。



PART 4 - 总结


1、app产品设计和UI的设计中,意符的设计是当众最重要的一环,因为每一个意符作为产品的功能入口和行为入口,它们不光光是产品的流量节点。更是app产品信息架构的核心提现。

2、在设计app的意符的时候,要更多的考虑到意符所蕴含的具体交互手势(比如喜马拉雅的tab bar就包含了滑动和点击)以及具体的对用户行为的思辨。

3、app中意符的设计一定是框架层面的设计,他的本身视觉层级不易过高,最好不能超过app主体信息。

4、意符的意义映射要尽可能的单一,最好能让用户一眼就了解这个意符是代表什么功能什么意义。

5、app意符的观察、分析、设计是一个长期的过程,大家可以试着多问自己一些为什么。




文章来源:站酷   作者:Seany

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


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

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



设计师如何高效沟通需求

ui设计分享达人

前言

——————————

沟通是为了完成设定的目标,把信息、思想和感情,在个人和群体之间传递,并达成协议的过程。沟通目的一般分为:说明事物、表达感情、建立关系、达成目标。


需求沟通是设计师和团队围绕需求目标,信息传递的过程,是设计师展开设计工作的起点,贯穿整个设计过程,沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性,对很多新手设计师来说,在需求沟通过程中,可能会碰到一些共同的沟通问题,比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。


针对这些问题,本文尝试梳理需求沟通过程中几种典型场景和方法,以期帮助新手设计师快速识别需求沟通中的常见问题;提升沟通效率,快速达成共识;掌握沟通窍门,更精准高效的产出需求。


本文主要分成2个部分,第1部分主要聚焦在需求沟通过程中的不同阶段,面对的典型沟通问题和解决方案;第2部分主要介绍沟通中一些常见的技巧和方法。



Chapter 1

——————————

需求沟通的目标和方法


1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分:了解需求->分析需求->探索方案->实现方案。在不同的阶段,设计师要解决的核心问题不同:


了解需求阶段,设计师和产品针对需求目标进行讨论,并和团队就产品目标达成共识;


分析需求阶段,设计师和产品针对产品策略合理性进行讨论,并提出体验诉求;


探索方案阶段,设计师探索设计方案,并和产品就商业目标和体验目标达成平衡;


实现方案阶段,设计师和产品协调优先级,调整方案,确保方案最大程度实现还原;




1.2 如何更好的了解需求,明确目标,达成共识

在了解需求阶段,设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类:一类是需求目标较明确,产品有明确要解决的问题,如提升产品体验、满足某个用户明确需求、完成某个产品目标;一类是需求目标较模糊,比如挖掘用户潜在需求,探索新的业务方向。



对于目标较明确的需求,在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后,即可进入需求分析,策略讨论阶段。


但对于方向探索类需求,如何协助产品探索目标,和团队达成关于目标的共识,是这阶段的沟通重点。以一个创业的项目为例,产品想做一个图片社区,原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下:



在产品的催促和时间压力下,设计并没有围绕产品定位、用户群、产品目标进行充分讨论,也没有和团队成员达成共识。在这种情况下,选择跟随产品的节奏,陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论,方案的输出过程变成了试错的过程。产品方向修改频繁,这种被动的沟通方式,导致整个团队目标感不清晰、理解混乱。



经过反思和问题总结,设计师发起了主动沟通,运用设计方法协助产品明确需求,提升方向说服力,探索如何就目标和团队达成共识。首先,需要和产品明确用户群,并寻找用研协助,或发起快速访谈了解用户其次,组织团队相关成员发起关于产品目标的讨论,围绕产品决策人给出的产品初步方向,团队成员每人写下对产品的期待,提炼总结团队成员的想法,提炼总结产品目标再次,根据用户访谈材料,利用亲和图法,提取关键词,从用户诉求中洞察提炼用户目标。最终,产品目标得以明确,团队也取得了关于目标的共识,同时通过快速demo,来验证优化,项目得以顺利进行。




1.3 如何更好的分析需求,确保产品策略合理性

在了解需求背景、用户群体,明确了需求目标后,进入需求分析阶段,通常产品会给一个商业假设:假如做了xxxx,用户就会xxxxx,产品可以达成xxxx目标。以一个需求为例子:产品想做一个任务体系,通过福利吸引用户做任务,从而拉动产品活跃。


如果设计师完全按产品给的商业假设输出,方案产出过程貌似很顺利,但可能隐藏了很多问题。以本需求为例,产品的商业假设逻辑是:用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求;


但这个假设是正确的吗?设计师的价值就在于,这个时候要能找出产品假设中的问题。通过对用户的了解和洞察,还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题,才能顺利实现产品目标。


通过对用户实际参与过程的分析,用户在看到任务奖励后,实际需要权衡的内容很多,如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大?分析需求过程关键就是找到这些问题的对应策略,强化用户参与的动力,降低参与难度。




1.4方案探索阶段,如何平衡商业和体验诉求

在方案输出阶段,设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标,很多时候希望把达成商业目标的手段做的很强;



当发生围绕商业目标和体验问题,谁都无法说服对方的情境时,设计师该如何沟通呢?


首先,作为设计师要摆正沟通立场,理解商业化是任何产品的根本目标,体验也是实现商业化手段之一,我们反对的不是商业化,而是简单粗暴的商业化方式,商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。


其次,应能够识别对于曝光越多越好,越直接越有效的这种思维方式,通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时,最节省力气的做法就是提升曝光等方式达成目标。


当发生争执时,如果仅仅站在设计立场上,用设计理论说服对方,通常效果有限。尝试找到产品实现商业化目标背后的逻辑,不要用手段代替目的,探索更好的实现商业化方式的可能性,比如尝试在合适的路径上推荐,或探索用户更容易接受的内容形式。




1.5 方案实现阶段,如何协调优先级,推动方案最大程度还原

在方案实现阶段,很多时候由于时间紧张,产品仅完成最核心功能,部分体验相关功能一直无法得到优化。


通常如果方案产品认可,但推进意愿不高时,可能的原因是:1.当前方案不是核心KPI,产品要优先保证对kpi影响最大部分完成;2.投入产出比不划算,方案在产品看来投入的人力/时间/资源过大,并不值得;3.方案改动可能引发数据风险,产品并无法确保改动一定能带来数据的成长;4.资源紧张,产品也很想实现方案,但项目时间/人力/资源真的很紧张。



这种情况下,首先,要和产品够分沟通他们的疑虑和担心,到底是哪类问题;其次,从心态上也不用急于一时,做好长期推动的准备;还有,充分优化方案,消除产品疑虑,寻找合适时机进行推动。在项目逐渐迭代的过程中,对需要推动体验优化点持续关注,尽可能放大方案价值,结合新的需求点,思考能否从价值拓展角度,如提升品牌价值、扩展性等角度提升方案说服力;同时,从缩小成本和打消产品疑虑角度,做足准备,推动方案。



Chapter 2

——————————

沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程,表达者的信息传递到接收者时,因为背景、环境、理解能力、传递完整度等差异,接收者仅能接收部分信息,而接收者在理解消化后,再将自己的信息传递出去,这个过程循环往复,会导致两个最常见的沟通问题:目标偏离以及信息衰减。学习适当的沟通技巧,可以有效减缓目标偏离和信息衰减。


2.1 如何防止沟通目标偏离

要防止沟通目标偏离,首先要理解什么会导致目标偏离?1.目标不清晰,比如本来想找产品聊下某功能体验不合理,但因为产品一直说项目时间紧,被倾诉了一通苦水后,忘记了本来要沟通的问题,转移到了其他话题上,最后不了了之;2.缺乏同理心,比如当发生争执时双方不能互换角度,产品一直在说实现目标手段和现阶段问题难点,设计在说体验问题和设计规范,双方互不妥协,陷入争吵;3.陷入情绪,表达观点时陷入情绪化的争执。


针对这三个会导致沟通目标偏离的问题,可使用以下技巧:


① 设定沟通目标并保持关注:在每次沟通前想清楚自己的目标和底线,尝试用全局视角分析自己设定目标的合理性;在沟通过程中要经常反思当前沟通的问题是否已偏离了目标,对达成目标是否有帮助;发现目标偏离可尝试改变节奏,思考接下来说什么有助于达成目标;


② 换位思考:能够倾听对方的问题和困难,尝试寻找解决问题的办法,而不是一直表达诉求,无助于问题的解决和推进;


③ 控制/倾听情绪:美国心理学家埃利斯创建的ABC情绪理论,拆解了事件发生和情绪之间的关系,指出事件的发生并不是导致情绪的直接原因,我们持有的信念才是。因此在沟通中不要加入太多内心戏,过度解读事件。比如产品让设计反复改稿时,可能会解读为产品在故意刁难,尝试了解反复修改背后的原因,可能对解决问题更有帮助。



2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差,会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达:“设计稿尽快输出”、“页面太结构化了,想要更社交化一点”、“能不能做得更有创意一点,更有趣点”当出现这些类似的沟通语句时,可以尝试通过具体化方式,进行确认。



对于可能会出现理解偏差的问题,重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗?”;重要的沟通后,可梳理沟通记录,企业微信同步周知确认;方案的沟通过程可以快速画草稿确认;尽可能的减少因为理解不一致导致的沟通问题。



总结

在需求沟通过程中,我们要对不同阶段的沟通目标有清晰的认识,围绕目标进行充分准备,运用设计方法了解用户、了解产品核心诉求,做到知己知彼,才能进行有效的沟通。


在沟通过程中保持对目标的关注,始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。


沟通是解决问题,共同协作的重要方式。如果你觉得自己不善于沟通,可能要反思下沟通前是否想清楚自己的沟通目标,对于解决问题的过程、方法是否熟悉,准备是否充分?当我们能做到知己知彼、胸有丘壑时,沟通可能就变得简单起来。


文章来源:站酷 作者:腾讯ISUX

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

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

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


竞品分析,如何助力设计洞察

ui设计分享达人

设计本身是建立在对用户、场景、问题的深刻洞察之上,而竞品分析是设计师耳熟能详的设计思维及方法。在自身的阶段性成长中,竞品分析也为久乔及工作带来了显著的增益。

关于竞品分析,大家聊了太多的“如何做”,而我想和大家聊聊“为什么做”。深究竞品分析存在的意义,在实践中设计思路及侧重点将更清晰明确,游刃有鱼。



1.  遵循用户认知


竞品分析能够帮助产品设计,遵循存在已久的用户心智模型和产品实现模型——启发于 《雅各布定律》。


1.1  看似陌生的《雅各布定律》


《雅各布定律》由尼尔森十大原则的创立者、尼尔森诺曼集团的创始人之一,雅各布·尼尔森(Jakob Nielsen)提出。

他认为雅各布定律更像是一种自然规律,只是在描述一个事实,而这个事实就是用户在其他千千万万个网站(产品)上积累经验,学会如何使用网站,当一个网站跟其他网站一致的时候用户会立刻知道该如何操作,但如果违反了雅各布定律,那么用户会毫不犹豫地离开。

简而言之,产品设计需要尽可能降低用户的学习成本,依据用户存在已久的用户心里模型及产品实现模型,进行任务和流程设计。

因为用户已经将大部分时间花在行业头部的产品,这意味如果你希望他们能够愉悦并持续的使用你的产品,那么你的产品需要跟别人的有相同的操作方法和使用模式。


「 YouTube2017年改版前后的对比,在新版中,网站框架和功能上几乎没动,只是在UI上做了顺应新的设计准则,比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别,而且还给用户提供了旧版的选择。」



1.2  潜移默化的影响


遵循用户认知,对互联网产品有着潜移默化的影响,也印证了尼尔森的《雅各布定律》。这些“影响”在竞品中随处可见,并且符合设计原则及心理学。


1)一致的概念模型


同类型产品给用户的心理暗示趋于一致,相近的产品实现模型,让用户快速理解产品是如何工作的。


「 社交App合理的概念模型,将会暗示用户如何发展好友关系:精准搜索 → 发送好友申请→ 建立好友关系 → 即时聊天 → 关注动态... 」


用户深受行业头部产品,实现模型的教育,建立了认知及行为习惯。所以我们会发现,行业诞生的新产品及迭代的头部产品遵循着一致的概念模型,规避重新教育用户的成本。



2)一致的交互示能


我们在不同类型的产品上都进行顺畅的操作,是因为产品向我们示意了一致的可交互能力,简称“示能”。


「 文字末位带有箭头,表示可点击查看更多信息;图片带有数字角标,暗示我们可以左右滑动切换... 」


保证产品示能与行业竞品一致,为用户沉浸式体验建立基础,避免用户使用时产生疑惑二次思考。



3)一致的页面映射


当页面映射关系是用户所熟悉的,已存在的认知便可让用户触达目标,免去学习成本。


「 协同软件的消息页面,页面结构及功能分布大同小异,明确地传递各元素之间的映射关系:选中聊天列表的对象,右侧会出现对应的聊天窗口,窗口下方的输入框可以发送新的消息。」



4)一致的视觉意符


主要体现在产品表现层的视觉符号,传达给用户的意义一致。


「 小红点表示有未处理的信息;“笔”代表可填写或修改。」




2.  打破思维边界


为自身产品寻求体验及商业的更多可能,打破既定的思维,是竞品分析的关键。围绕不同类型的竞品,直接竞品及间接竞品,设计师的分析侧重点及借鉴取舍也有所不同。


2.1  取长补短


对于产品目标、核心功能、用户群体高度一致的直接竞品,设计师在明确目标后,梳理核心功能设计与竞品之间存在的差异,取长补短。

剖析竞品体验层比自身产品出色的原因是什么,如何更好地解决用户的痛点;当然也需要反观自身产品存在优势的关键,能否通过数据、反馈再进一步拉开差距。以及如何规避短处...


「 2月登顶免费社交榜的“啫喱”App,通过创造的潮玩虚拟形象的新型社交产品,可进行各类有趣的虚拟形象互动。同样布局虚拟社交的大厂,字节跳动也推出了“派对岛”App,潮玩形象可结合实景化的实时线上活动社区,可以说是各有千秋。

二者便是典型的直接竞品,将会不断的迭代,共同期待他们相互的“取长补短”吧!」



2.2  寻找跳板


由于互联网的信息透明,直接竞品趋于同质化,给与设计师的启发也有限。因此,将目光转向间接竞品是非常有必要的。

寻找产品目标、用户群体相近但存在差异,但业务场景及功能也有一定相似性的竞品,作为思维的跳板,或许能为止步不前的现状注入灵感。


「 Chrome 最近上新的插件 Jam,这款插件可以在直接网页上打标记、录制gif、评论,并且和项目管理工具 Linaer 打通,可及时将信息同步给项目人员,提高项目协作效率。

在企业协作平台中,视频会议、线上协作等协同产品的在线标记功能,完全可以对“Jam”这款插件进行分析,来实现对于关键内容的信息传递流程和用户体验的提升!」



2.3  拥抱变化


尽管有些产品在业务及用户上与自身产品没有重合,但是在行业理念、实现技术、交互行为层面,极具前瞻性。在合适的时机,尝试将前沿的“变化”,融入自身产品,转化为产品设计的亮点。当然这取决于设计师平时对科技、行业的关注及积累。


「 21年飞书妙计上线,令人眼前一亮:飞书可将会议中的音视频内容,实时生成文本形式的会议纪要!

ToB业务中,多人交流协作的场景,比如客户接洽、人选面试,如果相关业务功能加持音视频自动转文字的能力,用户记录内容的体验及效率想必也会有所提升。」




3.  验证设计思路


借助竞品分析,能够帮助设计师发散思维、寻找设计突破点。在设计思路聚焦的环节,我们也能通过竞品分析进行验证。


3.1  源于五要素


资源允许的情况下,设计师可以基于《用户体验要素》中的五要素:战略层、范围层、结构层、框架层、表现层,对竞品进行全方面的竞品分析。

战略层分析主要围绕“为什么开发产品”,我们可以了解竞品的产品目标、用户需求,以及二者结合的商业目标。为了达成最大化商业效益,竞品进行了哪些成功的业务、商业化设计。

自家产品的战略层目标,与竞品的是否有共同点或者相似性。如果有,已制定的设计策略与竞品成功的解决方案是否存在差异,能否解决产品目标及用户需求,在竞品分析中能得到初步验证。


「 鼓励“先进团队,先用飞书”的企业协作平台,飞书桌面端在团队切换后数据隔离展示。也正因如此,左侧导航在常用功能区下方,预留特定区域便于用户快捷切换团队,提高效率;

然而钉钉桌面端在同一个信息容器,展示多团队的协作信息(如即时通讯),将团队切换的功能入口隐藏至二级菜单,尽管有“串场”风险,还是将更多的空间留给常用功能,“让工作学习更简单”。

显然二者的差异化设计,归根于各自的战略层考虑,用于达成特定的产品目标和用户需求。」


范围层等其他几个要素,都能够验证相应的设计思路。



3.2  考证可行性


为了提高团队产研效率及商业效率,设计创新或借鉴都会相对谨慎,避免沉没成本。

所以在一些资源相对紧张的项目中,为了及时验证多个设计方案的可行性,可对竞品类似的功能设计进行分析,再结合现有的资源(排期、开发投入),从多个设计方案中确定解决方案。


「 在系统表单设计中,提交前用户存在多次编辑的诉求。为了给用户提供更灵活高效的体验,关于表单的保存,我们团队预想了3个,在用户体验、技术实现上有较大的差异的设计方向:

  • 1)用户主动触发保存

  • 2)用户离开询问保存

  • 3)系统自动实时保存

显然自动实时保存的体验最佳,也是团队倾向推动的方向。但B端系统中的使用相对少见,考虑用户的学习成本及技术实现,落地及项目收益存疑。

但发现间接竞品,云文档(语雀、飞书文档、印象笔记)的内容实时保存功能,非常贴近我们的体验预设。

最终敲定方向 1,围绕用户构建自动保存的体验认知。间接云文档的实现方式做降级处理,数据仅仅保存在前端浏览器缓存,而不是像云文档一样直接存储至云端服务器。项目落地设计目标,并没有暂用过多的开发资源,项目也如期推进。」


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

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

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


用户体验设计发展简史你知道吗?

seo达人



history-of-ux

是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员是否让你在等候一阵子之后领你去合适的座位?菜单放在桌子上的什么位置?浏览体验如何?你点了哪些菜?上菜的速度够快么?味道地道么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?

所有的这些问题都关乎你对于这家餐馆印象的好坏,也直指这家餐馆的用户体验本身。

当然,我们通常所说的用户体验(UX)所针对的对象大多是数字和科技产品或服务。这也就意味着,用户体验设计本身至少有着进一步提升的可能性。

现如今,用户体验设计已经成为了一门重要的学科,快速地发展,并且拥有极大的成长空间。虽然这是一门拥有多学科背景的新兴学科,但是向上追溯它的发展历程之时,我们会发现早在文艺复兴时期之前它就已经存在了。

在争论用户体验设计会带领我们走向何方这种大命题之前,回顾一下用户体验设计发展史上的精彩瞬间,应该能给我们许多启发。

公元1430左右:达芬奇的“厨房噩梦”

Michael Gelb 在他的著作《如何像达芬奇一样思考》(How to Think like Leonardo da Vinci)中讲述了米兰公爵委托达芬奇为高端宴会设计专属厨房的故事。这位伟大的艺术大师将他一贯的创造性天赋运用在这次厨房设计中,他将技术和用户体验设计融入到整个厨房的细节里面,比如传送带输送食物,也首次在厨房的安全设计中加入了喷水灭火系统。

davinci

有意思的是,达芬奇的设计很多开创性的设计一样,不足也非常明显。传送带是纯人工操作,工作不太正常,更麻烦的问题出在喷水灭火系统上,失灵的设计捎带手毁了不少食物。

当然,虽然达芬奇的这次尝试令厨房化身为噩梦,但是作为用户体验设计的早期实践,却有着无比重要的历史意义。

20世纪初:Taylorism 和工业革命

Henry_Ford_and_Barney_Oldfield_with_Old_999_1902

作为最早的管理顾问之一,机械工程师 Frederick Winslow Taylor 撰写了《科学管理原理》一文,深刻地影响了工程效率领域的研究。随着Henry Ford的福特汽车实现大规模生产,Taylor和他的支持者们也逐渐完善出了劳动者和工具之间高效协同交互的早期模式。

1948:丰田人性化的生产系统

toyota-commemorative

和福特一样,丰田不仅在设计和生产效率上非常重视,而且对于人工输出效率也非常关心。生产过程中装配工人受到了更多的重视,几乎不亚于对技术的关注。精益生产模式的巨大成功,使得人与技术之间的交互得到了更多的重视。

1955:Dreyfuss ,为人的设计

美国著名工业设计师Henry Dreyfuss 在这一年写下了著名的设计书《为人的设计》(Designing for People)。

dreyfuss-01-458-2

在书中,他写道:

当产品和用户之间的连接点变成了摩擦点,那么工业设计师的设计就是失败的。

相反,如果产品能让人们感觉更安全,更舒适,更乐于购买,更加高效,甚至只是让人们单纯地更加快乐,那么此处的设计师是成功的。

随着人与产品的接触越来越多,他在书中所讲述的许多设计规则,被大家越来越多地引用。

1966:迪士尼和开心效应

Magic_Kingdom_Construction_08-19711

在迪士尼世界早期建设阶段,Walt Disney 在公告中是这样描述它的:“…它(迪士尼世界)会成为一个坚持使用最新的技术改善人们生活的地方…”他的想象力和技术的结合,为全世界所有人带来了无限的开心和喜悦,并激励着设计师们(尤其是用户体验设计师)前行。

1970s:施乐PARC和个人电脑

pa_alto2

作为施乐最出名的研究机构,PARC为随后大范围普及的个人电脑的设计型态和交互逻辑定下了基调。Bob Taylor,作为一名训练有素的心理学家和工程师,带领着他的团队构建出了人机交互领域最重要也是最普及的工具,包括图形化界面(GUI)和鼠标。(随后乔布斯和盖茨先后访问了PARC,参考了施乐之星的设计,为今天的苹果和微软开辟了通向未来的道路。)

1995: Don Norman,第一个用户体验专家

身为电气工程师和认知科学家的Don Norman加盟苹果公司之后,帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”(User Experience Architect),这也是首个用户体验职位。

11484403695_e95d161896_b

在这个阶段,Don Norman 还撰写了经典的设计书《设计心理学》(The Design of Everyday Things),直到今天它依然是设计师的必读书。

2007: iPhone

2007年MacWorld上,乔布斯发布了iPhone,称其为“跨越式产品”,并承诺它会比市面上任何智能手机都要易用。随后,iPhone不仅兑现了乔布斯的承诺,而且彻底改变了智能设备领域的格局,苹果公司再一次登顶,成为世界上最成功的公司之一。

only-starter-iphone-jobs-pic-131004

iPhone的绝妙之处在于,它融合了当前最卓越的软件和硬件系统,借助革命性的电容触摸屏而非传统的物理键盘来同用户进行交互。可以说,初代的iPhone所提供的用户体验,远远优于同时代的任何手机。

这也在无意中让智能设备的软硬件研发和相关领域将重心放到用户体验上来。苹果公司强调他们是通过提供出色的用户体验赢得市场成功和无上荣誉,其他人自然而然就跟随这他们的脚步前进。

用户体验的未来

用户体验设计发展史上的每一个重要里程碑,都源自技术和人性的碰撞。互联网和新兴技术正在越来越多的介入我们的生活,我们可以遇见到用户体验设计会来接下来的日子里,一日千里地发展前进。只是这种发展也越来越多地需要专业技能,跨领域协作,多学科实践,比如用户研究、图形设计、客户支持、软件开发等等等等。根据 indeed.com 网站的统计数据,在用户体验设计告诉发展的今天,单过去的15天里,就有超过6000个相关职位的招聘需求发布在网上。

the-disciplines-of-user-experience-design_51029d505f014_w587

互联网不再单纯的局限于我们的笔记本电脑和智能手机,可穿戴设备,智能汽车和智能医疗设备也都会接入网络。全球互联的时代赋予专业的用户体验从业者更重大的责任,用户体验设计也不再局限于屏幕和像素,超出外形,关乎生活每个细节的用户体验设计无时无刻无处不存在。

所以,不论你是达芬奇还是福特,是泰勒还是乔布斯,你都拥有着无限的可能性和海量的机会,改善用户体验,创造更美好的世界。


 

文章来源:优设
优设译者:@陈子木

转载请注明:学UI网》用户体验设计发展简史你知道吗?

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

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

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

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

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



了解什么是用户体验设计?

seo达人


 

1. 什么是设计?

一说到设计,很多人都会想到天马行空的插画,各种漂亮的手稿等。那么设计就是单纯的漂亮的外形嘛?设计等于艺术嘛,我们首先来看一副毕加索的作品。

单看这幅画,你能从中感受到什么?你能理解作者想表达的什么含义?每个人看到的可能都会有不同的理解,甚至有的人会说“我完全看不懂”。那么接下来在看另外一副作品,这是某用户体验设计师的作品。

 

undefined

内容包含草图(线框图),页面流程,简单的交互说明等。他看起来简单明了,所有的用户一看都基本能了解简单的操作流程,它是专业而理性的作品。由此可见,艺术是感性的,而设计师相对理性、精密的。它是居于大量用户数据而分析出来的最适合、最合理的方案。

 

2.如何做好用户体验设计?

那什么是好的设计那?不让用户思考,趣味横生的那就是好的设计。

那怎么做到以上的这些点那?我们就需要了解“人”,观察“人”。做设计,归根结底就是为了解决“人”的问题,是为了让“人”从中获得良好的体验。那么这就需要了解“人”的想法、行为、习惯等,学会换位思考。多注意观察“人”的日常行为是一个号的习惯,但是注意不要以偏概全,而是多思考背后的原因,多归纳人的共性。

举个例子,比如淘宝的收藏夹和购物车页面,它们的内容其实是相似的,都是包含图片、商品名称、价格等元素。(如下图)

 

 

 

如果按照正常逻辑,这2个页面展示的东西一致,那么设计的界面也会类似,有的其他网站甚至把这2个页面做成了相同的页面样式。但是为什么淘宝会把2个页面区分开来,做成不同的样式那?这正是考虑到用户的使用情景和心里感受。购物车里面的商品都是用户购买意愿比较强的商品,所以不做强调处理,只做简单的信息展示排列处理,简洁明了,不过多干预用户,方便用户迅速下单。而收藏夹的商品是用户不急于购买的商品,所以收藏夹的设计会突出图片、评论、人气等内容,吸引用去购买的欲望,那收藏夹就达到了它的目的。所以展示同样信息的页面,根据用户使用情景不同,页面设计也会有所不同。

在此基础上,设计师还需多听用户的反馈意见。很多时候你对这个产品太过熟悉,很多东西已经习以为常,而用户却可能并不了解。多听听用户的反馈意见,才能更快发现设计上的问题以及用户的困惑,做出更受用户喜爱,用户体验良好的产品,这也是设计师的工作的目的所在。

 

那么所有的用户的反馈意见都要采纳嘛?事实并非如此,用户说的不一定是心中所想的、用户没有表达出自己真实的需求、用户的意见不专业。这就需要设计师去思考用户需求的本质,只是盲目的顺着用户的要求走,那么最终呈现的也不是最合理、最严谨的设计方案。

福特汽车公司的建立者亨利·福特曾说过这么一句话:“如果我问我的用户,他们可能只会说要一匹更快的马”。如果福特没有思考用户需求的本质,那么就不会有后来伟大的福特公司了。

交互设计师接到PRD需求往往可能是一个苹果,但是他们可能更需要个橘子,那设计师就需要把苹果换成橘子,在进行加工榨成橘子汁提供给用户。(如下图)

 

undefined

 

由此可见,设计师需要倾听用户的意见。但也不能一味的跟着用户的节奏,被用户牵着走,而是应该理性对待用户的需求,分析用户的根本目的,解决深层次的问题,而不是停留在表面。

 

3. 设计规划

在我们顺利理清需求以后,我们便从需求阶段顺利过渡到界面阶段,并可以在此基础上继续细化界面。

人们在处理信息,学习规章和记忆细节方面的能力是有限的。选项越多,步骤越长,用户需要耗费的注意力和理解力就越多。所以设计师在此基础上要减少多余的步骤和干扰项、优化操作过程,做到操作前可以预知、操作中有反馈、操作后可撤销。

情感化的设计更能快速的捕获用户的芳心,建立符合用户心理模型的设计,能让用户快速上手使用产品,不用进行过多的思考或花时间精力来学习如何使用该产品。如下图所示的2款天气的应用软件。

 

undefined

 

单从界面逻辑上看,第一款的应用在逻辑上更为清晰,用户理解起来不存在任何问题。但是用户看到这个界面的时候可以直观的感受带今天是不是很热,明天是不是很热,在感受上不会那么直接。而第二款应用,通过颜色的变化和数字的高低,能让用户更贴切的感受到天气的变化。所以,设计不仅要逻辑清晰合理,更要能够令其产生认同感和情绪体验,与界面产生情感互动,从而能引导用户积极操作。

 

4. 结果

从上面的各项例子中可以看出,好的设计首先是要解决用户在某个实际场景应用下发生的问题,会让这个产品更易用,更受欢迎,最后会给用户留下美好的体验。视觉体验只是整体体验的一部分,它并不是设计的全部。

因此,用户体验设计首先应该是理性的,其次才是感性的。只要你的方案能够解决用户的实际问题,又能带给他好的感受,用户就容易感到满意。


 

作者:流年

 转载请注明:学UI网》了解什么是用户体验设计?


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

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

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

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

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


十大用户体验设计失败案例,你知道吗?

seo达人


1. 失败的复选框

用户体验设计的基本要素之一是在设计中应用正确的组件元素,然后通过合理使用这些组件元素来达到想要的效果。

为什么这个复选框设计是失败的?

这个设计的问题在于使用复选框作为控制元素——在错误的地方应用了错误的组件。

例如图中是一个购买鸡蛋的设计,虽然生活中也有人会点15个鸡蛋,但比起一长串的复选框,使用可以快速调整数量的下拉菜单会更合适。

设计提示:复选框应该只用于少量选项之间的选择。关于数量的选择应放置在另一个框中,并添加下拉菜单或加减按钮来完成数量的增减。

在下一个例子中,你就可以看到下拉菜单的应用,它可以提供更简洁的界面设计。

 

2. 国家区号限制不准确

这个用户体验失败案例来自于加拿大Flair航空公司。如果乘客碰巧生活在一个电话号码不是十位数的国家,那么他们必须输入假的电话号码才能享受这家航空服务。

这个用户体验设计为什么糟糕?

在当今这个时代,企业靠精准的数据才能繁荣发展,一个失败的用户体验设计迫使用户输入假的数据,这是非常令人头疼的问题。

设计提示:信息输入的字段限制必须确保在合理范围内,并考虑到特殊情况。否则,最终将迫使用户输入错误的信息,带来更多的问题。

 

3. 语言障碍

对于企业来说,一个网站提供几种不同的语言版本是很常见的设计。这个例子的失败之处是让用户难以切换语言,因为它的语言切换隐藏在用户视图之外。

用户体验不好的原因?

这个网站错误地将语言切换框放在屏幕底部,迫使用户向下滚动才能找到它。如果访问者没有立即看到语言框,他们可能会选择点击返回按钮或者离开网站。

设计提示:在用户体验设计中必须考虑特定内容的位置,重要的东西应该放在页面顶部。这个设计可能会因为失败的体验而失去很多访问者,实际上这个问题很容易解决的。

 

4. 反常规的复选框

这个复选框的失败之处在于它的设计和文案非常令人困惑,用户几乎无法明白复选框选中和非选中状态之间的含义。网站默认选择所有可选内容,然后强制客户删除他们不想要的选项。

为什么这是糟糕的用户体验?

这个体验设计正好与用户习惯相悖,用户通常习惯于直接勾选想要的选项或从下拉菜单中选择;它却迫使用户停下来思考应该去掉什么选项。

设计提示:有一句古老的商业格言曾说过——“如果你让用户感到迷惑,你就失去了他们”。将菜单设为默认,并选中所有可选内容,这是一个糟糕的设计。

 

5. 颜色使用不当

为了让网站或者应用程序的一些表单脱颖而出,设计师一般会在界面上使用鲜艳的颜色。但是,需要注意的是要兼顾文字的可读性。下面的例子中存在的问题就是设计本身看起来干净清爽,但文字却难以阅读。

为什么用户体验不好?

虽然在这个主题中使用的绿色很好,但是在这个背景中阅读白色字体是很困难的;即使是在白色背景上阅读灰色字体也不轻松。

设计提示:设计必须强调可用性。如果用户必须在界面中费力地阅读文字,那么你很可能就会失去他们的关注。在选择特定主题或其他界面的颜色时,一定要密切注意重要信息是如何传达的。它是否容易被读取?

 

6. 看重视觉效果而不是功能

我们都喜欢赏心悦目的交互网站,但用户体验设计的重点应该是功能。用户体验设计必须保证功能齐全、易于使用,这样才有价值。

为什么是糟糕的用户体验?

上面展示的这个站点似乎忘记了他们设计的功能,选择了华丽的界面而不是交互。用户虽然可以看到50个非常美丽的旅游景点,但问题是,他们必须按住鼠标几秒钟后才能继续浏览下面的内容。

设计提示:强迫用户按住按钮来导航只会“赶走”用户。用户没有耐心等上几秒钟去看下一张照片,最终他们会在耐心消失后离开。

 

7. 凌乱的界面

界面杂乱是苹果iTunes设计中的诸多缺陷之一,这个缺陷一直在拖累苹果的iTunes设计。在应用程序或网站的主页上塞满信息看起来似乎很有诱惑力,实际上只会让访问者不知所措。他们遭受着信息过载,这种体验和缺乏信息一样糟糕。

为什么是糟糕的用户体验?

上图所示的设计不仅会加重用户的认知负荷;更糟糕的是,页面的加载速度也会减慢。两者都会大大耗费用户的耐心,导致他们离开。他们将在混乱的导航中经历一个糟糕的过程。

设计提示:在界面设计方面,菜单是不错的组件选择。使用这里的示例,可以使用一个菜单来管理专辑,而不是一股脑将它们全部扔到首页上。甚至列出最近打开的2或3张专辑也是一个不错的折中

 

8. Netflix的悬停播放功能

Netflix早在2015年就增加了一项功能,当用户在视频上停留几秒钟时,就会播放一段预告片。乍一看,这似乎不是一个糟糕的设计。但一旦投入到使用,问题就开始变得明显起来。

为什么是糟糕的用户体验?

问题在于用户必须将鼠标悬停在电影或视频上才能快速查看详情。这就产生了一个悖论:停留在播放器上阅读影片详情的观众会突然听到或看到一段响亮的预告片或片段剪辑,打断他们查看详情。对于一家专注于客户满意度的公司来说,这是一个令人惊讶的疏忽。

关键要点:Netflix也可以让这成为一个更愉快的体验。例如可以设置为用户必须将鼠标悬停在缩略图上才会播放,而不是在他们查看预告片详情时显示。这里的要点是,在设计界面时,要确保不会意外地出现一些元素来分散用户对重要信息的注意力。

 

9. 谷歌早期的失误案例

接下来我们回溯到2005年和2009年来看看谷歌这个案例,对于一家似乎还不错的公司来说,这是一个巨大的失败。让我们一起看看是哪里出错了!

为什么是坏的用户体验?

Google Wave在Google X失败后仅仅四年就出现了。它试图创建一个全新的系统,但它最终成为了囊括电子邮件、即时通讯和维基百科等功能的混合产品。主要问题在于,它并没有比市场上其他解决方案做得更好。

设计要点:这个概念其实非常棒,为我们今天继续使用的许多新程序打开了大门。但是,即使是绝妙的想法也无法将Google Wave从糟糕的设计中拯救出来。当试图简化那些已经流行的特定功能时,新功能至少要达到同等的水平。否则,人们不会使用它们。

 

10. 已删除的消息通知

WhatsApp因其出色的用户体验设计而大受欢迎,但有一项功能却让人摸不透。我们都遇到过这样的情况,有时候编辑了一条信息准备发送给一位朋友,但却意外地将它发送给另一个朋友。因此,用户应该有权删除这条消息。听起来很有道理,对吧?

为什么是糟糕的用户体验?

WhatsApp的设计问题在于,它会向收件人显示你删除了信息!最后,这看起来比你发错消息的行为更可疑。这是一个糟糕的设计决策。

设计要点:系统应该提醒发件人,收件人可以收到你删除了信息的通知;或者从一开始就避免给收件人发送这个通知。给删除消息的人一个简单的通知消息这个设计可以保留。

 

最后的一点想法

用户体验需要放在用户体验设计的首要位置。优秀的用户体验设计是小企业将客户从更大、更传统的企业中转化出来的途径之一。最后一条建议是将可用性置于界面风格之上。吸引眼球的应用程序和网站固然很重要,实用性在绝大部分时候是要置与美学之上的。

 

原文地址:UI中国

作者:摹客Mockplus

 

转载请注明:学UI网》十大用户体验设计失败案例,你知道吗?

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

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

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

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

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


用户体验设计的可用性

seo达人


产品功能层面的可用性

从字面意思来说“可用”是指在用户正常预期里一个系统可以正常使用。在用户体验里的产品层面更多是倾向于产品功能有用、有效、完整。比如用户能通过搜索功能搜到自己想找的内容,这个用户完成搜索就是被定义为搜索功能的可用性,也就是说这个功能对用户是有效的。

但是,具备可用性的产品,用户体验未必就一定好。反过来,用户体验好的产品,可用性也并一定好。比如改版前的12306,他的可用性很高,几乎人人都得通过他解决火车票问题,但他用户体验却并不好,设计也不美观,还被很多人吐槽,高峰时期还特别糟糕,他算不上是好的用户体验例子,但对用户来说它的可用性很高。那体验好但可用性不好是什么样呢?比如我们去一家餐厅,环境装修氛围、还有服务都好极了,连餐椅餐具都设计的高端漂亮,可是我们进去餐厅吃饭却没有能吃的菜品。这就是体验很好,但可用性并不好。

我们可以这么简单理解:产品层面的可用性原则是产品功能的必备基础,他是万丈高楼的地基,没有可用性的产品无需谈用户体验,但是具备了可用性这个条件并不等于拥有了优秀的用户体验。

 

用户体验设计层面的可用性

上面我们提到了产品层面的可用性主要是产品的功能的有用、有效、完整,但对于用户体验设计不仅仅局限于功能性范围。在用户体验设计里还包含的视觉感知、品牌一致、心理预期、用户情感等因素,这几方面都是用户体验设计中不可缺少的部分。

在著名的尼尔森Nielsen 的可用性框架里,最有名的就是 Jakob Nielsen 的 5 个属性:

  • 可学习性(Learnability)-初次接触这个设计时,用户完成基本任务的难易程度;
  • 效率 (Efficiency)-用户完成任务所需要时间;
  • 可记忆性(Memorability)-当用户一段时间没有使用产品后,能马上回到以前的熟练程度;
  • 出错(Errors)-用户能从错误中恢复;
  • 满意度(Satisfaction)-用户对产品的主观满意度。
  

用户体验设计方案里如何体现可用性原则的

状态可见性:比如控件状态可见,当这个产品售罄了,能从视觉上给用户清晰的状态展示。

品牌一致性:比如界面的配色是否给用户感知和品牌一致。

出错设计:户在使用产品的时候遇到出错地方,直接把出错的地方给予提示,或及时反馈,避免错误的发生。

满意度设计:在设计中,站在大多数用户角度上,对用户要传达的信息简单、清晰、理解成本低。

 

那什么是好的用户体验设计呢?

那就是我们经常一块提及的易用性,易用性是指的用户在体验中效率更高效、过程更简单、记忆负担更少、用户满意度更高。易用性是建立在可用性的基础之上,如果没有可用性,那易用性就根本谈不上了。

我们再回到可用性的 5 个属性:学习性、记忆性、效率、出错、满意度。下面从之前写过的搜索功能体验来简单看:在可用性基础之上,用户体验设计里对易用性的体现。

学习性
搜索框的位置在用户心智中具有习惯性的认知,用户在界面的顶部或右上角找到放大镜这个图标,就能直接开始搜索,对于用户这个是不需要学习的。

提升输入效率设计
用户进入搜索输入页时立即弹出键盘,并且输入框是焦点状态,保证用户无需其他点击,直接输入即可。另外展示5~10个历史搜索词,方便用户快速键入减少用户输入成本。

减少记忆负担
比较常见的是历史搜索。

有效的纠错展示
当出现输入错误时,对用户进行有效的纠错或提示,帮助用户快速且准确的完成输入,减少错误。

情感化感受
当搜索无结果页时,设计上采用萌趣化情感设计体现设计的温度。
  
 

小结

可用性不是我们随口而来的一个书面词汇,而是需要在具体实际中理解背后的逻辑,可用性是用户体验设计中的一块基石,然后才是建立这个基础之上的易用性、美观、用户好感度等方面。

 

原文地址:咏舍(公众号)
作者:咏舍

转载请注明:学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咨询、用户体验公司、软件界面设计公司


掌握这20条用户体验设计原则,助力设计成长!

seo达人


1.以用户为中心 

这是最常被提及的用户体验设计基础,当涉及到产品设计决策时,提醒我们要学会使用同理心,而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的,用户的意见、痛点、愿望、偏好和需求对产品来说至关重要,所以在项目初始阶段需要投入大量的时间和精力去了解用户。

图片

用户体验研究重点是了解用户,为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求,区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体,前期研究中需要了解目标人群需要什么并在产品中反映出来,这是针对性很强的设计研究。

 

2.了解信息架构

可能很多人对信息架构的定义很模糊,这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中,如果把所有内容都堆到一个列表或页面中,可能我们将无法使用这款产品,所以我们看到大多数的App和网站都包含很多的导航和页面结构,按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么,并帮助他们找到需要寻找的内容。

图片

信息架构在制作线框图或原型之前完成,因为它是产品的基础,有助于设计师考虑什么功能是最重要的,哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关,有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容,点击任何元素都没有反应,会给用户带来很糟糕的使用体验。

 

3.考虑使用场景

没有场景,任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

图片

这条原则有助于设计师考虑还有哪些因素会影响用户和产品,很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时,会尽可能的添加输入提示,最大程度地减少用户出错的机会。

 

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受,因为用户不需要再次学习如何操作,他们会回忆起之前的操作习惯并将其作为指导,这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件,并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时,所以按钮的状态应该是一致的。

图片

从逻辑上讲,产品越大,这种一致性会变得越来越有挑战性,这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡,放弃的用户就会越多,在市场营销中,这通常被称为销售漏斗中的漏洞。

 

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品,无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权,例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

图片

需要注意的是,当提供太多选项或用户太依赖于自己的选择时,用户可能会不知所措,造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地,不能让用户感到使用压力。

 

6.把可用性放在首位

在整体上看,建立高标准的可用性是为用户做的最好的事情,有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

图片

可用性的重要之处在于要理解可用性的灵活性和重要性。

 

7.了解用户测试

结合可用性的概念,我们还要进行用户测试,这是设计师对工作进行测试的方式,对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时,设计师要观察真实的用户是如何与之交互的,可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

图片

测试通常分几轮进行,团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现,设计也随之发生了变化。

如果发生更改,将会进行新一轮的测试,通过这个过程,设计团队可以改进他们的工作,直到达到可用性标准。

 

8.少即是多

在创造力和创造独特事物的渴望中,很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击,但也会给用户带来负面体验,在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小,创建一个有效的布局,想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

 

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动,并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连,帮助用户消化所接触到的信息。

图片

创建层次结构从概念的草图开始,一直持续到完成设计。例如发送按钮通常会用绿色而是不红色,而次要按钮会显示为灰色或与背景混合,并显示“撤消”或“返回”。

 

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式,是帮助设计师从用户的角度看待问题的工具。

图片

做到准确就是直观的产品,用户不需要投入精力就可以使用它,而错误的思维模型会导致一些问题,例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型,可以采用多种不同类型的研究方法,常见的方法包括卡片分类、决策树、对用户行为的密切观察,或者使用大量的数据来建立关键用户的心理模型。

 

11.设计中的讲故事

讲故事的方式更加直观,利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感,给用户留下持久的印象。

图片

想出一种可视化的方式来传达复杂的内容具有挑战性,但同时也是有益的,可以更好地接近用户并将其作为提高产品可学习性的方法。

 

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标,但是直接使用原型软件不断添加各种页面细节是错误的操作。

图片

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下,一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

 

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品,还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

图片

事实上,残疾人和其他用户一样需要数字产品,但很多产品在设计时并没有考虑到这些群体,但这也提供了一个机会,为所有用户提供一个可以依赖的好产品。

 

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线,同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如,大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮),这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

图片

使用用户已经熟悉的东西并不一定会让产品的独特性消失,有经验的设计师会利用这种熟悉性来来创造一些独特的设计,同时也是直观的,不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为,因为它很容易让那些不熟悉产品的用户超负荷,形成巨大的学习曲线,增加用户负担。

 

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容,包括用户画像、心智模型、用户旅程以及线框图和原型等,是一种有形和具体的表现。

可交付成果是用户体验设计原则,可以帮助设计团队和其他利益相关者理解和交流概念。

图片

▲ 用户画像可以捕捉理想用户,并提供可以相关联的真实面孔,是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤,有助于确保这些步骤确实可以轻松执行,并且整个过程很流畅。

这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。

 

16.专业的原型设计工具

用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。

图片

从逻辑上讲,设计团队的具体需求会因团队而异,但一些关键功能例如团队协作、需求管理、交互设计和开发移交等,对于大多数团队来说是必要的。

 

17.精心管理产品需求

一切都从收集需求开始,然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易,但随着项目的进展,要保持列表的条理性确实是一个挑战。

图片

除了创建需求和检查需求之外,还有一个问题就是调整需求,需要从设计、技术和业务各个方面来处理各种需求,还要确保这些需求之间没有相互矛盾。

 

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸,这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

图片

移动端产品会有更多影响设计决策的因素,例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

 

19.利用UX设计模式

几乎所有的产品都专注于设计模式,它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

图片

▲ 当用户在谷歌搜索中输入的内容有问题时,谷歌会提供一个相关的搜索提示,辅助用户进行精确地搜索,解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

 

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性,如果线框和原型分散在多个渠道中,这种内容的集合就会变得很难达成。

图片

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题,防止产品细节没有表现出来或者被忽略。

 

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里,不过我们可以确定,无论它带给我们什么,肯定都会很有趣

 


 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》掌握这20条用户体验设计原则,助力设计成长!

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

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

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

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

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


C端产品分析方法总结

ui设计分享达人


做一个完整C端项目前,从产品思维得理解、需求分析到场景分析,通过以上分析得出结论,进而制定我们的设计目标,把设计目标落地到解决实际的设计问题,内容较多,大家可以根据上述目录来进行选择性阅读。


1.1产品思维包括


1.1.1 用户思维:深入了解用户的需求和场景


了解用户心理:“心理”主要是指用户的情绪,只有了解用户的心理状态,才能知道他们在接触到或者使用我们的产品时是正面的情绪还是负面的情绪。正面情绪需要我们引导去实现转化,负面情绪需要我们安抚以避免跳出和口碑的损失。


把控用户行为:最终目的还是引导用户行为,让用户按照我们的计划进行产品的交互、操作,从而实现对用户的有效管控和转化。例如:上品店庆推出“购物省钱节”的概念,联合商家推出各种优惠活动,就是抓住用户在购物时想省钱的心理,通过降价、优惠券等方案让用户在选购商品、提交订单和结算阶段都保持高涨的情绪,从而推动用户最终完成付款。


解决用户痛点: 在完成上面的分析后,我们最终需要把调研和分析结论落地为设计方案,前提是要关注用户当前的情绪是负面的还是正面的,如果是负面的情绪,我们可以通过补偿、安抚等方案对用户进行留存。例如:在等待外卖送达时,配送信息页一般都会有预估时间、位置等信息,让用户有一定预期。同时如果迟到时间过长,也会通过准时宝等规则给予用户优惠券补偿,这些都是负面情绪的安慰。



1.1.2 项目思维:主动发现并解决用户体验过程中遇到的问题

项目思维主要指,我们要具备极强的发现问题、输出方案、推动落地的能力。这就是设计师的项目思维和推动力,可以保证自己的想法快速落地、推动设计优化并尽快上线。



1.1.3 商业思维/业务思维:将设计目标与业务目标紧密结合

商业思维是指,拉新:通过产品、运营和营销策略让用户下载产品。留存:让下载的用户保持活跃度,留住用户,便于转化。转化:让用户按照我们的业务规划去注册、分享、下单、付款等动作,一步步带入我们的圈套,完成关键操作。变现:将用户行为变现,内容产品的活跃度可以带来广告营收,电商产品的成交额就是业务收益。



2.1产品思维的重要性


2.1.1 Ui设计师和产品经理的区分界限


相同点:在实际工作中,设计师和产品经理的目标在本质上是一致的,都是解决用户的痛点、满足用户的需求,为用户提供体验更好的产品,并在此基础之上完成用户转化,实现收益。作为一个设计师,我们对产品了解的深度不一定比得过产品经理,但是广度上你应该要求自己和产品经理保持一致。只要掌握产品的架构、流程和业务的模式、原理即可。



不同点:UI设计师更注重通过用户体验来留存用户,产品经理更多地考虑转化用户和变现的途径。



冲突点:这时就会产生一些冲突和矛盾,有时为达到业绩目标,产品经理或其他业务方可能会提出有损用户体验的方案或者策略。


想要解决与产品冲突得问题,就要充分调动自己的产品思维,保持习惯性的产品思维,才能始终保持和业务一致的目标。和业务方站在一起,才能找到设计和业务的共同目标,并将业务目标转化为可执行的设计目标,才能为设计带来更高的价值。


2.1.2 UI/UX设计师的真正价值是什么


这里就绕不开这个话题----产品思维。别人眼里的UI设计师,很多人会认为设计师的工作就是设计流程页面、视觉效果。这些工作看起来只是锦上添花,即使没有专业的设计师来设计,可能只是流程、控件位置不太合理、样式和颜色不太好看而已,并不会影响产品的开发和上线。其实,设计师的价值不仅是艺术价值,更重要的是为业务带来价值。


UI/UX设计师,关键在于对用户场景、对产品细节的敏感度,这也是其他岗位不具备的技能。实际工作中这些细节问题,很容易区分出来专业性的差异,因为UIUX设计师是距离用户最近的人。我们设计页面,用户在页面上操作和获取信息。我们设计流程,用户通过流程完成各自的需求。我们设计的产品流程、页面,是用户直接接触和使用的东西。基于这个原因,设计师对用户的需求、反馈是最了解和最敏感的,我们可以通过用户的反馈、操作数据把控用户的心理状态和行为方向。无论是在方向上还是从细节出发,挖掘和洞察用户需求,设计师有明显的优势。

所以UI设计师真正的价值就是通过自己对细节和场景的思考,自我驱动,找到设计优化、产品迭代、业务提升的机会点。想要找到这些机会点,你需要培养自己的产品思维、项目思维和商业思维。


2.1.3 如何培养自己的产品思维


01、多与需求方、业务方(产品经理、运营、市场等岗位的同事)沟通,在参加需求评审的时候,深入了解业务和产品的特点、原理。


02、了解产品流程:在接手某项业务或产品时,先利用思维导图对产品的架构做一次梳理,通过功能结构图你可以清晰地看到产品应该有的功能。在掌握架构的基础上,对产品的核心流程再进行一次梳理,包括线上、线下所有的流程节点、体验接触点和不同用户端的流程触点。


03、多做竞品分析,从竞品中寻找灵感和产品感。怎么做竞品分析具体可查看我的其他文章,竞品分析维度的确定。


04、持续不断地培养自己的思维能力,深入思考、多做归纳总结和分析。在做设计的时候我们也可以让自己的思维慢下来,多去思考:思考一下为什么做这个需求?对用户有什么价值?对产品有什么价值?对业务有什么价值?设计、产品、运营应该怎么做才能达成这个目标?我们的做法对业务、对产品有什么影响?设计方案能不能很好地平衡业务和体验的关系?



2.1为什么要进行需求分析

01、用户不知道自己真正想要什么。

02、用户难以说出自己的真实需求,用户在阐释自己的需求时,就会不自觉地粉饰和解释自己赤裸裸的本质需求。例如:那些刷视频就能领红包得产品,但为什么它最近不火了,这类产品的人群,本质需求是:通过刷页面领红包,获取更多的钱,这类人根本不关心内容是什么、内容质量怎么样,这就造成了内容的触达效果非常差。


2.2 用户需求分析步骤


2.2.1 筛选出目标用户


01、了解我们产品的目标用户群体和现有产品用户群体,掌握用户基本信息,分析用户特征。(Who)用户是哪些人:性别、年龄、地域分布、学历收入等。(What) 用户有什么共性。(Why)为什么选用我们的产品。(Where/When)在什么场景下使用我们的产品。


02、通过了解用户得到的所有信息,然后创建用户画像,得出结论。那么如何创建用户画像呢?


       001、人物创建:创建一个虚拟的用户群体中的一员,利用我们上面提到的用户相关信息,可以给他/她一个插画风格的照片帮助我们具体化这个用户的人格和形象。然后列出他/她的基本信息,给他/她定一个社会角色,比如:小王,男,28岁,销售经理,我们产品的熟练用户,月收入2万,学历本科。

        

       002、分析动机:这个人物用我们的产品想干什么;这个人物对我们产品某个功能使用较多,需求较强的原因是什么,想达成什么样的个人目标。


2.2.2 提炼核心需求


可以通过用户画像推测用户的心理特征和行为偏好,积累了以上信息,你就比较容易进行需求的分析和挖掘了,提炼出解决用户需求的核心的痛点。例如:解决了用户在特定场景下的某一个核心痛点,满足了用户在当前场景下特定的诉求/需求。例如:共享单车产品就是解决了从车站、地铁站到家、工作单位最后一段距离的出行痛点。例如:地图软件解决的是陌生地区找不到路和易违章的痛点。


2.2.3 找到本质需求

01、了解人性:做设计就是做人性,只有把握好人性的特点才能更好地满足用户心理,进一步引导用户行为。马斯洛需求层次理论,人的需求从低到高可分为 5 个层次:我们就可以试着洞察用户在特定场景下的本质需求到底是什么了。生理需求(呼吸/食物/水):现代社会其实就是对生存条件的追求;安全需求(避免自己受到伤害);

社交需求(爱与被爱/社会关系/地位)对情感的需要;尊重需求(被自己认可/被他人认可和尊重)对稳定社会地位的需要;自我实现需求(道德层面/内心层面的追求和满足)。


所以用户的本质需求无外乎:生存、金钱、情感、名利、心理满足这几个方面。


02、将用户叙述的需求,转化为本质需求:比如:有的用户说,上品商场最近优惠券怎么少了?我都不想去上品买东西了。用户表意是嫌优惠券少,如果我们草率得出:增加优惠券运营力度的结论太过于表面,其实用户的本质是嫌商品太贵了,他们的本质需求是省钱,少花钱且买到想要的东西。而这类用户是对价格极其敏感的用户,增加优惠券只是其中一个策略,是无法满足他们根本需求的。根据他们省钱的本质需求,我们可以给他们更多地推荐低端商家,哪怕没有优惠券,还是能提升一波 GMV。


进而转化成设计目标为,要通过我们的设计能力,给用户营造一个很省钱的氛围,而不是一味地给用户降价或是发优惠券。规划更多的秒杀、每日特价、分享领券等活动专区,在设计页面时增加优惠券、红包等元素,突出省钱、低价等文案,可以有效地吸引此类用户,引导他们下单付款。这就是本质需求的应用方法。


2.2.3 拆解挖掘到的本质需求———KANO模型

工具——KANO 模型问卷调研,主要依据是用户调研,可以通过定性访谈的方式,对部分用户进行了解,大概了解用户对需求的态度;也可以通过定量问卷的方式,通过问卷获取比较有参考价值的数据信息不同类型的需求和用户满意度之间的关系,将影响用户满意度的因素分成五类:


基本型需求:无此功能,用户满意度会显著降低;有此功能,用户满意度不会显著提升。

期望型需求:无此功能,用户满意度会降低;有此功能,用户满意度会提升。

兴奋型需求:无此功能,用户满意度不会降低;有此功能,用户满意度会有显著提升。

无差异需求:有无此功能,用户满意度都不会有太大变化。

反向型需求:无此功能,不会影响满意度;但有此功能用户满意度会下降。


经过需求分析我们会拿到大量用户需求的相关信息,在取舍和决策时我们可以使用三个原则 + 一个工具:01、

围绕本质需求和痛点;关注与业务不相悖的需求;解决影响用户峰值体验的问题;在做分析时可以利用 KANO 模型,重点关注模型定位出的基本型、期望型需求,适当关注兴奋型和反向型需求。



至此,我们掌握了产品分析的第一步,也就是找到设计的方向和基本依据——用户需求;下一模块我们将进入需求分析的第二步——场景分析,来找到设计可以利用的机会点、切入点!


3.1为什么要进行场景分析


3.1.1 场景是产品设计的基础

01、任何产品的诞生都是基于用途,牙刷为了刷牙、菜刀为了切菜、汽车为了出行……生产这些产品是为了满足用户的需求,而生产产品时需要考虑的因素如外观、材质、设计细节等则源于用户场景。

02、互联网产品其实也是一样的道理,产品基于用户的一些需求或者痛点而诞生,基于用户的使用场景做功能和细节体验。


3.1.2 场景分析的核心能力就是同理心

站在用户的立场思考细节:必须首先知道用户需要什么、喜好什么、讨厌什么、不能接受什么,才能进一步改善我们的产品。基于用户的目的、行为偏好等研究用户在场景里的行为、情绪,从而深入场景,做出正确的决策。


避免主管的质疑和批判:有的用户会有各种各样“奇葩”的反馈,所以我们要多理解用户的选择和立场,避免主观的质疑和批判。


学会聆听和关注反馈:在日常工作的沟通、对用户的访谈中,我们可以试着多用心倾听对方的表达。



3.2 怎么做场景分析——三个工具一个方法


3.2.1 用户体验地图(流程分析)


3.2.1.1概念

01、还原用户体验产品的流程(分析的是场景中的线,包括流程线、行为线等。)02、列出用户与产品、与线下场景有联系的所有触点。03、通过这些触点掌握用户的操作轨迹和行为特征。04、分析用户的体验感受。


3.2.1.2 “五步法”梳理体验地图全流程

01、明确分析对象:最重要的是确定一条明确的流程线,分析的产品某个功能或者某个服务/体验流程,并非用户。


02、拆解体验流程:把分析的流程进行拆分,拆成一个个体验节点实际场景设置节点。比如网约车的产品,要根据用户在线下叫出租车的体验场景来拆分,可以拆成走到路边、招手拦车、上车、行程中、支付下车等几个重要节点,然后根据这些节点来考虑和分析是否有优化或者需要颠覆的地方。


03、创建用户画像:主要从用户的基础特征、用户的心理和偏好等信息去做画像,最后可以形成一个稍稍具体的角色。


04、分析阶段:制作表格,把每个节点的信息进行分析推测和记录。例如下面表格:



横向:第二步拆解出来的所有的流程节点。


纵向:用户与产品的触点:就是用户如何操作我们产品,点了哪里、在哪里停留时间较长,这都是通过埋点数据可以看到的。


用户目标:从用户的使用数据和用户访谈中获取相关的用户信息,通过用户的行为和他们表述的信息找到他们的立场、目的和利益点,从而分析他们想要什么。


用户行为:为了这个目标会怎么做。


结果:看我们的产品页面信息、流程及功能能不能满足用户上述的目的和行为即可。


用户情绪:用户的目标和我们触点是否契合,最终的结果是否能满足用户的需求和目的,没有满足的时候情绪低落到什么程度,满足的时候情绪会高涨到什么情况,哪里是最低谷,哪里是最高峰。


05、得出结论重点要看的是用户情绪的起伏。找到最低点,看哪些节点影响了用户的体验,就是产品的痛点,也是我们的设计发力点和机会点。


3.2.2 同理心模型(节点分析)


3.2.2.1概念

同理心模型适合分析我们产品体验流程中的某个节点或细节功能,不适合进行流程化的分析。包含所看、所听、所做、感受、所想。


3.2.2.2同理心分析方法


01、明确我们分析的对象是什么:比如:网约车用户在打车等待接单的环节;比如电商产品确认订单的环节;这些环节这些环节和节点都有共同的特点,就是集中在有限的一到三个页面中,用户的核心操作比较简单。


02、首先把图表画在白板上,用便利贴写出所看、所听、所做、感受、所想,五个维度的想法,


03、然后进行集体讨论,把这些便利贴提炼总结,归纳出重点信息,通过这种方式可以避免一个人闷头思考的局限性,也可以保证思考的全面性。


04、接下来对这个图进行行为总结,找到用户行为的原因,分析用户的偏好和习惯。


05、最后通过用户情绪和感受,分析我们产品体验的问题。



3.2.3 情感化设计(节点分析)


3.2.3.1情感化设计要素

本能层

亲切:通过情感化设计,营造亲切的氛围,拉近与用户的距离。比如:百度地图可以在导航设置里将导航车标设置成自己的汽车品牌,当看到自己车的车标在地图上移动,用户就会感觉非常亲切和熟悉。


安全:让用户感到人身、隐私的安全。比如:哔哩哔哩在登录界面输入密码时的二次元形象会有捂眼睛的动作。


互动:我们的产品流程和功能的实现需要用户的参与。比如:用户刷新网页时,由于网速较慢、需要较多的加载时间,在加载的过程中,有很多网站会提供一些互动小游戏。用户参与进来了,整体等待的时间也就显得没那么漫长,这种互动既可以缓解用户的焦虑情绪,又能有效防止用户跳出。


惊喜:人们对一件事物的判断往往会基于最初的信息。所以如果我们在提供最初的信息时就给予用户更好的结果,一定可以给用户带来惊喜。花小猪在打车时先出现原价,然后弹出优惠券动效,价格数字也哗啦哗啦往下降,这个不断下降的数字就利用了锚定效应,给予用户一定的惊喜。


行为层

关怀:考虑用户的使用场景,在场景下给予用户细节上的功能推荐或操作建议。比如:美团外卖,在天气恶劣时会提前提醒用户:为避免延误用餐时间,请提前下单。比如:滴滴出行,在用户经常通勤的时间段也会自动提示:由常用起点至常用终点的路线派车大概需要XX分钟,点击即可叫车


预期:难以避免需要等待、甚至反复操作的情况,此时为避免用户跳出,你需要在细节上做好预期管理。比如:我们在用支付宝还信用卡时,支付完成后我们能看到已提交——待银行处理等环节的流程提示。比如:我们在填写一个需要补充大量信息才能注册的网站账号时,网站顶部一般会有注册步骤的导航。当然以上只是最基础的预期管理,如果你的文案能更俏皮一点,视觉效果上增加一些 IP 、甚至动画就更好了。


反馈:对用户的操作及时给予回应,尤其是异常场景,需要使用用户更容易接受的方式给予反馈。


反思层

情怀:能给用户带来情感上的力量。


品牌:在产品的配色、排版、控件样式上体现品牌的统一调性。在产品的体验流程中贯穿品牌的价值。比如:在京东自营的店铺购物、使用京东物流的产品会标明“京东物流”,在确认订单页也有“京准达”的功能选项,京东通过这种方式,将自营物流、快速到达的品牌特性一一表达。


价值:实现更大的社会价值,从而提升企业形象。比如:商城的包装箱、腾讯的 404 网页上都能看到一些被拐儿童的寻人启事,因为这些网页和包装材料的传播力极大、传播范围极广,可以带来良好的社会公益效益。


3.2.4 故事版

故事版:体验地图和同理心模型,可以分别从流程到节点对场景进行分析,那么这些场景如何归纳和表达,以供大家决策和评审呢?需要站在用户需求的角度讲故事。故事板这种漫画/故事的形式易于被受众接受,在阐释需求、说明方案时具有更强的亲和力和说服力,


描述过程:创建的虚拟人物;明确关键节点;找到虚拟人物在整个故事中所有行为和目的。



产品思维、需求分析、场景分析这三部分是产品设计三个基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。接下来我们要做的就是明确设计目标。



4.1为什么要明确设计目标

01、一接到需求就马上打开软件开始往上铺图,遇到被卡住的情况,没有办法继续做下去,总在纠结。

02、有时候产品经理对某个需求也提不出很明确的方向,我们设计的时候能搞出几个方向的方案,但是不知道如何决策。

03、我们在着手设计的时候就没有想好我们输出这个设计图的目的是什么,比如需要促进产品什么转化、解决用户什么痛点、解决体验上哪些问题?

04、我们做这些工作的目的是XXX,只有达到这个目标我们做了这么多工作才有意义、有价值。

05、在日常工作中你也会发现,产品设计不等于纯创意设计,产品设计的关键价值在于发现和解决问题,通过对体验流程和页面细节的处理/优化,得到我们期望的用户反馈和业务数据。


4.2 整个项目设计思考的流程

01、设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标;

02、然后是将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标;

03、上线后,及时收集和整理设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标;

04、然后规划下一步的迭代方向。



4.3 怎么设定设计目标“三步法”

01、明确用户目标和产品目标:设计目标的根本是产品目标,产品目标的根本来是业务目标和用户目标,也就是业务的规划和用户的需求、痛点。因此在实际操作中,第一步我们要先明确我们的产品目标是什么,产品目标大多和用户的转化、功能的使用率有关,我们朝着这些方向分析一般不会有较大偏差。


02、通过上面目标找到与之相关的关键用户操作:比如点击加购按钮、比如完成付款验证操作、比如填写全部表单信息。


03、将关键的用户操作转化成可以衡量的数据指标:将这些关键的用户操作转化为可以衡量的数据指标,比如加购 BTN 的点击量、订单提交后的付款成功率、比如表单信息的完整率。因此设计目标必须是可量化的,产品使用数据和业务数据,比如点击量、退出率、取消率、跳出率等,才能在设计方案上线后正确评估我们的方案有没有完成设计目标。



5.1怎样跨越设计难点

01、先去定位设计难点,找到设计重点,再着手设计。完成主流程后再去解决小问题。

02、接着列出流程或需求点,对设计方案有大致框架;

03、然后针对流程中每个节点列举可能会出现的问题把精力放在影响设计目标和用户核心体验的重点问题上。


5.2怎样解决设计难点

精益创业模式里有一个 MVP 的概念,我们现在产品研发中的敏捷模式也是源于这个概念。简单来讲,就是用较小的成本先做出一个产品,然后快速上线,验证业务模式、产品策略和用户体验等问题,然后小版本快速迭代,进行优化。



参考资料:

《用户体验干货笔记》

《用户体验要素》

《腾讯产品法》

《交互设计知识体系》




C端设计前的准备工作,其中重点在于学会需求分析和场景分析。具体掌握需求分析的核心方法步骤,和场景分析中用到的三个工具用户体验地图、同理心模型、情感化设计、和故事版。需求分析、场景分析是产品设计的基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。


接下来我们要做的就是明确设计目标,设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标,然后将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标,在产品上线后,及时收集和整理和设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标,然后规划下一步的迭代方向。

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

文章来源:站酷 作者:morning_c

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

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

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


日历

链接

个人资料

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

存档