网页设计创意课件.ppt

1、 1WANG YE SHE JI YU ZHI ZUO主讲教师：周国宝主讲教师：周国宝安庆职业技术学院安庆职业技术学院 网网 页页 设设 计计 与与 制制 作作网页设计与制作网页设计与制作 2安庆职业技术学院安庆职业技术学院 本章内容本章内容 4.1 4.1 概述概述 14.2 4.2 网页设计中的创意思维网页设计中的创意思维 24.3 4.3 网页设计的创意方法网页设计的创意方法 34.4 4.4 网页创意设计中的基本要素网页创意设计中的基本要素 44.4 4.4 网页创意设计中的基本要素网页创意设计中的基本要素 5网页设计与制作网页设计与制作 3安庆职业技术学院安庆职业技术学院 4.1 概

2、 述 网页不只是传递信息的媒介，同时也是网络上的艺网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。信息，是一个值得研究的课题。 一一. . 创意的类型：创意的类型： 1. 1. 改良型创意改良型创意 2. 2. 创新型创意创新型创意二二. . 创意的功能创意的功能: : 1. 1.提高作品的审美价值，使作品充满张力。提高作品的审美价值，使作品充满张力。 2. 2.满足受众的情感需求，更好的推销作品。满足受众的情感需求，更好的推销作品。网页设计与制作网页设计与制作 4安庆职业技

3、术学院安庆职业技术学院 4.2 网页设计中的创意思维 在网页设计中为了创造出高质量的作品，我们往往需在网页设计中为了创造出高质量的作品，我们往往需要多种思维方式来开发对事物的理解，不断发现事物全要多种思维方式来开发对事物的理解，不断发现事物全新的含义，并赋予其新的表现形式和生命力。新的含义，并赋予其新的表现形式和生命力。一发展思维一发展思维 以思维的中心点向外辐射、扩散，积极的思考和联想，以思维的中心点向外辐射、扩散，积极的思考和联想，产生多方向，多角度的捕捉创作灵感的触角。产生多方向，多角度的捕捉创作灵感的触角。发展思维的结构形式：发展思维的结构形式： 树型结构、伞型结构、网状结构树型结构、

4、伞型结构、网状结构网页设计与制作网页设计与制作 5安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维二二. . 逆向思维逆向思维 打破原有思维定式，将思维的方向和逻辑顺序完全颠打破原有思维定式，将思维的方向和逻辑顺序完全颠倒过来。反其道而行。以达到异、新、奇的视觉效果。倒过来。反其道而行。以达到异、新、奇的视觉效果。例如：网页设计中非均衡的视觉效果及色彩的反向运用例如：网页设计中非均衡的视觉效果及色彩的反向运用等。等。三三. . 独特思维独特思维 勇于挑战，超越常规、习惯勇于挑战，超越常规、习惯的认识模式，综合复杂环境中的的认识模式，综合复杂环境中的多种元素，产生一种新颖的不同多种

5、元素，产生一种新颖的不同凡响的视觉效果。如图凡响的视觉效果。如图(4-1)(4-1)独独特的视角特的视角, ,给人以新奇的感觉。给人以新奇的感觉。法则：人无我有，人有我变。法则：人无我有，人有我变。图图4-1 非常态界面非常态界面网页设计与制作网页设计与制作 6安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维四四. . 思维的灵活性思维的灵活性 思维的灵活性指改变思维的能力。思维的灵活性指改变思维的能力。1. 1. 举一反三，触类旁通。举一反三，触类旁通。2. 2. 思维扩散、聚合。思维扩散、聚合。五五. . 思维进程的跨越性思维进程的跨越性 创意超越了思维的步骤，因某一创意超越

6、了思维的步骤，因某一事物激发起突然的顿悟。事物激发起突然的顿悟。 如：如：20082008奥运会徽奥运会徽“中中国印国印. .舞动的北京舞动的北京”及中国及中国申奥标志。申奥标志。图4-2图4-3网页设计与制作网页设计与制作 7安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维六六. . 思维效果的整体性思维效果的整体性 整体性是创新性思维的基本要求，脱离整体性作品就整体性是创新性思维的基本要求，脱离整体性作品就会显得凌乱。如图会显得凌乱。如图4-34-3世界著名搜索引擎世界著名搜索引擎GoogleGoogle的徽标设的徽标设计计( (图图4-34-34-4)4-4)，丹尼斯，丹尼

