网页设计中色彩与艺术审美探讨Word文档下载推荐.docx

1、2.1 色彩的基本理论及分析 72.1.1 色彩的基本概念 72.1.2 色彩与视觉原理 82.2 色彩在网页中的作用 102.2.1 突出主题 102.2.2 丰富页面层次 102.2.3 强调局部内容 102.3 色彩视觉心理对网页设计的影响 102.4 色彩与艺术审美的关联 11第3章 网页设计中的色彩搭配 123.1 属性综述 123.1.1 数字色彩 123.1.2 电脑色彩显示模式 123.2 网页配色的基本原则 133.3 网页配色的方法与技巧 143.4 色彩搭配体现艺术审美的必要因素 153.5 网页配色软件 16结语 17参考文献 18致谢 19前 言21世纪，人类社会正向

2、数字时代转变，今天已经是互联网的天下，互联网正在全世界进行着越来越深刻的革命。网页设计是近二十年以来意义深远的新兴设计领域。新的媒介同时带来高度的挑战性，网页作为一种新兴的信息载体，相对于传统媒体（报刊、杂志、电视等）来说，它的构成元素更加复杂，包含了文字、图像、色彩、声音、动画等各元素。在网页众多元素中,色彩元素往往是首先吸引浏览者目光的，之后才是网站的信息内容。色彩不但给浏览者带来美感和愉悦感，而且可以有效地传达企业形象、提升品牌价值。网页的色彩是树立网站形象的关键之一。一个网站设计成功与否，在某种程度上与设计者对色彩的运用和搭配有着不可分割的关系。网页设计发展、更新的速度快到令人难以预测

3、，国内越来越多的网页设计正朝着国际化的轨道发展，这些都来源于设计师孜孜不倦的学习和持之以恒的敬业精神，不断地学习借鉴国外的一些先进技术与知识，拓宽自我思维，将技术性和艺术性融为一体，进行创造性活动。网页设计是技术与艺术的结合，是商业社会的产物，它结合诸多学科领域的知识。在网页配色方面，设计者无论使用丰富的颜色还是简单的颜色，都务必要把每种颜色的特性发挥得精益求精、随心所欲。第1章 网页设计的基本元素体现1.1 网页设计中文字元素的运用文字的基本元素包括字体的大小、字体的颜色、字体的字形。而在网页这种特殊的传播媒介中，文字还常常会以动态的形式出现，那么就还要考虑文字的运动速度。一般文字出现在网页

4、中至少要停留2秒，这样才能让浏览者看清记住。在网页设计中，比如网站标志、名字、域名这些重要的信息，一般放置在页面左上角，该区域的文字就要用大字号来突显，方便记忆。在网页的中间部分是用来放置正文的区域，最适合网页正文显示字号为12磅左右。网页下部区域就是页尾，通常是放些版权声明、联系方式、注册号这些辅助说明信息，所以应采用小字号。字体颜色的合理运用可以让网页增添气氛，也易于浏览者的阅读。标题与要强调的部分要运用对比强烈的颜色，甚至做些特效处理。例如可以采用加投影、打灯光、给材质、描边等处理手法。具体采用那种手法，这就要根据该网站的具体风格及浏览者来进行合理的设计。而正文部分要用柔和明度较底的颜色

5、，这样即使时间阅读也不会感到疲劳。值得注意的是在一个页面上文字运用过多颜色，会影响浏览者阅读页面内容，也不利于网站树立统一风格，除非你有特殊设计目的。在网页设计中，字体首先作为造型元素而出现。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容。细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。而儿童类网站具有知识性、趣味性的特点，应采用生动、活泼，富有趣味的字体，如POP体、手写体等，比较符合儿童的视觉感受。由此可见，网页设计师可以通过对文字的大小、颜色、字体、的运用来实现想要的

6、设计效果、设计情感和设计思想。1.2 网页设计中图形元素的运用图片是文字以外最早引入到网络中的多媒体对象。图片的引人大大美化了网络页面。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。对于一条信息来说，图片对受众吸引也远远超过单纯的文字。网络图片的特点是其质量不需很高。一般来说，分辨率为72 dpi（dot per inch）是大多数图片最佳选择；另外，图片要尽量小。网络页面的图片用于网络的传输，受到带宽的限制，其文件尺寸在一定范围内越小越好。这也是适应信息高速公路的要求。图片的位置、面积、数量、形式，方向等直接关系到网页的视觉传达。在图片的选择和优化的同时，应考虑

