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


对比对于信息的组织至关重要,读者一眼看到文档就能立即理解文档的内容。
例子 4-2 简历信


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


例子 4-4 新闻简报

例子 4-5 海报


例子 4-6 小张宣传单


例子 4-7 广告


例子 4-8 名片


例子 4-9 海报


对比小结
1)对比的根本目的一是增强页面的效果,二是有助于信息的组织。
2)要实现有效的对比,两个元素不能类似,必须截然不同。
3)可以通过:字体选择,线宽,颜色,形状,大小,空间等增加对比。对比是增加视觉效果最有意思也是最让人满意的方法。
参考资料
[1]Robin Williams, The Non-Designer's design book (4th Edition), Chapter 5. Contrast Principle.
网友评论