7、斯黄将简约雅洁的设计风格与黄将简约雅洁的设计风格与“Google”Google”巧妙结合，自然天成，使徽标充满灵气。巧妙结合，自然天成，使徽标充满灵气。 图4-3图4-4网页设计与制作网页设计与制作 8安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维七七. . 思维认识的深刻性思维认识的深刻性 明察秋毫、入木三分、见微知著。抓住事物的本质明察秋毫、入木三分、见微知著。抓住事物的本质和发展趋向。如图和发展趋向。如图4-54-5是推销女用香水。画面中的尺和是推销女用香水。画面中的尺和剪刀，表面上与香水风马牛不相及，而实质上则表示剪刀，表面上与香水风马牛不相及，而实质上则表示量体、裁衣

8、，香量体、裁衣，香水香味如为女士量水香味如为女士量身定制一般。身定制一般。 图4-5网页设计与制作网页设计与制作 9安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维八思维表达的流畅性八思维表达的流畅性 任何一件作品要想完整、准确、高效的表现出来，思任何一件作品要想完整、准确、高效的表现出来，思维的连贯性是非常必要的。流畅性是对思维速度和效率维的连贯性是非常必要的。流畅性是对思维速度和效率的综合评价。如图的综合评价。如图4-64-6画面中色彩的呼应，排版的承接都画面中色彩的呼应，排版的承接都为思维的连续表达创为思维的连续表达创造了条件。造了条件。影响思维流畅性的因素：影响思维流畅性

9、的因素： 1. 1.知识储备知识储备 2. 2.思维的敏锐度思维的敏锐度图4-6网页设计与制作网页设计与制作 10安庆职业技术学院安庆职业技术学院 4.3 网页设计的创意方法 创意思维为构筑优美网页绘创意思维为构筑优美网页绘制了设计蓝图制了设计蓝图, ,而创意方法则在蓝而创意方法则在蓝图的基础上对图的基础上对“大厦大厦”进行装饰进行装饰. . 只有经过装饰的网页能使主题表只有经过装饰的网页能使主题表现的更生动有趣，更具有审美享现的更生动有趣，更具有审美享受。因而德国设计师霍戈尔受。因而德国设计师霍戈尔. .马马蒂斯把创意手段称为蒂斯把创意手段称为“视觉修视觉修饰饰”。一一. . 联想与想象联想

10、与想象联想即由联想即由A A事物想到事物想到B B事物的心事物的心理过程。如图理过程。如图4-74-7由喜庆的烟花由喜庆的烟花 图4-7网页设计与制作网页设计与制作 11安庆职业技术学院安庆职业技术学院 4.2 网页设计中的创意思维构成威严的雄师，雄师是中国古代千年文化的象征。人构成威严的雄师，雄师是中国古代千年文化的象征。人们一看到雄师也自然会联想到中华民族。们一看到雄师也自然会联想到中华民族。联想的种类：虚实联想、接近联想、类似联想、对比联联想的种类：虚实联想、接近联想、类似联想、对比联想、因果联想想、因果联想创意的联想方式：形体联想（图创意的联想方式：形体联想（图4-8 4-94-8 4

11、-9）、材料联想（图）、材料联想（图4-104-10）、功能联想（图）、功能联想（图4-114-11） 图4-8图4-11图4-10图4-9网页设计与制作网页设计与制作 12安庆职业技术学院安庆职业技术学院 4.3 网页设计的创意方法二二. . 比喻与拟人比喻与拟人 比喻是把要表达的内容作为本体，通过相关联的喻比喻是把要表达的内容作为本体，通过相关联的喻体去表现内容的本质特征。体去表现内容的本质特征。 要求：比体与本体之间要求相类似的特征。要求：比体与本体之间要求相类似的特征。 比喻的种类：明喻、暗喻、借喻比喻的种类：明喻、暗喻、借喻比拟。分为两种，拟人或拟物。比拟。分为两种，拟人或拟物。 比

12、拟离不开联想和想象，其效果使网页中内容更形比拟离不开联想和想象，其效果使网页中内容更形象、生动，从而增强感染力，比拟可以让静态变得生象、生动，从而增强感染力，比拟可以让静态变得生动起来，让呆板的变得有生机活力，让抽象的形象变动起来，让呆板的变得有生机活力，让抽象的形象变得具体，从而增加作品的艺术魅力。得具体，从而增加作品的艺术魅力。 网页设计与制作网页设计与制作 13安庆职业技术学院安庆职业技术学院 4.3 网页设计的创意方法三三. . 夸张与变形夸张与变形 夸张就是把作品中所宣传对象的特征、性质特意放大夸张就是把作品中所宣传对象的特征、性质特意放大或渲染，突出自然形态中最本质、最典型的部分，

