读《写给大家看的设计书》

书 & 草稿

简评

这是一本写给 Non-designer 的书,推荐给像我这样没有设计基础的人。

从这本书里第一次知道了设计的四大原则(亲密性、对齐、重复、对比),当然光知道这几个概念是没什么用的。一个好的设计综合运用了四大原则,而对于新手来说,看到设计只觉不好,却不知道是哪里不好。

作者抽丝剥茧,把四大原则一一分离开来,结合具体的案例进行讲解,让新手一步步的了解到每个原则如何把原本混乱不堪的页面变得整洁易读而有趣。最难得的是她细致地逐个解释,选取的例子恰到好处,让你只专注于某一个原则。对于新手来说十分友好。

书后半部分的颜色和字体,对于新手来说是不错的入门材料,我也借此懂得了一个调色板是如何形成的,那么多种英文字体在细节上又有什么细微的差别。

书的前半部分介绍了设计,她说希望向读者潜移默化地灌输一种思想,使其提高视觉敏感度。我想她做到了,读完这本书,走在路上随处可见的海报、广告都变成了研究的对象,我可以指出哪里由于没有遵循什么原则而显得混乱,如何调整可能会更好。

当然真正的设计不可能通过阅读一本书就能提高,更多的还需要自己领悟和实践。

术语卡

四大基本原则

  • 对比(Contrast):不是冲突也不是相似,用截然不同吸引注意力
  • 重复(Repetition):增强条理,统一
  • 对齐(Alignment):建立视觉联系
  • 亲密性(Proximity):组织原本孤立的元素,提供清晰的结构

基本元素

字体、颜色、大小、线宽、形状、空间、图片

亲密性

作者说物理位置上的接近也就意味着存在关联。对于页面中的元素,如果在内容理解上有关联,那么在视觉上也应该将其组织成为一个视觉单元,从而更清晰有条理的表达信息。此时借助视觉效果,可以让人在“扫一眼”中就轻易掌握页面的主要结构。

所以实际行动中,需要做的是,根据内容的相关性来组织内容,再通过空间关系表达。

如何检验是否满足亲密性?——微微眯起眼睛,统计眼睛停顿的次数,以此数一数页面上有多少个元素,如果超过了 3~5 个,表明需要整理一下孤立元素。这也要看实际情况如何。

对齐

对齐是另一种意义上的组织。它神奇的地方在于,对于那些相隔很远的元素,对齐会让它们间产生一条看不见的线,将其连接在一起。此时页面会隐隐建立起视觉上的结构感,从而使页面统一且有条理。

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

整本书中,作者 Robin William 用了无数的案例来强调,新手不要随便使用居中对齐,也不要在同一个页面中使用多种文本对齐。当然这只是对于新手的建议,如果设计审美提高了,想要实现居中的效果另说。

文本对齐的小技巧

  1. 如果在同一个页面上同时使用左对齐和右对齐,那么两种文本单元之间也可以通过一些元素进行对齐,从而连接起来。
  2. 除非文本内容足够长,要避免两端对齐,否则会出现很多难看的空隙。
  3. 想用居中布局?——可以让文本居中,但文本块在页面中不居中。或是让页面变成细长条式。
  4. 不要在左对齐的正文文本上方,居中标题。
  5. 标准版的缩进是 1em。
  6. 在整个页面找一条明确的基准线,坚持以它为基准。

对比

这里需要辨析两个概念:对比&冲突。

我理解作者表达的意思:冲突是处在对比与相同之间的一种尴尬状态。也就是说对于两个元素,如果要让它们产生对比,那么就大胆地做得不一样,而不是畏畏缩缩相似不相像。

如果两个项不完全相同,就应当使之不同,而且应当是截然不同。

基本颜色

  • 三原色:唯一无法通过混合来创建的颜色(印刷术语)。红黄蓝。
  • 三基色:光学中的概念。红绿蓝。
  • 三间色:将色轮上的三原色等量混合所得。橙绿紫。
  • 第三色:将三间色等量混合得到,有六种。

色质

色质指颜色的特定明暗度、深浅度或色调。如果色质过于接近,会使颜色组合导致视觉抖动,看上去模糊不清、对比微弱。

如在背景和文本上同时使用深色。

颜色模型

  • CMYK(Cyan Magenta Yellow Key):印刷中常用的四色处理,用这四种墨色来打印成千上万的颜色。
  • RGB(Red Green Blue):电子屏使用的颜色模型,通过有色光束的混合来组成颜色。所以 #fff 所有颜色组合得到白色,而 #000 所有颜色去掉得到的是黑色。

字体类别

由于作者使用英语,所以此处介绍的是英语的字体类别。其中的衬线(Serif)的概念在中文中也适用,但汉字的字体分类则是另一套标准。

  • 衬线:笔画末端用来装饰的细节部分。如中文中的宋体就是有衬线字体,而黑体则属于无衬线。
  • 强调线:在笔划最细的地方画一条线,这条就是强调线。
  • x-height:英文中小写字母主题的高度,如 a 的高度、d 去掉上半部分的高度。
  • ascender(上伸部分)
  • descender(下伸部分)
  • 基线:字体下方那条不可见的线。
  • 不同粗细的字体名词:light regular semibold medium bold extrabold

下面是作者划归的六大类字体,我用表格作了整理对比。

类别 衬线 小写字母衬线 强调线 笔划粗细过渡 备注
Oldstyle 倾斜 对角 缓和 典雅。适用于显示大量文字。
Modern 水平&细 垂直 剧烈 冷酷高雅。不适用于显示大量文本。
Slab serif 水平 垂直 几乎没有 简洁直接。常用于儿童图书。
Sans serif × 没有 一般没有 一般没有 可使用含有较大粗细差异的字体系列来设计。
Script 手写体
Decorative 装饰性的字体,要有限制地使用。

对于字体的使用,作者的原则是:不要把同一个类别中的两种字体放在同一个页面上。因为具有相似性则会造成冲突,所以在没有经验的情况下,这是比较安全的做法。

要实现字体对比,可以从以下几个方面来入手: 大小、粗细、结构、形状、方向、颜色。

金句卡

p.41

关于打破规则本身也有一条 Robin 规则:在打破规则之前必须清楚规则是什么。

p.73

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

  • 不要害怕在设计(或生活)中留有空白,这能让你的眼睛(以及心灵)稍作休息。
  • 不要害怕设计是不对称的。
  • 不要害怕把单词设置得非常大或非常小,不用担心说话声太大或者太小。在合适的场合这都是可以的。
  • 只要最后的结果能支持或强调你的设计或观点,不要害怕让图片太大或太小。

p.151

手写字体就像奶酪蛋糕,要少用,才不会让人觉得恶心。

行动卡

  • 在看设计作品的时候,找出各个设计特性,包括好的和不好的。
  • 找出作品中各个种类字体的例子。
  • 看作品时,注意自己的眼睛会落在什么地方,由什么样的顺序阅读下去,被什么吸引。

阅读用时 3h13m(不完全统计)
笔记用时 1h53m


read

2016-11-29 08:00 +0800