浅谈校园网网页色彩的设计

陈丽霞，黄卓顺

（韩山师范学院 教育系，广东 潮州 521041）

浅谈校园网网页色彩的设计

陈丽霞，黄卓顺

（韩山师范学院 教育系，广东 潮州 521041）

在网页设计中，色彩的地位和作用是不言而喻的。但从目前来看，校园网网页中色彩的设计仍存在不少问题。针对这种情况，本文提出了校园网网页色彩的设计原则及设计步骤，为广大校园网设计者提供参考。

校园网；网页；色彩设计；应用

作为校园文化的具体呈现及对外交流的载体，校园网扮演着不可替代的角色。其中，作为校园网的基本构成元素，校园网网页的设计和制作更是决定着校园文化传播的功效。在页面的设计中，色彩占据着极其重要的地位，它是网页设计中容易被忽视而又绝对不能忽视的因素。有些网页看上去十分典雅、有品位，令人赏心悦目，但其页面结构却很简单、图像也不复杂，这主要是色彩运用得当的结果。因此对于校园网设计者来说，掌握精湛的网站制作技术固然重要，但是对网站风格的把握及配色方案的设计也是不容忽视的。

一、色彩在网页中的作用

色彩是视觉传递的重要手段和方式，色彩若是处理得好，可以锦上添花，达到事半功倍的效果。色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次，色彩还具有职业标志性，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。在网页设计中充分运用色彩的这些特性，可以增强网页的吸引力，使我们的校园网具有更加深刻的艺术内涵，进而提升校园网的文化品位。

二、当前校园网色彩设计中存在的问题

笔者以高校校园网作为研究对象，通过中国教育和科研计算机网所提供的中国大学链接，浏览了许多高校网站。通过比较分析，发现校园网站普遍存在“网页色彩缺乏科学而合理的设计”的问题，具体体现在以下几个方面:

1.色彩过于单调或色调过于花俏

高校网站中界面色彩的使用缺乏设计，主要有两种倾向:一是色调单一，缺乏生气，枯燥乏味，如图1；二是过于花哨，网站色彩杂乱，如图2。

图1 湖南商学院北津学院网页界面图

图2 石家庄经济学院网页界面图

2.不注重细节，不够人性化

由于设计者在文字、导航、内容区域的颜色使用和色彩过渡上的疏忽，使浏览者感觉不到整个界面的完整统一性，在查找内容时感觉比较困难。这些细节在很大程度上决定了一个网页的成效，所以在校园网页设计过程中，广大的设计者都要特别注重细节，使其更加人性化，浏览者也更加容易浏览。

三、网页色彩的设计原则

网页色彩总的应用原则应该是“总体协调，局部对比”，也即是网页的整体色彩效果应该是突出而不乏和谐、大众化而不乏新潮，只有局部的、小范围的地方可以有一些强烈色彩的对比。具体可从以下几个方面考虑：

1.应与网站主题相协调

在网页设计中要充分利用色彩的力量美化页面，对其中的重要信息进行强调，不同的颜色在不同的地区所代表的寓意大不相同，以中国大陆为例，每个学校都包含一些党建或学生工作的宣传网站，而据统计，多数此类网站使用与国旗颜色相同的主体色彩。而一些心理辅导类的校园网站则多数采用暖色调为主的网页色彩。这样符合人们的心理特点，能够引导浏览者的注意力，这有利于推广宣传学校。对需要强调的内容适当运用色彩加以突出，使浏览者加深记忆，提高信息传递效率。在重要信息或最新通知等内容中，色彩的强调功用尤为明显。不同的色彩有着不同的象征意义，给人的心理感受也不同，网页的色彩设计要有针对性，应体现出自身的特色。色彩对比是通过制造中心色与主调色的对比，构造醒目的视觉中心，突出主题，传达情绪。通常有明度对比、色相对比、纯度对比、补色对比、冷暖对比、面积对比、形状对比等，其中色相对比更能使视觉效果生动、强烈、感人。色相的对比关系越清晰，视觉效果就越强烈，色相对比中最强烈的是互补色对比，如红与绿、黄与紫、蓝与橙对比，在设计需要强烈视觉冲击时，往往会用到这些对比。

2.应能体现学校的独特风格

在琳琅满目的校园网站上，网页的色彩只有与众不同、有自己独特的风格，才能显得个性鲜明，给浏览者留下深刻的印象。尤其在同类网站中，网页的色彩不但要符合此类网站的用色特点，还要有其独到之处。网页设计是一种艺术活动，只有按照内容决定形式的原则，大胆进行艺术创新，才能设计出既符合网站主题，又有一定艺术特色，风格独特、个性鲜明的网页。比如综合性大学的代表——北京大学，网页的主体颜色采用最为简单的白色调，多用颜色的饱和度不同形成视觉的差异，而起内容过渡和布局的作用，合理的颜色搭配使庞大而繁多的内容布置得井然有序，方便不同浏览者快速获取有效信息，也体现其“思想自由、兼容并包”的北大校训。

3.应符合浏览者的情趣爱好及网页配色的发展潮流

校园网站作为以知识分子为主要对象的教育科研型网站，一般来说，适合使用以中性色为主的色彩，显得和谐而具有文化气息。但在不同的时期浏览者对颜色的爱好也略有不同，所以设计者要适当关注流行色的发展。流行色是特定时期内社会风行的时髦色彩，是一种时尚色、鲜活色，具有很强的诱惑力和冲击力。若能抓住浏览者紧跟潮流、追赶时尚的心理，适时地选用流行色作为网页的主色调，必定能产生更好的传播效果。

4.应保持实用性和艺术性的统一

