第 1 章 人如何观察

第 1 章 人如何观察

最新的研究成果让我们对人如何观察,以及人的大脑如何解读视觉信息有了更多的认识和发现。现在,我们设计作品的依据已经不再是个人的想法,而是设计行业的最新研究成果。这些研究成果覆盖了从形状、颜色到视觉吸引力的所有内容。

1 弧形偏好

你有没有想过为什么客户总是喜欢带有弧形的 logo,而不是那些有着奇异棱角、前卫而又现代的 logo ?你是否注意到了你最喜欢的智能手机、平板电脑和笔记本电脑的拐角往往都是圆润的?这些弧形和圆润 的拐角到底有着什么样的魅力?

人们对弧形物体的这种偏好甚至可以通过对脑部的扫描来证实。这就是神经美学的研究领域。

沙发有弧度吗

Moshe Bar 是马萨诸塞州综合医院认知神经科学实验室主任。他带领团队使用日常和抽象物体的图像来研究人们是否对弧形物体有偏好。在他们早期的一项研究中,Bar 和 Maital Neta(2006)向人们展示了 140 对物体。有些是真实的物体(如手表和沙发,即图 1-1 中的 A 类物体),有些是抽象的物体(图 1-1 中的 B 类物体),还有一些既有弧形也有棱角(图 1-1 中的 C 类物体)。C 类物体是控制组,充当实验的基准。

{%}

