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

一、4大基本原则

对比(Contrast)

重复(Repetiton)

对齐(Alignment)

亲密性(Proximity)

四大基本原则

1.亲密性

关键词:视觉单元、视觉路径、组织性

根本目的:实现组织性

如何实现:统计眼睛停顿的次数来确定页面有多少元素,如果超过3~5个,就要看哪些孤立的元素可以归到一组建立更近的亲密性,使之成为一个视觉单元

要避免的问题

避免同一页面有太多孤立的元素

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

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

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

2.对齐

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

坚持一条原则:只使用一种对齐方式。

找一条明确的对齐线,并坚持以它为基准。

只要你是有意为之,有时完全可以任意地打破常规对齐。在此我给出了一些规则,不过有一点要记住,规则都是用来打破的。但是必须记住,关于打破规则本身也有一条 Robin 规则:在打破规则之前必须清楚规则是什么

打破常规对齐

关键词:视觉联系、统一性

根本目的:使页面统一而且有条理。

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

要避免的问题

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

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

3.重复

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

关键词:一致性、

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

如何实现:重复可以认为是保持一致性,而且我相信你早已经这样做过。

现在,需要把现有的一致性更向前推进一步。

可不可以专门做一个图片设计,并且将某些一致元素(如标题)作为这个图片设计的一部分?在每个页面底部或每个标题下面使用一条粗细为 1 磅的线吗?或者是不是使用一条更粗的线(4 磅),使重复元素显得更明显、更生动?

再看看有没有可能增加一些纯粹为建立重复而设计的元素。

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

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

要避免的问题

要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值(请看下一章以及有关字体对比的章节)。

例如,如果这位女士想穿黑色晚礼服,配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有统一的效果,感觉上也让人不太舒服,太多的重复将混淆重点。

4.对比

组织信息、清晰层级、指引读者、制造焦点

Robin 对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。

可以采用多种方式产生对比。如大字体与小字体的对比;典雅的旧式体与加粗的无衬线体产生对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。

要记住一个重要规则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。

如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突。不应该用 12 磅大小的字体与 14 磅大小的字体进行对比。也不要用0.5 磅的线与 1 磅的线来对比。此外,深棕色与黑色的对比也是不合适的。所以一定要当心。

......实际上这里只是按部就班地应用了前面介绍的 4 大基本原则而已,一个一个地实现:把信息归入逻辑亲密性;利用对齐,找到并制造重复性元素,加入对比......

关键词:视觉效果、

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

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

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


5.四大基本原则小结

有关设计(同时也是有关生活)的一个更一般的指导原则是:不要畏畏缩缩。

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

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

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

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

亲密性

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

对齐

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

重复

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

对比

这一页上的例子比前页上的例子更能吸引你的眼球,不是吗?产生这种效果的原因就是对比,即分明的黑白对比。可以采用多种方式增加对比。本书的第二部分就会讨论字体对比的有关内容,这是所有伟大平面设计的基础。


二、颜色的运用

色轮

色轮

色轮的基础是三原色:红、黄、蓝。


三间色(secondary color):绿、紫、橙。


第三色

互补

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

三色组

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

也可以尝试使用绿色、橙色和紫色构成的间色三色组,尽管不那么常用,但出于以上原因,这种组合也让人很舒服。

除了红、黄、蓝构成的基色三色组以外,所有三色组中的三种颜色都有基础色使其相互连接,因此看上去非常协调。

分裂互补三色组

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

类似色

类似色组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色,它们都有相同的基础色,这就形成了一个协调的组合。用不同的亮色和暗色组合一组类似色(亮色和暗色将在下一页解释),效果相当醒目!

暗色和亮色

到目前为止,我们使用的基本色轮只涉及纯“色调”,也就是纯色。还可以向不同色调增加黑色或白色,这样能大幅扩展这个色轮,相应地丰富我们的选择。

� 纯色就是色调。

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

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

单色

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

你可能对单色主题已经很熟悉了,所有黑白照片都是由黑色(即“色调”,不过实际上黑色并不是一种“颜色”)和多种亮色或者有不同灰度的暗色组成。我们已经知道,这种组合能呈现多么美丽的图画。所以,可以在设计项目里使用一种单色组合,尽享其中的快乐。

暗色和亮色的组合

