（设计艺术学专业论文）网页色调分类理论研究.pdf

浙江大学硕士学位论文摘要 摘要 网页设计是一门新兴学科，它随着计算机科学的发展、互联网的广泛应用而 逐渐兴盛，其发展历程虽短，发展速度则相当可观。网页的色彩是树立网站形象 的关键因素之一，它为网页设计注入了生机和活力。网页设计研究离不开对色彩 的研究，本文以网页界面设计的色彩基调为分析对象，探讨网页界面色调设计的 理论和方法。文章首先从色彩构成的相关概念出发，研究色彩学科的发展演进历 史图景、现实状态以及色彩学在生活中的应用，提供一个宏观的知识背景框架； 再由此过渡到网页的色彩设计这一特定领域，通过对目前网页设计领域色彩管理 的混乱现状分析，引出建立网页色调定位理论的重要性。本文通过大量的案例分 析，尝试在这些凌乱纷繁的网页色调中归纳、总结、找寻其内在的规律性，并提 取出网页色彩设计中关于色调定位的一些相对稳定的元素，从而创建了一个网页 色调定位理论系统，将网页色调的总体趋势划分成轻松活泼型、热烈奔放型、知 性沉稳型、神秘另类型、甜美柔媚型、明亮轻快型、简约理性型和专业高效型八 种不同的类型。文章最后部分将网页色调分类理论运用到网页设计的实践课题 中，验证了该理论的可行性与可信度。 本文从宏观的色彩学角度出发，结合相关学科的理论，如艺术设计学、认知 心理学、设计社会学等等，对网页设计的特点进行分析、总结，希望由此进入网 页界面色彩设计的理性空间。网页色调分类理论旨在为以后的网页设计者提供一 些方向性的指导，对色彩设计实践有一定的启示意义和借鉴作用，促进设计的灵 感启发。 关键词：网页设计，色调分类，网页色调定位，主色调，辅助色调 浙江大学硕士学位论文a b s t r a c t a b s t r a c t w b b d a g ed e s i g ni san e w l yb o md i s c i p l i n ew i t ht h ec o m p u t e rs c i e n c e sb o o m 0 r d yaf e wy e r r sd e v e l o p m e n t , w e b p a g ed e s i g nh a sa l r e a d yb e e nt h em o s ti m p o r t a n t p o w e ri nb u i l d i n gt h ei n t e m e t j u s t 船t h en e wi n j e c t e df r e s hb l o o df o rt h ev i s u a l c o m m u n i c a t i o na r t , i tl a r g e l ye x p a n d e di t se x t e n s i o n n o tl i k et h eo t h e rt r a d i t i o n a l d e s i g n sj u s t a sp o s t e rd e s i g no rp a c k a g ed e s i g nw h i c hh o l d sa1 0 n gh i s t o r yo f d e v e l o p m e n t ，w e b p a g ed e s i g na l o n gw i t ht h ea g eo fc o m p u t e r , f o l l o w st h es t e p so f p e r s o n a lc o m p u t e ra n di n t e r a c t sp o p u l a r i z a t i o na n dt h eb i gc h a n g ei np e o p l e s l i f e s t y l e s i tw i l ls u r e l yh a v eab r i g h tn e wf u t u r ea n dt h es p e e do fi t sp r o g r e s si s u n i m a g i n a b l e c o l o ro f t h ew e b p a g ei st h ek c vt oe s t a b l i s ht h ei m a g eo f t h ew h o l ew e b s i t e n 埠 s t u d yo f w e b p a g e 啪tl e a v ei t sc o l o ra 1 8 0 c o l o rb r i n gw e bn o to n l ye n e r g y , b u ta l s o l i f e b l o o d t l l i sp a p e rs e tt h ew e b p a g e k e yt o n ea st h em a i nt o p i c d i s c u s st h em e t h o d f o rw e b si n t e r f a c ec o l o rd e s i g n i tc o m e sw i t ha l lt h er e l a t e dc o n c e p t i o n sa b o u tc o l o r , g i v et h ep i c t u r eo f h i s t o r yo nc o l o rs t u d y , t h e ng r a d u a l l yg e tt ow e b p a g ec o l o rd e s i g n t h i ss p e c i a l t y t h i sp a p e rs t a r t sw i t han e wa n g l eo f v i e w , c o m b i n ew i t ht h eo t h e r n e i g h b o r i n gd i s c i p l i n e s ，a r td e s i g n , p s y c h o l o g y , s o c i o l o g yf o ri n s t a n c e ，i n t e g r a t et h e c h a r a c t e r i s t i c so f w e b p a g ed e s i g ni n t oa n a l y s i s h o p e st h a tt h i sc o u l dc o m et os o m e r a t i o n a lc o n c l u s i o n t l l i sp a p e rm a i n l yb r i n g sf o r w a r dap o i n tt h a tc o l o rc o m e sb e f o r e t h ef o m li nw e b p a g ed e s i g n i tp u t st h ef o u rs e a s o n sc o l o rt h e o r yw h i c hi so n c eu s e d s i m p l yi nd r e s s i n gi n t oi n t e r n e tw o r l d i tc o n c l u d e st h a tw e b p a g ea l s oh a sf o u rs e a s o n s c o l o rt o n e a n da p p l yt h i st h e o r yt op r a c t i c a ld e s i g ni n s t a n c e s t l l i sa b s o l u t e l y s t r e n g t h e n e dr e l i a b i l i t ya n df e a s i b i l i t yi nt h i st h e o r y t h em a j o ri d e ao f t h i sp a p e r i st o p r o v i d e5 0 m ew a y si nf u m mw e b p a g ec o l o rt o n ed e s i g n sa n dm a y b eg i v es o m e r e v e l a t i o n st ot h eo t h e r s b e c a t l s ec h r o m a t i c si sad i s c i p l i n et h a tm a n yo t h e rs u b j e c t s i n v o l v e d t h i ss t u d ym a k e sal o to f s a 1 s e i tl a i dt h ef o u n d a t i o nf o rt h ef u r t h e rs t u d y 勰 w e l l 嬲c o n c r e t ed i s c o v e r y n o to n l yg i v e si n s p i r a t i o n b u ta 1 8 0m a k eu s ef o rr e f e r e n c e a b o v et h ed i s c i p l i n e s k e y w o r d s ：w e b p a g ed e s i g n ，c o l o rc l a s s i f yt h e o r y ，c o l o rb e f o r ef o r m ， k e yt o n e ，a s s i s t a n tc o l o r 浙江大学硕士学位论文第1 章绪论 图目录 图1 1 微软公司最新推出的0 f f i c e2 0 0 7 的软件版本界面5 图2 1 色相图。8 图2 2 同一色相明度变化。8 图2 3 不同色相明度变化一9 图2 - 4 色彩纯度变化图9 图2 5 色彩疗法l l 图2 - 6 色彩的情感对应层1 3 图3 1 轻松活泼型色调实例1 2 2 图3 2 轻松活泼型色调实例1 的色彩分析图2 2 图3 3 轻松活泼型色调实例2 2 3 图3 - 4 基于实例1 、2 的轻快活泼型色调配色数据图2 3 图3 5 热烈奔放型色调实例1 ( 可口可乐公司主页) 2 4 图3 - 6 热烈奔放型实例2 2 5 图3 7 基于实例l 、2 的热烈奔放型配色数据。2 6 图3 8 知性沉稳型棕褐色调2 6 图3 - 9 知性沉稳型色调实例l 2 7 图3 1 0 知性沉稳型色调实例2 2 8 图3 1 l 基于实例l 、2 的知性沉稳型色调配色数据图2 8 图3 1 2 神秘另类型色调实例1 。2 9 图3 1 3 神秘另类型色调实例2 3 0 图3 1 4 基于实例1 、2 的神秘另类型配色数据3 0 图3 1 5 甜美柔媚型色调实例l 3 l 图3 1 6 甜美柔媚型色调实例2 3 2 图3 1 7 基于实例l 、2 的甜美柔媚型配色数据3 2 图3 1 8 明亮轻快型色调实例l 3 3 图3 1 9 明亮轻快型色调实例2 3 4 图3 2 0 基于实例l 、2 的明亮轻快型配色数据3 4 图3 - 2 1 简约理性型色调实例l 3 5 图3 - 2 2 简约理性型色调实例2 3 6 图3 - 2 3 基于实例l 、2 的简约理性型配色数据3 6 图3 - 2 4 专业高效型色调实例l 3 7 图3 2 5 专业高效型色调实例2 3 8 图3 - 2 6 基于实例1 、2 的专业高效型色调配色数据3 8 图4 - 1 源自大自然的色调数据1 4 0 图4 _ 2 源自大自然的色调数据2 4 l 图5 1 上海鸿韵数码幼儿园网页设计原型4 9 浙江大学硕士学位论文第1 章绪论 图5 2 上海鸿韵数码幼儿园5 0 图5 3 上海鸿韵数码幼儿园首页设计定稿5 l 图5 - 4 上海鸿韵数码幼儿园链接页5 2 图4 5 浙江大学计算机学院英文版网页后台管理模块5 3 图4 - 6 浙江大学计算机学院英文版网页首页设计5 4 2 浙江大学硕士学位论文第1 章绪论 第1 章绪论 1 1 课题研究的背景 网页设计作为艺术设计领域的一股新鲜血液，极大地拓展了视觉传达设计的 范围。短短几年间，网页设计行业已俨然成为整个互联网建设的重要力量。网页 设计虽然不像其它的传统设计门类，如广告招贴设计、包装设计等有着悠久的历 史积淀，但随着计算机技术的发展，个人电脑、网络的普及以及人们生活方式的 改变，这一新兴设计门类的发展速度和前景是难以估量的。 本文探讨的是网页界面设计的色调定位问题。关于网页设计的研究不少，但 单独就网页的色调问题专门进行探讨的论著研究迄今为止还比较少。随着网络宽 带技术的逐渐成熟，单纯从技术角度切入的研究必然会遭遇到发展的瓶颈，而从 网页设计的美学本质问题出发作研究则将会是一个广阔的天地，因此需要给予特 别的关注和探讨。另外，其他学科涉及色彩方面的研究很多，比如室内设计色彩 学、工业设计色彩学、形象设计色彩学但这些学科在色彩方面的研究、论述 大多都是局限在笼统的色彩大概念中，而非是对色彩基调的专门研究。就目前国 内对于网页的色彩及色彩设计的研究总体状况而言，大多数的网页设计理论都在 网络动态技术的实现、人机交互等问题上投入大篇幅的笔墨热情，其实质是对目 的的漠然，而对手段消耗了巨大的精力，把手段当作目的来追求。无论是何种 技术，最终都是为人服务的，一味的讨论技术，常常是把网站当成了一个网页制 作技术的展台，而忽视了审美主体人的需求。即便我们掌握了很多种网页制 作的技巧，却发现依然无法追上日新月异的网络技术发展的进度。而那些动态闪 烁的图片是否真的有必要出现? 那些一打开页面就会强行进入浏览者视线的浮 动广告窗口是否真正起到商品促销的作用? 也许这才是更值得我们倾心尽力的 问题。虽然极少数的期刊论文开始关注到网页的色调问题，但其研究阶层却基本 还停留在做零散的个案考证阶段，尚未形成统一完整的理论体系。然而这些微观 研究也并非毫无意义，它多少为宏观体系的架构奠定了一定的基础，并且也只有 在微观研究上形成的宏观研究才具有可信度。 1 2 课题研究的意义 随着计算机技术的发展，个人电脑、网络的普及以及人们生活方式的改变， 网页设计这一新兴的设计门类越来越受到重视。作为视觉传达设计学的分支学 浙江大学硕士学位论文 第l 章绪论 科，网页设计在西方已有3 0 多年的历史，特别是2 0 世纪9 0 年代以来，更成为 西方设计学研究的一门显学。网络技术的飞速发展极大地拓展了网页设计的应用 层面，但与此相关的理论研究却相对滞后，至今没有一个系统的理论来指导实践。 本文仅对于网页的色调定位问题展开研究，这是每一个网页设计者在实践中都必 须面对和考虑的问题。 俗话说：“远看颜色近看花”，人们在浏览网页时，最先注意到的就是网页 界面的色彩。由色彩的明度、纯度、色相等合构成的色调在网页设计中的作用不 可小觑。研究表明，一个视觉功能正常的人从外界接受的信息，9 0 以上是由视 觉器官输入大脑的，而视觉的第一印象是对色彩的感觉。心理学有关研究表明， 人的视觉器官，在观察物体的最初的2 0 秒内，色彩感觉占8 0 ，形体感觉占2 0 ； 两分钟后，色彩占6 0 ，形体占4 0 ；5 分钟后各占一半，并且这种状态将继续 保持【2 】。也就是说，人眼在观察事物时，要经历以下几个过程：首先察觉到物体 的色彩，其次感受到大致的形体，再次着眼于线，最后才聚焦于点细致观察。可 见，在视觉的两大构成因素“形”与“色”之中，人类对色彩的敏感度要 比形状要强得多。从色彩心理的审美角度分析，色彩在视觉上更容易增强形象的 感染力，网页设计的总体艺术效果在很大程度上也取决于色彩的作用【3 】。此外， 色彩还有一种使人增强识别记忆力的作用。恰当的网页色彩搭配能使该站点在浩 如烟海的互联网世界中脱颖而出、独树一帜，给浏览者留下深刻的视觉印象。网 页色彩设计关乎网站的形象。事实证明，网页设计的好坏直接影响着网站的访问 量，网站作为一种媒体，访问量乃是其价值最为直接的体现。如今，网站不再是 把信息简单的放在页面上供人浏览、下载，而是要考虑如何更有效的吸引更多的 网民来访问网站和如何向网民传达一个良好的网站形象，使之成为忠实的访客。 若单就商业利益而言，合理而得体的网页色调设置能有助于人们识辨该企业的产 品性质，为企业树立良好的公众形象，进而赢得客户的关注和信赖，最终促进销 售。 当然，色彩必定要依附于某种具体的形状而出现，所谓“形之不存，色将焉 附? ”纵观整个网络世界，“形形色色”的网站中，色与形须臾不可离。没有形 的依托，色就失却了它赖以生存的土壤，形状与色彩是有机统一的整体，两者交 相互用，其表现力亦相辅相成【4 】。本文强调网页色调定位的视觉优先地位，并不 与其外形框架的重要性相抵牾。只因论文的篇幅有限，不可能面面俱到，现只选 择对网页的色调定位问题展开系统论述。 对界面色彩基调的重视是近来设计界的一个新动向【5 1 。例如，微软公司最新 4 浙江大学硕士学位论文第t 章绪论 推出的o m c e2 0 0 7 的新版软件界面的色调设计( 如图1 1 所示) ，突出了以 用户为中心的设计理念，深入分析色彩给用户带来的情感上的不同反应，通过界 面背景色调的设计营造一种轻松、愉悦的使用环境。w o r d2 0 0 7 新版的界面是以 理性的蓝色调为主调，统一了整个背景工作环境。网页界面设计是人机界面设计 的延伸，网页色调也是需要通过电脑显示器屏幕来观看的，因此网页的色调设计 与软件的界面色调设计具有很大的共通性，也是需要得到进一步重视的因素。 图1 - 1 微软公司最新推出的o 街2 0 0 7 的软件版本界面 孤立的色彩无所谓美丑，在网页中色与色之间相互作用所产生的综合效果， 也即色彩的基本调子问题是影响审美的关键因素。因此如何处理好色与色之间的 协调关系，就成为网页色调定位的关键问题。这种网页的色调定位，或者说网页 色调的处理问题是否存在着某种内在的、必然的准则、方向和尺度? 如果存在， 他们是什么? 我们当怎样去寻觅和把握他们? 虽然对于网页色调问题的研究思 考本身难免要受到文化处境、认知水平的制约，所创建的网页色调定位理论难免 存在纰漏疏忽之处，但这并不意味着相关的研究毫无意义，至少它使人们更进一 步地认识到色调在网页设计中的重要性和复杂性，由此形成了本研究的中心理论 网页色调分类理论。第三章和第四章是本文的重点所在，主要从两个层面， 即理论和实践的层面论述了在网页界面色调定位中运用分类理论的原则和方法。 最后一章是对全文的总结回顾，概括出了网页设计色调分类理论的现实意义和实 践意义。 浙江大学硕士学位论文 第1 章绪论 在整个网页色调分类的研究过程中，最大的困难来自于不同类型色彩群的界 定问题，就如同大自然中四季的气候并不总是泾渭分明一样，有时冬天的季型也 偶尔会出现春暖花开的景象。网页色调定位的划分也会遭遇类似的反常情况。具 体而言，某些色彩特质往往同时存在于两种、甚至三种不同的色调类型中，例如 轻松活泼型与明亮轻快型在色彩群的划分中往往呈现模糊的交叉印象。但这并不 表明该研究不可能或无意义；相反，它恰恰证明了这种研究的必要性和迫切性。 从混乱的现象背后找出秩序来，从无意义的构成要素中寻找到事物有意义的本质 关系；从色彩纷繁复杂的现象中梳理和寻求发展的基本方向；通过对表层结构的 分析，揭示其深层结构，使不确定因素向确定的方向转变，忽略不稳定的因素， 抽取其相对稳定的部分，简化提炼出关键性元素，得出不同类型的配色参考系数， 为不同类型网站的色调定位提供一个基本的参照框架是本文最大的意义所在。 1 3 本章小结 传统观点认为，网页设计要从形到色，先讲形式布局，再谈色彩色调，这是 一般的思维进路，并且这种观点己为人们广为接受。但是根据人眼对色彩的视觉 优先秩序来看，色彩的印象是人们的视觉对网页产生的第一印象，表明网页的色 彩在网页设计中具有长久以来为我们所忽略的重要地位，网页的色彩问题应当优 先于形式布局被重新认识。由于观念的改变比物质层面的改变要艰难得多，因此 也更重要，本文在此强调的正是网页色彩优先于形式布局的观点。 网页的色彩是树立网站形象的关键之一，鉴于其在网页设计中的重要地位和 作用，本文试以网页界面设计的色彩基调为分析对象，探讨网页界面色调定位设 计的理论和方法。本文通过大量的案例分析，创建了一个网页色调定位理论系统。 本文的主要内容是围绕着网页色调定位设计的构建展开的，主要在研究设计思维 和色彩本身特性的基础上，结合网页设计的特点，搭建了网页界面色调定位设计 的框架，并在文中展开了具体的实践应用。关于网页色调定位设计的研究具体而 言主要有以下几方面的工作：一是从宏观的色彩学基础知识切入到网页色调的细 分理论；二是分析整理出一套不同类型网站的色调配色数据库；三是归纳、总结 得出网页色调定位的普遍原理。此外，本文从网页色调优先于形式布局的观点出 发来定位整体的色彩倾向，这为网页设计理论提供了一个新的视角，也不啻为一 种对色彩与形式关系的新认识。 6 浙江大学硕士学位论文 第2 章两页与色彩学概论 第2 章网页与色彩学概论 2 1 色彩学发展历史 人类关于色彩的研究已有漫长的历史。古希腊时期，哲学家、科学家亚里士 多德( a r i s t o t l e ) 曾对色彩进行过广泛的研究。到中世纪，著名医生阿尔韦托马 格诺撰写发表了关于色彩的论著。1 6 6 6 年，英国物理学家牛顿首次用三棱镜分解 日光获得了红、橙、黄、绿、青、蓝、紫七种色光嘲。1 8 7 3 年以后，有机染料与 卤化银乳剂合成物的多感色性陆续被发现( 蓝色除外) ，在此基础上出现了彩色摄 影和光化学学科的开始，人类对色彩的认识、研究进入到了一个崭新的时代【7 】。 2 0 世纪后期，随着人类社会的发展、科学技术的进步、文化艺术的丰富，人类在 色彩领域不断遇到和发现新的问题，人类在色彩方面的认识不断地积累，逐渐形 成了- - f 7 新兴的交叉边缘学科色彩学。 色彩学的研究主要分为两个方向：一是理性地研究色彩本身的各项性质，二 是感性地开发色彩的构成表达l 羽。德国包豪斯时期的色彩学家约翰内斯咿 顿( j o h a n n e si t t e n1 8 8 8 1 9 6 7 ) 的色彩视觉课程( 其思想凝聚在其所著的色彩艺 术中) ，对当今的色彩构成教学体系起到了深远的影响作用。后来，日本人在 他的基础上将之发展为独立的“色彩构成”专门课程。如今，色彩学已经在社会 生活中展开广泛的应用，并随之产生了诸如环境设计色彩学、服装设计色彩学、 个人形象设计色彩学等等交叉学科。 2 2 色彩学基本概念 网页是色彩应用的一个新领域，它既具有色彩学知识的共性，又具有不同于 普通平面设计色彩应用的特性。了解色彩学的基础知识，掌握网页色彩的特殊性， 有助于我们在设计实践中更理性地运用色彩，提高设计效率。 2 2 1 色彩三原色 我们所见的各种色彩都是由三种色光或三种颜色组成，而他们本身不能再分 拆出其他颜色成份，所以被称为三原色【9 】。原色有两种类型：色光三原色和色料 三原色。原色能合成其他色，但其他色不能还原出原色。光学三原色是指红( r e d ) 、 绿( g r e e n ) 、蓝( b l u e ) 三种颜色，这三种色光混合，能得出白色光。如霓虹灯， 它所发出的光本身带有颜色，能直接刺激人的视觉神经而让人感觉到色彩，电视 浙江大学硕士学位论文第2 章网页与色彩学概论 机、电脑屏幕显示的色彩均是r g b 三种色光组成。网页色彩是通过电脑显示器屏 幕出现的，因此，网页色彩的三原色即红、绿、蓝三色，在网页h t m l 语言中的色 彩表达即是用这三种颜色的数值表示【l o 】。如红色c o l o r ( 2 5 5 ，0 ，o ) ，十六进制的表示方 法为( # f f 0 0 0 0 ) ：白色为( # f f f f f f ) 。 然而人类认识色光三原色的历程并非一帆风顺。最初人们认为，光学三原色 分别是红、黄、蓝三种色光，直至1 8 0 2 年英国物理学家托马斯扬( t o m a sy o u n g ) 根据人眼的视觉生理特征提出了新的色光三原色理论i l l l ，认为色光的三原色是 红、绿、蓝。1 9 世纪末，德国物理学家范霍姆霍尔茨( v o nh e l m h o l t z ) 的三色 学说又提出，人眼视网膜的视锥细胞含有红、绿、蓝三种感光元素，由于光刺激 的强弱而产生了色彩感觉。此后，该理论又被物理学家马克思韦尔通过物理试验 证实。此后，红、绿、蓝三种色光为色光三原色得到了人们的普遍认可【1 2 】。 2 2 2 色彩三要素 色彩可分为有彩色和非彩色两种。非彩色只具有明度的性质，有彩色才同时 具有色相、彩度和明度的三要素。 色相、纯度、明度，这三种性质是色彩最基本的构成要素，人们以此来鉴别、 分析和描述色彩，称为色彩的三要素。色相( h u e ) 简写h ，表示色的特质，是色 彩的第一要素【6 】。 图2 1 色相图 明度( v a l u e ) 简写v ，表示色彩的强度，也即是色光的明暗度，是色彩的第二 要素。明度按一定的间隔划分，就构成明暗尺度。有彩色的明暗，以无彩色灰调 的相应明度来表示其相应的明度值【l 引。色彩的明度有两种情况：一是同一色相的 不同明度；二是不同种色相的不同明度。同一色相，如图2 2 的蓝色，在受光强 弱不同时，产生的明度就不同。不同的色相，如图2 3 中的红、橙、黄、绿、蓝、 紫6 色中，黄色最明，紫色最暗，其他各色均处于一个灰与深灰的程度之问。 图2 - 2 同一色相明度变化 浙江大学硕士学位论文 第2 章网页与色彩学概论 图2 - 3 不同色相明度变化 彩度( c h r o m a ) 简写c ，表示色的纯度，是色彩的第三要素。在网页中彩度主 要是指色彩对人的视觉刺激程度。彩度越高，色越纯，越艳；彩度越低，色越涩， 越浊( 如图2 4 所示) 。 图2 4 色彩纯度变化图 在实际应用中，色相、明度、纯度是辩证存在的，配色时应综合考虑三要素 之间的关系。在网页设计中，明度的运用很普遍。比如一些购物类、儿童类的网 站，常常用一些鲜亮的高明度色彩，给人以绚丽多姿，生机勃勃之感。明度越低， 颜色越暗。例如一些游戏类网站，为了表现其神秘梦幻感，往往选择用低沉的色 调。此外，不同种的色相间，有明度差的色彩更容易调和。如紫色( # 9 9 3 3 9 9 ) 跟黄 色( 群们m 0 ) ，暗红( # c c 3 3 0 0 ) 跟草绿( # 9 9 c c 0 0 ) ，暗蓝( # 0 0 6 6 c c ) 跟橙色( # 1 1 9 9 3 3 ) 等等。 2 3 色彩的情感对应 色彩心理学研究表明，不同的色相、明度、纯度的色彩能给人以不同的感觉 和情绪【1 4 1 。网页色彩是通过电脑显示器出现的，同样也能引发浏览者不同层次的 情感反应。网页设计可以通过色彩来表达心理反应的不同层次，换言之，网页色 彩对应于不同层次的情感。从最简单的生理反应到较为抽象的心理层面的反应， 从简单情绪层面的反应到复杂的文化深层心理结构层面的反应。引起色彩表达的 不同层次的原因除了视觉生理机制的客观因素外，还在于色彩与人的思维活动有 关。色彩引起情绪反应的最主要的思维因素是联想。色彩的联想分为具体联想和 抽象联想。如红色既可具体联想为火的色彩、血的色彩、太阳的色彩，红色又可 产生热情、奔放、喜庆、活力等抽象的情感联想。后者的联想较前者的联想更为 复杂、深层。比如，远古时代的人们在庆祝某个活动时常常点起火把，因此火的 元素便与喜庆的氛围之间建立起某种联系。因此便产生了第一级层的抽象联想。 各种色彩的联想经过无数次的反复，这样几乎固定了色彩的专有表情，某色彩就 被赋予了某种特定的情感象征。 9 浙江大学硕士学位论文第2 章网页与色彩学概论 根据心理学的同构原理，一种色彩可以与具体的物体、抽象的词汇、某一种 情感等形成异质同构的关系，因而色彩具有表现现实世界的功能。色彩与其他事 物之间异质同构关系的建立取决于大脑的思维模式。方面，尽管这种思维是依 照一定的规律进行的，但它具有相对的灵活性。例如同一种颜色通常含有不止一 种的象征意义，大部分色彩都同时具有正面和负面的联想。红色既可以象征热情， 也可以象征危险。此外，色彩的视觉心理反应，是由视觉反应引起思维后才形成 的。不同个体的人，因其年龄、性格、经历和所处社会文化教育背景的不同，会 对同一种色彩解码出不同的信息。因此色彩的情感问题，复杂而微妙，并非是固 定不变的。另一方面，思维的灵活性也不是无限的，任何一种信息符号也都不可 能是人类意志的自由创造，而必须遵循人类文化的进化过程，与现实世界有着紧 密地联系。 色彩能表达情感，在网页设计中，色彩是营造情感的最主要因素，能带给浏 览者不同的心理感受。网页色彩作为网站界面设计的重要要素，在情感表达和理 解中具有以下两个特点：第一，网页色彩的情感表达具有声效辅助的特点。第二， 网页色彩的情感表达具有动态变化的特点。因此，设计者在做网页界面的色彩设 计时，要抓住这两个特点，深入分析网页色彩能给浏览者带来的情感上的不同反 应，通过色彩色调来营造一种良好的用户使用环境。 2 3 1 色彩的生理反应 色彩感觉的产生源自光线对眼睛的物理刺激，是一个纯粹的生理过程【l 副。视 觉器官有时会因为视觉生理功能上的局限性而产生错视与幻觉，从而形成主观感 觉和客观现实之间的误差，这种误差是色彩对人的生理层面产生的反应。网页色 彩在生理层面的反应是不同文化背景、不同年龄层、不论性别差异的人们都可以 体会到的色彩反应。例如黑色给人以收缩的视觉感受( 比实际更小) ，白色则具 有扩张的感觉( 比实际更大) ；红色与蓝色在同一视域内相比，红色显得靠前， 蓝色显得后退。产生这种色彩生理反应的原因在于：暖色和高明度色在人眼视网 膜成像靠前，因而具有膨胀和前进感【1 6 】；而冷色和低明度色则在视网膜靠后的区 域成像，因而具有收缩感。在网页中，即便是相同的背景框架布局，由于所选择 的主色调色彩的不同，就会给人造成大小、远近不同的视觉效果。再如，当人们 看到网页上大面积的红色块，也即主色调为红调时，视觉会需要看到其补色 绿色来平衡整体色感，这是因为视觉器官按照自然的生理条件，会对色彩的刺激 本能地进行调剂，以保持视觉上的生理平衡，并且只有在色彩的互补关系建立时， 1 0 浙江大学硕士学位论文第2 章网页与色彩学概论 视觉才得到满足而趋于平衡【1 7 】。这种视觉平衡的生理机制与味觉平衡的生理机制 有着极其相似的一面。通常当人们在摄取了大量的甜味食品之后，往往会随之产 生品尝咸味食物的欲望。同理，在网页的色彩设计中，当某种颜色占据绝对主导 地位时，常常需要辅以局部的、小面积的该色的补色来点缀其中，起到调和整体 视觉效果的作用。此外，色彩能引起的一般生理反应还包括：红色刺激神经中枢， 促使呼吸、血液流通速度加快，使人情绪高昂；橙色刺激食欲、促进消化功能和 免疫系统；黄色刺激神经系统提高功能，使人头脑清醒、思维敏捷；绿色降低眼 压、减轻视觉疲劳；蓝色松弛神经、肌肉【1 司等等。以上所提及的诸如此类现象的 产生是由人体的视觉生理机制造成的，属于色彩反应的第一层次生理反应。 近年来比较流行的“色彩疗法”是色彩在生理层面反应的最主要应用。该疗 法主要通过让病人眼观目睹各种颜色，从而产生心理刺激，以促进疾病的康复， 起到治疗的作用。其理论认为，人体内有7 种腺体中心，分布在脊柱的不同部位。 每种色彩都能产生一种电磁波长，这些波长由视觉神经传递给大脑，促使腺体分 泌激素，从而影响人的心理与肌体【1 9 】。一个健康人的体内色谱是平衡的，一些疾 病在很大程度上是由于人体内色谱失衡或缺少某种色彩造成的。治疗师就根据这 些色彩选择展开治疗，通过7 个轮穴的分布将彩色灯光打到治疗对象身体的不同 部位。目前色彩疗法已经开始在西方一些发达国家展开系统的应用。例如，英国 约有6 0 0 位色彩治疗师驯。 图2 - 5 色彩疗法 2 3 2 色彩的心理反应 在网页中观看色彩时，由于受到色彩的视觉刺激，而在思维方面产生对生活 经验和环境事物的联想，这就是色彩的心理反应【2 1 1 。色彩的心理反应，其实是一 种色彩联觉。色彩联觉是指色彩的视觉感与人脑中储存的日常生活的经验、记忆 产生同构关系，从而使色彩成为情感的先导，或转变为一些抽象概念【2 2 】。 浙江大学硕士学位论文 第2 章网页与色彩学概论 2 3 2 1 色彩的初级情感表达 人类的感官在检视色彩的科学本质和色彩感觉的美学考量时扮演了十分重 要的角色。色彩是通过积淀在人们心理的记忆来影响人们的情绪的吲。色彩是对 人的视觉刺激最敏感的视觉信息符号，是一切视觉因素中最活跃和最具有冲击力 的因素。除了感官反应之外，人类内在对色彩的反应还有更深层的一面。网页色 彩的初级心理反应，是一种以感观反应为基点的反应，如触觉、味觉、嗅觉、听 觉等等，属于色彩的具象表达。色彩的这种情感功能，以英国心理学家格列高里 先生的一段话来表达，大概是十分恰当的：“色彩对于我们人类具有极其重要的 意义它是视觉审美的核心，深刻地影响我们的情绪状态刚”。在网页色 彩的初级心理反应，触觉是第一表层，味觉、嗅觉居其二，听觉再次之。若从设 计的角度出发而言，亦可称其为网页色彩的初级情感表达，这是色彩意识的惯性 在心理上的简单投射。 触觉的冷暖，本是人体皮肤对外界温度高低的一种感觉【2 5 】。例如太阳、炉火、 烧红的铁块，此三者给人的温度感逐级递增。这些生活印象的积累，使人的视觉、 触觉与心理活动之间产生了特殊的联系，使视觉变成了触觉的先导。触觉处属于 色彩初级情感表达的第一位，是因为单一种颜色便可产生冷暖感。稍复杂一些的 运用，例如在网页设计中，同样是暖色调，可以用不同的色差来表达冷暖触觉的 强度差。味觉、嗅觉是仅次于视觉的两大感观体验。色彩表达味觉、嗅觉难以用 单一的色彩来表达，需要与其他种色彩调和搭配才能形成特定的情感符码。将听 觉列为第三层次的心理反应，其原因在于音乐的节奏韵律感往往需要通过一系列 的色彩反复才能实现，色彩在向听觉的转换中经历的阶段较前二者更为复杂、隐 形、深刻，因此色彩对听觉的表达属于初级情感表达的最高层。 2 3 2 2 色彩的中级情感表达 网页色彩的中级情感表达是种色彩的直感性心理效应，又称为抽象情感反 应。例如用色调来表现快乐、冷静、活泼等等情感。 色彩具有内在感召力，色调正是用色彩来调动人的情绪。色彩引发高级心理 反应的原因在于人类的情绪往往受“色彩记忆”的影响，这些记忆从人类进化 以来长久地占据人们的心理空间，已上升为一种理性认识【2 6 】。色调长于表现情感 气氛，色彩表现的气氛与基色调有很大关系。基调反映色彩表达的基本倾向，它 相当于音乐的主旋律，色彩的气氛很大程度上是基色调形成的。基色调的选择可 以是单色的、突出某种色彩的表现力，如红色的热烈鲜艳、蓝色的宁静纯洁、灰 浙江大学硕士学位论文第2 章网页与色彩学概论 色的含蓄柔和等等。也可以是不同色彩的对比和配合，以表现在各种色彩相互衬 托情况下多彩多姿的效果。此外，色彩在各种存在条件下的对比关系，如色相对 比、明度对比、及彩度对比都对色彩表现气氛形成不可忽视的影响。 2 3 2 3 色彩的高级情感表达 色彩表达的最高形态是色彩成为一种情感语言，它所表达的是一种人类内在 生命中某些极为复杂的感受。网页色彩的高级情感表达又称为色彩的抽象概念层 心理反应，是指色彩所引起的更为复杂的间接心理效应，是色彩的最深层心理反 应。此时色彩所引起的心理效应不仅仅停留在感觉或知觉的浅层次阶段，而是导 致更为深刻的心理活动过程。这些概念能勾起人在思维方面对生活经验和环境事 物的联想。色彩的间接心理效应通常与个人的文化背景或社会背景有关。例如黄 橙色代表果实成熟，给人以甜蜜、丰收之感：大海、天空给人宽大、深沉之感等 等。这些体验都属于色彩情感共性的范畴，也是初级情感的范畴。色彩的最高层 情感表达往往是色彩与文化结构之间的对应，不同人类文化群体长期生活的积累 和心理、感情需要构成了不同的文化色彩体系。例如尼日利亚首都拉格斯以深蓝 色为主色，加纳首都阿克拉以白色为主色，摩洛哥首都非斯以黑色为主色，这些 色彩的运用不仅得到相应文化群体的认同，而且甚至成为其人文特征的色彩识别 标志f ”。因此在网页色彩的选择时也要考虑设计面向的社群问题，网页色调定位 设计应当把用户的情感反应，而不是单纯的色彩美学问题摆在网页色彩设计的中 心，根据网页的设计目的和用户的情感反应来选择运用不同的色调。 图2 - 6 色彩的情感对应层 总之，网页色彩的情感对应呈现逐级上升的梯度层次。充分了解色彩的情感 对应层次，并加以合理地运用，可以网页具有深刻的艺术内涵，从而提升网站的 整体文化品位。 浙江大学硕士学位论文第2 章网页与色彩学概论 2 4 色彩的对比调和 网页的色彩关系主要表现为色彩的对比和调和【2 明。色彩对比是一种手段，其 最终目的仍是调和。色彩的对比分为色相对比、明度对比、纯度对比、面积对比 等。色彩的调和可分为有主色调调和与无主色调调和。 2 4 1 色彩的对比 当两个或两个以上的色在同一视域内比较其差别及其互相问的关系，称为色 彩对比御l 。色彩对比必须在同一条件下才允许作比较，否则就失去了比较的可能 性。只能是明度比明度，色相比色相，彩度比彩度，否则就得不到准确的结论。 在构成色彩对比诸条件中，色相间的差别是最基本的，明度对比次之，彩度对比 再次之。对比的作用是为了使色彩呈现差异，求其变化来丰富页面，增强视觉冲 击力。 因明度差别而形成的色彩对比，称之为明度对比。色相相同，明度不同的色 对比被称为同类色对比。同类色对比在网页中能起到统一色调的作用。对色彩的 应用而言，明度对比的正确与否，是决定配色的光感、明快感，清晰感、以及心 理作用的关键。因色彩种类的差别而形成的色彩对比叫色相对比。色相对比要把 握“大调和，小对比”的重要原则，即处理好局部调整与整体建构之间的关系。 色相对比在网页设计中用得也较为普遍，总体的色调统一和谐，局部的地方有一 些小的强对比出现。一只红苹果在暖调背景下显得特别诱人，而在浑浊的暗灰色 背景中则显得不好吃，这种色彩对比叫作纯度对比。一般来说，高纯度色的色相 明确、注目、视觉冲击力强，色相的心理作用明显，但容易使人的视觉疲倦，不 能持久注视。含灰调的低纯度色相虽视觉冲击力较弱，但其注目程度低，反而能 持久注视。纯度对比较色相对比、明度对比是较弱的对比。一个阶段差的明度对 比，其清晰度等于三个阶段差的纯度对比。 面积对比是指页面色彩呈单一要素时色彩实际占有页面的大小，是一种多 与少、大与小之间的对比。不同的色彩在双方面积是1 ：l 时，对比最强烈哪】。色 彩面积关系的变化往往会引起色调的变化，面积对比就是研究在两种或两种以上 的色彩之间的色量比例与视觉平衡的关系。色彩面积的调整是使页面构成主色调 的重要手段之一。面积关系还是使页面呈现出基调色、主题色、焦点色、辅助色 等色彩主次的手段之一。此外，面积对比还可以加强其它的对比效果。 和谐统一是对色彩美的最高要求，在网页设计概莫能外，要恰当地处理好 色彩的对比关系。 1 4 浙江大学硕士学位论文第2 章网页与色彩学概论 2 4 2 色彩的调和 把有差别的多种色彩有秩序地、和谐地组织在一起，组成符合一定目的性的 美的色彩关系，这种使视觉愉快的色彩搭配，称为色彩调和 3 1 】。在网页设计中， 色彩调和是指页面上若干具有差异的色彩和谐地融于一个统一体中，也就是多样 性通过统一而产生美的状态。 调和讲究统一，是色与色之间的平衡问题。一般来说，眼睛最能适应的是中 等明度的全色光，因此，在网页设计中要在引起阅读者注意的基础上，避免视觉 的疲劳，尽量采用中等明度的色彩。用色彩来表现形象时，要求形象色的基调与 人对形象的色彩印象相符。由同一性要素构成和谐色彩组群容易产生和谐感。例 如：同色相色域、同明度色域、同纯度色域的对比色群等等。需要指出的是，所 谓调和的色彩设计，不但是指视觉上的和谐也包含心理上的和谐。 调和分为两种：有主色调调和与无主色调调和1 3 2 。有主色调调和也称近似调 和，从狭义上讲就是指局部色彩关系的调和，使页面色彩关系有一个相对明确的 总体倾向，亦称为主色调。有主色调调和是以某一色彩要素构成为主要倾向，从 色相上来说有红色调、绿色调；明度上来说有亮色调、暗色调等。色调决定了网 页的情感倾向。不同的色调引发不同的情感倾向，使网页设计具有丰富的情感因 素【3 3 1 。无主色调调和又称为对比调和，或秩序调和，它强调变化而组合的和谐色 彩。无主色调调和虽无总的倾向性，但并不是色彩的随意组合。有许多处理方法 可使无主色调页面趋于调和，如被称作无彩色系统的极色与任何纯色的搭配；具 有光泽的金属色与其他色彩的组合；三原色之间的组合；三间色( 橙、绿、紫) 之 间的搭配等等。 无论是有主色调调和，还是无主色调调和，网页的色彩设计因受到网络传输 信道带宽的限