网页设计中色彩视觉元素探究

张蕾蕾

(长春大学 美术学院，长春 130022)

网页设计中色彩视觉元素探究

张蕾蕾

(长春大学 美术学院，长春 130022)

以网页界面中的色彩视觉元素为研究对象，总结网页界面中的色彩元素特性，结合色彩属性与实际网页色彩设计表象，探讨基于网页界面的配色方法，并通过分析影响网页界面色彩视觉效果的各种因素，指出网页色彩设计中存在的问题与实际设计中的经验，力求为国内网页设计的美化与创新提供一定的理论依据与实例参考。

网页设计;色彩视觉元素;色彩设计

在人类的视觉感受中，色彩是不可或缺的重要元素，好的色彩组合能给人们带来强烈的视觉冲击力及艺术感染力［1］。在网页界面中运用不同的色彩搭配，会影响网站的整体风格及视觉感受，色彩作为展示网站形象的首要视觉要素，对于网站个性特征的传达，以及使网站在众多同类竞争者中脱颖而出，都起着重要作用。因此分析和研究网页界面中的色彩视觉元素、探讨网页配色方案，既可丰富色彩美学相关理论又富有极大的实践价值。

1 网页界面中的色彩特征

1.1 数字色彩的基本原理

能唤起人们色感的关键在于光，色是被光感知的结果。而数字色彩的获取与生成，与自然界的色彩不同，它离不开产生它的数字设备。早期的数字色彩获取主要是通过计算机键盘输入执行应用程序来实现，是利用计算机系统特殊的演算规律来生成图形和色彩的方法，目前有专门的学科及机构研究这种“规则系统艺术”［2］。我们最为常用的数字色彩获取方法是通过扫描仪、数码相机、数字摄像机等操作简单、使用方便的设备来搜集图像及色彩。

1.2 数字化色彩模式

网页设计作为新兴数字艺术的一大门类，它与传统的艺术设计在形式与方法上都有着明显的不同，其中最大的特征是几乎所有的设计都是在计算机上完成，这也使得网页界面的色彩设置与传统艺术的调色有着很大的区别。我们设计中最为常使用的数字色彩模式是RGB与CMYK模式。

(1)RGB色彩模式

我们用放大镜观察电脑显示器或电视机的屏幕，会看到数量极多的分为红、绿、蓝三种颜色的小点。电脑屏幕上的所有颜色都由红、绿、蓝三种色光按照不同的比例混合而成的，因此，红、绿、蓝被称为三原色光，英文简写为R(red)、G(green)、B(blue)。在RGB模式下，每种成分都可使用0～255的数字值:当三个值相等时，产生灰色;当三个值均为255时，为纯白色;当该值为0时，为纯黑色。RGB总共能组合16777216(2563)种色彩，被称为真彩色或24位色(224次方)［3］。

(2)CMYK色彩模式

这是一种专门针对印刷业设定的颜色标准，CMYK是代表青、洋红、黄、黑四种印刷专用的油墨颜色，通过四色油墨的变化以及它们相互之间的叠加来得到各种颜色。CMYK模型的色彩不如RGB色丰富饱满，在设计软件中部分功能将无法使用，当图像由RGB转为CMYK后，颜色会有部分损失，但它是唯一一种能用来进行四色分色印刷的颜色标准。CMYK四色通道各按百分率计算，100%时最深，0%时最浅。

1.3 网页安全色

网页中的颜色会受到各种不同环境的影响，我们解决这一问题的方法就是网页安全色——即在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合(调色板)，网络安全色是当红色、绿色、蓝色值为 0、51、102、153、204、255 时构成的颜色组合，共有216(63)种颜色(其中有彩色为210种，无彩色为6种)［4］。在制作网页的时候，尽量使用网页安全色进行网页配色，这样可以避免原有的颜色失真问题。

2 网页界面中的色彩设计

网页设计中的色彩设计是运用色彩学的理论知识，在实际网页设计、制作中进行用色、调色、配色的技巧，是我们了解、掌握色彩理论知识的目的所在。