多数的校园网页都包含丰富的信息资料，网页色彩设计要注意方便浏览者的读取，注意文字与背景色彩的明暗对比，以使人们在浏览大量网页信息的时候，减少屏幕刺激，减轻视觉疲劳。同时美观的界面可以保持浏览者愉悦的心情，有利于集中精力读取，从而达到实用性与艺术性的统一。

5.应突出延续与创新

网页色彩设计要保持用色的延续性。虽然网页的信息会不断更新，网页的版式也会定期调整，但网页色彩的基调和风格一旦形成后，不宜大幅度或频繁地改换，而应保持一定的延续性。 但为了保持新鲜感、提高吸引力，也可小范围地对网页色彩的明度、纯度进行适当的调整和变换。根据浏览者紧跟潮流、追赶时尚的心理，适时地选用流行色作为网页的辅助色或点睛色，也能为网页平添几份新意。

四、网页色彩的设计步骤

1.确定网站的主色调及辅助色和背景色

网页色彩设计首先需要确定画面的主要色彩倾向，即主色调。主色调就犹如音乐中的主旋律，如图3中国农业大学的网页，主色调为绿色RGB为（0，128，0）色调80，饱和度240，亮度60，绿色对整个网页起着主导作用，页面中的其它色彩都是围绕着绿色来进行搭配。辅助色在网页中所占的比例不大，它是主色的衬托，使用恰当能起到画龙点睛的作用，通常应用于图标、文字、表格、线条、输入框及超链接，但却对整个页面的色彩起着调和的作用。它让页面更活泼、富有生气，并使主色调更加流畅地贯穿整体。辅助色可以使用跟主色调相邻近的颜色，也可以用主色调的对比色。背景色是网页的底色，有时和主色是同一色彩。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字、图片）;反之，底色浅，文字的颜色就要深，以浅色的背景衬托深色的内容（文字、图片）。需要注意的是，应尽可能在浏览器的安全颜色范围内选择主色。

图3 中国农业大学网页网页界面图

2.确定文字的色彩

文字的颜色在网页设计中很重要，文字颜色一定要与网页背景颜色相谐调，一般来说网页背景颜色大多较柔和、素淡，这种背景色配上深色的文字，让人看起来自然舒畅。例如，浅绿色网页背景配黑色文字，或白色背景配蓝色文字，都很醒目，前者突出背景，后者突出文字。而比较深的背景色配黄色文字比较有特色，如下图4配色图。在网页设计中不同格调的网页在文字颜色的使用中都有不同的个性化设计，但应注意的是对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没强调，而且过多的颜色会影响网页浏览者的阅读，使人眼花缭乱，达不到利用网页向读者传递信息的目的。在网页设计中文字的颜色的运用，直接影响浏览者的情感，所以在设计中要根据网页内容来把握文字颜色的对比度，使网页文字通过对颜色的运用实现想要达到的设计效果，设计情感和设计思想。

图4 配色图

3.确定网页色彩的搭配组合

在网页设计中要突出内容，就应当尽量少用图片，多用色块保持版面的美观性、醒目性。下面色彩组合较易使版面醒目：黑白、蓝白、黑灰白、蓝黑、紫黄。值得注意的是，网页的搭配的色彩最好不要超过三种，为了保持内容在页面上的突出醒目，可以只采用黑白色调。网页的背景和前文的色彩比较尽量要大，不要用花纹繁杂的图案作背景。

4.确定网页中所使用的图片及其色彩

图像在网页中起着画龙点睛的作用，不但能装饰页面，还能表达风格与情感。该怎么选择适合自己网站的图片呢？从内容上讲，要能切合网站的主题；从颜色方面来讲，若一个网页是蓝色的底色，但整个网页的图片却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以简单的归纳出网页与图片的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。

5.确定网站导航的色彩

网站导航的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识链接文本的颜色，最好用约定俗成的，比如未访问，点击时，点击过的都要规范使用颜色，要让人看得明白，千万别光顾视觉效果的热闹，而让读者不知东西南北。

五、结束语

总之，影响校园网视觉效果的因素有很多，但色彩无疑是确立网站风格的灵魂，是树立网站形象的关键因素。只有将色彩自然和谐地运用到校园网网页的设计中，才能使校园网获得生命的力量，吸引浏览者的眼球，真正起到传递校园文化、扩大学校影响力的作用。

[1] http://www.51jzhan.cn/news_view.asp?id=141

[2] 梁景红（Relen）. 网站设计与网页配色[M]. 北京：人民邮电出版社，2004.

[3] 黎芳（Redfall）. 网页设计与配色实例分析[M]. 北京：兵器工业出版社，北京希望电子出版社，2006.

[4] 赵素蕊，柳冬青. 网站设计风格与色彩[J]. 商场现代化，2007.

[5] 吴方. 网页的色彩设计思考[J]. 江苏广播电视大学学报. 2006，6.

[6] 孙荣. 浅论高校校园网站界面设计的视觉创意[J]. 常州工学院学报，2007，4.

[7] 杨丽丽. 色彩在网页设计中的协调与应用[J]. 中国科技信息，2007，23.

[8] 李立伟. 浅谈网页色彩设计[J]. 郑州轻工业学院学报（社会科版），2007，2.

[9] 张祖鹰. 网站建设中的色彩与色彩搭配[J]. 电脑开发与应用，2007，11.

The Design and Application of color in the Webpage Campus

CHEN li-xia，HUANG Zhuo-shun

It goes without saying that the position and role of color in the design of webpage. But there are many problems in the design and application of color in the construction of campus webpage. To the problems,the paper puts forward the design principle and procedure of webpage color,and gives relevant advices on how to promote the application effect of color in campus network.

Network in campus Webpage Color Design Application

TP393.18

A

1008-7427（2010）04-0097-02

2010-02-28