最有意思的是,还可以完成暗色和亮色的组合,也就是选择 4种颜色关系(互补、三色组、分裂互补三色组、类似色)之一,不过并不使用色调,而是使用这些颜色的不同亮色和暗色。这样能大大丰富你的选择,而且完全可以放心这些颜色的协调性。

例如,红色和绿色组合是一种绝妙的互补色,但这种组合几乎总脱离不了一种圣诞节的感觉。不过,如果采用这些互补色的某些暗色,就能表现出丰富的效果。

我提到过,红、黄、蓝三基色组合是儿童产品最常用的颜色组合。实际上,正是由于这种颜色组合在儿童产品中如此流行,以至于很难摆脱幼稚的感觉,除非你引入一些暗色和亮色—看看吧 ! 这是何等丰富而精妙的组合。


色质

色质是指某种颜色的特定明暗度深浅度色调。在以下第一个例子中可以看到,如果色质很接近,看上去会有些模糊不清,对比太过微弱。如果在一个复印机上复印下面这些例子,将无法看清文本。

如果由于颜色组合而导致发生视觉抖动,这肯定只有一个原因,那就是色质过于接近。

暖色与冷色

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

不过,我希望你记住更实用的一点:冷色趋于做背景色,而暖色是趋进型的。暖色不费多大功夫就能产生效果,红色和黄色能立即映入你的眼帘。所以,如果要组合暖色和冷色,一定要少用些暖色。

由于冷色是后退型的,所以使用(有时则必须使用)更多的冷色才能产生效果或形成有效的对比。

不要让冷暖色太过均衡!一定要充分利用这种视觉现象。

如何取舍

有时选择颜色看起来易如反掌。先看一种合理的方法。项目有季节性吗?也许可以使用类似色来暗示季节:火热的红色和黄色表示夏季,冰冷的蓝色表示冬季,不同色度的橙色和棕色代表秋天,明亮的绿色象征春天。

公司有没有制定一些官方颜色?也许可以先从这些颜色入手,再使用一些亮色和暗色。是不是在处理一个 logo 标志,其中包含一些特定的颜色?可以使用这些颜色的一种分裂互补色。

你的项目是否包含一张照片或其他图像?可以选择照片中的一个颜色,再根据这个颜色选择一组其他的颜色。可能希望使用类似色,保持一种沉着冷静的感觉,也可以使用互补色增加视觉活力。

如果项目会定期反复,你可能希望自建一个调色板,供所有项目一致地使用。

例如,我每两个月就会根据莎士比亚作品的一些趣闻出版一个 16 页的小册子。主要有 6 个主题,每年反复一轮,所以经过多年的收集,颜色标记已经成为一个有组织的工具。6 个第三色80% 的亮色都曾被选作为封面上的主色;这种颜色覆盖一定空间,标题则往往反色显示。

CMYK 与 RGB, 印刷与 Web



三、字体设计

协调

如果只使用一种字体,页面上的所有元素都采用同样性质的字体,这种设计就是协调的。也许你使用了某种倾斜的字体,或者标题可能更大一些,还有可能使用了一个图片或一些装饰元素,不过给人的基本印象还是协调的。

大多数协调的设计往往都相当平和正式。这并不是说协调不受欢迎,只是要很清楚如果元素彼此之间完全协调会给人怎样的印象。

冲突

如果在同一个页面上设置了两个或多个类似的字体,它们并非完全不同,但也不完全相同,这个设计就是冲突的。我见过无数的学生为了匹配页面上的某种字体,而去查找一种“看上去相似”的字体。这是错误的。如果把两种看上去非常相似但又不完全一样的字体放在一起,大多数情况下都会出现这个问题。问题就出在相似性上 , 因为相似性是互相冲突的。

协调是一个稳妥有用的概念,但冲突务必要避免。

对比

这个世界上所有特性都依赖于比较才能显现。如果没有比较,那么根本没有存在的前提。

                                                          —— Herman Melville

下面该是好玩的内容了。创建协调相当容易,制造冲突也很容易,不过不受欢迎。产生对比则非常有趣。

从上一部分对设计的介绍中可以了解到,强烈的对比能吸引我们的视线。要在设计中增加对比,最有效、最简单而且最让人满意的方法之一就是利用字体。

推荐阅读更多精彩内容