2.1 网页界面色彩的对比

在我们的视知觉中，所谓色彩对比是当两种或两种以上的色彩在一起相互关联，对视觉产生的影响，显示出的差别现象。网页界面的色彩对比主要体现在:

(1)将不同色相并立在一起产生的对比称为色相对比，通过色相对比使各方色彩的特征更为凸显［5］。色相对比的程度取决于色相在色环中的位置关系:两色相间角度越小，呈现的色相的对比越弱。强对比中色彩丰富、饱满，但不安定，适用于在短时间内给人强烈印象的网站首页。

(2)将不同明度的两色放置在一起将出现明暗的对比现象称为明度对比，明度对比后明的更明、暗的更暗［5］。色彩明度的差别可以是同种色相自身的明度差异，也可以是多色相的明度关系。色彩中无色彩黑白灰的明度关系非常重要，它们不同程度的明度对比能够呈现出多种色调变化，产生空间感、层次感等，使我们的网页设计更为独特、生动。

(3)将不同纯度的色彩并置，使鲜的更鲜、浊的更浊的对比方法称为纯度对比。这种对比较之明度对比与色相对比更为柔和、含蓄。控制好色彩纯度对比关系，有助于我们营造各种不同的界面视觉的氛围，调动浏览者不同的思维情感［6］。

(4)将两种属性的色彩并置会产生冷暖关系，冷暖色的对比，会使冷暖感更加明显。这里的冷暖不能用物理学的温度衡量，冷暖都是色彩给我们的感受，色彩的冷暖对比也是相对存在的。

2.2 网页界面色彩的调和

页面色彩的调和是指两个或两个以上的色彩相互配合、相互协调，达到和谐。色彩调和的基本原理:一是统一性调和，二是对应性调和［6］。统一性调和是以统一为基调，将一种或两种色彩属性做同一或近似的组合，消除不统一因素，这是一种简单而便利的配色方法，可分为同一调和与近似调和。对应性调和是基于变化的基础之上，并且应用范围更广、适应性更强，这种调和效果强烈、生动、活泼，也更加富有挑战性。它分为秩序调和、单性强对比调和、调性调和、失去平衡的调和。

无论是应用哪种调和，都应本着和谐中求变化的原则——单调贫乏不好，恶性刺激也不好，关键是对比统一要恰到好处。我们通常在网站页面中定下一个主色调(主题色)，所有色彩元素都跟随其变化(如蓝主调下，其它对比调和都与蓝色相关)。调和决不是色彩单调的一致，它与对比相辅相成、互相制约，都是构成网页界面艺术美感的重要因素。

3 网页界面色彩视觉元素的应用

3.1 影响网页色彩视觉效果的软硬件因素

网页设计中，由于工具(如使用计算机等)本身的差异，即使是同样数值的颜色也会因显示设备、操作系统、制作软件、硬件配置等诸多因素而产生不同的色彩效果。目前我们使用最为广泛的操作系统包括 Windows、MAC、Linux、UNIX 等，由于这些操作系统中内置的调色板存在差异，因此即使在同一条件下用同一台显示器来显示同一种颜色，其效果也会不尽相同。此外，显示器也是其中一个重要因素，显示器是设计的视觉中心，RGB色彩模式的数字图像要显示器表现，CMYK色彩模式的数字图像也要经过转换在显示器上显示出来［7］。还有，不同的软件内设置的调色板模块不同，也会造成颜色在显示器中的差异(如我们设计时经常使用的Photoshop和CorelDraw两个软件间的色差就十分明显)，并且计算机配置显卡的优劣也是影响颜色显示效果主要原因之一。

3.2 基于色相的网页配色方案

红色在人类历史上始终代表着激情与活力，鲜明的红色极易吸引人的眼球，在网页中多作为突出色。高明度的红色与无色彩搭配组合，能够得到热情、时尚的效果;而低明度的红色沉稳凝重，可以营造出古典神秘的氛围。多被用于餐饮(肯德基)、时尚网站(服装、汽车)等。

