Question

对比是为页面增加视觉效果的最有效的途径之一，很容易吸引读者去看一个页面；另外对比还能在不同元素之间建立一种有组织的层次结构。要记住一个重要规则：要想实现有效的对比，对比就必须强烈。千万不要畏畏缩缩。

如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。这就是关键，Robin对比原则指出：“如果两个项不完全相同，就应当使之不同，而且应当是截然不同。”

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

不过，千万不要畏缩。不应该用12点大小的字体与14点大小的字体进行对比。也不要用0.5点的线与1点的线来对比。此外，深棕色与黑色的对比也是不合适的。所以一定要当心。

如果你的桌子上放着后面这两个“新闻简报”，你会先拿起哪一个呢？它们的基本布局都是一样的，都很简洁明了。页面上的信息也是相同的。这里实际上只有一个区别：第二个新闻简报的对比做得更充分。

这个新闻简报简洁明快，不过这里没有什么能吸引你的眼球。如果无法吸引视线，就没有人会去读它。

下面的对比就很明显了。我在标题和子标题中使用了一种更突出、更粗的字体。这里还在新闻简报的题目上重复了这种字体（还记得吗？这是重复原则）。由于题目从全部大写改为混合有大小写，所以现在能使用一种更大更粗的字体，这还有助于突出对比效果。另外，由于现在题目如此突出，还可以沿顶部在题目下加一个黑条，再重复这种黑色来强调对比。

你是不是得承认，与前一页相比，这个页面更能吸引你的眼球？

对比对于信息的组织至关重要，读者一眼看到文档就能立即理解文档的内容。

这是一封相当典型的自荐信。信息是完备的，如果有人确实想去读它的话，当然可以了解到其中的信息，不过这样一封自荐信肯定无法吸引你的注意。

注意以下问题：

页面上存在两种对齐方式：居中和左对齐。

各段之间的空间（间隔）太相似。

布局不一致——日期有时在左边，有时在右边。记住，一致性才会产生重复性。

职位与正文混杂在一起。

注意，如果使用了对比，不仅页面更吸引人，文档的目的和组织也会更一目了然。

上述问题很容易修正。

只保留一种对齐方式：左对齐。在上面可以看到，如果只使用一种对齐，并不是说所有元素都要沿着同一个边界对齐，这只是说，所有一切都要采用同样的对齐方式。上面的左对齐文本很明确，而且互相促进（对齐和重复）。

明显的标题，这样就能立即知道这个文档是什么，有哪些要点（对比）。

段之间的间隔比各段内文本行之间的间隔大（空间关系对比；亲密性）。

学位和职位都用粗体（标题字体的重复），这种强烈对比能使你很快抓住要点。

要增加有意思的对比，最容易的方法就是实现字体对比（这也是本书第二部分的重点）。不过不要忘记，还可以利用线、颜色、元素之间的间隔、材质等形成对比。

如果在列之间使用一条极细的线，需要另一条线时就应该使用2点或4点的粗线，不要在同一个页面上使用0.5点和1点的线。如果要使用另一种颜色来突出效果，一定要确保颜色有反差，对应黑色正文，深棕色或蓝黑色就不能有效地形成对比。

字体之间和线之间确实有一点对比，不过这里的对比很微弱。

这些线确实有意设置为两种不同的粗细吗？是不是只是不小心弄错了？

现在字体之间强烈的对比使它更生动，更引人注目。

由于线粗细有了更强烈的对比，再不会有人认为这可能是一个失误了。

这只是线的另外一种用法（这条粗线隐藏在了白色字体的后面）。

运用对比，整个表都更鲜明，更精美；你很清楚它从哪里开始，到哪里结束。

如果新闻简报中使用了又高又窄的列，就应当在水平方向有一些突出的标题，在页面上形成对比。

将对比与重复相结合，如页码、标题、项目符号、线或空间布局，从而在整个出版物中建立一种强烈的统一标识。

这个明信片中除了字体的对比外，水平方向的长题目与又高又窄的垂直列之间也存在一种对比。这些窄列不仅是一种重复元素，同时也是对比的例子。

下面的例子是一个典型的传单。它最大的问题是，文本行太长读起来很费劲，没什么内容能吸引读者的眼球。

创建一个可以吸引读者注意的标题。当读者的眼光投到页面上，就算他不打算阅读全部内容，但如果在文本中采用对比，读者在浏览时还是会将目光停留在内容上。采用严格的对齐方式并使用亲密性来加强页面的布局。

