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

2015年回到南宁，忘了是什么机缘，我花了一个月自学了Photoshop，后来拍婚纱照自己精修了照片、设计了相册，特别有成就感，于是特别想转行去做UI设计，还花3000块报了一个UI设计学习班……虽然最后我并没有转行去做UI设计，但那段时间学习了很多UI设计知识，对我在产品及原型设计上的帮助很大，即便不能做出惊世骇俗的大作，但至少在日常工作的细节中能“提醒”我保持设计“美感”，让输出物更加“高可读”。

《写给大家看的设计书》这本书是面向没有设计背景人群的，核心是解决“如何才能让页面看上去更好一些”这个问题，内容简单、观点明了，而且非常实用！不仅可以应用在原型设计上，还包括PPT设计、文档设计等工作。整本书是通过大量的案例直观地展示效果，有时间还是要亲自看下案例，可以获取一些感性知识和练习。

以下是我总结的核心内容大纲：

要点内容总结：

一、设计原则

（一）亲密性

1. 亲密性原则定义

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

2. 亲密性原则目的和重要性

● 亲密性的根本目的是实现组织性

● 首先，页面会变得更有条理。其次，你会清楚地知道从哪里开始读信息，而且明白什么时候结束。另外，“空白”（字母以外的空间）也会变得更有组织。

******  个人感受：亲密性原则能高效地呈现出内容结构******

3. 亲密性原则应用建议

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

（二）对齐

1. 对齐原则定义

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

2. 对齐原则目的和重要性

● 对齐的根本目的是使页面统一而且有条理

● 如果页面上的一些项是对齐的，这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的，但在你眼里（以及在你的心里），它们之间也会有一条看不见的线把彼此连在一起。

******  个人感受：对齐除了能让元素之间无形关联，还能让内容显得整洁、有序 ****** 

3. 对齐原则应用建议

● 在得到更多培训之前，一定要坚持一个原则：只使用一种对齐方式。页面上只使用一种文本对齐，所有文本都左对齐，或右对齐，或者全部居中

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

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

（三）重复

1. 重复原则定义

● 重复原则指出：设计的某些方面需要在整个作品中重复。

● 重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等

2. 重复原则目的和重要性

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

● 设计中视觉元素的重复可以将作品中的各部分连在一起，从而统一并增强整个作品，否则这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用，对于多页文档的设计更显重要

******  个人感受：重复原则，不仅仅可以实现内容统一，还有利于塑造风格特征 ****** 

3. 重复原则应用建议

要避免太多地重复一个元素，重复太多会让人讨厌

（四）对比

1. 对比原则定义

● 对比原则指出：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。

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

2. 对比原则目的和重要性

● 对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面

● 对比的根本目的有两个，这两个目的相辅相成，无法分开。一个目的是增强页面的效果，如果一个页面看起来很有意思，往往更有可读性。另一个目的是有助于信息的组织。

******  个人感受：对比可以体现区别、冲突，可以让矛盾或者重点更突出 ******  

3.对比原则应用建议

● 

不要将一种粗线与一种更粗的线进行对比。

● 

不要将棕色文本与黑色标题建立对比。

● 

要避免使用两种或多种类似的字体。

二、 颜色运用

书中用一个章节对颜色及颜色关系做了定义说明，如三原色、色轮、单色、互补色、三色组（基础三色组和间色三色组）、分裂互补三色组、类似色，以及暗色和亮色（色质）、冷色和暖色等。

作者应该是想说颜色搭配选择，但没给出更多建议，有兴趣的可自行了解，不过我在这部分发现了一个很有趣的观点：

有没有一些颜色放在一起不太合适呢？如果你看过 Robin 的 Wildflower Theory of Color，对此的答案是否定的。

三、 字体设计

在这部分，作者主要讲了5块内容：

（1）字体设计基本原则，很多，就不一一罗列了，个人认为重要的几个：

● 为了强调而把词语变成全部大写并不一定是最好的办法

● 跟随在题目或小标题后的首段不需要缩进

● 把文字放进方框里，那就要在四周都留足够的空间

（2）字体搭配呈现的效果：

●

协调 ：如果只使用一种字体，页面上的所有元素都采用同样性质的字体，这种设计就是协调的

● 冲突：如果在同一个页面上设置了两个或多个类似的字体，它们并非完全不同，但也不完全相同，这个设计就是冲突的

● 对比：字体对比有 6 种明确的不同方式：大小、粗细、结构、形状、方向和颜色

（3）介绍了6类字体（旧式体、现代体、粗衬线体、无衬线体、无衬线体、手写体、花体）及其特点

作者在《写给大家看的字体书》有更详细的说明

（4）并且在字体结构搭配给出了一些建议

● 不要把同一个类别中的两种字体放在同一个页面上

● 排字对比有一个原则，要求必须选取两个不同字体类别中的字体

● 手写体和斜体形状类似，不要结合使用

（5）然后在字体对比设计上的建议：

1. 字体大小

● 建议不要全部使用大写

● 许多印刷符号（如数字、& 符号或引号）设置得很大时会非常漂亮

2.字体粗细

● 要粗细字体对比，而不是中粗字体的对比

3.字体结构对比

● 不要把同一个类别中的两种字体放在同一个页面上

● 排字对比有一个原则，要求必须选取两个不同字体类别中的字体

● 手写体和斜体形状类似，不要结合使用

4.字母形状

● 全大写 vs. 全小写是一种形状的对比

● 罗马体 vs. 斜体是一种形状的对比

5.字体方向

字体方向设计可以有两种理解：

● 文字有一定倾斜度

● 一行文本表现为水平方向。瘦高的一列文字表现为垂直方向

6.文字颜色

● 除了普通意义上的“多姿多彩”的颜色，排版人员通常称页面上的黑白文字有颜色

● 很细、很薄的字体中字母间间距和行间距较大，这会创建一种非常淡的颜色

最后想说一下，从我个人工作经验来看，只要掌握了四个设计原则和字体对比设计的一些技巧，就足够将产品经理的日常工作做好了，其他内容可做拓展了解。