网页设计中色彩运用的研究.docx

1、网页设计中色彩运用的研究生网页设计中色彩运用的研究内容摘要】 本文从XX师范大学教育技术专业学生设计的网页作品出发，对其进行分析，发现设计者在网页设计中存在的色彩运用上的问题。然后结合美学、光学和心理学的特点，依据色彩的基本知识和原理，具体分析了色彩在网页设计中对浏览者的视觉、心理以及信息传达效率的影响，最后在前人和本人的网页设计经验的基础上，总结出了在网页设计中运用色彩的一些策略。【关键词】 网页设计；色彩；视觉；心理；搭配色彩是人的视觉相当敏感的东西，它对人的视觉效果非常引人注目，一个网站设计成功与否，色彩起到一个重要因素。因为网页设计属于一种平面效果设计，在平面图上，色彩的冲击力是非常强

2、烈的，它很容易给用户留下深刻的印象。1因此，在设计网页时，我们必须要高度重视色彩的运用。而网页的色彩往往是人们研究的一个重要问题，尤其是教育技术专业的学生，由于对色彩理论基础和色彩技能的掌握的弱势，所以在进行网页设计时，对色彩的把握能力不是很强。而教育技术专业的学生对网页设计的水平要求又相当高，所以该专业的学生在网页设计技术的优势下，若能再做好网页色彩的运用工作，那将可以设计出更高水平的网页。对此，本文从广西师范大学教育技术专业学生的个人网页制作中，来研究该专业在网页设计中的色彩运用。一、教育技术专业学生网页作品中存在的问题在对教育技术专业学生网页作品的观察中发现，他们在网页的框架设计、内容布

3、局和功能实现等方面都表现出比较高的网页设计水平，但是整个网页给浏览者的视觉效果却是欠佳。他们存在的问题可归结为对网页基本色调的确定、色彩的搭配和浏览者对信息的获取效率等三个方面。（一）色彩繁杂，无统一基本色调他们在设计时没有考虑采用一种基本色调来一统页面上的多个内容，忽视了网页的整体美。他们在多个版块的内容采用不同的色彩，所以整张网页做出来的效果就是整个网页多种色彩相互左右和冲突，缺乏了基本色调，网页也就少了灵魂，无以使网页上的内容重点突出，给浏览者造成了阅读上的困难。（二）色彩搭配失调，造成浏览者的视觉疲劳网页上各种色彩间的搭配失调主要体现在设计者在考虑背景与对象（网页上的文字或图象等）的色

4、彩时大面积用了对比色，或者用了比较接近的和亮度比较低的颜色，前者使得对象和背景之间相互剥离分睿挥泻芎玫厝诤虾屯骋唬缓笳咴蚴沟娩勒呓夏芽辞逋成系男畔秸叨佳现馗扇帕虽溃菀自斐墒泳跗停焕阡勒叨孕畔幕袢庇行髌坊共捎昧搜丈饕臁绺癫煌耐计淖帧挂趁嫖宀淑头祝狈甯校不嵩斐射勒叩氖泳跗汀?/P（三）忽视浏览者对信息的获取效率网页设计的最终目的是让浏览者能方便快捷地获取网页上的重要内容。2而从与所观察网页的设计者的交流中了解到，他们在设计网页时对色彩的选择缺乏依据，基本都是凭自己的直觉来选择，而不是依据网页的内容和服务对象来选择色彩；在网页中各种色彩间的谐调处理上，他们的做法基本都是从几种色彩搭配方案的对比中选择

5、自己最满意的一种，而没有基本的色彩搭配原则作为参考。这些同学在设计时忽视了浏览者对信息的获取效率，也忽视了网页设计的最终目的，这样的网页设计失去了它的浏览价值。二、对所存在问题的分析这些网页之所以存在上述问题，原因在于未能把握色彩运用的一般规律及其所带来的视觉和心理效应。从这个角度看，网页的色彩设计已经不是一般的美工，而是综合了许多其它学科的实践应用领域，它涉及到美学、光学、心理学等多门学科。3色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜

6、色，它能给我们带来不同的视觉效果。同时色彩有冷暖、轻重、软硬等等之分，这些也能给我们带来不同的心理效应。而我所调查的对象在设计网页时却忽视了这一点，他们设计出来的网页不仅会造成浏览者的视觉疲劳，同时也会对其心理产生影响，降低了网页的受欢迎度。（一）色彩传达的视觉效应一定的色彩常常和人们日常生活中的的所见所闻和某些心理情感特征产生通感联觉效应。4当人们看到某一色彩时，由于色彩对人们感官的刺激，能使人们产生各种各样的感情，尽管人们由于自身条件的不同而对色彩所产生的感情也不同，但由于共同的社会条件和生活环境，人们对色彩的感受还是有很多共性的。所以，在色彩设计时，应根据色彩感知的共同性去选择色彩。1.