13、使主或渲染，突出自然形态中最本质、最典型的部分，使主体特征更加鲜明突出。体特征更加鲜明突出。 变形手法在实际运用中的表现方式：变形手法在实际运用中的表现方式：拉伸、压缩、扭曲、畸变或将某一部分突出渲染。拉伸、压缩、扭曲、畸变或将某一部分突出渲染。 四四. . 借代借代 不直接说出要说的人或事物，而是借与说的人或事物不直接说出要说的人或事物，而是借与说的人或事物有密切、象征关系的其它某些事物来代替说明的一种修有密切、象征关系的其它某些事物来代替说明的一种修辞方法。辞方法。 网页设计与制作网页设计与制作 14安庆职业技术学院安庆职业技术学院 4.3 网页设计的创意方法图4-12图4-13网页设计与

14、制作网页设计与制作 15安庆职业技术学院安庆职业技术学院 4.3 网页设计的创意方法五五. . 幽默幽默 幽默的手法优点是抓住人或事物的某些特征，运用喜剧幽默的手法优点是抓住人或事物的某些特征，运用喜剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏览者的心灵。览者的心灵。 六六. . 象征象征 用具体的事物表现某种特殊意境，是对事物原型的延用具体的事物表现某种特殊意境，是对事物原型的延伸伸, ,是超越性的存在。是超越性的存在。 七七. . 对比对比 把两种不同事物或同一种事物的不同方面放在一起，把两种不同事物或同一种事物的不同方面放在一起，

15、相互比较，运用对比使对立事物的矛盾突出揭示本质，相互比较，运用对比使对立事物的矛盾突出揭示本质，给人以深刻的启示，留下深刻的印象。给人以深刻的启示，留下深刻的印象。 网页设计与制作网页设计与制作 16安庆职业技术学院安庆职业技术学院 4.4 网页创意设计中的基本要素 色彩色彩图像图像文字文字网页设计与制作网页设计与制作 17安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字 在网页中在网页中, ,字体往往占据了很大的空间和页面字体往往占据了很大的空间和页面, ,单一形态单一形态大小、颜色的字体，虽能传递信息，但不免让人们感到大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。疲劳

16、乏味。 一一. . 字体的设计方法：字体的设计方法： 根据文字内容的属性及网站的主题可以适当的作如根据文字内容的属性及网站的主题可以适当的作如下化。下化。1. 1. 改变文字大小、比例改变文字大小、比例人们已经习惯正常的视觉大小人们已经习惯正常的视觉大小, ,突然间的变化会产生新突然间的变化会产生新的视觉感受的视觉感受, ,产生重新审视的兴趣。产生重新审视的兴趣。2. 2. 改变字体形态改变字体形态局部改变局部改变 整体改变整体改变 网页设计与制作网页设计与制作 18安庆职业技术学院安庆职业技术学院 3.4.1 网页中的文字措施措施: :拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗拉伸、挤压、

17、扭曲、撕裂、切除、省略、替换、粗细变化。细变化。 3. 3. 文字的三维效果文字的三维效果真实的空间：眼睛看得见，手能摸得到的。真实的空间：眼睛看得见，手能摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。措施：添加投影、浮雕、透视效果，产生矛盾空间。 4. 4. 色彩的改变色彩的改变 色相、纯度、明度色相、纯度、明度 5. 5. 机理及质地机理及质地网页设计与制作网页设计与制作 19安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字纹理的改变及不同质感效果纹理的改变及不同质感效果6. 6. 置换

18、及同构置换及同构 将文字中部分笔画用实物、图形、符号、色块等替换，将文字中部分笔画用实物、图形、符号、色块等替换，或利用文字外形与某一事物的相似点进行变化。或利用文字外形与某一事物的相似点进行变化。二二. . 文字的组合方法与形式文字的组合方法与形式1. 1.字体的大小组合字体的大小组合 将大小不等的文字放到一个平面上进行组合，这样大将大小不等的文字放到一个平面上进行组合，这样大的文字相当于一个图形，而小的文字就成为可供阅读的的文字相当于一个图形，而小的文字就成为可供阅读的文字，或将小的文字编排成图形而大的图形成为主要的文字，或将小的文字编排成图形而大的图形成为主要的文字文字网页设计与制作网页

