探析色彩搭配在网页设计教学中的有效运用

张淑荣苏兵

(1.广东白云学院电气与信息工程学院，广东广州510450；2.广州白云工商高级技工学校，广东广州510450)

1.引言

对于刚刚学习网页设计的学生而言，在网页设计中，最难的不是各种工具怎么使用，而是要懂得怎么把一个网页设计得非常漂亮，这个不仅仅考验大家的技术，更考验网页设计者的艺术美感。每个网页设计师在遵循设计规律的同时还希望能够有自己独特的风格，这就需要勇气，敢于创新，大胆地进行艺术创作，唯有这样才能够做出符合客户要求，同时又不超出这类网站要求，且具有艺术特色、风格独特、个性鲜明的网页。然而随着行业的增多，在网页设计中色彩运用的重要性也突出地体现出来。由于高职院校的培养目标是技能型的人才，要在有限的时间掌握从业所需的技能，提高学生的综合素质和动手操作能力。可纵观历届学生的作品不难发现，在这些作品中，最大的问题就在于网页中的色彩搭配。就此问题，本文从色彩搭配的理论讲解及其实操训练两个方面探析网页设计教学过程中色彩该如何合理有效地被运用。

2.在理论讲解中，让学生了解网页设计的色彩搭配理论

2.1 认识色彩搭配的整体性

既然色彩被人为地赋予了情感色彩，自然可以带给人的心理感受也不同，所以网站的信息主题是进行色彩设计的首要考虑因素，网站的整体色彩搭配应符合网站的主题信息特征。同一个网站的不同页面能够局部使用同一色彩，这样就可以通过色彩将页面之间的联系传达给浏览者，由此产生整体和谐之美。一般说来，一个网站的标准色彩不超过三种，色彩过多易造成搭配效果的杂乱无章。在网页配色设计中，确定网页的主色调是第一步，也是非常关键的一步，主色调就犹如船的风帆，对整个网页起着主导作用。网站整体的色彩设计是个系统工程，要有计划性，必须进行统一规划，统一风格，这样才可以形成整个网页的整体性。下面谈谈确定主色调的两种常用方法：

(1)根据企业的行业特点和产品特点，确定主色调。例如，儿童教育网或一些母婴网站，多应用橙色为主色调，因为橙色是最温暖的色彩，给人带来幸福的感觉，更能吸引儿童或家长的眼球。

(2)根据企业网站面向的主要用户群体的喜好，确定主色调。例如，一个以女性为主题的网站，可以使用粉色，象征着女性的柔美。

另外，网页文字色彩的处理对文字颜色的处理要把握两方面的原则：可读性和感情传达。文字是传达信息的载体，字体颜色选择必须易于辨识和阅读，而不能仅为了设计而设计。每一种字体都有自己独特形态，同样，不同的字体颜色也有自己的情感象征内涵。

2.2 了解色彩搭配的适应性

色彩本身有自己的情感，不同的色彩能够表达不同的心理感受。作为网页设计者，色彩的选择应有针对性，选择与主题相一致的色彩。下面对一些常见的颜色进行分析：

红色——是一种激奋的色彩，能使人产生冲动、愤怒、热情、活力的感觉，这种颜色在表达吉祥喜庆氛围和食品的网站中被广泛应用。

绿色——介于冷暖两种色彩的中间，给人以和睦、宁静、健康、安全的感觉，在教育、环保和健康类的网站中，绿色应用最为广泛。

蓝色——是最具凉爽、清新、专业的色彩，体现柔顺、淡雅、浪漫的气氛。主要应用于银行、高科技企业网站，在一些表达感性诉求的文学作品网站中也可以应用。

白色——具有洁白、明快、纯真、清洁的感受，在一些高档商品的网站中经常应用。

黑色——具有深沉、神秘、敏锐、先进、稳重的感受，这一类的配色方案可应用于军事网站，高科技产品等。

另外，流行色是人们对色彩的偏好和追求时髦的心理表现，受时间性和季节性的影响，体现了不同时代、不同文化背景下的人们对于色彩的选择和情感，反映了一个时代的审美特征。2012年是奥运年，玫瑰红是今年的流行色，不论是在奥运场馆还是大大小小的网站，无处不在的就是那一抹玫瑰红。作为网页设计师，就要特别关注流行色的发展，做一个色彩方面的有心人，就会使自己的网页作品富有朝气，充满人气。