7、红色红色的纯度高，注目性高，刺激作用大，有人称之为“火与血”的颜色，能增高血压，加速血液循环。用红色为主色的网站不多，在大量信息的页面里有大量面积的红色，不易于阅读。但若搭配好的话，也可以起到振奋人心的作用。过纯的红色容易使人疲劳，引起人的心理反感，因此一般只有在以节庆为主题的网站中会大面积使用纯红色，而在其他主题的网站中，要使用大面积的红色就需要加白或调暗。2.橙色橙色的刺激作用虽然没有红色大，但它的视认性和注目性也很高，既有红色的热情又有黄色的光明，以及活泼的特质，是人们普遍喜爱的色彩。橙色可以营造出朝气蓬勃和大自然的气氛，它没有红色那么激烈，适用范围广，所以网站里比较常见。3.黄色黄色是

8、在站点配色中使用极为广泛的颜色之一，它具有明朗愉快的感觉，在各类信息网站中都可以使用。但纯黄色很少大面积使用，同纯红色一样，过于强烈了，但小面积点缀用得颇多。比如用暗清色的黄与其他色彩的暗清色调和使用，页面就会多一些典雅和奇特的感觉。54.绿色绿色为植物的颜色，象征着生命，传达出清爽、理想、希望、生长的意象。如果将它与蓝色、黄色，甚至红色搭配起来用于网页设计中，则可以给网站增加一丝活泼、轻快的感觉。5.蓝色蓝色有沉稳的特性，具有理智，准确的意象，同时还表示希望。蓝色的用途很广，科技、知识、计算机、企业、政府、男性和门户等多种类型的网站都十分适合。蓝色还代表了“可信”的心理感受，很多企业做网站时

9、都选择了蓝色。IBM网站就是其中之一。6.紫色紫色因与夜空、阴影相联系，所以富有神秘感。紫色容易引起心理上的忧郁和不安，但紫色又给人以高贵、庄严之感，所以女性类网站比较适合采用紫色做为主色调。7.白色白色除因明度高而感觉冷外基本为中性色，明视度与注目度都相当高。白色能满足视觉的生理要求，6因此与其他色彩混合均能取得很好的效果。网站和其他视觉作品不同，它要求具有较高的阅读可视性，所以白色的使用是相当多的。8.灰色灰色为没有纯度的中性色。由于视觉最适应看配色的总和为中性灰色，所以灰色是最值得重视的色。7它的视认性和注目性都很低，所以很少单独使用，而它与其他色彩配合使用可取得很好的效果。9.黑色黑色

10、也是没有纯度的色，黑色在心理上是一个很特殊的色彩，它本身无刺激性，但是与其他色彩配合能增加刺激，黑色是消极色，8所以单独使用的情况用途不多，可是于其他色彩配色均能取得较好的效果。（二）色彩传达的心理效应色彩与人的心理感觉和情绪是有一定的关系的，设计者在设计网页时要充分考虑色彩与人的心理、情绪的关系，才能使所设计的网页形成自己独特的色彩效果，给浏览者留下深刻的印象。1.色彩的进退和胀缩感觉当两个以上的同形同面积的不同色彩，在相同的背景衬托下，我们发现给人的感觉是不一样的。在白背景下衬托下的红色与蓝色，红色感觉比蓝色离我们近，而且比蓝色大；当白色与黑色在灰背景的衬托下，感觉白色比黑色离我们近，而且

11、比黑色大；当高纯度的红色与低纯度的红色在白背景的衬托下，我们发现高纯度的红色比低纯度的红色感觉离我们近，而且比低纯度红色大。色彩给人以比实际距离近的色彩叫前进色，给人以比实际距离远的叫后退色，给人感觉比实际大的叫膨胀色，给人以实际小的色彩叫收缩色。由此可见，在色相方面，长波长的色相：红、橙、黄给人以前进膨胀的感觉；短波长的色相：蓝、蓝绿、蓝紫有后退收缩的感觉。在明度方面，明度高而亮的色彩有前进或膨胀的感觉，明度低而黑暗的色彩有后退收缩的感觉。在纯度方面，高纯度的鲜艳色彩有前进与膨胀的感觉，低纯度的灰浊色彩有后退收缩的感觉，并为明度的高低所左右。2.色彩的冷暖感觉在孟塞尔的色相环中，橙色是极暖色