7、图片在整体编辑计划中的作用，达到和谐整齐。要达到这样的效果。在页面图片的选用时，一要注意统一；二要注意悦目；三要注意突出重点，特别是在处理和相关文字编排在一起的图片时。1.3 网页的构图与布局网页的构图布局与平面构图布局有着很大的相似之处，但是因为技术的局限，网页构图远不如平面设计那样挥洒自如。接触过平面设计的朋友应该知道，我们在平面设计中想把某一对象放置到某一位置的时候只需要简单的拖拽就可以完成。但是在网页设计中我们想对某一对象进行定位的话就不是这么简单的了，必须有HTML语言的支持才行。所以在进行网页设计的时候，除了要有好的创意，还应该考虑到技术上的可行性。常见的网页布局有以下几种：左右对

8、称结构布局、“同”字型结构布局、“回”字行结构布局、“匡”字行结构布局、“厂”字行结构布局、自由式结构布局、“另类”结构布局等。1.4 网页元素与艺术审美的关联作为视觉设计范畴一种，网页设计的最终目的是达到最佳的主题诉求效果，这种效果的取得，网页本身具备较高的艺术性的是必不可少的。一方面，运用逻辑规律对内容进行条理性处理，使之符合受众获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收，另一方面，运用艺术的形式美法则对网页构成元素进行艺术性处理，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解，这是网页设计与其他设计的共通之处。此外，我们根据人类美感的共通性可以总结出十个美的原则：连

9、续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。在网页设计中，一定要全面的考虑这些美的原则，才能设计出让人们对网页产生共鸣的效果，以致网站能得到更好的宣传。第2章 色彩在网页设计中的作用2.1 色彩的基本理论及分析2.1.1 色彩的基本概念对于色彩的研究，千余年前的中外先驱者们就已有所关注，但自18世纪的科学家牛顿真正给予科学揭示后，色彩才成为一门独立的学科。色彩是一种涉及光、物与视觉的综合现象，“色彩的由来”自然成为第一命题。所谓色彩术语，即色彩的专用名词。了解这些名词的含义，一方面是基本知识的组成部分，另一方面也是阐述色彩原理与规律的必要的中介语言，所以应在开始就作为讲解的内容。

10、经验证明，人类对色彩的认识与应用是通过发现差异，并寻找它们彼此的内在联系来实现的。因此，人类最基本的视觉经验得出了一个最朴素也是最重要的结论：没有光就没有色。白天使人们能看到五色的物体，但在漆黑无光的夜晚就什么也看不见了。倘若有灯光照明，则光照到哪里，便又可看到物像及其色彩了。真正揭开光色之谜的是英国科学家牛顿。17世纪后半期，为改进刚发明不久的望远镜的清晰度，牛顿从光线通过玻璃镜的现象开始研究。1666年，牛顿进行了著名的色散实验。他将一房间关得漆黑，只在窗户上开一条窄缝，让太阳光射进来并通过一个三角形挂体的玻璃三棱镜。结果出现了意外的奇迹：在对面墙上出现了一条七色组成的光带，而不是一片白光

11、，七色按红、橙、黄、绿、青、蓝、紫的顺序一色紧挨一色地排列着，极像雨过天晴时出现的彩虹。同时，七色光束如果再通过一个三棱镜还能还原成白光。这条七色光带就是太阳光谱。牛顿之后大量的科学研究成果进一步告诉我们，色彩是以色光为主体的客观存在，对于人则是一种视象感觉，产生这种感觉基于三种因素:一是光；二是物体对光的反射；三是人的视觉器官眼。即不同波长的可见光投射到物体上，有一部分波长的光被吸收，一部分波长的光被反射出来刺激人的眼睛，经过视神经传递到大脑，形成对物体的色彩信息，即人的色彩感觉。光、眼、物三者之间的关系，构成了色彩研究和色彩学的基本内容，同时亦是色彩实践的理论基础与依据。2.1.2 色彩与

12、视觉原理（1） 光与色光色并存，有光才有色,色彩感觉离不开光。 光与可见光谱。光在物理学上是一种电磁波。从0.39微米到0.77微米波长之间的电磁波，才能引起人们的色彩视觉感觉受。此范围称为可见光谱。波长大于0.7微米称红外线，波长小于0.39称紫外线。 光的传播。光是以波动的形式进行直线传播的，具有波长和振幅两个因素。不同的波长长短产生色相差别。不同的振幅强弱大小产生同一色相的明暗差别。光在传播时有直射、反射、透射、漫射、折射等多种形式。光直射时直接传入人眼，视觉感受到的是光源色。当光源照射物体时，光从物体表面反射出来，人眼感受到的是物体表面色彩。当光照射时，如遇玻璃之类的透明物体，人眼看到

