《写给大家看的设计书》丨NOTES

本书讲了什么

复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比这4个基本原则。作者以简洁明快的风格,将设计所必须遵循的4个基本原则及其背后的原理通俗易懂地展现在读者面前。

作者什么来头

Robin Williams,世界设计师、技术专家和畅销书作家。通过写书和授课,她已经影响了整整一代数字设计师。同时,作为Adobe和Mac技术社区内的偶像级专家,她拥有大批拥戴者。她是Publish Magazine、Adobe Magazine等杂志的专栏作家。

第1章 引言

4大基本原则

对比。避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状等)不相同,那就让它们截然不同。

重复。让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等等。既能增加条理性,还可以加强统一性。

对齐。任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这能建立一种清晰、精巧而且清爽的外观。

亲密性。彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,为读者提供清晰的结构。

第2章 亲密性

亲密性原则:将相关的项组织在一起,使它们的物理位置相互靠近,使相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。如果某些信息项或组彼此之间并无关联,这些元素就不应靠近,这样就能为读者提供一个直观的提示,使读者马上了解页面的组织和内容。

如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。亲密性(即紧密性}意味着存在关联。如果把类似的元素组织为一个单元,页面会变得更有条理。你会清楚地知道从哪里开始读信息,而且明白什么时候结束。另外,“空白”(字母以外的空间)也会变得更有组织。


你的眼睛是不是停过5次?这个名片上放置了5项孤立的内容。你是从哪里开始的?可能是从中间,因为中间的短句字体最粗。接下来看什么?是不是按从左向右的顺序读?如果已经读到名片的右下角,你的目光又会移向哪里?你是不是还会全盘再巡视一番,确保自己没有遗漏任何角落?


从哪里开始读名片?接下来看什么?什么时候结束?对于这些问题你现在还有疑问吗?仅仅利用这样一个简单的概念,现在这个名片不论从理解上还是从视觉上看都很有条理。

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

根本目的

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

如何实现

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

要避免的问题

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

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

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

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

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

第3章 对齐

对齐原则是指:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。

如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,它们之间也会有一条看不见的线把它们连在一起。尽管你可能通过分开放置某些元素来指示它们的关系,但对齐原则很神奇,它会告诉读者,即使这些项并不靠近,但它们属于同一组。


看上去,这个名片上的元素就好像是随意扔上去并被粘住一样。这里所有元素都与名片上任何其他元素没有关联。

花点时间看看哪些项应当分在一组,以建立更近的亲密性,而哪些项应当分开。


把所有元素都移至右侧,使它们按同一种方式对齐,现在信息立刻就更有条理了。将相关的元素分组以建立更近的亲密性,对于信息的组织也是有帮助的。下面这些文本项有了一个共同的边界,这个边界把它们联系在了一起。


这个例子的布局狠好,文本项都进行了分组,使之具有合理的亲密性。文本本身居中对齐,并在页面上居中放置。尽管这是一种合法的对齐方式,但边界是“软”的:实在看不出那条“对齐线”的强度。


这与前面有同样的逻辑布局,不过现在采用右对齐方式。你能看出右边的“硬”边界吗?尽管这是一条看不见的线,但它很明确,连接了这两组文本的边界。现在确实可以看出边界。正是这个边界的强度为布局提供了力度。

在页面上放其他项时,一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放,则按其基线对齐。如果有多个单独的文本块,则对齐其左边界或右边界。如果有图

片元素,将其边界与页面的其他边界对齐。绝对不要在页面上任意摆放元素!

如果文档的外观差强人意,可能最大的毛病就是缺乏对齐。我们的眼睛喜欢看到有序的事物,这会给人一种平静、安全的感觉。此外也有助于表达信息。作为优秀的设计,都可以在对齐的对象间画出“对齐线”,即使这些设计总体表现为汇集了大量奇特的内容,甚至动感实足,这种“对齐线”也很明确。

绝对不要在左对齐的正文或缩进的文本上方将标题居中。如果文本没有明确的左边界和右边界,就无法区分标题是否确实居中,看起来它只是悬挂着而已。这样一来,没有对齐的部分就造成页面非常杂乱:缩进很大,文本的右边界呈锯齿状参差不齐,居中的标题左右两边都有空白。

