作者： 阮一峰

日期： 2010年10月16日

上个月，我贴了《图形化简历》。

几天后，就收到了秋叶老师的来信，希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》，眼下正在写续集。

我看了新书的样章，觉得很不错，有些内容很值得分享。

====================================

首先，我们先看一个例子。良好的设计如何使得一个平庸的文档脱胎换骨。下面是一张大学生的求职简历，再普通不过了，想要引起招聘经理的注意，恐怕很难。

秋叶老师对它进行了简单的排版，还是一张表格，还是黑白配色，没有使用任何图形元素，效果却完全不一样了。

真是令人眼前一亮，不由自主地想多看几眼。这就是优秀设计的作用：它让你脱颖而出。

====================================

秋叶老师把他的排版心得，总结为六个原则：对齐，聚拢，重复，对比，强调，留白。我是这样理解的：

一、对齐原则

　　相关内容必须对齐，次级标题必须缩进，方便读者视线快速移动，一眼看到最重要的信息。

二、聚拢原则

　　将内容分成几个区域，相关内容都聚在一个区域中。段间距应该大于段内的行距。

三、留白原则

　　千万不要把页面排得密密麻麻，要留出一定的空白，这本身就是对页面的分隔。这样既减少了页面的压迫感，又可以引导读者视线，突出重点内容。

四、降噪原则

　　颜色过多、字数过多、图形过繁，都是分散读者注意力的"噪音"。

五、重复原则

　　多页面排版时，注意各个页面设计上的一致性和连贯性。另外，在内容上，重要信息值得重复出现。

六、对比原则

　　加大不同元素的视觉差异。这样既增加了页面的活泼，又方便读者集中注意力阅读某一个子区域。

====================================

下面用一个PPT的例子，演示排版六原则。

上面这张ppt有两个毛病。一是字数太多，抓不住重点；二是右边没有对齐，使得读者的视线只能一行行地从行首到行尾移动，不能直上直下。

现在进行修改。

第一步，根据"聚拢原则"，将六点分成六个区域。

第二步，根据"降噪原则"，将每一点分成"小标题"和"说明文字"两部分。

第三步，根据"对齐原则"，将每一个部分、每一种元素对齐。

第四步，根据"对比原则"，加大"小标题"和"说明文字"在字体和颜色上的差异。

第五步，根据"留白原则"，留出一定的空白。

页面的可读性大大增加。

（完）

作者： 阮一峰

日期： 2010年10月16日

上个月，我贴了《图形化简历》。

几天后，就收到了秋叶老师的来信，希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》，眼下正在写续集。

我看了新书的样章，觉得很不错，有些内容很值得分享。

====================================

首先，我们先看一个例子。良好的设计如何使得一个平庸的文档脱胎换骨。下面是一张大学生的求职简历，再普通不过了，想要引起招聘经理的注意，恐怕很难。

秋叶老师对它进行了简单的排版，还是一张表格，还是黑白配色，没有使用任何图形元素，效果却完全不一样了。

真是令人眼前一亮，不由自主地想多看几眼。这就是优秀设计的作用：它让你脱颖而出。

====================================

秋叶老师把他的排版心得，总结为六个原则：对齐，聚拢，重复，对比，强调，留白。我是这样理解的：

一、对齐原则

　　相关内容必须对齐，次级标题必须缩进，方便读者视线快速移动，一眼看到最重要的信息。

二、聚拢原则

　　将内容分成几个区域，相关内容都聚在一个区域中。段间距应该大于段内的行距。

三、留白原则

　　千万不要把页面排得密密麻麻，要留出一定的空白，这本身就是对页面的分隔。这样既减少了页面的压迫感，又可以引导读者视线，突出重点内容。

四、降噪原则

　　颜色过多、字数过多、图形过繁，都是分散读者注意力的"噪音"。

五、重复原则

　　多页面排版时，注意各个页面设计上的一致性和连贯性。另外，在内容上，重要信息值得重复出现。

六、对比原则

　　加大不同元素的视觉差异。这样既增加了页面的活泼，又方便读者集中注意力阅读某一个子区域。