13、是透过物体的穿透色。光在传播过程中，受到物体的干涉时，则产生漫射，对物体的表面色有一定影响。如通过不同物体时产生方向变化，称为折射，反映至人眼的色光与物体色相同。（2） 物体色自然界的物体变化万千，它们本身虽然大都不会发光，但都具有选择性地吸收、反射、透射色光的特性。当然，任何物体对色光不可能全部吸收或反射，因此，实际上不存在绝对的黑色或白色。常见的黑、白、灰物体色中，白色的反射率是64-92.3；灰色的反射率是10-64；黑色的吸收率是90以上。物体对色光的吸收、反射或透射能力，很受物体表面肌理状态的影响，表面光滑、平整、细腻的物体，对色光的反射较强，如镜子、磨光石面、丝绸织物等。表面粗糙、

14、凹凸、疏松的物体，易使光线产生漫射现象，故对色光的反射较弱，如毛玻璃、呢绒、海绵等。但是，物体对色光的吸收与反射能力虽是固定不变的，而物体的表面色却会随着光源色的不同而改变，有时甚至失去其原有的色相感觉。所谓的物体固有色，实际上不过是常光下人们对此的习惯而已。（3） 色彩混合 光的加法混合属于投照光的混合。将光源体辐射的光合照一处，可以产生出新的色光。例如面前一堵石灰墙，没有光照时，在黑暗中眼睛看不到它。墙面只被红光照亮时呈红色，只被绿光照亮时呈绿色，红绿光同时照的墙面则呈黄色，而这黄色的色相与纯度便在红绿色之间，其亮度高于红，也高于绿。由于投照光混合之后变亮了，所以称为加光混合。 光的减法混

15、合白色光线透过有色滤光片之后，一部分光线被反射而吸收其余的光线，减少掉一部分辐射功率，最后透过的光是两次减光的结果，这样的色彩混合称为减法混合。一般说来，透明性强的染料，混合后具有明显的减光作用。减法混合的三原色是加法混合的三原色的补色，即翠绿的补色红（品红）、蓝紫的补色黄（淡黄）、朱红的补色蓝（天蓝）。用两种原色相混，产生的颜色为间色。2.2 色彩在网页中的作用2.2.1 突出主题网页设计必须服务于网站的主题，网页艺术设计是为了更好地突出和体现主题、服务主题，既要“美”，又要实现“功能”，两者都是为了更好地表达主题。在某些情况下，“功能”即是“主题”，“美”亦是“主题”。如，雅虎作为一个搜索

16、引擎，首先要实现“搜索”的“功能”，它的主题即是它的“功能”。我们生活在色彩斑斓的世界里，色彩不仅给予我们视觉上美的感受，更深深地打动着我们的心灵，它唤起了我们对事物的想象。在网页设计中，我们可以利用色彩所具有的丰富的表现力及情感效应，使网页的内容与形式有机地结合起来，借助色彩来体现网站的特色与风格，突出其主题。2.2.2 丰富页面层次在网页设计中要充分利用色彩的力量美化页面，对其中的重要信息进行强调，引导浏览者的注意力，这有利于推广新产品。对需要强调的内容适当运用色彩加以突出，使浏览者加深记忆，提高信息传递效率。在产品展示网页中，色彩的强调功用尤为明显。2.2.3 强调局部内容网页内容丰富、

17、信息含量太，设计师可以利用不同的色彩进行网页界面的视觉区域划分、网页信息的分类布局。设计者可以利用不同色彩给人的不同心理效果，进行主次顺序的区分、视觉流程的规整，使网页具有良好的易读性和方便的导向性。对网页色彩进行系统地规划和设计，可以使整体风格统一，给浏览者完整、有序的视觉印象。2.3 色彩视觉心理对网页设计的影响不同波长色彩的光作用于人的视觉器管，通过视觉神经传入大脑后，经过思维，与以前的记忆和经验产生联想，从而形成一系列的色彩心理反应。色彩所产生心理效应来自于色彩的物理光刺激对人的生理发生的直接影响。心理学家在一些试验中发现，人处在红色的环境中，脉搏会加快，血压升高，情绪容易兴奋冲动；处