2.3 了解网页色彩搭配的技巧

(1)用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，其实就是将色彩变淡或加深，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

(2)用两种色彩。先选定一种色彩，然后选择它的对比色。比如，蓝色和黄色就是对比色。这样整个页面色彩丰富但不花哨。

(3)用一个色系。简单地说就是用一个感觉的色彩，例如淡蓝、淡绿；或者土黄、土蓝。

(4)用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。

3.在实操训练中，让学生掌握色彩搭配在网页设计的有效运用

3.1 教师实例分析，学生模仿训练

在学生了解了网页设计的色彩搭配理论之后，教师需要及时做举例分析，学生模仿训练，让学生消化这些比较抽象的理论。下面以一个主色调为蓝色的网页进行举例分析。主要因为蓝色是冷色调最典型的代表色，是网站设计中运用得最多的颜色，也是许多人钟爱的颜色。下面根据蓝色系不同属性的同类色、邻近色、高纯度对比、相对对比色等色彩搭配。

图1 Everyone’s Hero网站首页效果图

如图1所示，该网站的蓝色系强对比：蓝色+红色。蓝色是冷色系的最典型的代表了，而红色是暖色系里最典型的代表，两冷暖色系对比下让全页的色彩对比异常强烈且兴奋，很容易感染带动浏览者的激昂情绪。红色把文字图片框起来，在蓝色背景对比下，很好的突出主题，又好似模仿投影荧屏的感觉，让人迅速聚焦于视频中心，达到网站背后的最终目的。辅色调是红色，从数值上看接近于正红色，红色对视觉传递的信息是很快的，属于高昂响亮的颜色。点睛色分别是黄色、黄绿色。大家知道，黄色是明度最高的颜色，也较响亮、刺目，在这里的运用能强烈地突现标题。从整体来看，点睛色黄绿色与辅助色红色是对比色，虽然面积不太大，只小范围的对比，但是已经足以达到了迅速传递信息的效果，让人印象深刻，促成再访点击。

教师首先边实例讲解，边演示操作，再指导学生模仿设计，最后教师点评一些做得好的和一些做得不太好的地方，或教师让学生互相点评，这样不但能提高学生网页设计的技能和学习该课程的兴趣，还能提高学生的语言表达能力和增强师生的课堂互动，让学生“爱学”和“乐学”该课程，为培养新一代网页设计师奠定基础。

3.2 学生自由设计为主，教师讲解为辅

学生通过模仿训练，从中理解这种色彩搭配的理念，经过几次类似的训练后，喜欢网页设计的学生会掌握上面所述的网页设计的色彩搭配理论。接着下一个重点的教学任务转向学生依据这些原则自由设计网站，教师定期对学生进行专业的指导。并不是所有学生都喜欢这门课程，所以教师在中后期的指导中，挖掘一些这方面的苗子进行重点培养，鼓励他们参加课外的网页设计协会和参与协会的外包网页设计项目，学习更多更新的关于网页设计的理念和技能，并鼓励他们参加校内外的网页设计技能竞赛，从中获得更多更好的实战经验，这对一个想成为网页设计师的在校学生来说，再好不过了。如果有条件，可推荐这些优秀的学生在寒暑假到网页设计的公司打寒暑假工，或学生自找公司，更能成就学生。

4.结束语

总之，教师要培养学生对色彩的敏感度，当他们首次接触一件设计作品，最先攫取其注意力的，就是作品的颜色，其次是图像，最后才是文字。经过教师的引导，并结合学生长期的努力才能在实操训练中理解色彩搭配的理论，才能在个人的作品中表现这些理念，故培养学生从“做”中“学”，又“学”中“做”，进而成为优秀的网站设计者，为学生的人生增加一项谋生的技能，也为IT行业的高质量发展做出教师应有的贡献。

[1]杨旭兰.色彩在网页设计中的应用研究[D].南京林业大学学报，2009.

[2]王萍.浅谈网页色彩的配色[J].硅谷，2009(1)：124.

[3]刘会菊.浅析网页美工设计中色彩搭配[J].城市建设理论研究，2011，6.

[4]陈慧民，李咸龙.web标准的发展与应用[J]北京：计算机系统应用，2008(10).