12、，与之相对的蓝色是极冷色。红色和黄色是暖色，蓝紫色和蓝绿色是冷色，而红紫色和黄绿色是偏暖的中性色，紫色和绿色则是偏冷的中性色。9一般来说，看到红、橙、黄等时感到温暖，而看到蓝、蓝紫、蓝绿时感到冷。同时，白色反射光感觉冷，黑色吸收光感觉暖，明度在第五色级的灰色则显得不冷不暖，显中性。另外，在高纯度色彩的影响下，其色彩的冷暖感觉会得到加强，冷色显得更冷，暖色显得更暖；当纯度降低时，色彩的冷暖感会随之减弱。3.色彩的轻重和软硬感觉一般，明度高的色彩感觉轻和软，明度低的色彩感觉重和硬，比如：等大的黑灰色铸铁块与等大的石膏块相比时我们会觉得铸铁块重。同样，等大的而且重相等的三个石膏块，一个涂灰，一个涂黑

13、，一个留白，我们会感觉黑的最重；如果一个涂红，一个涂黄，一个涂蓝黑，我们会觉得蓝黑的最重，涂红的次重。这是因为，红、橙、黄等暖色给人以轻的感觉，蓝、蓝绿和紫等冷色则给你以重的感觉。另外，当色相相同和明度相等时，高纯度的色彩感觉轻，低纯度的色彩感觉重。4.色彩的华丽与朴素感觉从色相看，暖色给人的感觉华丽，而冷色给人的感觉朴素。从明度看，明度高的感觉华丽。从纯度看，纯度高的色彩给人的感觉华丽。5.色彩的积极与消极感觉色相方面：红、橙、黄等暖色，是很令人兴奋的积极的色彩，而蓝、蓝紫、蓝绿等给人的感觉沉静而消极。纯度方面：不论暖色与冷色，高纯度的色彩比低纯度的色彩感觉积极。明度方面：同纯度的不同明度，

14、一般明度高感觉积极。（三）色彩传达的信息效率色彩既能影响人的视觉美感，又能影响人的心理效应。网页设计人员在设计网页时要注意合理运用对比和调和的配色原理，从美学角度去探索色彩网页中的应用，设计出既能表现主题，又和谐悦目的网页，更好地吸引浏览者的注意力。而在所调查的对象中，设计者在设计网页时却很少考虑浏览者对信息的获取效率，这是网页设计者的一大禁忌。设计网页的目的是使网页信息能更好更方便地传达给浏览者，如果忽略了这一点，网页的作用也就无从体现，网页设计毫无实际价值。三、网页设计中的色彩运用策略（一）网页色彩设计的原则1.网页色彩要有鲜明性。一般网页色彩要鲜艳明亮，能用有彩色的就不用无彩色的，这样容

15、易引人注目。有关实验表明，有彩色的记忆效果是无彩色的3-5倍。10也就是说，彩色网页比完全黑白网页更能吸引人。2.网页色彩要有独特性。在网站云集的互联网上，一个网站的网页色彩只有与众不同、独一无二，才能给浏览者留下深刻的印象。尤其在同类网站中，你的色彩一定要符合这类网站用色的特点，又要有自己的独特性。3.网页色彩要有针对性。网站是各种各样的，不同网站的网页色彩有较大的区别，所以设计者在使用色彩时要有针对性，要能体现出网站的特色。4.网页色彩要有相关性。网页色彩要与网站的主题相关联。不同的色彩有不同的象征意义，不同的色彩对人的心理感应也不同。所以不同的网站在选择色彩时，要充分考虑色彩的象征意义和人们的心理感受。5.网页色彩要有视认性。网页色彩设计要利于人们在对大量网页信息浏览的同时，尽量减少屏幕刺激，减轻视觉疲劳，文本要易读、图像要易于区别。这就要考虑网页中图形和文字色彩的视认性，即在底色上对图形色辨认的程度。在不同底色上配以不同的图形色，与视认性高低次序的关系如下表11所示。其中，顺序号1表示视认性高，顺序号10表示视认性低。顺序12345678910底色黑黄黑紫紫蓝绿白黄黄图形色黄黑白黄白白白黑绿蓝