色彩搭配视角下网页设计论文

色彩搭配视角下网页设计论文

一、色彩搭配原则

1适用性

创建网站时,首先要考虑的是用户的需求。网站是以宣传用户企业文化为主,还是以宣传企业产品为主,即确定网站的主题。主题确定以后,就要了解哪些颜色适合传达该主题信息。例如,IT类网站常常采用蓝色为主色调,因为蓝色为冷色调,通常让人联想到海洋、天空、水、宇宙。纯净的蓝色表现出一种美丽、冷静、理智、安详与广阔。由于蓝色沉稳的特性,具有理智、准确的意象,在商业设计中,强调科技、效率的商品或企业公司,大多选用蓝色当做标准色,企业色,如电脑,汽车,影印机,摄影器材等等。橙色是暖色调中最温暖的颜色,具有兴奋、温暖、欢乐、辉煌、以及容易动人的色感,所以,家居类网站常常以橙色调为主,能够烘托家庭温馨的主题,即不同的主题应选用不同的颜色。

2独特性

网页的数量不断增长,越来越富有个性,对设计者的要求也更高。相同类型的网站,若网站的整体风格大同小异,没有突破,则很难在竞争中取胜。要吸引浏览者挑剔的眼球,就要打破常规、标新立异。即网站的色彩搭配要在考虑网站本身特点的同时,让色彩的独特性充分发挥魅力。

3整体性

网页上各部分色彩都有自己的分工角色,主色具有传达主题信息的作用,辅助色是烘托气氛的,背景色保持画面的整体统一,点睛色起强调作用。网页的色彩也可以区分信息模块、暗示控件功能等。不同的色彩在网页中同时存在,就会出现色彩的不同组合关系,可能有强烈的颜色对比关系,也可能在亮度上有明暗对比关系,还可能有相似色彩间的调和关系。这些色彩的组合使网页在视觉效果上丰富多彩,构成了网页的整体效果。优秀的色彩组合是网页设计者发挥艺术才能的重要领地,和谐的配色能够让整个界面看上去舒适。对比强烈的配色加以适当的面积比例调整进行调和能够让整个界面看上去清晰并且重点突出。因此,不同的需求可以采用不同的组合关系,但是一定要给浏览者良好的整体印象,这就需要这些色彩组合关系具备整体性,它主要包括色彩对比与色彩调和2个方面:

(1)色彩对比:

指各种色彩在构成中的面积、形状以及色相、明度、纯度之间的差别,这些差别为网页配色增添了许多变化,页面显得更加丰富多彩。色彩的对比规律大致有以下几点:

(2)色相对比:

指不同色相之间的差别产生的对比。当网页主色确定后,必须充分考虑其他色彩与主色的关系、要表现的内容及效果等,这样才能增强其表现力。如果要突出差别关系,应选择主色的补色。若要对比效果柔和,就要选择相似色。

(3)明度对比:

指色彩之间明暗程度的不同所形成的对比。通过明暗程度的调整,可以给浏览者在视觉上产生不同层次,不同距离的感觉。

(4)纯度对比:

指不同色彩之间纯度的不同所形成的对比。色彩的纯度决定着色彩的鲜艳程度,将不同纯度的色彩放置在一起进行对比,会使得纯度高的色彩更鲜艳,纯度低的色彩更浑浊。

(5)补色对比:

补色是色环中相对位置上的两种颜色。网页中的点睛色就经常采用补色,当互为补色的两种色彩接近时,能显示出强烈的对比关系。

(6)冷暖对比:

色彩给人的感觉是有冷暖的,分为冷、暖两大色系,这两种色系相互排斥的,放置在同一个页面中,就会产生冷暖对比。冷暖对比效果是极为强烈的,会导致画面的不协调,一般采用以下两种方法解决。首先是纯度调整:降低冷暖两色的纯度。用黑、白、灰明度变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配,或者加入补色,也都能很好地起到协调的效果。其次是面积调整:主次的面积区分,根绝主题的需要在画面的面积上以一方为主色,其他颜色在使用上拉开距离,使画面的主次关系更突出,在统一的同时又富有变化。

(7)面积对比:

指页面中各种色彩在面积上的大小差别,它会影响到页面的主次关系。在同一视觉范围内,色彩面积的不同会产生不同的对比效果。若两种色彩的面积同样,那么这两种颜色之间的对比十分强烈,若色彩的面积不相等时,小的一种色彩就会成为陪衬,在小面积的色彩陪衬下,大面积的色彩就显得特别突出。根据主题的需要在页面的面积上以一方为主色,其他颜色为辅助色,使页面的主次关系更突出。

4色彩的调和

两种或两种以上的色彩分布在同一个页面中,形成色彩组合关系,色彩调和就是使这种组合关系合理搭配,产生统一、协调的效果。色彩调和是人们求得色彩协调、达到心理平衡的重要手段。

(1)同种色的调和:

选定一种颜色,通过改变这种颜色的明度或纯度得到所需要的新的色彩,进而使色彩产生循序的渐进,弥补同种色相的单调感。

(2)类似色的调和:

如果希望两种或两种以上的颜色对比不那么明显,那么就要在这些颜色之间再添加类似色进行调和。在色相环中,色相越靠近越调和。

(3)对比色的调和:

对比度调和是指两种或两种以上的色彩配置在一起,通过一定的方法使其产生自然而融洽的感觉。其调和的方法有:提高或降低对比色的纯度、采用面积大小不同的处理方法。

(4)渐变色的调和:

渐变色本身实际上是一种调和方法的运用,是颜色按层次逐渐变化的现象。色彩渐变在网页的背景色中是经常使用的。色彩的对比与调和是形式美的变化与统一。

二、配色的基本方法

1色调配色法

选定一种颜色,加入黑色或白色会使其明暗程度发生变化,形成这种颜色的不同色调,一般分为亮调、中间调、暗调。不同的色调会对人产生的一定的心理暗示。这种色调配色法在网页色彩构成中是经常使用的。笔者推荐的配色技巧为:打开Photoshop的拾色器,选择HSB选项区(不是RGB选项区)中的B(亮度),指定选择的颜色,通过拖动右侧的滑块就可以得到这种颜色的各种色调。

2色相配色法

当基于色相策划了一个配色方案时,获得的效果通常会比较华丽明艳。很多民族服饰和儿童服装采用的都是典型的基于色相的配色方案。色相配色法就是基于某种色相,进行类似色、互补色的搭配。适当地类似色搭配,可以获得整齐宁静的效果;适当地补色搭配可以突出显示颜色并给人轻快的感觉。笔者推荐的配色技巧为:打开Photoshop的拾色器,选择HSB调板区域中的H(色相),指定选择的颜色,通过拖动右侧的滑块即产生色相变化。若已在Photoshop的工作区选定了某一颜色,按下[Ctrl]+[I]键即可得到颜色的互补色。

三、小结

《网页设计》这门课是中职学校网络专业学生的必修课,是一门核心的专业课,很多学生虽然在技术上能够使用工具软件实现页面的构造,但最终形成的作品往往显得粗糙,档次较低,主要的原因在于色彩搭配失当,当然对于教师而言,这也是授课的难点,本文通过经验总结,提出了色彩搭配的原则与技巧。

作者:雷勇 单位:东莞市经济易学校