18、在蓝色环境中，脉搏会减缓，情绪也较冷静。还有些科学家发现，色彩能影响脑电波，比如说脑电波对红色反应是警觉，对蓝色的反应是放松。19世纪中叶以后，心理学研究已从哲学领域逐渐转入科学的范畴，心理学家注重实验所验证的色彩心理的效果。不少色彩理论中都对此作过专门的介绍，这些经验向我们明确地肯定了色彩对人心理的响。本部分从视觉上色彩给人带来的一系列感觉以及人看见不同种色彩所产生的联想，探讨网页设计配色应注意色彩视觉心理对人的作用以及影响，并把这些理论性的经验总结运用到实际的设计中去，从而提高网页设计配色的科学性和合理性 6。2.4 色彩与艺术审美的关联色彩产生的联想因人而异，受性别、年龄、阅历、兴趣和性

19、格的影响。一般说来，儿童的色彩联想因阅历浅，社会接触有限，他们的联想多与身边的具体物品和自然物景有关。对于成年人而言，联想的范围会随生活阅历而扩展，甚至会从具体事物过渡到抽象的精神文化和社会价值观念的领域。色彩感觉除了色相、饱和度和明度这三个属于它本身的视觉属性外，还有许多来自与之有关联的其他感觉经验所衍生出来的感觉。如色彩的冷暖、色彩的时间感、色彩的洁净感与新旧感、人类对色彩的好恶与偏爱，同时人对色彩的好恶感情与社会和个人的因素有关。首先，这类研究难于面对的一个事实是一定的色彩因其用途的不同而会引起不同的反映，被调查者在面对一个被测试的色彩时，总难免不与色彩所依附的事物相联系，而且这种联系也

20、是会变化的，所以常会出现矛盾的结果。而审美心理学是研究和阐释人类在审美过程中心理活动规律的心理学分支。所谓审美主要是指美感的产生和体验，而心理活动则指人的知、情、意。因此审美心理学也可以说是一门研究和阐释人们美感的产生和体验中的知、情、意的活动过程，以及个性倾向规律的学科。第3章 网页设计中的色彩搭配3.1 属性综述3.1.1 数字色彩数字色彩的获取与生成，离不开产生它的数字设备，数字设备的质量好坏直接影响到数字色彩和图形的质量。从某种意义上说，数字设备（包括相应的软件系统）是获取数字色彩的质量关键。环境设计常用的数字设备有计算机、扫描仪、数码照相机和数字摄像机。3.1.2 电脑色彩显示模式根

21、据色彩显示的原理对色彩进行归纳, 形成不同的色彩模式, 这些色彩模式对网页的色彩有直接的影响。数字色彩模式有以下几种：（1） RGB色彩模式RGB色彩模式是工业界的一种颜色标准，是通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。RGB是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一，目前的显示器大都是采用了RGB颜色标准。（2） CMYK色彩模式简单说CMYK色彩模式就是专门用来印刷的颜色。它是另一种专门针对印刷业设定的颜色标准，是通过对青（C）、洋红（M）、黄（Y）、黑（K）四个颜色变

22、化以及它们相互之间的叠加来得到各种颜色的，CMYK即是代表青、洋红、黄、黑四种印刷专用的油墨颜色，也是Photoshop软件中四个通道的颜色12。（3） Lab色彩模式Lab模式是有国际照明委员会（CIE）公布的一种色彩模式。Lab颜色模式是CIE中的Lab均匀颜色空间, 是桌面系统中用来从一种颜色模式向另一种颜色模式转变的内部模式12。当RGB向CMYK转变的时候, 它首先是转变为Lab颜色, 然后再从Lab转变到CMYK的。它使用的原因是Lab的颜色光谱囊括了RGB和CMYK的颜色光谱。同时, Lab颜色是独立于设备之外的颜色,不会受到任何硬件的性能和特性的影响。（4） HSB色彩模式在H

23、SB模式中, H表示色相, S表示饱和度, B表示亮度。HSB是基于人对颜色的感觉,而不是RGB的计算机值, 也不是CMYK的打印机值。（5） GrauScale色彩模式灰度文件是可以组成多达256级灰度的图像,亮度是控制灰度的唯一要素。虽然颜色单一, 但是在描述图片文件时占用的存储空间较小。3.2 网页配色的基本原则（1） 简洁是网页色彩设计的重要原则色彩中分为有彩色和无彩色。黑、白、灰就是无彩色，其他的颜色就是有彩色10。在网页配色中,不要将所有颜色都用到。除了无彩色以外,尽量将颜色控制在三种以内。这里存在一个误区,就是很多学生在计算颜色的时候将黑色（或者白色、灰色）也算入了有彩色当中。注

