《写给大家看的设计书(第3版)》

内容简介:

本书出自一位世界级设计师之手。复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比4 个基本原则。作者以其简洁明快的风格,将优秀设计所必须遵循的这4 个基本原则及其背后的原理通俗易懂地展现在读者面前。本书包含大量的示例,让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。
本书适用于各行各业需要从事设计工作的读者,也适用于有经验的设计人员。

亚马逊购买地址

《写给大家看的设计书(第3版)》

作者简介:

Robin Williams 世界著名的设计师、技术专家和畅销书作家。通过写书和授课,她已经影响了整整一代数字设计师。同时,作为Adobe和Mac技术社区内的偶像级专家,她拥有大批拥戴者。她是Publish Magazine、Adobe Magazine等杂志的专栏作家,是MacWorld Expo 等业界重要活动和组织的顾问委员会成员,还创办了Santa Fe 电影艺术学院。除本书外,她还著有几十部畅销图书和获奖著作,包括The Non-Designer's Web Book、Robin Williams Design Workshop、The Little Mac Book 等,有的书已被翻译为15中文字,产生了世界性的影响。

试读 :第2章 亲密性

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

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

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

下面这个简单的例子很好地阐释了这个概念。在列表的左边,你对所有这些花会怎么想?是不是认为它们都拥有某种共同的东西?对于右边的列表,你又是怎么想的呢?看上去,后4种花与其他的花有些不同。这一眼就能感受到,而且认识到这一点根本无需任何提醒。你很清楚后4种花与其他花有所不同,因为它们与列表中的其他项物理上是分开的。这正反映了亲密性的概念,在一个页面上,物理位置的接近就意味存在着关联(实际生活中也是如此)。

《写给大家看的设计书(第3版)》

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

《写给大家看的设计书(第3版)》

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

你是从哪里开始的?可能是从中间,因为中间的短句字体最粗。
接下来看什么?是不是按从左向右的顺序读?(因为这是英语)
如果已经读到名片的最后(即右下角),你的目光又会移向哪里?

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

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

《写给大家看的设计书(第3版)》

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

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

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

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

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

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

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

《写给大家看的设计书(第3版)》

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

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

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

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

《写给大家看的设计书(第3版)》

左上角的两项相互之间有很近的亲密性,这意味着它们之间存在某种关系。不过这两项真的应该有某种关系吗?amusing、peculiar是形容Society还是"The Shakespeare Papers"?

日期和期号呢?它们应该更靠近一些,因为它们都标识这一期刊物。

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

《写给大家看的设计书(第3版)》

请注意,这里还做了另外几件事:

  • 把所有大写都变为小写,只保留合适的首字母大写,这样能留出更多空间,使标题更大、更醒目。
  • 把圆角变为直角,使刊头的外观更简洁、更突出。
  • 将天鹅图放大,超出边线。必须要让它更显眼。

因为文字内容需要从背景中凸显出来,我把小字体改为Trebuchet字体,这样打印的时候就不会看不太清楚了。

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

《写给大家看的设计书(第3版)》 《写给大家看的设计书(第3版)》
显然,需要对这个列表做某种格式化处理,以便理解。不过,这个列表最大的问题在于,其中的每一个元素都与其他所有元素凑在一起,所以无法看出它们之间的关系,也无从知道这些信息项的组织。 仍然是这个列表,现在看起来已经形成了多个组。相信你自己也肯定做过这种工作,这里只是建议要有意识地这样做,而且要投入更大的力度。注意我在这里对标题增加了一些对比效果,并让这种对比重复出现

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

《写给大家看的设计书(第3版)》

这个页面看上去很乏味(没什么可吸引你去看一眼正文的内容),不仅如此,还很难从中找出所要的信息,比如到底发生了什么,在哪里,什么时间等,信息不是顺次给出的,无法一目了然。

例如,这个系列活动举办了多少场读书会?

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

《写给大家看的设计书(第3版)》

这个系列活动举办了多少场读书会?

首先,根据理解对信息进行分组(这个工作在我的脑海中完成,也可以在纸上把想法简单画出来),然后在页面上物理地对文本分组,即通过调整位置把文本分为多组。注意,三场读书会之间的间隔是一样的,这说明这三个组之间存在某种关系。

辅助信息则相距很远,由此可以马上意识到它不是另外一场演出,即使在你没有看清楚之前。

下面的例子与上一页是一样的。用最快的速度看一眼,现在你对这三场读书会有什么想法?

为什么你会认为其中一场读书会与另外两场不同?原因就在于,其中一场读书会与其他读书会是分开的。由于这种空间关系,可以立刻发现这场读书会有某种不一样的地方。

