为了使网页的整体画面呈现稳定协调的感觉,以便充分的掌握其规律来更好的分析学习,上次我们介绍了视觉角色主次位置的几个概念,本节我们介绍色彩的对比。
对比与调和就是形式美的变化与统一规律
在一定条件下,不同色彩之间的对比会有不同的效果。在不同的环境下,多色彩给人一种印象,色彩单一给人另一种印象。
各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩,它们之间对比,哪一种颜色也无法影响对方。
很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比,实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别,使网页色彩配合增添了许多变化、页面更加丰富多彩。
色彩的对比规律大致有以下几点:
■ 色相对比
是指因色相之间的差别形成的对比。当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容及效果等,这样才能增强其表现力。不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和。越接近补色,对比效果越强烈。
→ 色相对比网页例图:http://www.portfolios.com
色相对比分析:
主要是以绿色与蓝色之间的色相对比。从HSB数值上可看出嫩绿色的S纯度高B亮度也很高,因此艳丽的颜色作为背景与前景纯度稍低的墨绿和轱蓝色形成色相之间的对比。前景的墨绿虽然纯度达到最高值100%,比主色调高不少,但是因为亮度低,因此色彩显示没有主色调明艳。
结论:
该页面色相的对比,主要作用于前景与背景的对比、局部与整体的对比。
■ 明度对比
明度对比可分为:彩色差的明度对比及非彩色差的明度对比
是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高,蓝紫色的明度低,橙色和绿色属中明度,红色与蓝色属中低明度。
→ 明度对比网页例图:http://www.dior.com
明度对比分析:(非彩色差)
严格来说,该页面应该是黑白灰色非色彩构成,摄影图片中的人物衣服为灰色,相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一,形成另一道独特的风景。
共4页: 1 [2] [3] [4] 下一页
纯度调整
降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配,或者加入补色的谐调,也都能很好的起到协调的效果。
→ 纯度调整网页例图:http:// www.darkelephant.com 
纯度调整分析:
主色调的橙色,添入了少许黑色做渐变背景色,降低了纯度。辅助色的蓝色是橙色的补色,主要起的是使得整个页面过多的暖色降低协调于整体的效果,及背景色的棕色都分别提暗降低纯度。而左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑,纯度亮度很高的点睛色红色就起到了这个作用。
结论:
纯度的调整主要是通过明度黑、白、灰变化来调整画面的层次,适当的加入补色也是其中的一个办法。
面积调整
主次的面积区分。根据设计主题的需要,在画面的面积上以一方为主色,于是就掌控画面的色调作用,其他的颜色在使用面积上拉开距离,使画面的主次关系更突出,在统一的同时富有变化。
→ 面积调整网页例图:http:// www.upstairz.com

面积调整分析:
作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。
结论:
大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面
■ 面积对比
同一种色彩,面积越大,明度、纯度越强,面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。
面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。
→ 面积对比网页例图:http:// www.parkpack.ru
面积对比分析:
作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。
结论:
大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面。
下一节我们介绍色彩的调和