作为一个前端，为什么想要分享一篇设计的文章给前端开发呢？ 这里我引用天猫前端开发负责人鄢学的一段话表达我的想法。
“如果我懂得设计，我肯定可以做得更好更专业，并能够提出建设性的意见。我想，类似的场景不仅适于我，也一定会适于你。所以，当我看完这本《写给大家看的设计书》时，我认为它是一本可以推荐给大家看的设计书。”
书中的内容并不多，本文也只是把书中设计四大基本原则和颜色运用抛砖引玉一下，如果看完本文还有兴趣的朋友，可以下载原文阅读~
一、设计四大基本原则
1、亲密性（Proximity）
观察上面两幅图，第二幅图比第一幅图更直观地能感受到：这两个人是有联系的。 也即所谓亲密性原则，就是如果多个项相互之间存在很近的亲密性，它们将成为一个视觉单元，而不是多个孤立的元素。
1.1、亲密性的根本目的
实现组织性。利用亲密性原则，只需简单地将相关的元素分在一组建立更近的亲密性，就能自动实现条理性和组织性。如果信息很有条理，将更容易阅读，也更容易被记住。
1.2、如何实现
实现亲密性原则，可以利用空白来实现。 微微眯起眼睛，统计眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过 3 ～ 5 个（当然，这取决于具体情况），就要看看哪些孤立的元素可以归在一组建立更近的亲密性，使之成为一个视觉单元。
1.3、要避免的问题
- 使用亲密性原则时，要注意避免一个页面上有太多孤立的元素。
- 不要在不同元素之间留出同样大小的空白，除非各组同属于一个子集。
- 标题、子标题、图表标题、图片能否归入其相关材料？在这个问题上一定要非常清楚（哪怕只有一点含糊都要尽量避免）。
- 不属于同一组的元素之间不要建立关系！如果元素彼此无关，要把它们分开。
1.4、例子
下面我们利用亲密性原则来对比下面两幅图，我们可以得出什么？
观察上面两幅图，右图相比左图，利用空白将有关联的部分划分在一起。 从右图我们可以清晰的得到:
- 这是三场读书会。因为三场读书会之间的空白是相同的，显示出这三组之间有某些关系。
- 虽然底部的文字小到无法阅读，你也知道那一定不是第四场活动，因为它和其他区块之 间的亲密性是不同的。
2、对齐（Alignment）
在设计中，统一性是一个重要的概念。尽管这些孤立元素在页面上的物理位置可能并不靠近（利用空白分割开），但是通过适当放置（对齐），可以让它们看上去是有联系而且相关的，并且与其他信息统一。
2.1、根本目的
使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来，并把它们放在一个玩具箱中。
2.2、 如何实现
要特别注意无论元素放在哪里，应当总能在页面上找出与之对齐的元素，尽管这两个对象的物理位置可能相距很远。
2.3、要避免的问题
- 要避免在页面上混合使用多种文本对齐方式（也就是说，不要将某些文本居中，而另外一些文本右对齐）。
- 另外，要着力避免居中对齐。这里并不是完全杜绝使用居中对齐，有时可以有意地选择这种对齐方式，但是不要把它作为默认选择。
2.4、例子
下面我们利用对齐原则来完成下面这个例子：
1、 左图：文本本身居中对齐，并在页面上居中放置。尽管这是一种合法的对齐方式，但边界是“软”的；实在看不出那条“对齐线”的强度。
2、 右图：这与前面有同样的逻辑布局，不过现在采用右对齐方式。你能看出右边的“硬”边界吗？尽管这是一条看不见的线，但它很明确，连接了这两组文本的边界。现在确实可以看出边界。正是这个边界的强度为布局提供了力度。
3、通过上面例子的对比，可明显得知，作为一个初学者，我们应该尽量避免居中对齐。虽然要完全摒弃居中对齐会很难，但你必须从一开始就强制自己避开它。而是通过充分利用亲密性，并结合明确的右对齐或左对齐来布局页面。
那么既然不推荐居中对齐，那是不是页面上都不能使用居中对齐呢？其实，并不然，我们来看下面这个例子：
- 明显而有意为之的居中对齐效果最好。
- 当对齐经过精心策划而又明确时，你就可以对其他元素充分发挥创造力，作品看起来仍然显得匠心独具，而这些元素也不会像是莫名其妙地散落在页面上一样。
如果页面上的布局是文字紧挨着图片，我们改如何布局呢？
1、 左图： 虽然文本的左边有一条明确的线。另外沿着“照片”的左边也有一条明确的线。不过，在文本和照片之间“截留”了部分空白，而且 空白的形状很难看，从绿色虚线上就能看出来。截留的空白将这两个元素分隔开了。
2、右图: 文本右侧的线与照片左边的 线相互挨着，使得这两条对齐线更为明确，正如绿色虚线所示。空 白现在漂移到了左边。
3、建议：如果有一张照片或图片（有明确的直边），可以沿着照片的这个直边与文本的平边对齐。
你可能会说这张卡片上的信息已经根据亲密性原则被逻辑分组到不同单元了。 明确的对齐可以更加有效地组织信息，而且也为那个可爱的狗狗形象留下了足够的空间。并且现在空白部分也更有秩序了。 但是看起来仍然有些业余，为什么呢？因为在这张小小的卡片上有三种不同的对齐方式（居中、左对齐、右对齐）。
明确的对齐可以更加有效地组织信息，而且也为那个可爱的狗狗形象留下了足够的空间。并且现在空白部分也更有秩序了。
3、重复（Repetition）
设计中视觉元素的重复可以将作品中的各部分连在一起，从而统一并增强整个作品，否则这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用，对于多页文档的设计更显重要（对此我们通常称之为保持一致）。
3.1、根本目的
重复的目的就是统一，并增强视觉效果。不要低估页面视觉效果的威力，如果一个作品看起来很有趣，它往往也更易于阅读。
3.2、如何实现
重复可以认为是保持一致性。设计页面时，可以看看有没有可能增加一些纯粹为建立重复而设计的元素。比如，是不是有一个编号项列表？可不可以使用另外一种字体或逆序数字，然后对出版物中的每一个编号列表都重复同样的处理？最初，可以只是找出现有的重复，然后将其加强。熟悉了这种思想之后，再开始创建新的重复元素，来增强设计的效果并提高信息的清晰度。举个例子，重复就像是一位女士穿着一件可爱的黑色晚礼服，戴着一顶别致的帽子，她可能会用红色高跟鞋、红色口红和一朵*红色小花来突出她的晚礼服。
3.3、要避免的问题
页面设计要避免太多地重复一个元素，重复太多会让人讨厌。要注意对比的价值（详细请看下一章的章节）。例如，如果这位女士想穿黑色晚礼服，配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣，重复就太滥了，现在的对比不再有统一的效果，感觉上也让人不太舒服，太多的重复将混淆重点。
3.4、例子
从下面这张图中找出重复的元素：
- 明显的重复元素，如 粗字体、 细字体、方块项目符号、 缩进、 间隔、对齐。
- 重复有助于组织信息，可以帮助读者浏览各个页面，也有利于将设计中单独的部分统一起来。即使在一个只有一页的文档中，重复元素也可以建立一种连续性，将文档“整个捆在一起”。如果在创建一个多页的、作为一个精美包装一部分的文档，充分使用重复就很关键。
当然，重复可以让页面更统一，增强视觉效果，但我们也不能滥用它，比如下面这个例子：
- 左图：读到信息的末尾时，现在你的视线会向哪里移？它会在粗体元素之间来回跳吗？可能会， 这正是重复的主旨，它能把整个作品联系在一起，提供统一性。
- 右图:读到信息的末尾时，你的视线是不是会在名片上四处漫游？
4、对比（Contrast）
在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到有对比的事物。如果页面上放两个不完全相同的元素（比如有两种不同字体，或者有两种不同线宽），它们就不能类似，要实现有效的对比，这两个元素必须截然不同。
4.1、根本目的
对比的根本目的有两个，这两个目的相辅相成，无法分开。
1、一个目的是增强页面的效果，如果一个页面看起来很有意思，往往更有可读性。
2、另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织，以及从一项到另一项的逻辑流程。对比元素不能让读者混淆，也不能错误地强调重点（即本不该是重点的元素）。
4.2、如何实现
可以通过字体选择、线宽、颜色、形状、大小、空间等来增加对比。增加对比很容易，途径有很多。重要的是：对比一定要强烈。
4.3、要避免的问题
如果你想形成对比，就加大力度。如果各个项不完全一样，干脆让它们截然不同！
1、不要将一种粗线与一种更粗的线进行对比。
2、要将棕色文本与黑色标题建立对比。
3、要避免使用两种或多种类似的字体。
4.4、例子
下面我们利用重复原则来做下面这个例子：
右图：如果无法吸引视线，就没有人会去读它。右图的对比就很明显了。在标题和子标题中使用了一种更突出、更粗的字体。由于题目从全部大写改为混合有大小写，所以现在能使用一种更大更粗的字体，这还有助于突出对比效果。另外，由于现在题目如此突出，还可以沿顶部在题目下加一个黑条，再重复这种黑色来强调。
二、颜色运用
1、色轮
1.1、互补色。
色轮上相对（即完全对立）的颜色为互补色。
1.2、三色组。
彼此等距的三种颜色通常会形成一个让人愉悦的三色组。红色、黄色和蓝色就是一种极其流行的颜色组合，儿童产品通常都采用这种组合。由于这是三基色，所以这种组合也称为基色三色组。也可以尝试使用绿色、橙色和紫色构成的间色三色组，尽管不那么常用，但出于以上原因，这种组合也让人很舒服。
1.3、分裂互补三色组。
另一种形式的三色组称为分裂互补三色组。从色轮的一边选择一种颜色，再在色轮上找出它对面的互补色，不过并不直接使用这个互补色，而是使用该互补色两侧的颜色。这样得到的组合会有一种更为细致的颜色边界。以下是这种组合的两个例子。
1.4、类似色。
类似色组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色，它们都有相同的基础色，这就形成了一个协调的组合。用不同的亮色和暗色组合一组类似色（亮色和暗色将在下一部分解释），效果相当醒目！
2、暗色和亮色
到目前为止，我们使用的基本色轮只涉及纯“色调”，也就是纯色。还可以向不同 色调增加黑色或白色，这样能大幅扩展这个色轮，相应地丰富我们的选择。
-
1、 纯色就是色调。
-
2、向色调增加黑色就构成一个暗色。
-
3、向色调增加白色就构成一个亮色。
3、单色
单色组合由一种色调及其相应的多种亮色和暗色组成。你可能对单色主题已经很熟悉了，所有黑白照片都是由黑色（即“色调”，不过实际上黑色并不是一种“颜色”）和多种亮色或者有不同灰度的暗色组成。
我们已经知道，这种组合能呈现多么美丽的图画。所以，可以在设计项目里使用一种单色组合，尽享其中的快乐。
4、注意色质
如果由于颜色组合而导致发生视觉抖动，这肯定只有一个原因，那就是色质过于接近。 色质是指某种颜色的特定明暗度、深浅度或色调。
在上面例子中可以看到，如果色质很接近，看上去会有些模糊不清，对比太过微弱。如果在一个复印机上复印下面这些例子，将无法看清文本。如果设计要求使用有类似色质的色调，一定要尽力避免它们挨在一起，另外每种色调的用量也不要完全相同。
5、暖色与冷色
颜色往往要么是暖色（这说明其中包含红色或黄色），要么是冷色（说明其中包含蓝色）。可以通过增加一些红色或黄色将某些颜色“加热”，如灰色或黄褐色。与之相反，也可以对颜色增加不同程度的蓝色对其“降温”。 冷色趋于做背景色，而暖色是趋进型的。暖色不费多大功夫就能产生效果，红色和黄色能立即映入你的眼帘。所以，如果要组合暖色和冷色，一定要少用些暖色。由于冷色是后退型的，所以使用（有时则必须使用）更多的冷色才能产生效果或形成有效的对比。
右图：将标题改为冷色（蓝色）后，同时强调了标题（通过加粗），又强调了内容（通过暖色）。