19、设计与制作 20安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字2. 2. 汉字与拉丁字母的组合汉字与拉丁字母的组合 如：如：“HONG KONG”HONG KONG”与与“喜喜”字的组合。字的组合。3. 3. 汉字与具象形体的组合汉字与具象形体的组合 如：如：“永久永久”牌自行车标志图牌自行车标志图4-14,“4-14,“胖子胖子”服饰。服饰。4. 4.文字组合的处理手段文字组合的处理手段(1). (1). 添加法添加法 根据文字内容、笔画的多少进行添加文字的组根据文字内容、笔画的多少进行添加文字的组合因素。合因素。 A. A. 添加与内容相关的文字添加与内容相关的文字B. B.

20、添加与寓意相关的图形添加与寓意相关的图形图4-14网页设计与制作网页设计与制作 21安庆职业技术学院安庆职业技术学院 (2). (2). 重叠法重叠法 将文字组合因素重叠为一体，产生富有层次的效果。将文字组合因素重叠为一体，产生富有层次的效果。(3). (3). 删除法删除法 在不影响识别的前提下将某些笔画删除。在不影响识别的前提下将某些笔画删除。(4). (4). 连笔法连笔法 将文字组合将文字组合因素产生连贯的因素产生连贯的整体感，可将两整体感，可将两个以上的文字笔个以上的文字笔画连起来。如图画连起来。如图4-154-15图4-15网页设计与制作网页设计与制作 22安庆职业技术学院安庆职业

21、技术学院 4.4.1 网页中的文字（5 5）. . 适形法适形法 将文字组合因素适合在一个图形内，产生适合图形的将文字组合因素适合在一个图形内，产生适合图形的效果。效果。 （6 6）. . 共用法共用法 将所设计内容的两个以上的文字笔画偏旁部首共用，将所设计内容的两个以上的文字笔画偏旁部首共用，产生你中有我我中有你的视觉趣味。产生你中有我我中有你的视觉趣味。网页设计与制作网页设计与制作 23安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字(7). (7). 虚实形共用虚实形共用 实为笔画，虚为背景。利用实形周围空底显示字的形实为笔画，虚为背景。利用实形周围空底显示字的形产生虚实相间的

22、视觉效果。产生虚实相间的视觉效果。(8). (8). 几何形几何形 利用不同的几何形状构成文字利用不同的几何形状构成文字, ,给人以自由和轻松感，给人以自由和轻松感，现代感强现代感强 5. 5. 文字编排的形式文字编排的形式: : A. A. 竖排式竖排式 B. B. 横排式横排式 C. C. 斜排式斜排式 D. D. 曲线式曲线式网页设计与制作网页设计与制作 24安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字E. E. 渐变式渐变式运用文字字体大小产生渐变的效果。运用文字字体大小产生渐变的效果。F. F. 重叠式重叠式由句子重叠体现构成图形。由句子重叠体现构成图形。G. G. 分

23、离式分离式 拉大字与字之间距离，形成点壮效果。拉大字与字之间距离，形成点壮效果。 (2). (2). 文字的头尾编排形式文字的头尾编排形式 A. A.齐头散尾式齐头散尾式 B. B.散头齐尾式散头齐尾式 C. C.齐头齐尾式齐头齐尾式 D. D.中轴分离式中轴分离式网页设计与制作网页设计与制作 25安庆职业技术学院安庆职业技术学院 4.4.1 网页中的文字 文字排列时从中间向两边分开文字排列时从中间向两边分开, ,突出中间的垂直空间。突出中间的垂直空间。E.E.分插式分插式 行与行之间的关系上、下、左、右曲直交叉，长短参行与行之间的关系上、下、左、右曲直交叉，长短参差、错落地排列。差、错落地排

24、列。F. F.自由式自由式 行与行不规则地排列，形成繁杂的视觉效果，其阅读行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用。功能减弱，作为背景图形用。(3).(3).图形化的文字编排效果图形化的文字编排效果 运用大量的文字组成平面的或立体的图形，文字与图运用大量的文字组成平面的或立体的图形，文字与图形的结合形成了有趣的、有视觉内涵的编排形式。形的结合形成了有趣的、有视觉内涵的编排形式。 网页设计与制作网页设计与制作 26安庆职业技术学院安庆职业技术学院 4.4.2 网页中的图像 图形是一种视觉信息传递媒介，较符号文字在传递信图形是一种视觉信息传递媒介，较符号文字在传递信息

