浅谈网页设计中颜色的搭配

巨　峰

[摘要]在网页的设计中，颜色的搭配至关重要，从主题色的确定、辅助色的选取、文本颜色的搭配、背景颜色和背景图像的设置四个方面对网页设计中的颜色搭配进行探讨。

[关键词]色彩主题色辅助色

中图分类号：TP3文献标识码：A文章编号：1671—7597(2009)0620118-01

一、色彩的分类及基本一性

现行色彩理论将自然界中的颜色分为彩色(有彩色)和无彩色两大类。无彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个基本属性：1色相。颜色的基本特征，例如，红、绿。2纯度。也称饱和度，指颜色的纯洁程度。无彩色的饱和度为0.3明度。也称亮度，体现颜色的深浅程度。白色明度最高，黑色最低。无彩色只有明度特征，没有色相和饱和度的区别。

二、网页中色彩的配置

(一)主题色的确定

1根据现实企业形象决定主题色。对于首先在物理世界中拥有实体的企业、机构以及团体来说，他们的网站形象实际上是自身整体形象的一部分，或者说应当被视为固有形象在网络媒介中的延伸。这类站点的主题色应当保持与其实体周有形象的一致性，从而形成统一的视觉认知。诸多知名企业的形象站点是这类用色模式的代表。例如：高戤洁的站点，以强烈北美风格的红、蓝为主题色，这也是高露洁公司的企业标准色。同样的色彩风格也出现在该公司主要日化产品的包装上。

2根据站点定位确定主题色。对于并没有一个既定色彩形象作为用色依据的站点来说，采用何种色彩或色彩组合作为主题色，应当视网站的性质、功能、风格特色等因素的具体定位而定。例如：认证公司网站采用蓝色为主色调代表了公正：一般农林业、教育类网站常使用绿色代表希望与活力；红色等暖色调的使用则体现了政府部门网站的严肃性与亲和力；面向大众的咨询类、娱乐类、搜索服务类网站，大多选用饱和、鲜艳、视觉度较高的色彩作为主色调，以传达丰富活跃的气氛。

3注意色彩的公共联想。色彩具有广泛的象征性。但由于人类生理构造和生活环境等方面的共性，大多数人在色彩心理方面，存在麸同的感情。例如红，橙、黄色使人联想到阳光、活力、温暖；蓝、青色使人联想到大海、天空、寒冷；明亮而鲜艳的色彩感觉兴奋、明快、跳跃：深暗而混浊的色则感觉忧郁。

(二)辅助色的选取

页面中主题色以外的其他颜色都可以归类为辅助色，但其中并不包括页面内那些不确定的、经常更新的图片里的色彩。辅助色的使用能够增加页面的色彩层次，丰富视觉；同时，辅助色也可能执行着一些具体功能，如视觉引导等。主要的辅助色与主题色共同建立起网页的色彩基调。辅助色的选取遵循的原则是：对立中统一，具体有以下几种手法：

1色彩的对比调和则指强调变化而组合的和谐色彩关系，富于活泼、生动、鲜明的视觉效果。它往往不是依赖要素的一致，而是靠某种组合秩序来实现。例如可在在对比各色中混入同一色素或置入相同的色彩结构，使各色具有和谐感：或利用色环寻求具有某种规律的色彩组合。

2色彩的类似调和和对比调和手法分别代表色彩调和中的两种主要倾向。在实际的色彩应用中，为了取得统一而丰富的色彩关系，往往需要将两者有所侧重地综合运用，以形成具有一定主从结构的多层次的色彩调和。

(三)文本颜色的设定

1静态文本的颜色。静态文本是功能相对单纯的阅读型文本，在网页中常以大段文字的形式出现。对于感必趣的文字内容，浏览者需要集中注意力和花费时间，因此这类文本与背景的颜色搭配应以易于提取信息、利于减小视疲劳为原则。

若眼睛同时聚焦于两种对比明显的鲜艳彩色上，眼部周围的肌肉会特别紧张。一些鲜艳补色、准补色的组合方式是不利于用户阅读的，例如紫色为背景的黄色显示，绿色为背景的紫红色显示，以及纯红与纯蓝色的组合等。

相较于注视无彩色，人们持续注视鲜艳的彩色更容易疲累和厌烦。一般而言，底色与文字色的色彩跳跃度越低，即越接近无彩色，越有利于长时间阅读。越高明度差的色彩配伍，越具有高认识度，用户也就越易于从中获取信息。低纯度、高明度对比的文本与背景色搭配，是适用于静态文本的显示色彩。在无彩色的搭配中，白底黑字的显示方式比黑底自字的显示方式可读性更强。

2超文本的色彩。与仅供阅读的静态文本不同，超文本加入了链接功能，能够响应点击跳转页面。为了有效提示点击，超文本在外观上应当与静态文本有所区分。区分方式可以是使用不同的字体、字号，加下划线，也可以通过不同颜色来加以甄别。

超文本应当使用比静态文本强度高、视觉度高的色彩。例如静态文本为黑色，超文本为有彩色。需要注意的是，超文本仍是文字信息，文本色应与底色保持足够明度差以利识别。在一条超文本上可以同时使用几种色彩，以产生响应交互的色彩变化。

(四)网页背景颜色和背景图像的设置

1网页背景颜色的设置。少数网页会直接使用主题色作为背景颜色，例如一些首页和全包围型网页。但更多设置有色背景的网页会遵循这样的视觉层次关系：页面加载完毕后，主题色为页面内最醒目的色彩，为视觉注意的第一层，页面内容为清晰易辨的中间层，背景色或背景图像为退居最后，衬托前景，装饰页面的底层或边饰。

符合常见层次关系的背景色，多数与主题色星一致调性。例如是主题色的同系色，或临近色中的低纯度色彩。在明度对比上，当前景明亮对，背景色应当较暗；前景深暗时，背景则应稍亮些。在冷暖因素上，背景色整体较前景色冷时，前后层次感较强。一些网页的前景与背景都使用了彩色。当网页的前景与背景为邻近色关系时，效果比较柔和。对比过于强烈的色彩关系会干扰视觉，在以文本信息为主的页面中不建议使用。

2背景图像的色彩设置。背景图像首先造成的是一种整体上的颜色感觉，其次才是纹理风格。页面加载完成后，背景图像应退居于次要地位，成为页面主体的衬托和反复出现的形象环境。为了避免在用户浏览网页内容时造成过量的视觉干扰，背景图像整体上的视觉跳跃度与色彩饱和度、对比度均应明显低于前层内容。一般地，根据空间混和原理，背景图像中各色间的明度差越小，花纹越细密，越有利于衬托前景。

主题色或主题色的同系辅助色加入无彩色、含灰色、邻近色图案所构成的背景图像，与前景色彩的一致性强。与页面主题色有补色因素的背景图像，与前景的对比鲜明悦目。设置背景图像时需要注意图案单元的大小和色彩数量。在网络较慢时，文件体积较大的背景图像可能显示迟缓，造成等待延长。

三、总结

在网页设计中，不仅要注重技术和经验的积累，同时也要注重颜色的搭配。所以，要对色彩的基础知识的良好掌控，才能在网页设计中才能做到游刃有余。