当前位置: 首页 > 设计资讯 > 理论文摘 > 正文

简约为何为美?

2014-02-19 10638 0

  在谷歌于2012的一项研究中表明,用户只需1/50或者1/20秒就能判断一款界面,用户本能上期望界面是有序、简介、毫不费脑的,这就是为什么扁平化设计提倡简约,为什么复杂的视觉设计越来越不吃香的原因。

  进一步说,“有原型依据”的界面,结合简约的设计理念,往往能够更容易获得用户的青睐。

[Page: ]

  越简约,越好!

  但是为什么呢?

  本文,我们来探索一下“认知学理论”和“视觉信息处理理论”,希望以此为指导,能帮助你更好的进行界面简化,提升你的设计观念。

  本文参考了一些界面(尤其是网站)的简化对比,并给出了充分的数据证明,事实证明,简化能够大幅提高转化率。

有原型依据的界面设计

  如果我说“家具”这个名字,95%的人脑海中首先想到的一般都是“椅子。当我问“代表男孩的颜色”,一般人也都会想到“蓝色”,“粉色”代表“女孩”,问到“汽车”,一般会想到“小轿车”

  某物的原型指:当你与某物交互时,首先映入你脑海的精神形象。我们人类天生有这种“对号入座”的习惯,无论是是界面还是家具,当我们面对它们时,我们的大脑都会做出反应,看它和自己的“预期”像不像,也就是说,在我们的大脑中,存在着一个模板库,不同类别的事物都有不同的模板,在我们看到相应事物时,我们都会和大脑中的模板对比,从而判断相应事物的外观和使用感受。

  以网页设计为例,原型依据的种类很多。对于电商网站,用户有一种模板,对于社交网络,又是另外一种,博客,又是一种。如果你看到的网站和你的预期不符,那么在心理上,你便会抗拒这个网站。

  如果要设计一款“为年轻人提供服务的在线服饰商城” ,你心中的预期应该是这样:

image credit(图像来源)


  下图可以算是“在线服饰商店”的网站原型汇总,而上图比较符合下图的标准。但是上图的网页设计,在参考下图的基础上,还添加了一些自己的东西。

image credit(图像来源)

  事实上,导航高效的电商网站,几乎模子都差不多。这不能说是窃取,因为用户对电商网站的预期就是这样,如果你过度表达创意,用户不一定买单。

什么叫认知流畅的界面设计?

  大脑看到事物后,会有一个预判,会判定这个东西是否容易理解,这就是“认知流畅”背后的基本理念。

  “让用户掌握全局”,这句话在不少设计师口中反复出现,但到底什么是掌握全局呢?我来告诉你,掌握全局的意思就是:界面简单,用户扫一眼,就能知道功能是什么,界面中都有什么,我要找的东西在哪里。这就是掌握全局的含义。

[Page: ]

“界面的流畅性等同于界面的有效性,信息也有重量。” — Uxmatters.com

  认知流畅和“曝光效应”(我们会偏好自己熟悉的事物)有所联系,你越熟悉某类事物,你越能接受某类事物。

image source(图像来源)


  对于界面设计来说,同理。

  用户“很熟悉”博客网站中博文底部的评论输入框。用户“很熟悉”电商网站中高分辨率的大图和精美的Banner。

  如果你的界面设计和用户心理预期不符,那么你的设计往往会被用户否定。

  看看下面这些电商网站,看你是否能找到一些相似性?

  注意: 都说“不要盲从潮流”,可潮流是因为用户认可才形成的,一定要尊重用户,这样你才能获益。

  因此你的设计一定要遵循用户的预期,一定要有原型依据。

  很多设计师不做研究,想当然的设计。很多电商网站使用自动滚动栏来展示图像,但实际上,自动滚动栏降低转化率。

[Page: ]

当设计遭遇用户预期——案例研究

  上图的三幅图像中,均展示了用户想在电商网站中看到的元素。即便你从未上过此类网站,也能够快速认同这种设计。

  我们常说一句话"了解-掌握-深入",这种符合用户预期的设计,完全可以跳过了解/用户指引/用户教学流程,让用户快速上手,用户上来就处于“掌握”阶段。他们能大致了解功能、理解界面划分,这便是高认知流畅的界面设计。

  我们来看看下面这个案例 Skinnyties.com的网页重设计。(这也是一个电商网站)

之前:

之后:

改版后的几个关键点:

  • 遵循了上面提到的电商类网站用户预期原型图。

  • 大量留白,凸显出更多的可点击区域。

  • “精”而“美”,分辨率高,单一产品的简约性得到凸显,采用了对照色来作为视觉强调。

    重设计后,新网站上线3周后的数据统计:

  转化率提高l了13.6%,跳出率降低了23.2%,各设备用户增长率42.4%。

  这款重设计本身,谈不上多出彩。仅仅简单的满足了用户预期,对应上了用户对于电商网站的“模板”而已。新的设计“更开放”、响应式,设计元素一致。

  和老版相比,重设计非常明智,减少元素,减少用户的判断和选择,让用户实现快速购买。


