这本书的 豆瓣地址

我会以一个非设计专业的人的角度来说一说我对这本书的理解以及对我的帮助。

约书亚树的故事

作者举自身的例子：知道一种树的名字叫做 ” 约书亚树 ” 的时候，他认为并没有见过它，并且言之凿凿北方不存在这种树。然而在他所在的街区，竟然 80% 的住户都种了这种树。奇怪的是之前从来都没有注意到。为什么会造成这样的认知呢，书中原文是这样的：

一旦能够说出什么东西的名字，就会很容易注意到它。你就会掌握它，拥有它，使它在你的控制中。

接下来，记住下面提到的四个原则。可能你之前也见过他们，但是因为 ” 约书亚树 ” 的原因，并未认识他们，现在记住他们，应用他们。

这四个原则是：

1. 对比 避免页面上的元素太过相似
2. 重复 让设计中的视觉元素在整个作品中重复出现
3. 对齐 任何东西都不要随意安放
4. 亲密性 彼此相关的项应到靠近，归组在一起

本书的核心观点就是这些，这四个原则是互相关联的，基本不会单独出现。

以下是这个四个点的单独介绍。我在看其他书 (Refactoring UI) 的时候，也有意识的去套用这四个原则，确实大有帮助。

对比

不要害怕让一些项很小，这样不仅可以与更大的项形成对比，还能留出更多的空白！一旦读者把握住重点，只要他们感兴趣，自然会去读这些较小的文字。如果他们不感兴趣，不论你把这些文字设置得多大他们也不会去读。

对比是实现强调的一个很好的手段，任何新闻网站都会通过使用对比这个方法来强调他们想要表达的内容，也可以通过错误的对比来隐藏想要表达的目的。

在开发中常见的对比就是或者使用填充底色来强化主按钮来引导用户点击。

在这个场景中，左侧的通过对比引导用户点击 ” 确认 “，也将两个按钮的差别通过颜色一眼就看出来不同。而第二个没有明显的引导属性，也需要通过阅读按钮的文字之后才能识别点击按钮的结果。

而在不能继续增强的场景中，也可以通过弱化来实现对比。这些例子我会在阅读 Refactoring UI 这本书的文章中加以图片来体现。

重复

可以把重复认为是“一致性”。

不仅在各部分内部，在所有作品之间也要大量使用重复。你肯定希望收信的人知道你就是上周给他企业名片的那个人

狭义的重复就是本书中提到的视觉上的重复，最常见的重复就是写作中的小标题和段落的重复，互联网应用的骨架屏就是很好的体现，隐去内容好让模式更清晰。另外一个常见的就是同一个品牌的不同产品之间的重复，网页和应用是两种不同的载体，通过重复使用品牌 logo 品牌颜色等元素来达成统一的认知。

延伸一点广义上的重复也可以认为是一种模式，给自己创建一个独特的模式，并在写文章或者配图上多次给予读者认知，让他们看到这样的行文模式以及特定的配图样式就知道这来自于创建这个模式的 ” 我 ”。

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

在应用重复这个特点的时候，还有一个要避免过度重复。书中的例子是着装上，颜色重复泛滥会让人感觉不舒服。在有的视频中，一个惊艳的转场，第一次使用惊艳，第二次使用回味，第三次第四次就显得拖沓。这个度很难把握，但是跳出局部整体观看的时候，相信大家对于重复次数的理解上也会有各自的看法。

对齐

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

居中对齐常常会使得页面上没有一个明确的 ” 线 ” 来引导视线。请看下面的例子，左对齐和居中对齐都会给人不够整齐的感觉，但是右对齐右侧边缘看上去有一个 ” 硬 ” 边界，以及一致的两位有效数字，这个边界给布局提供了力度。

找一条明确的对齐线，并坚持以它为基准。如果文本左对齐，则标题和子标题也设置为左对齐。

亲密性

存在关联的项目，视觉上也应该存在相应的关联。而无关的项目不应该于其他元素混合，从而给读者错误的影响。

例如在代码的组织架构上，既可以让全部文件作为一个平级在同一个目录里，也可以根据功能将文件分门别类放在不同的目录里。后者的处理方案带来的好处就是从外向内可以通过分类来快速找到对应的文件，从内向外可以通过一个文件找到和他有关联的文件。

对应书里的例子，通过加粗了标题，增加了非相关性内容的间距。

你在看第一个图的时候是不是视线自上而下的看，没法跳过，因为不知道互相的联系，如果跳过了可能会错过。第二图的看的时候可以自上而下的通过加粗的标题跳着看，因为读者知道块与块之间的差异，关心的不在这个块里就可以跳过细节看下一个了。这也是书里提到的通过亲密性来引导用户的视线。

不注意处理亲密性，可能会让画面混乱，也会造成阅读的动线不明确，东一锤子西一榔头。适当的处理，让相似的信息聚合在一起，减少用户视线的跳动，也能突出重点。

以上就是书中提到的设计四原则，原书后面还有颜色和字体设计的一些内容。这些对于非设计从业者至少我是很难深入理解，而且今后的工作和生活应用场景也不多，所以我就没有做过多的介绍。

感兴趣的读者可以自行找到图书并观看。

本文行文仓促，也是为了让博客有第一篇文章，所以内容上不够饱满，配图也有点粗糙。接下来尽量重新编排一下。感谢阅读~