如果设计中的对齐很明确,那么可以有意识地打破对齐,而且一定要表现出这是有意的。技巧就在于,打破常规对齐时不要怯懦,一定要干脆一些,要么全部采用一种方式,要么全都不采用这种方式。千万不要保守。

有时完全可以任意地打破常规对齐。规则都是用来打破的。但是必须记住,在打破规则之前必须清楚规则是什么。

对齐小结

任何元素都不能在页面上随意摆放。每个元素应当与页面上的另外一个元素存在某种视觉联系。在设计中,统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关,需要在各个单独的元素之间存在某种视觉纽带。尽管这些孤立元素在页面上的物理位置可能并不靠近,但是通过适当放置,可以让它们看上去是有联系而且相关的,并且与其他信息统一。一个精美的设计不论最初看上去多么杂乱无章,总能找出其中的对齐方式。

根本目的

对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃检起来,并把它们放在一个玩具箱中。

不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐(要结合适当的字体)来达到目的。

如何实现

要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素,尽管这两个对象的物理位置可能相距很远。

要避免的问题

要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外些文本右对齐)。

另外,要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的表示。并不是完全杜绝使用居中对齐,有时可以有意地选择这种对齐方式,但是不要把它做为默认选择。

第4章 重复

重复原则:设计的某些方面需要在整个作品中重复。重复元素可能是一种粗字体、一条粗线,某个项目符号、颜色、设计要素,某种格式、空间关系等。

你在工作中肯定已经用过重复。例如,所有标题都设置为相同的大小和粗细,在每一页底部增加一条半英寸的线,项目中的每个列表都使用相同的项目符号,这些都是重复的例子。新手通常需要把这个概念更进一步,把无意的重复变为有意,利用重复将一系列出版物从视觉上系为一体。

看看这个例子,注意一下你的眼睛向哪里移动。看到电话号码时,下一步看哪里?是回到最前面,另一处粗文本吗?这是设计人员常用来控制读者视线的一种视觉技巧,以使读者的注意力尽可能长地保持在页面上。粗体的重复也有助于统一整个设计。这是一种非常简单的将设计块的各个部分连接在一起的方式。


读到信息的末尾时,你的视线是不是会在名片上四处漫游?


读到信息的末尾时,现在你的视线会向哪里移?它会在粗体元素之间来回跳吗?可能会,这正是重复的主旨,它能把整个作品联系在一起,提供统一性。重复其实就是保证多篇幅的设计格式保持一致。

如果一切都是不一致的,别人又怎么能知道某个部分是特殊的呢?如果一个出版物有非常好的一致性,则可以放人一些与众不同的元素,使读者真正注意到你希望他们关注的内容。

重复有助于组织信息。这可以帮助读者浏览各个页面:它有利于将设计中单独的部分统一起来。即使在一个只有一页的文档中,重复元素也可以建立一种连续性,将文档“整个捆在一起”。如果在创建一个包括多页的文档,它要作为一个精美包装的一部分,充分地使用重复就很关键。

重复小结

设计中视觉元素的重复可以将作品中的各部分连在起,从而统一并增强整个作品,否则这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用,对丁多页文档的设计更显重要(对此我们通常称之为保持一致)。

根本目的

重复的目的就是统一,并增强视觉效果。

如何实现

重复可以认为是保持一致性。现在,需要把现有的一致性更向前推进一步。可不可以专门做一个图片设计。并且将某些一致元素(如标题)作为这个图片设计的一部分?在每个页面底部或每个标题下面使用一条粗细为1点的线吗?或者是不是使用一条更粗的线(4点),使重复元素显得更明显,更生动?

再看看有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表?可不可以使用另外一种字体或逆序数字,然后对出版物中的每一个编号列表都重复同样的处理?最初,可以只是找出现有的重复,然后将其加强。熟悉了这种思想之后,再开始创建新的重复元素,来增强设计的效果并提高信息的清晰度。

重复就像是强调你的衣着。如果一位女士穿着一件可爱的黑色晚礼服,戴着顶别致的帽子,她可能会用红色高跟鞋、红色口红和一朵红色小花来突出她的晚礼服。

要避免的问题

