第 2 章 亲密性

第 2 章 亲密性

在新手的设计中,单词、短语和图片四处分布,连角落也不放过,它们占据了每一处空间,以至于根本没有任何留白,这种情况比比皆是。看上去似乎是设计者们不敢留有空白。不过要知道,如果一个设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。

Robin 亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

如果某些信息项或组彼此之间并无关联,这些元素就不应存在很近的亲密性(即不应靠近),这样就能为读者提供一个直观的提示,使读者马上了解页面的组织和内容。

下面这个简单的例子很好地阐释了这个概念。这正反映了亲密性的概念,在一个页面上,物理位置的接近就意味着存在关联(实际生活中也是如此)。

如果我们看到这样两个人走在街上,他们的关系并不明确。他们有关系吗?他们认识彼此吗?

现在,这两个人之间的亲密性告诉我们,他们之间存在关系。在页面上也是同样。

来看看下面这个企业名片的布局,这是一种很典型的布局。在这样小的空间里你看到多少个单独的元素?你的眼睛要停下来多少次才能看全这张名片上的所有信息?

你的眼睛是不是停过 5 次?当然,这张小小的名片上放置了 5 项孤立的内容。

你是从哪里开始的?可能是从中间,因为中间的短句字体最粗。

接下来看什么?是不是按从左向右的顺序读?(因为这是英语。)

如果已经读到名片的最后(即右下角),你的目光又会移向哪里?

你是不是还会全盘再巡视一番,确保自己没有遗漏任何角落?

 

如果再添点乱,情况会怎样呢 ?

现在有两个元素都是粗体,你又该从哪里开始呢?从左上角吗?还是从中间开始?

读完这两项之后,接下来看什么?也许你会在这些粗体词之间看来看去,紧张兮兮地想找出角落里还隐藏着哪些词尚未看到。

你知道什么时候才算完吗?

你的朋友是不是也像你这样?他们会不会用不同的方式读这个名片?

如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。就像实际生活中一样,亲密性(即紧密性)意味着存在关联

如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面会变得更有条理。其次,你会清楚地知道从哪里开始读信息,而且明白什么时候结束。另外,“空白”(字母以外的空间)也会变得更有组织。

之前的名片存在这样一个问题:名片上的每一项看上去都与其他任何项没有关联。这样一来,首先不清楚从哪里开始读名片,另外不知道何时才算结束。

如果对这张企业名片做一点调整——把相关的元素分在一组,使它们建立更近的亲密性,看看会发生什么。

从哪里开始读名片?接下来看什么?什么时候结束?对于这些问题你现在还有疑问吗?

仅仅利用这样一个简单的概念,现在这张名片不论从理解上还是从视觉上看都很有条理。而且这样一来,它还能更清楚地表达信息。

亲密性的使用很微妙,不过相当重要。布局的时候一定要明确元素和其所属元属是否在一起,留意无关元素。

{%}

请注意这两栏中的项目符号,看看它们和相关联的项目间的距离。中间的项目符号事实上离有些左栏的项目更近。看起来几乎就像是 4 个单独的列一样,其中有两列是项目符号。

{%}

现在关系就清晰了,我们可以立刻分辨出哪些项目符号属于哪些项目,也可以马上看出有两列项目清单,而不是一列项目符号,一些信息,一列项目符号,再来更多的信息。

数字看起来就像是一个单独的单元,与文字无关。

当数字和信息靠得更近时,我们就能发现数字和文字之间的关系了。

将类似的项归为一组来建立很近的亲密性时,有时需要做一些修改,如需要调整文本的大小或字体粗细,或者要改变图片的大小或放置位置,等等。正文(所读内容的主干部分)的字号不一定非得是 12 磅!期号和新闻简报发行年份等正文的辅助信息,可以占据相当小的位置。

应该强调什么以及如何组织信息都已经明确了,现在就来实践一下。

这张明信片看起来很平淡,没有任何东西能吸引你来看一看正文,或许,除了那两颗心。但是更关键的是,需要一分钟才能找到真正重要的信息。

不用改变很多(不过,需要改变的还有不少,详见第 5 章),只要把有关联的元素放在一起,然后在不同单元间增加合适的空间,就让信息变得更直观。

训练你的设计师之眼:找到至少 8 个让第二个例子看起来更加专业的不同。(建议在第 220 页。)

亲密性原则并不是说所有一切都要更靠近,其真正的含义是:如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。除此以外,其他孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现出元素之间是否存在关系。

不看正文来回答这些问题

左图,这个系列活动组织了多少场读书会?

右图,这个系列活动组织了多少场读书会?

我们看一眼就能回答右边的传单上列了多少场读书会,因为每场读书会的信息都被归入有逻辑的亲密关系中(另外,活动名称现在加粗了,使用的是对比原则)。请注意,三场读书会之间的空白是相同的,显示出这三组之间有某些关系。就算文本字号小到不能阅读,你也马上就能知道有三个活动。