====================================

下面用一个PPT的例子，演示排版六原则。

上面这张ppt有两个毛病。一是字数太多，抓不住重点；二是右边没有对齐，使得读者的视线只能一行行地从行首到行尾移动，不能直上直下。

现在进行修改。

第一步，根据"聚拢原则"，将六点分成六个区域。

第二步，根据"降噪原则"，将每一点分成"小标题"和"说明文字"两部分。

第三步，根据"对齐原则"，将每一个部分、每一种元素对齐。

第四步，根据"对比原则"，加大"小标题"和"说明文字"在字体和颜色上的差异。

第五步，根据"留白原则"，留出一定的空白。

页面的可读性大大增加。

（完）

作者： 阮一峰

日期： 2008年7月21日

制作网页的过程中，我一直不知道应该如何配色。

我的意思是，我不知道应该选择哪些颜色放在一起，完全凭感觉。于是昨天，我在网上找了一些资料，希望找到理论指导。

结果很失望。颜色理论研究的都是颜色的本质，至于颜色搭配，最终靠的还是个人感觉。说到底，Choosing colors is art, not science。不过，我还是记录一下吧，其中一些东西还是很有趣的。

=================

1. Color Wheel

所谓Color Wheel，就是将一系列颜色，有次序地通过一个圆盘的形式，展现出来。

它的产生方式是，首先列出三原色（PRIMARY COLORS）：红、黄、蓝。

然后，二二混合，产生二级颜色（SECONDARY COLORS）：绿、橙、紫。

接着，继续二二混合，又产生6种三级颜色（TERTIARY COLORS）：黄橙、红橙、红紫、蓝紫、黄绿、蓝紫。

通过不断混合相邻颜色，产生新的颜色，最终形成一个全域的Color Wheel。

2. 类似色和互补色

12色的Color Wheel上任意三个相邻的颜色，被称为类似色（analogous colors）。通常认为，它们放在一起会很和谐。

Color Wheel对角线上的两种颜色，被称为互补色（complementary colors）。通常认为，它们放在一起，会形成对比效果。

此外，如果要寻找三种互相平衡的颜色，可以选择12色的Color Wheel上任意三个三角对立的颜色（Triad）。

如果要寻找三种颜色，其中二种互相类似，另一种与它们形成对比，则可以选取互补色两侧相邻的颜色。（split-complementary colors）

3. 颜色模型

常用的颜色模型有三种，分别是RGB、CMYK、HSV模型。

4. RGB模型

RGB是Red、Green和Blue的缩写，任意颜色都可以由红、绿、蓝这三种颜色不同比例混合后产生。这个模型主要用于电子显示屏的颜色显示。

RGB模型通常用三个十六进制数来表示颜色，FFFFFF代表100%的红色、100%的绿色和100%蓝色混合，产生白色；000000代表0%的红色、0%的绿色和0%蓝色混合，产生黑色。

5. HSV模型

H指的是Hue（色调），它是"颜色"的同义词。

S指的是Saturation（饱和度），它指的是颜色的纯度，即颜色中含有灰色（gray）的程度。饱和度越高，颜色越纯；饱和度越低，颜色中灰色成分越大。任何颜色，饱和度变成最小值时，都会变成灰色。

V指的是Value，即颜色中白色的成分。这个值越大，颜色就越白越亮，这个值最小，颜色就越黑越暗。最大值时，所有颜色都变成白色，最小值时，所有颜色都变成黑色。

HSV模型是通过调节这三个值来标识颜色。它通常是一个color wheel的形式，所有边缘的颜色都是饱和度最高的颜色，越向圆心饱和度越小。Hue通过角度值选取，另有一个亮度轴，来选取Value值。

6.CMYK模型

这个模型主要用于印刷业，就是指用cyan, magenta, yellow, black这四种颜料混合，产生其他各种颜色。

印刷品上的图案，仔细看其实都是由一个个小点构成，而每个小点又都是采用四色套印，重合叠加后产生各种颜色的效果。

（完）