24、意,这里的颜色是指有彩色。所以为什么我们看见的大部分网页的背景用无彩色,这是因为这样不容易出错。我们平常所说的红、黄、蓝、紫等每一个字都代表一类具体的颜色,也就是色相。它是指色彩的相貌,是区别色彩种类的名称。也有一部分学生认为深红色和浅红色是两个色相,其实它们是一种色相红。只不过是以“红”为基础, 加入不同的灰色,调整饱和度; 或者调整它们的亮度。这些Photoshop的调色板中可以很容易地调整出来。简洁是网页色彩设计的基本原则, 这个原则并不会因为时间的推移而失去意义。（2） 遵循主从关系的设计原则遵循主从关系的设计原则是最稳定的处理色彩原则。大部分网页的背景是用无彩色,而在页面上除无彩色外

25、大量使用的颜色,就是这个页面的主体颜色。如果在网页色彩设计中把握不好主从关系就无法确定哪个是主体色,所以其他颜色的面积不能过大,应遵循主从关系。世界500强企业的精彩网站的首页,几乎都是以一种色相为主体,颜色简洁、明快,或表现出高贵淡雅,或表现出神秘幽深,或表现出清新婉约,或表现出活泼幽默，这不仅体现了简洁的设计思想,也体现了主从关系的设计原则。这种设计原则,给人一种集中的视觉效果,使人仿佛置身于一种颜色的海洋之中,色彩的魅力由此可见。（3） 色彩均衡的设计原则在网页设计中,如果运用了比较多明度较高的颜色就可以用黑色或同色相的深色小面积地进行点缀,达到色彩重量的平衡,平衡的颜色较符合多数人的色

26、彩心理14。有些主页底色是黑色的,文字也选择深的色彩,色彩明度越接近, 眼睛感觉吃力,影响阅读效果,当然如果反差太强,人的眼睛同样也会受不了。3.3 网页配色的方法与技巧（1） 确定主色调网页色彩设计首先需要确定画面的主要色彩倾向，即主色调。主色调就犹如音乐中的主旋律，对整个网页起着主导作用，页面中的其它色彩都是围绕着蓝色来进行搭配。采用高饱和度的色彩，如蓝色、绿色能营造稳重、希望、智慧的氛围，具有强烈的视觉吸引力；采用中、低明度和饱和度的复合色，如浅灰、蓝灰、暗绿、枣红，可传达严肃、优雅、稳重、富有内涵的氛围；以粉彩等柔和色调为主色调的网页，则可传达明朗、轻松、愉悦的气氛。在主色调的选择上，

27、首先应该明确网站的主题、服务对象和想要传达的信息，以及利用色彩想要达到的视觉和心理效果。辅助色在网页中所占的比例不大，但却对整个页面的色彩起着调和的作用。它让页面更活泼、富有生气，并使主色调更加流畅地贯穿整体。辅助色可以使用跟主色调相邻近的颜色，也可以用主色调的对比色。（2） 把握色彩的对比与调和色彩搭配所产生的美感虽然千变万化，重点是处理好对比与调和的关系。页面中各种色彩的色相、明度、纯度和面积、形状、位置以及心理刺激的差别构成了色彩之间的对比。我们既要有对比来产生和谐的刺激，又要有适当的调和来抑制过分的对比，从而给人舒适的美感。页面的色彩层次和空间关系主要依靠色彩的明度对比来表现。对网页色

28、彩设计而言，明度对比得当与否，是决定配色的光感、明快感、清晰感以及心理作用的关键。3.4 色彩搭配体现艺术审美的必要因素对比和调和。对比是指在质或量方面相互差异甚大的两个要素同时配置在一起时，两者之间有相互作用的性格，更加令人感到彼此强烈地相互衬托。对比是为了使主题画面具有变化和生气而运用的方法。而调和是构成美的对象在部分与部分之间的相互关系。它无论是在质的方面还是量的方面都没有矛盾，各部分所传达给人的感受和意念之间不是相互分离或排斥，而是一个部分多样性的整体统一来表现美的状态。那么在网页设计中，如何利用它来达到好的效果呢？首先合理的利用对比的因素，例如文本的排布、字体的大小、粗细、颜色，图片的宽窄、比例的反差、透明以及位置的放置等等。均齐与平衡，这是动力与中心两者矛盾的统一所产生的形态，是设计中求得中心稳定的两种组织形式，均齐的组织方法是无论在哪一个中