2.4 网站UI设计中的色彩搭配
色彩搭配既是一项技术性工作，也是一项艺术性工作。因此，设计者在设计网页时除了考虑网站本身的特点，还需要遵循一定的艺术规律，才能设计出色彩鲜明、风格独特的网站。笔者总结了一些网站色彩搭配的方法和技巧，希望可以帮助读者在学习上少走弯路，快速提高网站UI设计水平。
2.4.1 网站UI设计配色基础
色彩本身没有任何含义，但色彩确实可以不知不觉地影响人的心理，左右人的情绪。不同色彩之间的对比会有不同的效果。
红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，黑的更黑，白的更白。由于人的视觉不同，对比的效果通常也会因人而异。当大家长时间看一种纯色，如红色，然后再看看周围的人，会发现周围的人脸变成了绿色，这正是因为红色与周围颜色的对比，形成了人们的视觉刺激。色彩的对比还会受其他很多因素的影响，如色彩的面积、时间、亮度等。如图2-56所示为网页中的色彩搭配。
图2-56
色彩对比包括很多方面，色相对比就是其中一种。例如，当湖水蓝与深蓝色对比时，会发觉深蓝色带点紫色，而湖水蓝则带点绿色。
各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。例如：红色与黄色对比，红色会使人想起玫瑰的味道，而黄色则会使人想起柠檬的味道；绿色与紫色对比，令人感觉到活泼、自然，如图2-57所示。
图2-57
? 知识补充
红、黄、蓝三种颜色是最极端的色彩，它们之间进行对比，彼此不受影响。
纯度对比也是色彩对比的一种，举个例子，黄色是比较夺目的颜色，但是加入灰色会失去其夺目的光彩。通常可以混入黑、白、灰来对比纯色，以降低其纯度。纯度的对比会使色彩的效果更明确肯定。除了色相对比、纯度对比，色彩搭配还会受到下面一些因素的影响。
◎ 色彩的面积大小和形状
有很多因素可以影响色彩的对比效果，色彩的面积大小就是其中最重要的一项。如果两种颜色的面积相同，那么这两种颜色之间的对比就十分强烈，但是当两者的面积大小变得不一样时，小面积色彩就会成为大面积色彩的补充。
在大面积的色彩陪衬下，小面积的纯色会特别突出，但是如果这小面积的色彩较淡，则会使人感觉不到这种色彩的存在。例如，在黄色中加入淡灰色，人们根本不会注意到淡灰色。如图2-58所示为色彩的面积对比效果。
图2-58
色彩的面积大小会使色彩的对比有一种生动的效果。例如：在一大片紫色中加入一点红色，可以看到红色在紫色的陪衬下更抢眼，这就是色彩的面积大小对画面效果的影响。
在不同的形状上使用同一种色彩也会有不同的效果。例如：在一个正方形和一条线上用红色，就会发现，正方形更能表现红色稳重、喜庆的感觉。所以不同的形状也会影响色彩的表现效果。如图2-59所示为不同形状的色彩对比效果。
图2-59
在同一种形状上使用不同色块可以将其划分为几个区域。
◎ 色彩的位置
色彩所处的位置不同也会影响色彩的对比效果。例如，把两个相同面积的色彩放在不同的位置，如前后位置，就会觉得后面的颜色要比前面的颜色暗一些。色相相同但纯度不同的色彩组合在一起常常会产生令人吃惊的效果，如图2-60所示。
图2-60
由于所处位置不同，导致视觉感受不同。很多软件中都有渐变工具，使用渐变工具可以让多种颜色组合在一起，产生不同以往的效果。
不要认为色彩的渐变很简单，它是色彩运用的一种技巧。色彩的渐变中有一种如同乐曲旋律一样的变化，暗色中含有高亮度的对比，会给人清晰的感觉，如深红中间是鲜红；中性色与低亮度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰，如图2-61所示。
图2-61
深蓝色与高亮度的浅蓝色对比，给人以轻柔、欢快的感觉；纯色与原色的对比，给人强硬、不可改变的感觉；明亮的黄色与高亮度的白色对比，给人跳跃舞动的感觉。
? 知识补充
色彩搭配是一门艺术，灵活运用色彩搭配能让设计的网页更具亲和力和感染力。当然，前面讲述的内容多偏重于理论，要设计出漂亮的网站UI，还需要灵活运用色彩，并在设计网站UI的时候加上自己的创意。
2.4.2 网站UI设计配色原则
色彩搭配在网站UI设计中是相当重要的，色彩的选用更多凭借个人的感觉和经验，当然也有一些视觉上的因素。
◎ 整体色调统一
如果要使设计充满生气、显得稳健，或具有冷清、温暖、寒冷等感觉，就必须从整体色调的角度来考虑，控制好构成整体色调的色相、明度、纯度和面积等。
如果用暖色系做整体色调，则会呈现出温暖的感觉，反之亦然。整体色调的选择都要根据网站所要表达的内容来决定，如图2-62所示。
图2-62
要在配色中确定占大面积的主色调颜色，并根据这一颜色来选择不同的配色方案，从中选择最合适的。
? 知识补充
如果用暖色和纯度高的色彩作为整体色调，则会给人以火热、刺激的感觉；以冷色和纯度低的色彩为主色调，则会给人清冷、平静的感觉；以明度高的色彩为主色调，则会给人亮丽、轻快的感觉；以明度低的色彩为主色调，则会显得比较庄重、肃穆；如果以色相和明度对比强烈的颜色为主色调，会显得活泼；如果取类似或同一色系，则会显得稳健；如果主色调中色相数多，会显得华丽；如果主色调中色相数少，则会显得淡雅、清新。
◎ 配色的平衡
颜色的平衡就是颜色强弱、轻重、浓淡这几种关系的平衡。即使网页使用的是相同的配色，也要根据图形的形状和面积的大小来决定其是否成为调和色。
一般来说，同类色配色比较平衡，而处于补色关系且明度也相似的纯色配色，如红和蓝、绿进行配色，会因为过分强烈而感到刺眼，成为不调和色。但如果把一个色彩的面积缩小，或加白、加黑，或者改变其明度和彩度并取得平衡，这样也可以使这种不调和色变得调和，如图2-63所示。
图2-63
将亮色与暗色上下配置时，如果亮色在上，暗色在下，则会显得安定。反之，如果暗色在亮色上，则会有一种动感。
◎ 配色时要有重点色
配色时，可以将某种颜色作为重点色，从而使整体配色平衡。在整体配色关系不明确时，需要突出一个重点色来平衡配色关系，如图2-64所示。
图2-64
选择重点色时要注意以下几点：重点色应该选择比其他色调更强烈的颜色；重点色应该是与整体色调相对比的调和色；重点色应该用在小面积上，而不能大面积使用；选择重点色必须考虑配色方案的平衡效果。
◎ 配色的节奏
颜色配置产生整体色调，这种配置关系反复出现、排列就产生了节奏。这种节奏与颜色的排放、形状、质感等因素有关，如图2-65所示。
图2-65
由于逐渐地改变色相、明度、纯度会使配色产生有规则的变化，所以就产生了阶调的节奏。将色相、明暗、强弱等变化反复应用，就会产生反复的节奏，也可以通过色彩赋予网页跳跃感和方向感，从而形成生动的画面节奏等。