设计原则 IV - Contrast 对比

对比原则指的是，页面上的不同元素之间要有对比效果，而且对比必须强烈。如果两个项不完全相同，就应该使之截然不同。

对比不但可以用来吸引眼球，还可以用来组织信息，清晰层级，在页面上指引读者，而且制造焦点。

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

例子 4-1 新闻简报

设计A 一份简介明快的新闻简报，但是对比过弱。 设计B 标题和子标题使用了一种更突出、更粗的字体。黑色条纹增强了对比。

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

例子 4-2 简历信

设计A 平淡无奇的简历，对齐还有错误 设计B 红色强调了头像，标题

字体对比是最容易实现的对比。此外，还可以利用线，颜色，元素之间的间隔，材质等形成对比。

例子 4-3 字体对比

在下图的改进设计中，标题与正文的对比更加强烈。 利用粗线进行另一种对比的方法。

例子 4-4 新闻简报

这个设计中除了字体对比外，水平方向的长题目与又高又窄的垂直列之间也存在一种对比

例子 4-5 海报

设计A 文字太长，看起来非常费劲 设计B 通过视觉元素的组合，对齐和重复标题原则重新安排了页面。标题和正文用不同的字体及粗细表示体现了对比

例子 4-6 小张宣传单

设计A 干净、简洁的设计 设计B 增大了标题字体，反色效果对比非常强烈

例子 4-7 广告

设计A 比较乏味的设计 设计B 标题的粗条纹强调，截取的一句话与其他形成了对比，同时重复性呼应标题。

例子 4-8 名片

设计A 对比有点不够 设计B 取消了淡紫色背景，增强了标题

例子 4-9 海报

设计A 彩带框强调了副标题，紫色色块强调了标题，灰绿色色块强调了联系方式，这些元素之间的对比能够让读者轻松地看出信息的结构 设计B 质朴的设计。小而优雅的字体和大面积空白之间的对比

对比小结

1）对比的根本目的一是增强页面的效果，二是有助于信息的组织。

2）要实现有效的对比，两个元素不能类似，必须截然不同。

3）可以通过：字体选择，线宽，颜色，形状，大小，空间等增加对比。对比是增加视觉效果最有意思也是最让人满意的方法。

参考资料

[1]Robin Williams, The Non-Designer's design book (4th Edition), Chapter 5. Contrast Principle.