25、上的优势：易识别、不受地域、国度、知识体系等众息上的优势：易识别、不受地域、国度、知识体系等众多因素的影响。多因素的影响。 图形图象往往来源于现实世界的影像照片，在造型规图形图象往往来源于现实世界的影像照片，在造型规律上有很强的客观制约性。所以设计师在对网页优化时律上有很强的客观制约性。所以设计师在对网页优化时应对图片作二次处理、加工，而处理时应从以下方面入应对图片作二次处理、加工，而处理时应从以下方面入手。手。图形图像的基本表现技巧：图形图像的基本表现技巧：一一. . 面积与视角面积与视角 图像在网页中所占比例的大小直接影响整个页面的视图像在网页中所占比例的大小直接影响整个页面的视觉效果和情

26、感表达。面积大的图像在画面中占的份量重，觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人通常在页面中作点缀和呼应，表达情感含蓄，给人网页设计与制作网页设计与制作 27安庆职业技术学院安庆职业技术学院 4.4.2 网页中的图像精巧细致的感觉。精巧细致的感觉。1. 1.平直的视角平直的视角给人一种平稳、安定、规矩的感觉。给人一种平稳、安定、规矩的感觉。2. 2.非常规的视角非常规的视角如：倒置、旋转、仰视、俯视如：倒置、旋转、仰视、俯视增强画面动感，更具强烈

27、的视觉冲击。增强画面动感，更具强烈的视觉冲击。 二二. .局部与特写局部与特写 对于整体的图像局部与特写能让视线更加集中，这种手对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。图浏览者的兴趣点。图4-164-16为突出本款车的最新性能，而将为突出本款车的最新性能，而将车创新的部位放大，以特写的形式展现。起到更有力的宣车创新的部位放大，以特写的形式展现。起到更有力的宣传传网页设计与制

28、作网页设计与制作 28安庆职业技术学院安庆职业技术学院 4.4.2 网页中的图像三三. .合成与组合合成与组合效果。效果。图4-16网页设计与制作网页设计与制作 29安庆职业技术学院安庆职业技术学院 4.4.2 网页中的图像 图像的合成是指用计算机将多幅图片的不同内容有选图像的合成是指用计算机将多幅图片的不同内容有选择的合成一个图像，合成后的图像传达更丰富的信息，择的合成一个图像，合成后的图像传达更丰富的信息，能更集中的体现创意。能更集中的体现创意。 图像的重要程度可以因面积、摆放位置、组合方式的图像的重要程度可以因面积、摆放位置、组合方式的不同而有所不同。不同而有所不同。四四. .虚实和影调

29、虚实和影调 图像的虚实对比能够产生空间感，实的物体感觉近，图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。虚的物体感觉远。五五. .退底与轮廓退底与轮廓 图像的退底是仅保留所选图像，而将沿图像边缘的背图像的退底是仅保留所选图像，而将沿图像边缘的背景去掉，退底后的形象的外轮廓成自由形状，具体清晰景去掉，退底后的形象的外轮廓成自由形状，具体清晰分明的视觉形态，显得灵活自如。分明的视觉形态，显得灵活自如。 网页设计与制作网页设计与制作 30安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用 设计精良的网站总有其色调构成的总体倾向设计精良的网站总有其色调构成的总体倾

30、向, ,以一种颜以一种颜色或几种临近颜色为主导色或几种临近颜色为主导, ,使全呈现在某种和谐、统一的使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。要恰如其分的包装和表达。一一. . 与网站风格与网站风格 色彩是网页设计中很难把握的重要方面，是确立网站色彩是网页设计中很难把握的重要方面，是确立网站风格的前提，网站色彩的倾向，决定着网站给浏览者的风格的前提，网站色彩的倾向，决定着网站给浏览者的第一印象。如

31、：活泼、庄重、雅致（如图第一印象。如：活泼、庄重、雅致（如图4-174-17）或热烈。）或热烈。二二. . 色彩原理色彩原理 “ “色彩是破碎了的光，太阳的光与地球相撞，破碎分色彩是破碎了的光，太阳的光与地球相撞，破碎分散，因而使整个地球形成美丽的色彩。散，因而使整个地球形成美丽的色彩。”网页设计与制作网页设计与制作 31安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用图4-17网页设计与制作网页设计与制作 32安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用1. 1. 色彩的三要素色彩的三要素 明度、色相和饱和度构成色彩的三要素。自然界中的明度

32、、色相和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。色，任何一种色彩都具有明度、纯度、饱和度三大属性。 (1). (1). 明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。 (2). (2). 色相色相 色相指色彩的相貌。如：红、黄、蓝、绿等。色相指色彩的相貌。如：红、黄、蓝、绿等。 (3). (3). 纯度纯度 纯度指色彩的纯净程度，纯度越高，色相感越强。纯