图 1-1 Moshe Bar 实验中使用的原始图形(http://barlab.mgh.harvard.edu/publications.htm

实验证实,人们更喜爱带有弧形的物体。Bar 和 Neta 对此的解释是,棱角分明的图形给人一种威胁感。

图形的平衡重要吗

Paul Silvia 和 Christopher Barona(2009)试图了解图像中的物体平衡与否对人们的弧形偏好是否有影响(如图 1-2 和图 1-3 所示)。结果发现无论平衡与否,人们都偏好弧形物体。

图 1-2 平衡图像

图 1-3 不平衡图像

那么复杂的形状又怎样呢? Silvia 和 Barona 对带有棱角的复杂图形(如图 1-4 所示)和带有轻微弧度的复杂图形(如图 1-5 所示)进行了试验。

{%}

图 1-4 带有棱角的复杂图形

{%}

图 1-5 带有轻微弧度的复杂图形

结果再次发现人们喜欢带有弧度的图形。

Helmut Leder、Pablo Tinio 和 Bar(2011)研究了这种对弧形的偏好是否既适用于“具有正面意义”的物体(生日蛋糕和泰迪熊)也适用于“具有负面意义”的物体(刀片和蜘蛛)。结果呢?对于那些具有正面意义和中性意义的物体,人们偏好弧形;但是对于具有负面意义的物体,人们对弧形并没有任何偏好。

注释 耐克、苹果、百事、可口可乐等很多著名的品牌在公司 logo 中都使用了一个或多个弧形。显然,这些公司在 logo 的设计上都下了功夫。

弧形可以刺激大脑

Ed Connor 和 Neeraja Balachander 在神经造影实验室对这一想法进行了验证。他们使用了一个与图 1-6 中左边图像相似的抽象图形,然后又使用了一系列相似但被拉长的图形,如图 1-6 的其余图像所示。

{%}

图 1-6 圆润的弧形图形与被拉长的图形

人们不仅喜欢左边那种圆润的图形,而且在观察那些更圆润、弧度较大的图形时大脑皮层视觉中枢的活动更为活跃。

启示

  • 人们偏好弧形。

  • 在设计logo时,别忘了在设计中加入一些弧形。

  • 在屏幕上创设色彩区域时,可以考虑使用弧形或弯钩。

  • 在设计实实在在的产品(如智能手机、遥控器、医疗器具)或其他手持式物件时,请使用弧形表面。

2 对称偏好

不管是为网页选择配图,还是决定展示正面或侧面照,都要考虑人们的对称偏好。

随便拿一件物体(不管是一张面部照片还是一张绘有圆形或海贝的图画),然后从中间横向或纵向画一条直线。如果线的两边是一样的,那么这件物体就是对称的。

让我看看你的 DNA

人们觉得对称的脸庞更加迷人。从人类进化的角度来说,这种对称偏好更有可能让人们找到遗传基因最好的伴侣。

图 2-1 和图 2-2 展示了两个面部对称程度不同的人。图 2-1 中的人面部相当不对称。图 2-2 中的人面部更为对称。

图 2-1 不对称的面庞

图 2-2 比较对称的面庞

新墨西哥大学的 Steven Gangestad(2010)研究了对称现象。结果显示,无论是男性还是女性,都认为特征较为对称的面庞更有魅力。但是对称不仅仅关乎面部:人们的体型在对称上也会有或多或少的差异。

那么人们为什么会觉得对称的面庞更有魅力呢? Gangestad 解释说这也许和“氧化应激”有关。子宫中的胎儿暴露在一些自由基之下,这些自由基有可能损害其 DNA。这就叫氧化应激。氧化应激越强,胎儿身体和面部不对称的程度就越高。从进化和潜意识的角度来说,人们寻找的是 DNA 没有受损的伴侣。对称的面部特征就是 DNA 受损较轻的一个线索。研究还表明,对于那些人们认为更有魅力的男性,其血液中所含有的氧化应激化学物质较少。这进一步证实了氧化应激论。

因此,倘若要为自己的网站选择人物照片,一定要选择那些脸庞和身材更为对称的人,因为人们会认为他们更有吸引力。

倘若一定要用某个人的照片,那么请好好地评价一下这个人面庞和身材的对称性。如果这个人的身材和面庞都很对称,那么就用正面的照片。如果这个人的身材或面庞不够对称,那么就用侧面照。

如何测量是否对称

你可以用一把尺子和下面介绍的方法来测量面部的对称性。

我们绘制一条竖线垂直贯穿面部中央,将面部分成左右两半,再画六条横线(标号为 D1、D2、D3、D4、D5 和 D6)与中线相交,如图 2-3 所示。

图 2-3 绘有对称线条的面部照片

测量 D1 左端到中线的距离,再测量 D1 右端到中线的距离。写下这两个数值的差。比如,如果 D1 一侧的长度比另一侧多 1 厘米,那么就写下 1。

以同样的方法测量 D2、D3、D4、D5 和 D6。哪一侧长并不重要。所有差值都使用正数,不用负数。

把所有的差值累加起来。

现在再用同样的方法测量图 2-4。

图 2-4 另一张绘有对称线的面部照片

累加的差值越大,面部不对称的程度就越高。倘若所有差值都是零,那么此面庞就是完美对称的。数值之和比零大得越多,测量的面部也就越不对称。

仅仅男性偏好对称吗

男性喜欢对称的面庞、身材以及所有其他事物,包括日常生活用品、抽象形状、艺术品和自然景物。但是 Kathrine Shepherd 和 Moshe Bar(2011)的研究表明,尽管女性也喜欢对称的面庞和身材,但是在其他事物上却不像男性那么强烈地偏爱对称。

倘若你主要为男性受众提供设计服务,那么请特别注意对称的问题。无论是面庞、身材、自然景物或人造物件,还是电视产品页,都要尽量确保它们是对称的,并且在展示的时候也要保证左右和上下的光线对称。男性认为对称的图像最有吸引力。

倘若你主要为女性受众提供设计服务,那么面庞和身材的对称才是最重要的。你无需像针对男性受众那样保证所有产品的展示都是完美对称的。

为什么人们喜欢对称的物体

在寻找伴侣时,偏爱脸庞和身材对称的人也许有着进化上的优势,但是人们为什么会喜欢对称的物体呢?有些研究人员认为,人类大脑天生就有寻找对称的倾向,所以人们能够最先看到对称的物体,最快理解对称的物体。他们解释称,这种视觉上的流畅性让人们觉得自己就是喜欢这些对称的物体。人们也许就是因为觉得这些物体容易看到、容易理解才会喜欢它们。但是,为什么这一现象只适用于男性而不适用于女性依然是个迷。

使用不对称的设计有何优势

作为一名设计师,你必须决定屏幕、版面或者产品包装上的各部分内容应该如何布局。关于对称的研究是否意味着我们的设计永远都应该是完美对称的呢?

图 2-5 展示的是一个不对称的网页设计,而图 2-6 展示的是一个更加对称的网页设计。

{%}

图 2-5 非对称设计

{%}

图 2-6 比较对称的设计

倘若设计一个对称的布局,那么你可以肯定人们将很快看懂它,并且很有可能喜欢这样的设计,尤其是在受众是男性的时候。

另一方面,倘若你使用的是非对称的布局,那么人们很有可能会感到惊奇。虽然这有可能在一开始就抓住他们的注意力,但是由于喜欢这种设计的人太少,惊奇效应和最初赢得的注意力所带来的优势很有可能大打折扣。

启示

  • 倘若你在设计中想要用受众认为有魅力的人物照片,那么一定要保证其中人物的面庞和身材是对称的。

  • 倘若你的目标受众主要是男性,那么最好使用对称的布局。

  • 倘若你的目标受众主要是女性,那么可以使用较为不对称的布局。

3 第四种视锥细胞

1948 年,H. L. de Vries 研究了男性色盲人群。在研究报告的最后一页,他顺带提到了一个非常惊人的发现。然而,在之后的三十多年里,这一发现并没有引起人们的注意。

在介绍这个发现之前,我想先讲讲关于色觉的一些背景知识。

人们对色彩的感知是通过眼睛里的一些特殊细胞完成的,这些特殊细胞称为视锥细胞(cone)。大部分人的眼睛里有三种视锥细胞,每一种视锥细胞只对特定波长的光线有反应。这些视锥细胞把信号发送给大脑,然后大脑将这些信号破译成蓝色、青绿色、粉红色或者其他颜色。

每一种视锥细胞可以让眼睛看到大约 100 种颜色,所以三种视锥细胞能够让人看到的色彩种类就是 1003,也就是约 100 万种。这也是我们大部分人所能看到的颜色数量。

对于一些人而言,他们有一种或者多种视锥细胞对某些波长光线的反应和常人不同。在这些人身上就会出现某种类型的色彩混乱或色盲现象。他们有可能无法区分特定的颜色,如红色和绿色。只有两种正常视锥细胞的人能够看到的色彩种类大约是 1002,也就是 1 万种。而那些只有一种正常视锥细胞的人能够看到的色彩种类则大约是 100 种。

色觉是由 X 染色体决定的。男性只有一个 X 染色体,而女性则有两个。这就是男性色盲的人数要比女性色盲的人数多的原因。

回到那个惊人的发现

为了对男性色盲人群进行研究,de Vries 让被试转动一台仪器上的两个刻度盘来将红色光线和绿色光线混合在一起,直到他们看到黄色为止。因为这些被试是色盲,所以与非色盲人群相比,他们要么加入了过多红色光线,要么加入了过多绿色光线。

出于好奇,de Vries 请其中一名被试的女儿们做了同样的实验,结果发现尽管她们并不是色盲(她们似乎能够和他人一样很好地区分红色和绿色),但仍然比正常人使用了更多的红色光线来让仪器中出现的黄色和给定的黄色完全一致。她们并不是色盲,但是为什么加的红色光线比别人多呢?

de Vries 由此提出假设:因为色盲具有家族遗传性,所以色盲男子的母亲和女儿会有四种视锥细胞,而不是三种。她们应该有三种正常的视锥细胞,外加家族中色盲男子身上的非正常视锥细胞。de Vries 认为,正是因为有四种视锥细胞才让她们比大部分人看到更多种类的颜色,这就是她们的实验结果与众不同的原因。他在研究报告的结尾处提出了这个关于四种视锥细胞的想法,但是自此以后再也没有在别处提到过。

直到 20 世纪 80 年代,John Mollon 和 Gabriele Jordan 在研究猴子的色觉时才重新提到 de Vries 的发现。因为色盲在男性人群中相当普遍(有 9% 的男性是色盲),所以 Mollon 和 Jordan 意识到世界上有 12% 的女性可能有四种视锥细胞。有四种视锥细胞的人称为“四色视者”(tetrachromat)。这些女性能够看到的颜色数量应该是 1004,也就是 1 亿。

有效使用第四种视锥细胞的四色视者很少

令 Jordan 感到非常奇怪的是,她费了很大的劲也没有找到能够准确完成四色性视觉颜色配对测试的女性四色视者。为什么会这样呢?原来,尽管一名女子可能是四色视者,但是她也许不能区分所有的颜色。她很可能像只有三种视锥细胞的人一样汇报所看到的颜色。这是因为她生活在一个三色视者的世界中。四色视者所接触的物体都是由三色视者创造出来的,也是为只能看到 100 万种颜色的三色视者服务的,而不是由能看到 1 亿种颜色的四色视者创造或为其服务。这就是说,四色视者并没有多少机会学习如何区分她们所看到的其他颜色。

已经有一些证据可以支持这个推测了。最近,人们对画家 Concetta Antico 的 DNA 进行了鉴定,发现她拥有四色视者的 DNA。她本人也正是一个“能够有效使用第四种视锥细胞”的四色视者。她早期接受的训练以及长期从事绘画工作的经历有可能教会了她如何使用第四种视锥细胞。

注释 想要了解更多关于 Concetta Antico 的信息,请访问 BBC :http://www.bbc.com/future/story/20140905-the-women-with-super-human-vision

四色视觉鉴定

DNA 测试是鉴定一个人是不是四色视者的最好方法。一定要当心,不要被一些虚假的测试方法所欺骗。2015 年 2 月,有一个虚假的测试方法像病毒一样四处传播。这个测试方法表示,任何能够看到测试图像中 33 种颜色以上的人都是四色视者。事实上,计算机显示器并不能显示足够多的颜色来鉴定四色视觉。

 

启示

  • 如果你是一名女子,而家族中又有一个色盲的男子,你就有可能是一个四色视者。如果你是四色视者,可能需要特别的训练以便看到三色视者看不到的那些颜色。

  • 随着科技的发展,彩色显示器在不久的将来很可能会显示更多的颜色。作为一名设计师,你有可能需要(或想要)在作品中使用一些只有四色视者才能看到的颜色。使用包含这些颜色的照片和图表,可能会产生一些专门为四色视者服务的独特设计。

4 周边视觉决定中央视觉观察的位置

星期六上午 11 点,你在家用笔记本电脑浏览网页。你会打开最喜欢的新闻网站,浏览一下新闻标题。然后点击一条新闻标题,读一读里面的内容,接着又回到主页,浏览更多的新闻标题。你会再选择另一条新闻,看看新闻里的图像,读读关于这条新闻的更多内容。这就是平常的网页浏览和网上阅读行为,对吧?

你在浏览网页时也许并没有意识到两种视觉(中央视觉和周边视觉)在同时执行着多重任务。

有可能同时执行多重任务吗

如果你看过我写的其他书或者博客,就会知道我喜欢说不存在同时执行多重任务的行为;大部分情况下,人们所谓的同时执行多重任务其实不过是在不同任务之间“快速切换”。人们快速地从一件事转移到另一件事上,将注意力从一个地方快速转移到另一个地方。这种快速的任务切换会破坏人们的注意力和心理过程。

但是,中央视觉和周边视觉同时执行多重任务的行为则不一样。在视觉上,人们真的能够同时执行多重任务。

中央视觉和周边视觉的定义

中央凹是视网膜后面的一个小凹陷,它能够让我们看到高度清晰和详细的图像。中央凹视觉,即中央视觉,只覆盖一个很小的区域(大约只有两个大拇指指甲盖大),但是大脑皮层的视觉中枢却有一半是在处理来自中央视觉的信息。

视野的剩余部分就是周边视觉。周边视觉覆盖着更大、更广阔的视野。大脑视觉中枢能够同时处理来自中央视觉和周边视觉的信息。

眼睛同时采集很多图像样本

人们以碎片的方式采集图像信息,这就叫图像采样。中央视觉和周边视觉同时采样。在浏览网页的过程中,如果某个新闻标题吸引了你的注意力,你就会移动头部和视线,从而让那个新闻标题进入中央凹的视野,也就是中央视觉。但是,你的头和眼睛是如何知道需要去看那个特定位置的呢?

周边视觉起决定性作用

Casimir Ludwig、J. Rhys Davies 和 Miguel Eckstein 的研 究(2014)表明,是周边视觉(周边视觉所看到的内容和大脑对周边视觉信息的处理)决定着中央视觉接下来要把注意力的焦点放在哪里。这在很大程度上是一种潜意识的过程。人们能够意识到中央视觉及其处理的信息,但是可能并不能意识到周边视觉看到了什么,或者并不能意识到是周边视觉决定着中央视觉接下来要观察的地方。

两种视觉比一种视觉好

你一定会认为这些同时执行多重任务的行为会影响大脑处理图像的速度,但是 Ludwig 的研究表明,中央视觉信息和周边视觉信息的处理在很大程度上是独立进行的。因此,这两方面的信息都可以很快处理完成。

不要将眼球追踪研究的结论作为设计决策的依据

大部分眼球追踪研究只研究中央视觉,不关注周边视觉的活动。然而,设计师却往往把眼球追踪研究的结论作为设计决策的依据。(“没有人看这幅画,因此这幅画没有用处,应该删掉。”)现在,你已经知道了周边视觉决定着中央视觉观察的位置,就可以避免单纯依赖眼球追踪研究的数据来做设计决策了。

关注周边视觉

因为周边视觉决定着中央视觉接着会看向哪个地方,所以有必要留意在中央视觉注视页面某些部分的同时,人们会通过周边视觉看到些什么。周边视野绝不仅仅是可以留白的无用空间。作为一名设计师,你的设计必须灵活,以便适应不同尺寸的显示器和不同的设备(大屏幕、笔记本电脑、平板电脑、智能手机)。设计师往往只使用屏幕的中央部分而将边缘部分设置为空白。这可能是最简单的设计方法,只要设计一个屏幕就可以用于多种设备。但是,这也意味着人们的周边视觉将被闲置,没有东西可看。图 4-1 是一家餐厅的网页。这个网页充分利用了周边视觉以抓住人们的注意力,从而帮助人们了解网站的内容。

{%}

图 4-1 充分利用周边视觉的网页

启示

  • 不要仅将眼球追踪研究的结论作为设计决策的依据。

  • 设计作品的周围区域不要留白。应该在作品的周围区域包含一些信息,以便帮助人们决定(中央视觉)接下来要看的地方。

5 周边视觉能够感知危险并更快地处理各种情绪

想想你在一天中能够看到的所有事物。你的眼睛不断地接收图像刺激,但你并不会对所有看到的图像作出反应。很多图像还没有引起我们大脑或身体的反应就消失了。

但是,有些事物确实能够立即引起我们的强烈反应。如果你看到有潜在危险的事物,如一条蛇、一堆火、一个移动的黑影,你的身体和大脑就会很快作出反应。

既然周边视觉所覆盖的视野范围比中央视觉要大,并且周边视觉决定着中央视觉观察的位置,那么我们就有理由认为周边视觉对危险图像更加敏感,反应也更快。Dimitri Bayle 带领他的团队用实验验证了这一假设。

恐惧的面孔实验

想象一下,你正和几千年前的祖先一起在草地上行走。你通过眼睛的余光(周边视觉)注意到左边的人脸上露出了恐惧的神情,这个信息很可能会对你有用,并且也许能救你的命。

人们对身边人带有情绪的面部表情尤其敏感,特别是惊讶或恐惧的情绪。

Bayle 和他的团队研究了人们在周边视觉中是否能够更快、更准确地识别面部表情,而不是面部表现出的其他信息,如性别。

大脑在分析和认识脸部时使用的是枕叶和颞叶,包括称为梭形脸部区域的特殊部分,它受中央视觉刺激最多。

能否识别他人脸上恐惧的表情直接关系到个人的生命安全,Bayle因此提出假设:这些恐惧表情的图像应该会通过周边视觉,经由一个更快、更加自动化的皮层下通道直达大脑杏仁体,而不是经过“常规”的枕叶、颞叶和梭形脸部区域穿过中央视觉。

研究人员使用了一些带有恐惧或厌恶表情的脸部图像,并记录下被试识别这些图像所需的时间。研究人员还另外增加了一个性别识别的任务,要求被试判断一个中性的面庞(不带任何情绪)是男人还是女人。性别识别是对照性实验,以便与识别恐惧表情和厌恶表情的实验进行对比。实验过程中,参加实验的被试有时在周边视觉中看到这些图像,有时在中央视觉中看到这些图像。

实验的结果证实了 Bayle 的假设。与出现在中央视觉相比,带有恐惧表情的图像出现在周边视觉中时,人们的反应更快。周边视觉处理带有厌恶表情的图像也比中央视觉快,但是其速度要比处理带有恐惧表情的图像慢。在对照性实验中,人们的中央视觉和周边视觉对中性图像的反应时间并无差别。

除了反应速度更快以外,人们在观察带有恐惧表情的图像时,识别观察物的周边视野范围也比观察带有厌恶表情或者中性表情的图像时大得多。

设计时要记住人们对恐惧和危险的反应

设计师通常并不希望他们设计的作品给目标受众带来恐惧,但是,他们也确实想要吸引观众的注意力。本章前面已经提过,设计师往往很少在受众的周边视觉中留下信息。如果你想快速吸引受众的注意,在与设计的内容和品牌相适宜的情况下,请考虑在观众的周边视野中使用带有情绪或者让人感到危险的图像。

启示

  • 为了快速抓住人们的注意,在人们的周边视觉中放一些令人感到危险的图像。

  • 为了快速抓住人们的注意,在人们的周边视觉中呈现一些带有强烈情绪内容的图像。

6 周边视觉就像低分辨率图像

让我们重新回到前面提到的场景:星期六上午 11 点,你正在家中用笔记本电脑浏览网页。如果我在任何一个时间点问你在中央视觉中看到了些什么,你可能会很好地向我描述出来。你可能会说:“我正在看网页上的一篇文章,正读到‘The’这个单词。我发现这个单词的首字母是个大写的 T,它由一条竖线和竖线上面的一条短些的横线构成。”

但是,倘若我问你,在通过中央视觉阅读“The”这个单词时,你的周边视觉又看到了些什么呢?你会发现很难向我清楚地表述周边视觉所看到的事物。你的周边视觉所看到的视野范围,边界模糊,你也并不十分清楚在周边视觉中看到了些什么,所以也就更难描述你所看到的内容了。

麻省理工学院的计算机科学与人工智能实验室就周边视觉的样子提出了他们的看法。Ruth Rosenholtz 带着她的研究团队制作了一个电脑模型来模拟大脑通过周边视觉看到的内容。Rosenholtz 称把这些模拟图像称作合成图(mongrel)。

模糊的周边视觉

周边视觉和中央视觉的一个差别就在于周边视觉放弃了对图像细节的关注,以便获得对图像的整体印象。为了使图像信息处理的速度更快、范围更大,周边视觉给大脑提供的是一个更广阔的图景。这个图景真有点像一张分辨率相当低的图像,并且越到边缘就越模糊。

周边视觉在设计竞赛中的胜出

2013 年,波士顿市举行了一场重新设计地铁交通图的比赛。Rosenholtz(她的实验室正好位于麻省理工学院的波士顿校区)将比赛之前的地铁交通图和赢得了这场设计比赛的地铁交通图一起输入了她的合成图电脑模型。

图 6-1 显示的是重新设计之前的地铁交通图。这张地图上圈出了红色轨道线上的麻省理工学院站 / 坎道站。

图 6-1 重新设计之前的波士顿地铁交通图

假设你的中央视觉注视着这个圆圈。根据 Rosenholtz 的电脑模型,中央视觉和周边视觉的组合看起来就像图 6-2。中央视觉区域图像清晰、边界分明,但是周边视觉区域则是模糊的。

图 6-2 包含了重新设计之前的波士顿地铁交通图周边视觉图像的合成图电脑模型

Michael Kvrivishvili 是一名来自莫斯科的设计师。正是他赢得了这次波士顿市的地铁交通地图设计大赛。图 6-3 就是他新设计的地铁交通图。和前面一样,我也在图上用一个圆圈标出了坎道站。

图 6-3 Michael Kvrivishvili 赢得比赛的新设计(感谢 Michael Kvrivishvili 提供照片,网址:www.fllckr.com/photos/10247460@NO3/

同样,我们假设你的中央视觉注视着这个圆圈,图 6-4 呈现的就是在观察 Kvrivishvili 的地图时,中央视觉和周边视觉所看到内容的合成图。这张图同样是模糊的,但是 Kvrivishvili 地图的合成图和原始地图的合成图之间还是有一些差别的。

图 6-4 包含了 Kvrivishvili 获奖交通图周边视觉图像的合成图电脑模型

细节信息越少,看到的信息反而越多

交通图的原始版本(图 6-1)提供了很多准确的地理信息,比如绿色轨道线西部和红色轨道线南部的一些地理信息。但是,因为这些地理特征相当复杂,所以它们在合成图模型(图 6-2)中反而失去了向用户提供信息的效用。

将图 6-1 中的这些区域和 Kvrivishvili 新设计的地铁交通图(图 6-3)进行比较,Kvrivishvili 新设计的地铁交通图对实际地理信息的描绘就没有那么精确和详细,只是提供了一些代表性的信息。虽然从实际地理信息来看,图 6-3 对这些区域提供的信息并没有图 6-1 中的那么准确,但是在图 6-4 中,周边视觉反而能够更加准确地把握地图想要传达的大致信息。通过简化设计,Kvrivishvili 让地图变得更加清晰,尤其是周边视觉部分提供的信息。

设计时要同时考虑中央视觉和周边视觉

很多设计师往往并没有意识到他们主要根据中央视觉的需要设计作品。毕竟,中央视觉才是设计师最熟悉的视觉,也是意识中最常出现的视觉。但是,或许你也想为周边视觉进行设计。这时,可以试试简化设计,特别是简化设计作品周边的内容。

即使你没有 Rosenholtz 的合成图电脑模型,也可以尝试使用自己的周边视觉简单测试。首先选择设计作品中你希望人们用中央视觉观察的一个地方,比如网站的导航栏。然后,用你的中央视觉注视导航栏,同时看看能否对网页上的其他内容有一个大致的印象。需要简化网页其他部分的内容以便网页浏览者通过周边视觉渠道有效地获取网页信息吗?

违背设计常识的屏幕设计原则

Rosenholtz 关于周边视觉的研究有很多有趣的发现,其中一个与我们经常提到的设计常识刚好相反。比如说,我们常常会遇到这样的设计原则:智能手机上的图标和 logo 应该比台式电脑上的更小、更简单。从表面上看,这个设计原则似乎很有道理:如果图标和 logo 的细节过多,它们会随着屏幕变小愈加模糊,愈加难以识别。

然而,我们还可以从另外一个视角来思考这种尺寸和图像清晰度之间的关系。在一块大屏幕上,可视区域只有很小一部分处于中央视觉覆盖的范围之内;屏幕绝大部分则处于周边视觉覆盖的范围之内。现在,智能手机的屏幕越来越大。在一部大屏智能手机上,我们完全有可能既要使用中央视觉,也要用到周边视觉。即便如此,至少还是会有 75% 的可视区域处于中央视觉范围之内。在一个相对较小的智能手机屏幕上,绝大部分或者所有的可视区域都可能处于中央视觉的范围之内。对于一台小设备来说,如智能手表,很有可能屏幕显示的所有内容都处于我们中央视觉覆盖的范围之内。

可视区域处于中央视觉范围之内的部分越多,所使用图像的细节就可以越多,而不是越少。中央视觉可以抓住图像的细节。随着屏幕变大,屏幕左上方的 logo 或者右上方的图标很有可能处于周边视觉的范围之内,这意味着这个 logo 或者图标应该更简单一些,以便周边视觉轻松地把握这个图形的视觉形象和内容——这和我们现行的一些设计原则刚好相反。

启示

  • 不管你是在设计独立的图像、信息图,还是网页,都应该记得同时考虑周边视觉和中央视觉。

  • 周边视觉是模糊的,所以设计作品的外缘一定要简化。

  • 为小屏幕(如智能手机)设计作品时,可以在作品中包括更多的细节内容。

  • 为大屏幕(如笔记本电脑)设计作品时,应该简化设计,减少一些细节内容。

7 面部表情胜过注视方向

想象一下,你对着一块屏幕,其画面上的人正像图 7-1 那样注视着一件商品。

图 7-1 一个人注视一件商品的图像

看到这幅图像,你会和图中的人注视同样的地方吗?答案是肯定的。但是事情远没有看起来这么简单。

注视方向的影响

有证据表明,人们往往会按照图片中人物视线的指引去观察。这些证据主要来源于热点图实验和眼球追踪实验。

Giovanni Galfano(2012)就做过这么一个经同行评审的实验,证实了人们关于注视方向的论断。同时,这个实验同时还带来了一个有趣的额外发现。Galfano 及其团队告诉被试,他们会在实验中看到屏幕上出现一个图形,可能出现在左边,也可能出现在右边。被试一看到这个图形,就要快速地按下空格键。

在一部分实验中,被试只是简单地看到图形,然后按下空格键。而在另外一部分实验中,图形出现之前,会发生两件事。首先,“左”或“右”的字样(当然是意大利语,因为实验地点在意大利)会出现在屏幕的中央。这个字总是会准确地指引图形出现的地方。但是,在文字出现后、图形出现前,还会显示另外一个线索。一个卡通人物的面部图像会出现在屏幕中央,或向左边看,或向右边看。面部图像注视的地方和图形出现的地方有时一致,有时则刚好相反。出现的提示词总是正确的,但是卡通人脸的注视方向和图形出现的地方并不总是一致的。

在这次实验的另一版本中,实验研究者使用了一个箭头来代替卡通人脸图片指向左边或者右边。

实验研究者告诉被试要注意“左”或“右”的文字,忽视卡通人脸或者箭头。当然,在实验中,被试并不能真正忽视人脸或箭头的指引。卡通人脸或者箭头指引的方向和图形出现的位置相反时,被试按空格键所需的时间变长了。被试在努力忽视这些箭头和卡通人脸,但是却无法做到。

难道这个实验还不能证明我们会按照图片中人物注视的方向或者箭头所指的方向去观察图片中的内容吗?嗯,可以证明,但是……

注视等于采取行动吗

Galfano 建议,如果你在设计广告、产品主页或者着陆页,可以使用人的照片、卡通人脸或者箭头来注视或指向一个特定的方向。通过 Galfano 的实验,你现在可以肯定上述任何暗示都能够增加访客注视指定方向的概率。但是,他们真的会采取行动吗?他们会点击那个你想让他们点击的按钮吗?他们会按照指示去填写表格吗?有时,你想要的不仅仅是让人们去注视某个特定的方向。你想要他们采取行动,按下按钮或点击一个链接。注视是让他们执行这行动作的最好方法吗?

在这个问题上的研究还很少,但是来自 Conversion Voodoo(www.conversionvoodoo.com)的 Jon Correll 做了一些 A/B 方案使用对比测试,为找出人们采取行动的原因提供了一个测试模型。(对于任何阅读这部分内容的研究生而言,其内容都能成为可以投稿给一流学术期刊的优秀论文选题。)

Correll 认为,传递情绪比让观察者注视某个特定的方向更能有效地让他们采取行动。Correll 为此对着陆页进行了一系列测试。对于每一次测试,他都保持着陆页不变,仅仅改变页面上的那张人物图像。他使用 10 种不同的人物图像,对这个网页的 15 万以上独立访客进行了测试。每一张人物图像都是同一名模特,她穿着同样颜色的衣服(白色),但是注视的方向不同,胳膊摆放的位置和指向不同,面部的表情也不同。她有时注视着行动召唤按钮,但有时则直接注视着网页访问者。她有时指向行动召唤按钮,有时则并没有指向行动召唤按钮。每张图片中的模特看起来都很快乐,但是在有些图片中,模特看起来更有活力、更加兴奋。

图 7-2 是 Correll 的基准图像。图中的模特看着行动召唤按钮,手势也指向行动召唤按钮。Correll 对配有基准图像的着陆页的独立访客进行了统计,并且记录下了实际按下行动召唤按钮的访客比例。接着,记录下了在配有其他图像的着陆页中按下行动召唤按钮的访客比例,并与之进行对比。

{%}

图 7-2 Jon Correll 的基准图像(Jon Correll 的研究)

图 7-3 中的那些图像是 Correll 在着陆页中选用的用于对比研究的其他图像。每张图像上的百分数展示了在促使访客点击行动召唤按钮方面,其优于或差于基准图像的程度。带有红色百分数的图像在促使访客点击按钮中的表现比基准图像要差;带有黄色百分数的图像在促使访客点击按钮中的表现比基准图像稍好一点;而那些带有绿色百分数的图像在促使访客点击行动召唤按钮中的表现比基准图像要好得多。

图 7-3 实验使用的其他图像

这些研究结论还不是决定性的,但是它们反映了一种趋势。带指向性的画面比不带指向性的画面更好。注视比径直往前看要好。但是,还有至关重要的一点要提醒你注意:高昂的情绪似乎效果最好。

启示

  • 如果你希望人们注意屏幕或者网页的某个特定位置,请在这个位置旁边放一张非常兴奋的人物图像。

  • 虽然人们会去看图像中人物看的地方,但是倘若你使用一张带有丰富情绪的脸部图像,则更有可能让观察画像的人们真正行动起来。

  • 如果你不想使用一张注视着某个特定地方的人物图像,也可以用箭头指向你希望受众看向的地方。一个箭头和一个注视某个方向的脸部图像一样有效;但是,它们的效果却都比不上一张带着积极情绪和兴奋表情的脸部图像。

8 直视对方可能适得其反

如果接受过在沟通中提高说服力的指导,你很有可能知道在和别人谈话时直视对方的重要性。经验告诉我们,说话时直视对方可以让你显得更加自信,让你的话更有说服力。

但是在有些场合下,直视对方却有可能适得其反,让你的话缺乏说服力。

Frances Chen(2013)带领团队使用人们讲话时的录像对直视的作用进行了实证性研究。在一系列实验中,被试观看了很多录像,其中谈论的都是一些有争议性的政治话题。下面是 Chen 的研究发现。

  • 如果被试与录像中说话人的观点一致,那么他们会不由自主地注视说话人的眼睛。

  • 如果被试与录像中说话人的观点不一致,那么他们会倾向于不去注视说话人的眼睛。

  • 如果录像中说话人的角度稍偏,并且没有看镜头,那么被试很有可能被录像中的人说服,改变自己的立场。

  • 如果我们要求被试注视说话人的眼睛,并且被试并不赞成说话人的观点的话,那么看完录像后被试并不会改变自己的立场。

  • 如果我们要求被试注视说话人的嘴巴,而不是说话人的眼睛,那么被试则更有可能在看完录像后改变自己的立场。

在讨论这次实验时,Chen 提到了直视有两种用途的观点。一种用途是表示“亲和性”。人们为了社交,为了与说话人建立联系,以及为了表示赞同或认可时会直视说话人。

但是直视的另一种用途则是恐吓别人。如果人们不同意说话人讲话的内容,而且说话人是在直视他们的话,那么直视对于他们来说表达的似乎更多的是对立性而非亲和性信息。如果注视是对立性的,那么人们就会警觉,就会自我保护。这样的注视又怎么会有说服力呢?

设计师经常要决定他们是不是要用一张眼睛直视观众的图像。录像制作人拍摄推广录像时也不得不决定是从正面拍摄说话人,还是从一边拍摄说话人。Chen 的研究告诉我们这个决定要“视情形而定”,要看录像信息是否有争议,要看观众是不是可能大部分人都已经赞成说话人的观点,还是说话人正在努力说服他们。

可以使用图 8-1 的流程图来帮助我们决定是否使用一张直视观众的图像,或者是否让录像中讲话的人直视观众。

{%}

图 8-1 用于决策是否使用直视的流程图

启示

  • 倘若目标受众可能并不赞成作品所传达的信息,那么请使用视线稍微偏向一边的人物图像。

  • 倘若目标受众赞成作品所传达的信息,那么可以使用直视。

  • 如果作品所传达的信息是为了社会交往(而不是为了说服观众),而且信息本身没有争议性,那么可以使用直视。

9 人们瞬间就能完成对一件设计作品的判断

这真是太有讽刺意味了。设计师要花费几个小时、几天、几周甚至几个月才能完成一个信息图或者网站的视觉设计。密歇根大学的 Katharina Reinecke、Lane Harrison 及其团队的研究表明,人们对一件设计作品吸引力的持久判断在 500 毫秒(半秒)或更短的时间内就能完成。

据其研究,人们在瞬间形成的这种第一印象并不会轻易改变,并且会影响到人们之后对网站或产品本身可用性和可靠性的判断。

Reinecke(2013)与其团队收集了很多不同语言的网页。他们选择了 450 个网站,这些网站的图像复杂程度和颜色使用各不相同。他们依据一系列指标对每一个网页进行了分析,如色调、饱和度、色泽深度、对称性、平衡性、均衡性等。

为了证实这些指标,他们将这些网站向被试展示 500 毫秒,并让被试进行评价:其中有 184 人将 30 个网站定为图像复杂的网站,122 人将 30 个网站定为色彩丰富的网站。(他们总共研究了 450 个网站,但是每名被试只评价其中 30 个网站。)

现在,这个团队的 450 个网站就带有了经过证实的指标。这项研究的最后一步就是将这些网站向一组新的被试展示 500 毫秒。这些被试不再对这些网站的图像复杂程度和颜色丰富程度进行评价,而是对网站的视觉吸引力进行评价。在这个阶段的实验中,被试共有 242 人。

那么对网站视觉吸引力的评价结果如何呢?

  • 图像复杂程度是决定一个网站能否被评为具有视觉吸引力的最重要因素。被评为最具有视觉吸引力的网站是那些图像复杂程度为中下水平的网站;而对于图像复杂程度高的网站,其视觉吸引力得分最低。

  • 相比其他年龄段的被试而言,45 岁以上的被试更加喜欢图像复杂度低的网站。

  • 具有博士学位的被试不喜欢颜色太丰富的网站;而只有中学文凭的被试同样不喜欢颜色太丰富的网站。

  • 男性被试和女性被试在实验中并没有表现出明显的差异。

对信息图的实验

Harrison、Reinecke 和 Remco Chang(2015)使用同样的研究方法测试了 330 张信息图的视觉吸引力。实验中,1278 名被试在观看信息图 500 毫秒之后,对看过的信息图进行评价。

对这些信息图视觉吸引力的评价结果如下。

  • 被试对信息图视觉吸引力评价的差别很大。在 330 张信息图中,只有几张被普遍认为是具有视觉吸引力的。与关于网站的研究不同,有些被试认为视觉吸引力很高的信息图却被另一些被试认为视觉吸引力很低。

  • 与关于网站的研究一样,颜色丰富程度和图像复杂程度是判断信息图是否具有视觉吸引力的重要变量。然而,就信息图而言,颜色丰富程度比图像复杂程度更加重要——这一点和关于网站研究的结果刚好相反。

  • 从整体数据来看,颜色丰富的信息图在视觉吸引力方面得分更高。然而,在颜色数据的背后还隐藏着一个重要的影响因子:男性被试不喜欢颜色丰富的信息图,而女性被试刚好相反。

  • 性别不仅影响人们对颜色的评价,同时也影响人们对图像复杂程度的评价。图像复杂程度并不影响男性被试对信息图的评价,但是女性被试往往更喜欢图像复杂程度较低的信息图。

  • 大部分被试都不喜欢带有大量文本的信息图,但是女性被试尤甚。文本的数量对男性被试的影响并不强烈,但是女性被试却喜欢有更多图像的信息图。

  • 被试的受教育程度对被试的影响不大。一个人的受教育程度越高,就越喜欢颜色种类少、图像简单的信息图。但是在此方面,性别差异的影响比受教育程度差异的影响更大。

针对受众进行设计

并不是所有人对一件视觉设计作品的反应都是一样的,这可不是什么新鲜事。但是,有时设计师还是会潜意识地从自己的角度来进行视觉设计,设计一些自己认为有效果的作品,而不是考虑设计作品所针对的目标受众的想法。

根据设计内容和目标群体的不同,设计师也许会考虑改变作品的复杂程度,颜色的用量甚至是文本的数量。但是,设计师在使用自己的审美标准进行这些决策时一定要谨慎。设计师的决策并不一定代表设计作品所针对的目标受众的需要。

启示

  • 人们往往会在很短时间之内对设计作品做出持久性的判断,所以要保证你的设计作品能够在潜意识中快速地给观众带来视觉吸引力。

  • 设计网站时,一定不能低估图像复杂程度的重要性。研究表明,图像复杂程度是影响人们判断网站视觉吸引力的最重要变量;就图像复杂程度和网站设计而言,性别差异并不重要。

  • 设计网站时,为了获得最佳的视觉吸引力,要使用复杂程度为中低水平的图像。

  • 倘若作品针对的目标受众主要是45岁以上的人群,要降低作品中图像的复杂程度。

  • 倘若你要设计一张信息图,而目标受众主要是男性,那么要减少颜色的种类。

  • 倘若你要设计一张信息图,而目标受众主要是女性,那么要降低作品中图像的复杂程度,并且尽量少用文本。

目录