橙色给人带来朝气、活力，是可以通过变换色调营造不同氛围的典型色彩，是网页配色中常见的色相。它既能表现青春活力又能实现沉稳成熟的效果，多用于青年网站(Chinaren)、食品网站等，也是是商业网站的新宠。

绿色是大自然的色彩，代表着生命与力量，也是网页设计中使用最多的颜色之一。绿色给人们带来健康与安全的气息，所以经常被用于与教育科研、卫生医疗等相关的网站，以传达清新和谐、易于亲近的信息。

蓝色是大海和天空的颜色，给人们开阔、清凉的感受。作为冷色系代表的蓝色，它带给人强烈的安定感，表现出淡雅的气质。低对比度的蓝色主要用来营造宁静、安详的氛围;高对比度的蓝色给人整洁、轻快的印象，因此蓝色被广泛应用于商业、体育、高校、旅游等网站之中。

紫色在艺术家们眼中是神秘和尊贵的象征。在古代，由于提取紫色染料耗费的成本很高，所以昂贵的紫色布料被王公贵族们独享［8］。在网页中，紫色通常用于以女性为对象或以艺术作品展示为主的站点中:暗紫色可以表现成熟高贵，是很多房地产网站的宠儿;清澈的紫红色、粉红色给人浪漫、轻盈、幽雅之美，是女性化色彩中的代表(KITTY、芭比娃娃购物网站等)。

黑白是两种极端亮度的颜色，通常在现代派网站中用以突出有色彩强烈的冲击力。只要合理地使用搭配，就不难成为表现现代文化独特美感、张扬个性的最佳拍档。多被用于影视、音乐及个人网站中。

4 结语

目前网页界面设计考究、艺术创意独特的中文网站鲜见。在我国的网站制作领域，人们往往在技术的层面上探讨网页设计，但优秀的网页作品所展现的绝不仅仅是一种高超的技术形式，网页的艺术性应该得到更为广泛的关注，网页界面设计作为一种新的艺术表现形式也值得我们深入研究。分析与研究网页界面视觉元素的艺术特性与设计方法有着重要的理论和现实意义。

［1］ 保罗·芝兰斯基，玛丽·帕特·费希尔.色彩概论［M］.文沛，译.上海:上海人民美术出版社，2004.

［2］ 廖宏勇，肖永亮.数字色彩基础［M］.北京:北京师范大学出版社，2008.

［3］ Bill Scott Theresa Neil.Web界面设计［M］.李松峰，译.北京:电子工业出版社，2009.

［4］ I.R.I色彩研究所.设计师谈网页配色［M］.李强华，译.北京:电子工业出版社，2002.

［5］ 李莉婷.色彩构成设计［M］.合肥:安徽美术出版社，1999.

［6］ 朱介英.色彩设计与配色［M］.北京:中国青年出版社，2004.

［7］ 雷沪.显示器色彩管理的研究与实践［J］.包装工程.重庆五九期刊社，2009(7):59.

［8］ 哈拉尔德·布拉尔姆.色彩的魔力［M］.陈兆，译.合肥:安徽人民出版社，2003.

Research on color vision elements in webpage design

ZHANG Lei-lei

(College of Fine Arts，Changchun University，Changchun 130022，China)

This paper，taking color vision elements in web interfaces as a research object，analyzes the features of color elements.It discusses the web interface-based color-matching methods combining with the color attribute and the actual appearance of web color design，finds out the existing problems by analyzing the various factors influencing visual effects and gives actual design experiences，hoping to provide a theoretical basis and example references for China＇s beautification and innovation in web design.

webpage design;color vision element;color design

206.3

A

1009－3907(2011)03－0105－03

2010－12－08

张蕾蕾(1980－)，女，吉林长春人，讲师，硕士，主要从事艺术设计教学与研究。

责任编辑:李凤英