33、度指色彩的纯净程度，纯度越高，色相感越强。 网页设计与制作网页设计与制作 33安庆职业技术学院安庆职业技术学院 色 环图4-18网页设计与制作网页设计与制作 34安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用2. 2. 色彩的分类色彩的分类：原色、间色、邻近色、对比色、互补色：原色、间色、邻近色、对比色、互补色3. 3. 色彩与心理色彩与心理 色彩对人们头脑和精神心理的影响是客观存在的，如：色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1).(1).色彩的冷暖感觉色彩的

34、冷暖感觉A. A. 暖色暖色 色彩的冷暖与人们对世界的经验分不开。如：阳光呈现色彩的冷暖与人们对世界的经验分不开。如：阳光呈现红、橙、黄、等颜色，所以人们一看到红、橙、黄等色就红、橙、黄、等颜色，所以人们一看到红、橙、黄等色就联想到火热和烈日给人们的感受，故称联想到火热和烈日给人们的感受，故称“暖色暖色”B. B. 冷色冷色当人们看到绿、青蓝色时会与寒冷相联系当人们看到绿、青蓝色时会与寒冷相联系. .如冰川、海洋、如冰川、海洋、夜空、树荫等夜空、树荫等(2). (2). 色彩的进退和胀缩感觉色彩的进退和胀缩感觉 网页设计与制作网页设计与制作 35安庆职业技术学院安庆职业技术学院 色彩对比图4-

35、19网页设计与制作网页设计与制作 36安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用a. a. 长波长的暖色有前进的睡眠的感觉，短波的冷色有退长波长的暖色有前进的睡眠的感觉，短波的冷色有退缩的感觉缩的感觉b. b. 明度高的色彩光量多、色刺激犬，有前进膨胀的感觉，明度高的色彩光量多、色刺激犬，有前进膨胀的感觉，反之有退缩的感觉反之有退缩的感觉c. c. 不同北京的衬托也能产生前进、涨缩的感觉不同北京的衬托也能产生前进、涨缩的感觉(3). (3). 色彩的轻重和软硬感觉色彩的轻重和软硬感觉明度高的色彩给人轻的感觉，明度低的色彩给人重的感明度高的色彩给人轻的感觉，明度低的

36、色彩给人重的感觉。在色相方面，暖色给人轻的感觉，冷色给人重的感觉。在色相方面，暖色给人轻的感觉，冷色给人重的感觉给人轻的感觉的颜色均有软的感觉，给人重的感觉的觉给人轻的感觉的颜色均有软的感觉，给人重的感觉的颜色均有硬的感觉颜色均有硬的感觉 网页设计与制作网页设计与制作 37安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用(4). (4). 色彩的艳丽与素雅色彩的艳丽与素雅 色彩饱和度高，亮度高的色彩艳丽，反之素雅色彩饱和度高，亮度高的色彩艳丽，反之素雅(5). (5). 色彩的记忆性色彩的记忆性 人们对色彩的记忆，由于年龄、性别、个性、职业、经人们对色彩的记忆，由于年龄

37、、性别、个性、职业、经历、所受教育、自然环境、社会背景的不同，差异很大。历、所受教育、自然环境、社会背景的不同，差异很大。一般说来记忆性色彩强的色彩为：一般说来记忆性色彩强的色彩为： 暖色、名度高、纯度高暖色、名度高、纯度高 记忆性弱的色彩：记忆性弱的色彩： 冷色、明度低、纯度低冷色、明度低、纯度低(6). (6). 色彩的联想与象征色彩的联想与象征 色彩的联想是通过以往的经验、记忆或知识将当前的色色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程彩与其他具象或抽象及相联系起来的过程 网页设计与制作网页设计与制作 38安庆职业技术学院安庆职业技术学院 4.4.

38、3网页设计中色彩的属性及其应用v 常见颜色的联想：常见颜色的联想：v A.A.具象联想具象联想v 红色：血、火、太阳红色：血、火、太阳v 橙色：灯光橙色：灯光 、柑橘、柑橘 、秋叶、秋叶、 都市都市v 黄色：光、黄色：光、 柠檬、柠檬、 迎春花迎春花 、食品、食品v 绿色：草地、绿色：草地、 树叶树叶 、禾苗、禾苗v 蓝色：天空蓝色：天空 、宇宙、宇宙、 水水 、冰、冰v 紫色：丁香花紫色：丁香花 、葡萄、葡萄 、茄子、茄子v 黑色：夜晚黑色：夜晚 、墨、墨、 石炭石炭 v 白色：雪白色：雪 、牛奶、牛奶 、白云、白云 、面粉、面粉v 灰色：乌云灰色：乌云 、铁、铁 、木、木 v B.B.抽象

