对比原则指的是,页面上的不同元素之间要有对比效果,而且对比必须强烈。如果两个项不完全相同,就应该使之截然不同。
对比不但可以用来吸引眼球,还可以用来组织信息,清晰层级,在页面上指引读者,而且制造焦点。
可以采用多种方式产生对比:比如大字体和小字体的对比,典雅的旧式体和加粗的无衬线现代体产生对比:细线与粗线的对比,冷色与暖色的对比,平滑材质和粗糙材质的对比,水平元素(如很长的一行文本)和垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。
例子 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.
网友评论