要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值。例如,如果这位女士想穿黑色晚礼服,配红帽了、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有统一的效果,感觉卜也让人不太舒服,太多的重复将混淆重点。

第5章 对比

对比是为页面增加视觉效果的最有效的途径之一,很容易吸引读者去看一个页面;另外对比还能在不同元素之间建立一种有组织的层次结构。要想实现有效的对比,对比就必须强烈。

如果两个元素不同,就会产生对比。倘若两个元素存在某种不同,但差别并不是很大,那么你做出的效果并不是对比,而是冲突。这就是关键,对比原则:如果两个项不完全相同,就应当使之不同,而且应当是截然不同。

对比对于信息的组织至关重要,读者一眼看到文档就能立即理解文档的内容。要增加有意思的对比,最容易的方法就是实现字体对比,还可以利用线、颜色、元素之间的间隔、材质等形成对比。

如果在列之间使用一条极细的线,需要另一条线时就应该使用2点或4点的粗线,不要在同一个页面上使用0.5点和1点的线。如果要使用另一种颜色来突出效果,一定要确保颜色有反差,对应黑色正文,深棕色或蓝黑色就不能有效地形成对比。

不要害怕让一些项很小,这样不仅可以与更大的项形成对比,还能留出更多的空白!一旦读者把握住重点,只要他们感兴趣,自然会去读这些较小的文字。如果他们不感兴趣,不论你把这些文字设置得多大他们也不会去读。

对比小结

在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素(比如有两种不同字体),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。

对比就像需要修补一处漆记时配漆一样,不能大概地配色,颜色要么配得完全相同,要么就得把整面墙都重漆一遍。

根本目的

对比的根本目的有两方面,这两个方面相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。

如何实现

可以通过字体选择、线宽、颜色、形状、大小、空间等等来增加对比。增加对比很容易,途径有很多,这可能是增加视觉效果最有意思也最让人满意的方法厂。重要的是:对比一定要强烈。

要避免的问题

不要犹豫。如果你想形成对比,就加大力度。不要将一种粗线与一种更粗的线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各个项不完全一样,干脆让它们截然不同!

第6章 复习

不要害怕在设计(或生活)中留有空白,这能让你的眼睛(及心灵)稍作休息。

不要害怕设计是不对称的,使用非居中的格式,不居中往往能使效果更强烈。尽管不建议使用居中,不过有意这么做也无不可。

不要害怕把单词设置得非常大或非常小,不用担心说话声太大或者太小。在合适的场合这都是可以的。

只要最后的结果能支持或强调你的设计或观点,不要害怕让图片太大或太小。


亲密性

如果项彼此相关,就把它们分在一组建立更近的亲密性。相互之间没有直接关联的项要分开。设置不同的间隔来指示各项的接近程度或关系的重要性口除了可创造出更漂亮的页面外观,亲密性也可以令表达更清晰。


标题和子标题相互靠近,现在就有一个明确的单元,而不是6个无关的孤立单元。现在很清楚,这两个主题彼此之间紧密相关。把作者署名和日期放得更远一些,从而能很快清楚地看出:尽管这是一个有关联的信息,可能还很重要,但它不是标题的一部分。

对齐

应当注意放在页面上的每一个元素。要保证整个页面是统一的,将每个对象与另外某个对象的一个边界对齐。只有在对齐很明显的基础上,才可以选择偶尔打破对齐规则。在这种情况下打破常规对齐看上去不会是个失误。


尽管作者的名字与标题相距很远,但是由于对齐,这两个元素之间在视觉上存在某种关联。

重复

重复是更能保证一致性的一种方式。可以看看现在已经重复的元素<项目符号、字体、线条、颜色,等等),是不是可以让其中某个元素更突出,把它用作为重复元素。重复还有助于增强读者对设计所表示的实体的认知度。


标题与众不同的字体在作者名中得到重复,这会加强它们之间的关联,尽管它们在页面上的物理位置相距很远。小三角是专门为建立重复而特别增加的。尽管每个三角指向不同的方向,但是三角的形状很有特点,足以每次都能被认出。三角的“颜色”也是一个重复元素,重复有助于把设计中的不同部分联系在一起。

对比