[Page: ]

视觉信息处理理论与界面简繁

  哈佛大学、科罗拉多大学、马里兰大学以人口统计的形式制作了一张关于“美学愉悦感”的图表。

  红线代表简约,蓝线代表复杂,简而言之,界面设计越复杂,视觉吸引力越差。

  为什么在科学上,人的大脑更容易处理简约的信息?

  简约为美的原因,在于大脑和眼睛无需耗费心力去处理、解码、贮存信息。

  你的视网膜会将真实世界的图像信息转化为电脉冲。这些脉冲与相应的感受态细胞发生关联。从而传递了色彩、图形信息给大脑。

  颜色和元素越多,眼睛需要做的工作就越多。

看似相同,实则不同,每个元素都能传达微妙的信息

image source(图像来源)

  牵一发而动全身的蝴蝶效应是真的。因此在界面设计中,每个元素都很重要,无论是字体,Logo,色彩选择,留白(上图)都很重要,都会影响到用户对界面的感受。

  一些界面复杂的原因,是设计师的问题,设计师没有充分利用每个元素的功能性,因此有些功能就需要视觉元素的“重复叠加”来实现,因此反复,美学上也不被用户接受。

  视觉信息处理理论不容小视,针对此进行设计优化,可以减少用户信息搜索耗时,减少用户认知负载——只要你能够充分利用手头的元素就好。

  MailChimp Logo的重设计,看似很小的改动,感觉上,完全不同,第一版由于字体过于缠绕、潦草,虽然几个字母,但是看起来很费力。而第二版的优化真可谓下了功夫(如下):

  增加笔划间的距离,留白让Logo看起来更“流畅”:

  更流畅的节奏感:

  在笔划相遇点,采用更纤细的线条,提高字母主体的可读性。

  更流畅的弧度感。

  MailChimp,这9个字母,很简单了,是吧?但是看了上面的比较,你发现“简单”也有“相对简单”和“更简单”的区别。新的Logo设计,让用户看起来更舒心,也能更好的传达“流畅发送邮件”的产品理念。

  数据统计,Logo改版之后,六月份新增了100W用户。

[Page: ]

“工作内存”和转化率圣杯

  简约为美、简约有效、简约致胜的原因可以在我们人类的大脑中找到答案。

  普林斯顿的心理学家 George A Miller曾做了一份著名的报告,其中指出,人脑有5-9块储存短期信息的区域,叫做“工作内存”(各位联想一下PC内存与硬盘的区别,一个短期,一个长期。)

  工作内存是大脑的一部分,能够让我们在几秒内贮存、处理信息。帮助你凝聚注意力,保持不分心,更重要的是,帮你做决定。

image source(图像来源)


[Page: ]

  简约能够减少工作内存中的“噪音干扰”

  在“简约,有原型依据的界面设计中”,5-9块工作内存可以高效运转,让我们可以迅速掌握信息,从而解决问题。

偏差导致用户离去
 
  当你的设计不符合用户预期时,就产生了偏差,用户就会离去——我口袋只有200块,我绝对不会买400块的东西。

  配色、对称美、加载速度、图像清晰度、这些用户都有着相应的预期。那么面对一些不流畅的设计时,工作内存是怎样处理的呢?

  当遇到熟悉的事物时,工作内存会调用长期记忆来完成任务。当长期记忆中不存在此类记忆时,整个节奏就被破坏了。

  这就是为什么一些文章反复提及用户习惯,用户习惯就是这么重要,不要随便破坏。

  用户日常浏览的网站、用户的年龄、性别、所处的国家,都会影响到他们的认知。

[Page: ]

结论

  如果用户在你的设计中找不到参考原型,那么他们便会否认你的网站。“应该会这样”他们往往会有一个预期。想让用户买单,必须先满足用户的心理认知习惯。

  附赠:简约UI设计的7条建议

1. 研究用户最常使用的应用和网站,多做案例研究,找出在关键位置设计的妙法。

2. 取其精华,去其糟粕,博百家之众长,汲取成功设计的优点,混入你的设计中。

3. 设计布局时,要考虑认知学原理,最重要的东西放在用户最习惯的地方。

4. 根据自己的色彩、Logo和字体,简洁的进行视觉传达。元素不宜过多

5. 保持简单,巧妙使用留白。

6. 再三检查加载速度、美学等因素。

7. 原型依据不是纯粹的视觉抄袭,而是心理上的某种预期


121
评论区(0)
正在加载评论...