《写给大家看的设计书(第3版)》

仅仅像这样对页面很快地看一眼居然就能得到这么多信息,这确实让人惊叹不已。正因如此,你要负责保证读者确实得到正确的信息。

看看下面这个舞蹈课的宣传卡片,设计者的本意可能希望表现得更有意思,更有活力,不过第一眼看上去,你能说出舞蹈课的时间和地点吗?-

《写给大家看的设计书(第3版)》

根据亲密性原则来组织这些信息(如下图所示),可以清楚地表达关键信息,包括:谁、做什么、什么时间以及在哪里。这样一来就不会失去潜在的顾客,因为倘若不做此改进,他们有可能不愿在这一大堆杂乱无章的文本中搜寻,并因此放弃。

你不要认为,不管怎样都必须通过自己的设计来突出"舞蹈"这个主题(在这个例子中)。此时,如果要在简单表达和并不专业的设计之间做出选择的话,你应该选择简单表达。设计技能需要逐步提高,要先从简单的表达开始

《写给大家看的设计书(第3版)》

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

《写给大家看的设计书(第3版)》

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

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

将有关系的项归为一组。如果页面上有些区域的组织不太清晰,则要看看这些项是不是存在本不该有的亲密性。使用这个简单的设计原则来管理空间,不仅会使页面更有条理,看上去也更美观。

《写给大家看的设计书(第3版)》

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

  • 条理更清楚。
  • 元素内部不再截留空白。
  • 页面看上去有更多的空间,使这个小传单显得不那么拥挤。

这里还把电话号码和E-mail地址分行放置,不过它们归为一组,与其他信息分开,这样就能作为重要信息突出出来。

你可能还注意到,我把居中对齐改为左对齐(这就是对齐原则,将在下一章解释),这样就留出了更多空间可以将图片放大。

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

《写给大家看的设计书(第3版)》

你可能会认为再没有比这更糟糕的菜单了,但这确实是我从一家餐馆拿到的。不错,最严重的问题是所有的信息都堆在一起。

在根据这个信息进行设计之前,先写出同属一类的各部分信息,将这些元素分组。(你应该知道如何做到这一点,只需充分调动你的大脑)。

一旦为信息建立了不同的分组,接下来可以在页面上摆弄这些信息组了。你手头肯定有一台计算机,怎么摆弄实在是方法多多。要学会如何用你的软件格式化页面。

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

《写给大家看的设计书(第3版)》

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

原来的所有文本都用大写,而且是一大"块"文本,这就占据了所有的空间,再没有任何"留白"能让你的眼睛稍作休息。完全可以把文本的字体设置为小于12点。真的,确实可以这么做!

上一页的例子中,对Starters(开胃小吃)和Entrees(主菜)的区分还存在一点小问题。试着把每部分内容缩进,看看多出的空间是不是能更明确地定义这两个组,同时仍然能很清楚地表示出它们还是类似的组。(我还把Starters和Entrees的字体放大了,这里采用了对比的原则。)

《写给大家看的设计书(第3版)》

Starters和Entrees前面确实再没有足够的空间留出空白了,不过设置缩进还是绰绰有余的。标题下面多出的空间有助于区分这两组信息。只需一点点空间就能达到这种效果。

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

《写给大家看的设计书(第3版)》

这里没有选择Times New Roman 字体,而是采用了一种更有趣的字体,这很容易做到。之前对菜单上菜品的描述设 置了适当的缩进,这有助于进一步区分各项。

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

利用简单的亲密发生原则,信息将收集到多个逻辑组中,使访问者能更容易地在网页上导航。看看你感觉不错的那些网站,你会发现,那些网站的信息都按逻辑做了分组。

《写给大家看的设计书(第3版)》

这个页面上的信息简直乱七八糟。看看标题下面的网站链接。它们同等重要吗?上面的布局似乎是这样的,但实际上并非如此。

有必要再次强调:从理解的角度你已经知道了如何使用亲密性,而且已经知道如何将各部分信息收集到相应的组中。所要做的只是把这种技巧具体应用到实际页面上。用留白来对元素进行分组。

《写给大家看的设计书(第3版)》

在这里,我把所有网站链接都移入一列,来显示它们相互之间的关系。

这里把引用的文字放在离正文更远的位置,因为它们彼此并没有直接关系。

我还使用了对齐原则(将在第3章讨论):这里使用了左对齐,并确保各元素与另外某些内容对齐。

亲密性小结

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

根本目的

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

如何实现

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

要避免的问题

不要仅仅因为有空白就把元素放在角落或中央。
避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白,除非各组同属于一个子集。

标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。
不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。

收藏 4
点赞 5

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。