这一页上的例子比前页上的例子更能吸引你的眼球,不是吗?产生这种效果的原因就是对比,即分明的黑白对比。可以采用多种方式增加对比,如线(线条)、字体、颜色、空间关系、方向等。


小结

专业的设计人员总是会“借取”其他理念,他们总在寻找灵感。如果你在设计一个传单,可以先找一份你确实非常喜欢的传单,采用它的布局。只需使用你自己的文本和图片,就能把原来别人的传单变成你自己独一无二的设计。另外,可以找一个你喜欢的企业名片,把它调整为你自己的企业名片。还可以找你喜欢的一个新闻简报,适当修改把它变成你自己的新闻简报设计。在这种调整中,它就会逐步变成你自己的设计。我们都是这样做的。

第7章 颜色运用

不同凡响的色轮

色轮的基础是黄、红和蓝3种颜色。这些颜色称为三原色,因为这是唯一无法创建的颜色。


现在,如果拿出水彩盒,分别将色轮上相邻的颜色等量地混合,就会得到三间色。


要把色轮中的空白填满,你现在应该知道怎么做了,只需将空白两边的颜色按等量混合。得到的这些颜色称为第三色。


颜色关系

互补:色轮上相对的颜色为互补色。由于它们如此对立,所以最佳搭配是一种作为主色,另一种用于强调。


三色组

彼此等距的三种颜色通常会形成一个让人偷悦的三色组。红色、黄色和蓝色就是一种极其流行的颜色组合,儿童产品通常都采用这种组合。由于这是二基色,所以这种组合也称为基色三色组。也可以尝试使用绿色、橙色和紫色构成的间色三色组。


分裂互补三色组

从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。这样得到的组合会有一种更为细致的颜色边界。


类似色

类似色组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色,它们都有相同的基础色,这就形成了一个协调的组合。用不同的亮色和暗色组合一组类似色。


暗色和亮色

纯色就是色调。

向色调增加黑色就构成一个暗色。

向色调增加白色就构成一个亮色。


单色

单色组合由一种色调及其相应的多种亮色和暗色组成。


注意色质

色质是指某种颜色的特定明暗度、深浅度或色调。如果色质很接近,看上去会有些模糊不清,对比太过微弱。如果在复印机复印将无法看清文本。如果设计要求使用有类似色质的色调,要避免它们挨在一起,另外每种色调的用量也不要完全相同。

暖色与冷色

颜色要么是暖色(这说明,其中包含红色或黄色),要么是冷色(说明其总包含蓝色)。可以通过增加一些红色或黄色将某些颜色“加热”,如灰色或黄褐色。反之,也可以对颜色增加不同程度的蓝色对其“降温”。

冷色总趋于后退,暖色是趋进型的。暖色不费多大功夫就能产生效果,红色和黄色能立即映入你的眼帘。所以,如果要组合暖色和冷色,一定要少用些暖色。由于冷色是后退型的,所以,可以使用(有时则必须使用)更多的冷色才能产生效果或形成有效的对比。不要让冷暖色太过均衡!要充分利用这种视觉现象。

如何取舍

项口有季节性吗?也许可以使用类似色来暗示季节,火热的红色和黄色表示夏季;冰冷的蓝色表示冬季;不同色度的橙色和棕色代表秋天:明亮的绿色象征春天。公司有没有制定一些官方颜色?也许可以先从这些颜色入手,再使用一些亮色和暗色。是不是在处理一个logo标志,其中包含一些特定的颜色?可以使用这些颜色的一种分裂互补色。

CMYK与RGB,印刷与Web

CMYK代表Cyan(一种蓝色)、Magenta(一种红色)、Yellow(黄色)和一个Key色(通常是黑色)。利用这4种颜色,可以打印出成千上万种颜色,正是因为这个原因,这也称为一种“4色处理”。如果你的项目要由一个印刷机印到某种物理介质上,就可以使用CMYK颜色模型。你所看到的所有印刷品,包括图书、杂志、海报、或饼干箱都是使用CMYK模型印刷的。

RGB表示Red(红色)、Green(绿色)和Blue(蓝色)。我们在计算机显示器、电视、iPhone等上看到的就是RGB。在RGB模型中,如果混合红色和绿色,可以得到黄色。将最大强度的