从哪里开始改进这个传单呢？

行太长了，读者自己就读不下去了。如果像这样有很多内容，就像前面和后面那两幅图那样采用多列。

将关键短语设为粗体，视觉上的对比可以吸引读者的目光。

也许以一段介绍性的文字开头，读者会对传单的目的有一个大致的了解。很少有人愿意读一块一块的信息，所以有必要通过一个介绍性路径来引导读者的目光。

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

注意，这里还用到了其他一些原则：亲密性、对齐和重复。它们相互协作，建立了整体效果。设计页面时很少只使用某一种原则。

该传单是黑白打印的，所以我们采用不同灰度的装饰并为标题增加点花样。

让你的眼睛随意在文档中浏览——你能感到是如何被吸引到粗体内容上的吗，你是如何下意识地去读这部分内容的？如果你能吸引与你的内容无多大关系的人，那么他们当中许多人都会下意识地去读更多的内容。

在设计原则中，对比最有意思，同时效果也最为显著！只需几个小小的改动，就能把一个普普通通的设计变成一个精美的设计。

作为一本好书的摘要，这个宣传单还是略显平淡。现在来看增加了一些对比之后的广告（下一幅图）。你能说出至少增加了哪4种对比吗？

这两个宣传单中哪一个更有“回头率”呢？这正是对比的力量：它会给人一种“更强烈的印象”。只需一些小小的改动，差别却是惊人的！

把标题从大写改为小写，可以留出更多空间，这样就能让标题更大，更粗。

既然这是一本书的一个广告，我们就把书显示得更大。

在重复方面，我从书中选择了非常粗的字体。

我把Cynthia（作者）的像片放到了卡片的另一面，因为这一面内容实在是太多了。

当然并不是只需要强调对比，不过，通常你都会发现，如果增加了对比，其他概念显然就相形见绌了。例如，对比元素有时可以用作重复元素。

这个广告是从当地报纸摘录的。除了居中对齐、缺乏亲密性和重复，以及字体过于乏味等问题外，这个广告显然缺少对比。设计中最能吸引人阅读的就是对比了。小狗的脸很可爱，不过仅此而已。

不错，这里确实有一点对比和重复（你能把它们指出来吗？），不过太弱了。设计者也想努力做出对比，但是他太过犹豫。

我相信你肯定看过（或者自己做过）很多类似的东西。没关系。现在你应该知道怎样才能做得更好。

（请注意，可爱的小狗朝着与商店的名字相反的方向看。读者的眼睛总是随着页面上任何人或动物的眼睛看过去。所以要确保将读者的目光吸引到页面的焦点内容。）

尽管下面的广告与前一页上的广告看上去简直是天壤之别，但实际上这里只是按部就班地应用了前面介绍的4大基本原则而已。

我们采取了下面的步骤来改进上一页中的广告，并把它逐步修改为上面的样子。

去掉Times Roman和Arial/Helvetica字体。把这些字体干脆从你的字体选择中去除。相信我没有错。（另外把Sand也去掉）。

去掉居中对齐。我知道这么做很难，但是必须如此。等你更有眼光之后，可以再做一些居中对齐的尝试。

找出页面上最有意思的东西，或者最重要的东西加以强调！在这里，最有意思的就是小狗的脸，最重要的是商店的名字。为商店做广告时，如果没人能说出商店叫什么，那这个广告还有什么意义呢？把最重要的东西放在一起，这样读者就不会漏掉重点。

把信息分组为一些逻辑组。合理利用空间，将各项分开或者联系起来。

找出可以重复的元素（包括对比的元素）。

最重要的是，要增加对比。以上可以看到黑白对比、灰度对比、字体大小和字体的对比。

一次尝试一个概念。相信你自己的作品也会让你惊异不已。

下面的例子取自讨论亲密性的第2章。它本身很简洁明快，不过注意下一页，看看增加小小的对比能带来多大的差别。

这个网页上已经有一些对比，不过通过对另外一些元素应用对比原则，还可以进一步做出改进。

希望你已经看出，对比对于设计作品来说是何等重要，另外也应该能看出增加对比实际上是何等容易。只需要有意识地去做就可以了。有了对比之后，对比元素就可以用作重复元素。

我所增加的只是一点黑色背景。这个页面看起来更生动，更有趣。