> For the complete documentation index, see [llms.txt](https://gitbook.fantasticmao.cn/tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.fantasticmao.cn/tech/javascript/xie-gei-da-jia-kan-de-she-ji-shu-bi-ji-she-ji-yuan-ze.md).

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

> 摘自 [《写给大家看的设计书》](https://book.douban.com/subject/26664522) 第一部分 —— 设计原则。

## 引言

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

1. **对比（Contrast）**

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

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

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

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

## 亲密性

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

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

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

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

## 对齐

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

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

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

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

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

## 重复

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

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

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

## 对比

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

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

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

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

## 总结

一个关于设计（同时也是生活）的更一般的指导原则是：**不要畏畏缩缩**。

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