蓝色和红色混合可以得到鲜粉色。这是因为组成RGB的有色光束并不是从任何物理物体反射来的,这是直接从显示器传人你眼睛的光。如果将所有颜色混合在一起会得到白色,如果去掉所有颜色,则得到黑色。

在这个世界上,可见光谱遇到物体时,物体会吸收(或扣减)大部分光谱,它们没有吸收的部分会反射回我们的眼睛,这就是颜色。在显示器上,光的颜色不是反射来的,它们会直接进入我们的眼睛。

由于RGB利用了直接进人我们眼睛的光,所以屏幕上显示的图像非常绚丽多彩,而且有丰富的背景光。遗憾的是,切换到CMYK再用油墨在纸上打印出来后,这种华美和丰富性有所损失。这是必然的。所以不必过于失望。

第8章 更多提示与技巧(略)

第二部分 字体设计

第9章 字体

如果只使用一个字体系列,在样式、大小、字体粗细等方面没有什么变化,就会产生一种协调的关系。保持页面的协调性很容易,而且看上去这种安排很安静,非常正式,有时也可以认为相当乏味。

如果结合使用了多种字体,它们在样式、大小、字体粗细等方面很类似(但并不相同),就会出现一种冲突的关系。这种相似性会造成困扰,因为我们所看到的不完全一样(协调),但也并非完全不同(对立或对比),所以它们是冲突的。如果结合的多种字体和元素彼此之间截然不同,就会出现一种对比关系。引人注目的亮丽设计往往包含大量对比,而且这些对比会得到充分强调。

大多数设计人员在一个页面上结合使用多种字体时往往是即兴而为。你可能感觉某种字体要更大一些,或者某个元素需要更粗一些口不过,这些都只是感觉而已,如果你能发现并具体指出其中的对比,才能切实地把握页面的设计。

协调

如果选择只使用一种字体,页面上的所有元素都采用同样性质的字体,这种设计就是协调的。也许你使用了某种italic字体,或者标题可能更大一些,还有可能使用了一个图片或一些装饰元素,不过给人的基本印象还是协调的。大多数协调的设计往往都相当平静和正式。这并不是说协调不受欢迎,只是要很清楚如果元素彼此之间完全协调会给人怎样的印象。

冲突

如果在同一个页面上设置了两个或多个类似的字体,它们并非完全不同,但也不完全相同,这个设计就是冲突的。如果把两种看上去非常相似但又不完全一样的字体放在一起,大多数情况下都会出现这个问题。问题就出在相似性上,因为相似性是互相冲突的。协调是一个稳妥有用的概念,但冲突务必要避免。

对比

对比不只是能增加作品的美感,页面上信息的条理性和清晰性与对比密不可分。不要忘记,我们最终的目的是为了更好地表达信息。结合多种不同字体应该促进这种表达,而不应造成混乱。

字体对比有6种明确的不同方式:大小、粗细、结构、形状、方向和颜色。本书余下的部分将分别讨论这些不同形式的字体对比。

尽管我一次只描述其中的一种对比,但实际中很少只使用一种对比,一种对比的效果通常不能让人满意。大多数情况下都会结合并强调多种对比来加强效果。

如果很难发现结合多种字体时出了什么问题,不要只关注字体之间有什么不同,而要重点查看它们有什么相似之处。正是由于这种相似性才导致了问题出现。

第10章 字体类别

第11章 字体对比

大小

粗细

结构

形状

方向

颜色

第三部分 其他(略)

推荐阅读更多精彩内容

  • 第一章 约书亚树 这一章从一般意义上对四大要素进行了解释,这四大要素分别是: 1)对比 对比的基本思想是,要避免页...
    孙希文阅读 598评论 0 0
  • 写出自己的故事 用眼睛去看 用耳朵去听 用心去感受
    倩倩呀哈YAO阅读 44评论 0 1
  • 目前在努力ing,边写代码边转产品助理,调查好小众产品,就和同事开淘宝! 补:2018-10-30:现在就想着开心就好
    BBBBean阅读 107评论 0 4
  • 温柔的云 在树叶上留下 一个浅吻 笑着跑去
    李自省阅读 84评论 0 0