虽然传单底部的小块文字小到无法阅读,你也知道那是什么,对不对?一定是售票信息和联系方式。你马上就知道这个单元并不是另一场活动,因为它和其他区块之间的亲密性是不同的。

首先,根据理解对信息进行分组(这个工作心算完成,也可以在纸上把想法简单画出来);你知道该怎么办。然后在页面上对文本进行实际分组。

训练你的设计师之眼:找到至少 5 个让第二个例子看起来更清晰、表达更流畅的地方。(建议在第 220 页。)

看看下方左侧的列表,这些花有什么关联吗?是不是有某些共同点?再看看下方右侧的列表,你又怎么想?看起来最后三种花似乎和其他的有某些区别。你一眼就看出来了。甚至在还没有意识到的时候就看出来了。因为最后三种花在布局上和列表中的其他项目是分开的,所以你知道它们有些不同。

空白可以表达关系,所以直接的暗示就是最后三种花是不同的。

只要瞥一眼就能从页面上得到这么多信息,这可真是奇妙。所以,你的责任就是要确保读者获得正确的信息。

创建广告传单、宣传册、新闻简报或者其他出版物时,你很清楚其中哪些信息在逻辑上存在关联,知道哪些信息应当强调,而哪些信息不用强调。可以通过分组形象地表现这种信息。

在这个列表中的每一个元素都与其他所有元素凑在一起,所以无法看出它们之间的关系,甚至标题为粗体的情况下也无从知道这些信息项的组织。

仍然是这个列表,现在通过在彼此之间增加一些空白看起来已经形成了多个组。相信你自己也肯定做过这种工作,这里只是建议要有意识地这样做,而且要投入更大的力度。

你必须要知道如何使用软件中的段前段后间距设置,这样你就能在某个文字区域的元素间使用完全相同的空白了。

在上面,我缩紧了所列项目之间的行距,让它们具有更近的亲密性。这样就可以给粗体标题上方设置更大的空间了。

下面显示了一个很典型的简报刊头。这里有多少个单独的元素?单从放置的位置看,能不能看出某些信息项与其他项存在关联?

要花些工夫判断哪些项应当分在一组,让它们建立更近的亲密性,而哪些项应当分开。

右上角的两项相互之间有很近的亲密性,这意味着它们之间存在某种关系。不过这两项真的应该有某种关系吗?

下面的例子建立了正确的关系。

请注意,这里还做了另外几个调整。我把圆角变为直角,使刊头的外观更简洁、更突出;把标题字号加大,使布局更合理;把一些文字颜色调暗,这些字与其他字的对比度就没那么突兀了。

训练你的设计师之眼:至少找到 3 个让第 2 个例子表意更清晰的不同之处。(建议在第 220 页。)

也许你在自己的工作中已经用过亲密性原则,不过可能做得还不够充分,还没有最有效地发挥它的作用。仔细看看你的那些页面,看看页面上的那些元素,再看看哪些元素应当分在一组。

这个小传单的设计者在每个标题段落后面都加了两个回车。这样一来,标题与它上下的正文之间就有了同样的距离,所以看上去它们是孤立的、没有任何关联的项。你无法分清标题属于它上面的文本还是属于下面的文本,原因就出在上下的距离都相等。

这里有很多空白可以利用,不过这些空白都被打散了。另外有些空白放置不当,比如标题与其相关正文之间的空白。如果像这样“截留”空白,从视觉上看就会把元素分隔开。

将有关系的项归为一组。如果页面上有些区域的组织不太清晰,则要看看这些项是不是存在本不该有的亲密性。

训练你的设计师之眼:找到至少 5 个让这个例子表意更清晰的小不同。建议在第 220 页。)

如果对这个传单做一处修改,只需把标题移到离其相关文本段更近的位置,这就会带来如下的变化。

  • 条理更清楚。

  • 元素内部不再截留空白。

  • 页面看上去有更多的空间,使这个小传单显得不那么拥挤。

很明显,我把居中对齐改为左对齐(这就是对齐原则,将在下一章解释)。这就是按一个按钮的事儿,但是你确实需要知道除了击打空格键之外在段落间加入空白的方法!找到段落前后间距这个选项。

你可能会很自然地利用位置的紧密程度来反映元素间的关系,而亲密性实际上就是更有意识地这样做,并把这个概念更向前推进一步。一旦了解了各元素之间的关系是何等重要,就会注意到亲密性的效果。而一旦开始注意到这种效果,就会利用它,掌握它,并施以充分的控制。

你可能会认为再没有比这更糟糕的菜单了,但这确实是我从一家餐馆拿到的。不错,最严重的问题是所有的信息都堆在了一起。试着找一下看看他们都提供了什么菜肴。