39、联想抽象联想网页设计与制作网页设计与制作 39安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用红色：热烈红色：热烈 热情热情 危险危险 活力活力 吉祥吉祥 喜庆喜庆 夏季夏季 传统传统橙色：温暖橙色：温暖 欢喜欢喜 嫉妒嫉妒 华丽华丽 甜蜜甜蜜 兴奋兴奋 黄色：光明黄色：光明 希望快活希望快活 平凡平凡 权利权利 清爽清爽 安静安静蓝色：平静蓝色：平静 神秘神秘 悠久悠久 理智理智 深远深远 科学科学 快捷快捷紫色：优雅紫色：优雅 高贵高贵 注重注重 浪漫浪漫 神秘神秘 女性女性 温柔温柔 虚幻虚幻 魅力魅力黑色：严肃黑色：严肃 刚健刚健 恐怖恐怖 死亡死亡 罪恶罪恶

40、坚硬坚硬 沉默沉默 绝望绝望 悲悲 哀哀 男性男性 机械机械灰色：平凡灰色：平凡 天意天意 谦逊谦逊 灰心灰心 无聊无聊 消极消极 谦虚谦虚 随便随便（7 7）人对色彩的情感）人对色彩的情感 最基本的情感表现：好最基本的情感表现：好 恶恶 情感的差异的原因：情感的差异的原因： 网页设计与制作网页设计与制作 40安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用a. a. 年龄差异年龄差异年龄高：冷色年龄高：冷色 明度纯度低明度纯度低年龄低：明度纯度高年龄低：明度纯度高b b性别差异性别差异男性：冷色或纯度高的色彩（如黑男性：冷色或纯度高的色彩（如黑. .灰）灰）色调集中色

41、调集中女性：暖色女性：暖色. .纯度较低的粉色及白色纯度较低的粉色及白色色调分散色调分散c. c.种族差异种族差异原因：生活环境原因：生活环境. .社会文化社会文化. .历史历史. .宗教信仰等不同宗教信仰等不同中国：红中国：红 黄黄 蓝蓝 天蓝天蓝 浅蓝浅蓝美国：淡黄美国：淡黄 红红 明灰明灰 明蓝明蓝法国：黑法国：黑 灰灰 红红 蓝蓝 绿绿 白白德国：黑德国：黑 白白 天蓝天蓝 咖啡最基本的情感表现：好咖啡最基本的情感表现：好 恶恶 网页设计与制作网页设计与制作 41安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用菲律宾：淡黄菲律宾：淡黄 蓝蓝 绿绿印度：红印度：红

42、 黄黄 蓝蓝 绿绿 埃及：绿埃及：绿 红红 黑黑 蓝蓝 绿绿三三. . webweb设计中的色彩应用原理设计中的色彩应用原理确立网站色调确立网站色调确立网站色调的过程确立网站色调的过程决定主体色决定主体色选择辅助色选择辅助色 选择背景色选择背景色网页设计与制作网页设计与制作 42安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用图4-20图4-21网页设计与制作网页设计与制作 43安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用色彩调整色彩调整 确定主页的题材后，要了解哪些颜色适合哪些网站，确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的

43、站点，基本任何颜色都适合，但用黑色或如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受深色则更符合夜间观众的视觉感受 页面色彩搭配页面色彩搭配 色相相比色相相比 明度对比明度对比 饱和度对比饱和度对比 补色对比补色对比 面积对比面积对比 调和色调调和色调3. 3. 调和色彩的基本法则调和色彩的基本法则 网页设计与制作网页设计与制作 44安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用建立主调统率页面色彩关系建立主调统率页面色彩关系善用金银黑白灰等中性色缓解中和，以烘托主题善用金银黑白灰等中性色缓解中和，以烘托主题拉开距离（从纯度和明度拉开距离

44、（从纯度和明度. .面积上着手）面积上着手）四四. .色彩意象的设计应用色彩意象的设计应用 当我们看到色彩时，除了感觉其对生理和物理方面的当我们看到色彩时，除了感觉其对生理和物理方面的影响影响, ,心理也会立即产生感觉，这就是色彩的意象心理也会立即产生感觉，这就是色彩的意象1. 1.红色的色彩意象红色的色彩意象 由于红色容易引起注意，所以在各种媒体中被广的运由于红色容易引起注意，所以在各种媒体中被广的运用；除了具有较佳的明视效果之外，更被用来传达有力用；除了具有较佳的明视效果之外，更被用来传达有力 . .热诚热诚. .温暖温暖. .前进等涵义的企业精神与形象。另外红也常用前进等涵义的企业精神与

