《写给大家看的设计书》笔记 - 设计原则

摘自《写给大家看的设计书》第一部分 —— 设计原则。


引言

以下是对基本设计原则的概述,每一个优秀的设计中都应用了这些设计原则。要记住,它们实际上是相互关联的,只应用某一个原则的情况很少。

  1. 对比(Contrast)

    对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素。

  2. 重复(Repetition)

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

  3. 对齐(Alignment)

    任何元素都不能在页面上随意安放,每个元素都应当与页面上的另一个元素存在某种视觉联系。这样能建立一种清晰、精巧而且清爽的视觉效果。

  4. 亲密性(Proximity)

    彼此相关的元素应当靠近,归组在一起。如果多个元素之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的项。这样有助于组织页面信息、减少混乱。


亲密性

如果一个设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。Robin 亲密性原则是指: 将相关的元素组织在一起

移动相关的元素项,使它们的物理位置相互靠近,将相关的元素项凝聚为一个组,而不是一堆彼此无关的片段;移动无关的元素项或组,使它们的物理位置相互分离,为读者提供一个直观的提示,使其可以马上了解页面的组织和内容。

就像实际生活中一样,亲密性意味着存在关联。如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面会变得更有条理。其次,你会更清楚地知道从哪里开始阅读,从哪里结束阅读。另外,空白(即字符之外的空间)也会变得更有组织。

亲密性原则不是说所有的元素都要靠近,其真正的含义是:如果某些元素在理解层面上存在关联,那么这些元素也应当在视觉层面上存在关联。除此之外,其它孤立的元素或元素组则不应该存在亲密性。物理位置的是否靠近,可以体现元素之间是否存在关联。


对齐

设计新手往往很草率,只要页面上刚好有空间,就会把文本和图片放在那里,而全然不考虑页面上的其它元素。这样得到的页面会给人一种杂乱无章的感觉。Robin 对齐原则是指:任何元素都不能在页面上随意安放,每个元素都应当与页面上的另一个元素存在某种视觉联系

如果页面上的一些元素是对齐的,这会得到一个更内聚的单元。即使对齐的元素的物理位置是彼此分离的,但它们之间也会有一条看不见的线把彼此联系在一起。尽管 亲密性原则 可能会分开某些元素,但对齐原则可以告诉读者,即使这些元素不靠近,它们任然是属于同一组的。

初学者通常采用居中对齐,居中对齐会创建一种更正式、更稳健的视觉效果,这种效果更为中规中矩,但通常也更乏味。这是一个误区,大多数精巧的设计通常都不会采用居中对齐。初学者需要从一开始就强制自己避免使用居中对齐。通过善用 亲密性原则,并结合明确的左对齐或右对齐,来改善设计的实现。

但并非是绝对不要使用居中对齐,仅是需要注意使用居中对齐时的效果。例如,大多数婚礼都很庄重、很正式,所以想用居中对齐设计结婚喜帖,完全可以在营造喜庆气氛的同时这么做。

在学习更多的设计原则之前,需要坚持一个原则:只使用一种对齐方式。在页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或居中对齐。不过,除非可以确保这些元素都能以某种方式对齐,才可以在一个页面上同时使用不同的对齐方式。(可惜不方便举例子,理解这段矛盾的话,请参照原书 P35)


重复

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

读者能看到的任何地方都可以作为重复的元素。为了实现重复,可以增加全新的元素,可以选择简单的元素并以多种不同的方式加以重复,甚至可以增加与页面主题没有任何联系的元素。只要确保重复行为看起来像是有意为之,而不是乱七八糟的就行。

重复原则可以将作品中的各部分连接在一起,从而统一并增强整个作品的视觉效果。重复不仅只对一页的作品有效,对多页的文档设计更为重要。


对比

对比是增强页面视觉效果的最有效途径,也是在不同元素之间建立一种有组织的层次结构的最有效方法。Robin 对比原则指出:页面上的不同元素之间要有对比效果,以此达到吸引读者的对比效果。如果两个元素不完全相同,就应当使之不同,而且应当是截然不同。

对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并制造焦点。可以采用多种方式产生对比,比如大字体与小字体的对比;典雅的旧式体与加粗的无衬线体产生对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素与垂直元素的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比等等。

需要记住一个重要原则:想要实现有效的对比,对比就必须要强烈。千万不要畏畏缩缩。如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突。不应该用 12 磅大小的字体与 14 磅大小的字体进行对比;也不要用 0.5 磅的线与 1 磅的线来对比;深棕色与黑色的对比也是不合适的。

将对比与其他原则:亲密性原则对齐原则重复原则 合理搭配使用,才会有更好的整体效果。设计页面时,只使用一种原则是很少的。


总结

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

  • 不要害怕留有空白;
  • 不要害怕设计是不对称的;
  • 不要害怕把图片设置得太大或太小;
  • 不要害怕把单词设置得非常大或非常小。