在根据这个信息进行设计之前,先写出同属一类的各部分信息,将这些元素分组。

一旦为信息建立了不同的分组,接下来就可以在页面上摆弄这些信息组了。你手头肯定有一台计算机,怎么摆弄实在是方法多多。如果你不知道要如何用软件样式表,那就赶快学习吧!样式表的好处太多了!

在下面的例子中,我在单独的菜单项之间腾出了更多的空间。当然,不应当采用全部大写的形式,因为读起来确实费劲(参见第 153 页),我把它改成了首字母大写的形式。同时把字体也缩小了两个点,两种做法都为各个元素间预留了更多空间。

原来那个菜单中最大的问题是信息之间没有分开。只有在软件中学会如何格式化页面,才能在每个元素前后精确预留所需空间,把这些信息加入到你的样式表中。

原来的所有文本都用大写,而且是一大“块”文本,这就占据了所有的空间,再没有任何“留白”能让你的眼睛稍作休息。文字越多,使用全部大写占据的空间也就越多。

训练你的设计师之眼:找到至少 4 个让菜单看起来更简洁的不同。(建议在第 221 页。)同时观察接下来的两页。

上一页的例子中,对 Starters(开胃小吃)和 Entrees(主菜)的区分还存在一点小问题。试着把每部分内容缩进,多出的空间更明确地定义了这两个组,同时仍然能很清楚地表示出它们还是类似的组。这都是空白的功劳。亲密性原则能够帮助你关注空间,以及空间对于表达的重要性。

标题下面左边的空间有助于区分这两组信息。

请注意,我还把描述性文字设置成比菜名小一号的文字,这在菜单中是很常见的。另外,除了让表达更清晰之外,这样做还留给了我们更多的空间。

亲密性原则往往并非设计页面唯一的解决方法。另外三个原则在设计过程中也是少不了的,通常你会发现所有这四个原则都会用到。不过在这里我们一次只讨论一个原则,先从亲密性原则开始介绍。在下面的例子中,可以想象一下,如果我开始没有设置适当的间隔,那么其他原则将毫无意义。

这里没有选择 Times New Roman 字体,而是采用了一种更有趣的字体,这很容易做到。我先是尝试着对菜单上菜品的描述设置了适当的缩进,看看是否有助于进一步区分各项,之后决定启用另外一种颜色。

菜品的价格与每道菜的描述挤在一起(还用了连字符),如果我把价格都右对齐,这样不仅清晰而且摆放一致。这正是对齐原则,后面将介绍这个内容。

现在,这个菜单是不是看起来更专业了,而且点餐也更容易了?

把问题说出来

这些章节中提供的例子都很简明易懂。但是既然你现在已经意识到了亲密性原则的重要性,那么就应该以崭新的角度重新审视身边的设计。

试一试

找到因为没有善用亲密性而表意不清的例子。把想到的问题说出来。或许可以在一张纸上勾勒出你想如何有效组织信息的方案。

可以从一本书或杂志的目录上入手寻找缺少亲密性的案例。你经常会发现页码和章节或文章名离得太远。

所有的设计作品都要使用四种基本原则,也就是说,如果某个作品看起来业余又没有条理,那么缺少亲密性很有可能并不是出现的唯一问题。但是至少你已经可以准确地找到这个问题了。

这是一个活动的真实广告。它有很多问题,当然也包括正文的问题。你应该可以很快注意到,它没有很好地利用亲密性原则。

训练你的设计师之眼:找到至少 5 种方法,仅仅利用亲密性原则就可以提高这个作品。(建议在第 221 页。)

在练习其他原则的时候,可能也需要这幅设计不理想的广告。

这是一部信息量很大的辞典的真实一页。

这页上有多少词条?

要找到 William Hazlitt 容易吗?

可以想象,如果这页没有设计成一个巨大的文本块,而是使用了亲密性原则来构建相关段落之间的关系,那么找到你想要的信息就容易多了。

没错,在词条之间增加一些小空间确实会为这本书增加几页,但这只是为了更好地表达而付出的很小的代价,尤其对于这样一本有上千页的书——增加几页的代价物超所值。

亲密性小结

如果多个项相互之间存在很近的亲密性,它们将成为一个视觉单元,而不是多个孤立的元素。彼此相关的项应当归在一组。要有意识地注意你是怎样阅读的,你的视线怎样移动:从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。

根本目的

亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的元素分在一组建立更近的亲密性,就能自动实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的“副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。

如何实现

微微眯起眼睛,统计眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过 3 ~ 5 个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。

要避免的问题

避免一个页面上有太多孤立的元素。

不要在元素之间留出同样大小的空白,除非各组同属于一个子集。

标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。

不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。

不要仅仅因为有空白就把元素放在角落或中央。

目录