45、形象。另外红也常用来作为警告来作为警告. .危险危险. .禁止禁止. .防火等标志用色防火等标志用色.( .(例例: :中国人一看见中国人一看见红色就充满了喜悦和激情红色就充满了喜悦和激情) ) 网页设计与制作网页设计与制作 45安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用2. 2.橙色的色彩意象橙色的色彩意象 橙色明视度高，在工业安全用色中。橙色是警戒色。橙色明视度高，在工业安全用色中。橙色是警戒色。如火车头、登山服饰、救生衣的设计大都含有橙色。如火车头、登山服饰、救生衣的设计大都含有橙色。 由于橙色明亮刺眼，有时会产生负面低俗的意象。所由于橙色明亮刺眼，有时会产

46、生负面低俗的意象。所以运用时，要注意色彩的搭配及表现形式。以运用时，要注意色彩的搭配及表现形式。 由于符合大自然创造的色彩搭配模式，橙色与具有一由于符合大自然创造的色彩搭配模式，橙色与具有一定灰度的绿色搭配效果较好。定灰度的绿色搭配效果较好。3. 3.黄色的色彩意象黄色的色彩意象 黄色明视度高，同样在生活中属警戒色（如交通标志黄色明视度高，同样在生活中属警戒色（如交通标志上黄灯）上黄灯） 高亮度的黄色在页面设计中很少大块面的出现，多半高亮度的黄色在页面设计中很少大块面的出现，多半由于颜色本身过于刺眼，造成浏由于颜色本身过于刺眼，造成浏 网页设计与制作网页设计与制作 46安庆职业技术学院安庆职业

47、技术学院 4.4.3网页设计中色彩的属性及其应用览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。在细节部分使用效果更加。在细节部分使用效果更加。4. 4.绿色的色彩意象绿色的色彩意象 在页面设计中，绿色所传达的清爽、理想、希望、生长在页面设计中，绿色所传达的清爽、理想、希望、生长的意象。符合人们接近自然的生理需求。的意象。符合人们接近自然的生理需求。绿色在设计中应用很广，在工业上许多机械采用绿色，医绿色在设计中应用很广，在工业上许多机械采用绿色，医疗机构场所，也常用绿色作空间色彩规划。疗机构场所，也常用绿色作空间色彩规划。 5 5蓝色的色

48、彩意象蓝色的色彩意象 由于蓝色沉稳的特性，具有理智、准确的意象。在商业由于蓝色沉稳的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选用蓝设计中，强调科技、效率的商品或企业形象。大多选用蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西方色作标准色。如：电脑、汽车、摄影器材等。另外受西方文化的文化的 影响。蓝色作为页面基调能营造出深邃、忧郁的意影响。蓝色作为页面基调能营造出深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比较合适。境。用其展示博大的胸怀或感性诉求方面比较合适。网页设计与制作网页设计与制作 47安庆职业技术学院安庆职业技术学院 4.4.3网页设计中

49、色彩的属性及其应用6 6紫色的色彩意境紫色的色彩意境 紫色由于其强烈的女性化的性格，在商业设计用色中，紫色由于其强烈的女性化的性格，在商业设计用色中，受到相等大的限制，除了女性有关的商品或企业形象外，受到相等大的限制，除了女性有关的商品或企业形象外，其它类设计不常作为主色调使用。其它类设计不常作为主色调使用。 紫色被称为紫色被称为“魔鬼魔鬼” ” 颜色。深紫色会造成恐怖的气氛，颜色。深紫色会造成恐怖的气氛，对比气体颜色较难控制对比气体颜色较难控制 紫色也有其优点：是高贵的象紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度

50、的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。材。7. 7.褐色的色彩意象褐色的色彩意象 在商业上褐色用来表示原始材料的质感。如麻、木材在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、等。或用来传达莫些产品的色泽及味感，如咖啡、茶、麦类等，或强调古典优雅的企业或商品形象。麦类等，或强调古典优雅的企业或商品形象。 网页设计与制作网页设计与制作 48安庆职业技术学院安庆职业技术学院 4.4.3网页设计中色彩的属性及其应用8. 8. 白色的色彩意象白色的色彩意象 白色具有高级，科技的意象。痛需和其他色