网页设计创意课件

《网页设计创意课件》由会员分享，可在线阅读，更多相关《网页设计创意课件（57页珍藏版）》请在金锄头文库上搜索。

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安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 34.1 概 述 网页不只是传递信息的媒介，

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

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

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

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

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

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

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

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

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

11、14-11） 图4-8图4-11图4-10图4-9安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 124.3 网页设计的创意方法二二. . 比喻与拟人比喻与拟人 比比喻喻是是把把要要表表达达的的内内容容作作为为本本体体，通通过过相相关关联联的的喻体去表现内容的本质特征。喻体去表现内容的本质特征。 要求：比体与本体之间要求相类似的特征。要求：比体与本体之间要求相类似的特征。 比喻的种类：明喻、暗喻、借喻比喻的种类：明喻、暗喻、借喻比拟。分为两种，拟人或拟物。比拟。分为两种，拟人或拟物。 比拟离不开联想和想象，其效果使网页中内容更比拟离不开联想和想象，其效果使网页中内容更形象、生动

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

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

14、 幽默的手法优点是抓住人或事物的某些特征，运用喜幽默的手法优点是抓住人或事物的某些特征，运用喜剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏览者的心灵。浏览者的心灵。 六六. . 象征象征 用用具具体体的的事事物物表表现现某某种种特特殊殊意意境境，是是对对事事物物原原型型的的延伸延伸, ,是超越性的存在。是超越性的存在。 七七. . 对比对比 把把两两种种不不同同事事物物或或同同一一种种事事物物的的不不同同方方面面放放在在一一起起，相相互互比比较较，运运用用对对比比使使对对立立事事物物的的矛矛盾盾突突出出揭揭示示本本质质，给人以深刻的启示

15、，留下深刻的印象。给人以深刻的启示，留下深刻的印象。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 164.4 网页创意设计中的基本要素 色彩色彩图像图像文字文字安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 174.4.1 网页中的文字 在网页中在网页中, ,字体往往占据了很大的空间和页面字体往往占据了很大的空间和页面, ,单一单一形态大小、颜色的字体，虽能传递信息，但不免让人们形态大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。感到疲劳乏味。 一一. . 字体的设计方法：字体的设计方法： 根根据据文文字字内内容容的的属属性性及及网网站站的的主主题

16、题可可以以适适当当的的作作如下化。如下化。1. 1. 改变文字大小、比例改变文字大小、比例人人们们已已经经习习惯惯正正常常的的视视觉觉大大小小, ,突突然然间间的的变变化化会会产产生生新新的视觉感受的视觉感受, ,产生重新审视的兴趣。产生重新审视的兴趣。2. 2. 改变字体形态改变字体形态局部改变局部改变 整体改变整体改变 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 183.4.1 网页中的文字措施措施: :拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗细变化。细变化。 3. 3. 文字的三维效果文字的三维效果真实的空间：眼睛看得见

17、，手能摸得到的。真实的空间：眼睛看得见，手能摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。措施：添加投影、浮雕、透视效果，产生矛盾空间。 4. 4. 色彩的改变色彩的改变 色相、纯度、明度色相、纯度、明度 5. 5. 机理及质地机理及质地安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 194.4.1 网页中的文字纹理的改变及不同质感效果纹理的改变及不同质感效果6. 6. 置换及同构置换及同构 将将文文字字中中部部分分笔笔画画用用实实物物、图图形形、符符号号、色色块块等等替替换，或利用文

18、字外形与某一事物的相似点进行变化。换，或利用文字外形与某一事物的相似点进行变化。二二. . 文字的组合方法与形式文字的组合方法与形式1.1.字体的大小组合字体的大小组合 将将大大小小不不等等的的文文字字放放到到一一个个平平面面上上进进行行组组合合，这这样样大大的的文文字字相相当当于于一一个个图图形形，而而小小的的文文字字就就成成为为可可供供阅阅读读的的文文字字，或或将将小小的的文文字字编编排排成成图图形形而而大大的的图图形形成成为为主主要要的文字的文字安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 204.4.1 网页中的文字2. 2. 汉字与拉丁字母的组合汉字与拉丁字母的组合

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

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

21、图形内，产生适合图形的效果。的效果。 （6 6）. . 共用法共用法 将将所所设设计计内内容容的的两两个个以以上上的的文文字字笔笔画画偏偏旁旁部部首首共共用用，产生你中有我我中有你的视觉趣味。产生你中有我我中有你的视觉趣味。安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 234.4.1 网页中的文字(7). (7). 虚实形共用虚实形共用 实实为为笔笔画画，虚虚为为背背景景。利利用用实实形形周周围围空空底底显显示示字字的的形产生虚实相间的视觉效果。形产生虚实相间的视觉效果。(8). (8). 几何形几何形 利用不同的几何形状构成文字利用不同的几何形状构成文字, ,给人以自由和轻

22、松给人以自由和轻松感，现代感强感，现代感强 5. 5. 文字编排的形式文字编排的形式: : A. A. 竖排式竖排式 B. B. 横排式横排式 C. C. 斜排式斜排式 D. D. 曲线式曲线式安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 244.4.1 网页中的文字E. E. 渐变式渐变式运用文字字体大小产生渐变的效果。运用文字字体大小产生渐变的效果。F. F. 重叠式重叠式由句子重叠体现构成图形。由句子重叠体现构成图形。G. G. 分离式分离式 拉大字与字之间距离，形成点壮效果。拉大字与字之间距离，形成点壮效果。 (2). (2). 文字的头尾编排形式文字的头尾编排形式

23、A. A.齐头散尾式齐头散尾式 B. B.散头齐尾式散头齐尾式 C. C.齐头齐尾式齐头齐尾式 D. D.中轴分离式中轴分离式安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 254.4.1 网页中的文字 文文字字排排列列时时从从中中间间向向两两边边分分开开, ,突突出出中中间间的的垂垂直直空空间。间。E.E.分插式分插式 行行与与行行之之间间的的关关系系上上、下下、左左、右右曲曲直直交交叉叉，长长短短参差、错落地排列。参差、错落地排列。F.F.自由式自由式 行与行不规则地排列，形成繁杂的视觉效果，其阅行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用。读功能

24、减弱，作为背景图形用。(3).(3).图形化的文字编排效果图形化的文字编排效果 运用大量的文字组成平面的或立体的图形，文字与运用大量的文字组成平面的或立体的图形，文字与图形的结合形成了有趣的、有视觉内涵的编排形式。图形的结合形成了有趣的、有视觉内涵的编排形式。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 264.4.2 网页中的图像 图图形形是是一一种种视视觉觉信信息息传传递递媒媒介介，较较符符号号文文字字在在传传递递信信息息上上的的优优势势：易易识识别别、不不受受地地域域、国国度度、知知识识体体系系等等众多因素的影响。众多因素的影响。 图图形形图图象象往往往往来来源源于于

25、现现实实世世界界的的影影像像照照片片，在在造造型型规规律律上上有有很很强强的的客客观观制制约约性性。所所以以设设计计师师在在对对网网页页优优化化时时应应对对图图片片作作二二次次处处理理、加加工工，而而处处理理时时应应从从以以下下方方面面入手。入手。图形图像的基本表现技巧：图形图像的基本表现技巧：一一. . 面积与视角面积与视角 图像在网页中所占比例的大小直接影响整个页面的图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的重，表达情感直接。容易吸引浏览者的注意

26、。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人图像通常在页面中作点缀和呼应，表达情感含蓄，给人安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 274.4.2 网页中的图像精巧细致的感觉。精巧细致的感觉。1.1.平直的视角平直的视角给人一种平稳、安定、规矩的感觉。给人一种平稳、安定、规矩的感觉。2.2.非常规的视角非常规的视角如：倒置、旋转、仰视、俯视如：倒置、旋转、仰视、俯视增强画面动感，更具强烈的视觉冲击。增强画面动感，更具强烈的视觉冲击。 二二. .局部与特写局部与特写 对对于于整整体体的的图图像像局局部部与与特特写写能能让让视视线线更更加加集集中中，这这种种手

27、手法法有有点点到到为为止止，意意犹犹未未尽尽的的感感觉觉。局局部部放放大大，重重点点表表现现这这一一部部分分，称称为为特特写写。特特写写能能对对图图像像产产生生瞬瞬间间的的凝凝视视，引引发发浏浏览览者者的的兴兴趣趣点点。图图4-164-16为为突突出出本本款款车车的的最最新新性性能能，而而将将车车创创新新的的部部位位放放大大，以以特特写写的的形形式式展展现现。起起到到更更有有力力的的宣传宣传安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 284.4.2 网页中的图像三三. .合成与组合合成与组合效果。效果。图4-16安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作

28、 294.4.2 网页中的图像 图图像像的的合合成成是是指指用用计计算算机机将将多多幅幅图图片片的的不不同同内内容容有有选选择择的的合合成成一一个个图图像像，合合成成后后的的图图像像传传达达更更丰丰富富的的信信息息，能更集中的体现创意。能更集中的体现创意。 图图像像的的重重要要程程度度可可以以因因面面积积、摆摆放放位位置置、组组合合方方式式的不同而有所不同。的不同而有所不同。四四. .虚实和影调虚实和影调 图图像像的的虚虚实实对对比比能能够够产产生生空空间间感感，实实的的物物体体感感觉觉近近，虚的物体感觉远。虚的物体感觉远。五五. .退底与轮廓退底与轮廓 图图像像的的退退底底是是仅仅保保留留所

29、所选选图图像像，而而将将沿沿图图像像边边缘缘的的背背景景去去掉掉，退退底底后后的的形形象象的的外外轮轮廓廓成成自自由由形形状状，具具体体清清晰分明的视觉形态，显得灵活自如。晰分明的视觉形态，显得灵活自如。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 304.4.3网页设计中色彩的属性及其应用 设设计计精精良良的的网网站站总总有有其其色色调调构构成成的的总总体体倾倾向向, ,以以一一种种颜颜色色或或几几种种临临近近颜颜色色为为主主导导, ,使使全全呈呈现现在在某某种种和和谐谐、统统一一的的色色彩彩倾倾向向，如如同同人人穿穿衣衣服服。要要想想恰恰如如其其分分的的表表现现网网页页

30、中中的的内内容容，在在竞竞争争对对手手脱脱颖颖而而出出的的，信信息息空空间间的的构构造造也也需要恰如其分的包装和表达。需要恰如其分的包装和表达。一一. . 与网站风格与网站风格 色色彩彩是是网网页页设设计计中中很很难难把把握握的的重重要要方方面面，是是确确立立网网站站风风格格的的前前提提，网网站站色色彩彩的的倾倾向向，决决定定着着网网站站给给浏浏览览者者的的第第一一印印象象。如如：活活泼泼、庄庄重重、雅雅致致（如如图图4-174-17）或或热热烈。烈。二二. . 色彩原理色彩原理 “色色彩彩是是破破碎碎了了的的光光，太太阳阳的的光光与与地地球球相相撞撞，破破碎碎分散，因而使整个地球形成美丽的色

31、彩。分散，因而使整个地球形成美丽的色彩。”安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 314.4.3网页设计中色彩的属性及其应用图4-17安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 324.4.3网页设计中色彩的属性及其应用1. 1. 色彩的三要素色彩的三要素 明明度度、色色相相和和饱饱和和度度构构成成色色彩彩的的三三要要素素。自自然然界界中中的的颜颜色色可可以以分分为为非非彩彩色色和和彩彩色色两两大大类类。非非彩彩色色指指黑黑色色、白白色色和和各各种种深深浅浅不不一一的的灰灰色色，而而其其它它所所有有的的颜颜色色均均属属于于彩彩色色，任任何何一一种种色

32、色彩彩都都具具有有明明度度、纯纯度度、饱饱和和度度三三大大属属性。性。 (1). (1). 明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。 (2). (2). 色相色相 色相指色彩的相貌。如：红、黄、蓝、绿等。色相指色彩的相貌。如：红、黄、蓝、绿等。 (3). (3). 纯度纯度 纯纯度度指指色色彩彩的的纯纯净净程程度度，纯纯度度越越高高，色色相相感感越越强。强。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 33色 环图4-18安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 344.4.3网页设计中色彩的属性及其应用2. 2. 色彩的分类色彩的分类：

33、原色、间色、邻近色、对比色、互补色：原色、间色、邻近色、对比色、互补色3. 3. 色彩与心理色彩与心理 色彩对人们头脑和精神心理的影响是客观存在的，如：色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1).(1).色彩的冷暖感觉色彩的冷暖感觉A. A. 暖色暖色 色色彩彩的的冷冷暖暖与与人人们们对对世世界界的的经经验验分分不不开开。如如：阳阳光光呈呈现现红红、橙橙、黄黄、等等颜颜色色，所所以以人人们们一一看看到到红红、橙橙、黄黄等等色色就联想到火热和烈日给人们的感受，故称就联想到火热和烈日给人们的

34、感受，故称“暖色暖色”B. B. 冷色冷色当当人人们们看看到到绿绿、青青蓝蓝色色时时会会与与寒寒冷冷相相联联系系. .如如冰冰川川、海海洋洋、夜空、树荫等夜空、树荫等(2). (2). 色彩的进退和胀缩感觉色彩的进退和胀缩感觉 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 35 色彩对比图4-19安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 364.4.3网页设计中色彩的属性及其应用a. a. 长长波波长长的的暖暖色色有有前前进进的的睡睡眠眠的的感感觉觉，短短波波的的冷冷色色有有退退缩的感觉缩的感觉b. b. 明明度度高高的的色色彩彩光光量量多多、色色刺刺激

35、激犬犬，有有前前进进膨膨胀胀的的感感觉觉，反之有退缩的感觉反之有退缩的感觉c. c. 不同北京的衬托也能产生前进、涨缩的感觉不同北京的衬托也能产生前进、涨缩的感觉(3). (3). 色彩的轻重和软硬感觉色彩的轻重和软硬感觉明明度度高高的的色色彩彩给给人人轻轻的的感感觉觉，明明度度低低的的色色彩彩给给人人重重的的感感觉觉。在在色色相相方方面面，暖暖色色给给人人轻轻的的感感觉觉，冷冷色色给给人人重重的的感感觉觉给给人人轻轻的的感感觉觉的的颜颜色色均均有有软软的的感感觉觉，给给人人重重的的感感觉觉的的颜色均有硬的感觉颜色均有硬的感觉 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 3

36、74.4.3网页设计中色彩的属性及其应用(4). (4). 色彩的艳丽与素雅色彩的艳丽与素雅 色彩饱和度高，亮度高的色彩艳丽，反之素雅色彩饱和度高，亮度高的色彩艳丽，反之素雅(5). (5). 色彩的记忆性色彩的记忆性 人人们们对对色色彩彩的的记记忆忆，由由于于年年龄龄、性性别别、个个性性、职职业业、经经历历、所所受受教教育育、自自然然环环境境、社社会会背背景景的的不不同同，差差异异很很大大。一般说来记忆性色彩强的色彩为：一般说来记忆性色彩强的色彩为： 暖色、名度高、纯度高暖色、名度高、纯度高 记忆性弱的色彩：记忆性弱的色彩： 冷色、明度低、纯度低冷色、明度低、纯度低(6). (6). 色彩的

37、联想与象征色彩的联想与象征 色彩的联想是通过以往的经验、记忆或知识将当前的色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程色彩与其他具象或抽象及相联系起来的过程 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 384.4.3网页设计中色彩的属性及其应用v常见颜色的联想：常见颜色的联想：vA.A.具象联想具象联想v红色：血、火、太阳红色：血、火、太阳v橙色：灯光橙色：灯光 、柑橘、柑橘 、秋叶、秋叶、 都市都市v黄色：光、黄色：光、 柠檬、柠檬、 迎春花迎春花 、食品、食品v绿色：草地、绿色：草地、 树叶树叶 、禾苗、禾苗v蓝色：天空蓝色：天空

38、 、宇宙、宇宙、 水水 、冰、冰v紫色：丁香花紫色：丁香花 、葡萄、葡萄 、茄子、茄子v黑色：夜晚黑色：夜晚 、墨、墨、 石炭石炭 v白色：雪白色：雪 、牛奶、牛奶 、白云、白云 、面粉、面粉v灰色：乌云灰色：乌云 、铁、铁 、木、木 vB.B.抽象联想抽象联想安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 394.4.3网页设计中色彩的属性及其应用红色：热烈红色：热烈 热情热情 危险危险 活力活力 吉祥吉祥 喜庆喜庆 夏季夏季 传统传统橙色：温暖橙色：温暖 欢喜欢喜 嫉妒嫉妒 华丽华丽 甜蜜甜蜜 兴奋兴奋 黄色：光明黄色：光明 希望快活希望快活 平凡平凡 权利权利 清爽清爽

39、安静安静蓝色：平静蓝色：平静 神秘神秘 悠久悠久 理智理智 深远深远 科学科学 快捷快捷紫紫色色：优优雅雅 高高贵贵 注注重重 浪浪漫漫 神神秘秘 女女性性 温温柔柔 虚虚幻幻 魅魅力力黑黑 色色 ： 严严 肃肃 刚刚 健健 恐恐 怖怖 死死 亡亡 罪罪 恶恶 坚坚 硬硬 沉沉 默默 绝绝 望望 悲悲 哀哀 男性男性 机械机械灰色：平凡灰色：平凡 天意天意 谦逊谦逊 灰心灰心 无聊无聊 消极消极 谦虚谦虚 随便随便（7 7）人对色彩的情感）人对色彩的情感 最基本的情感表现：好最基本的情感表现：好 恶恶 情感的差异的原因：情感的差异的原因： 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设

40、计与制作 404.4.3网页设计中色彩的属性及其应用a. a. 年龄差异年龄差异年龄高：冷色年龄高：冷色 明度纯度低明度纯度低年龄低：明度纯度高年龄低：明度纯度高b b性别差异性别差异男性：冷色或纯度高的色彩（如黑男性：冷色或纯度高的色彩（如黑. .灰）灰）色调集中色调集中女性：暖色女性：暖色. .纯度较低的粉色及白色纯度较低的粉色及白色色调分散色调分散c.c.种族差异种族差异原因：生活环境原因：生活环境. .社会文化社会文化. .历史历史. .宗教信仰等不同宗教信仰等不同中国：红中国：红 黄黄 蓝蓝 天蓝天蓝 浅蓝浅蓝美国：淡黄美国：淡黄 红红 明灰明灰 明蓝明蓝法国：黑法国：黑 灰灰 红红

41、 蓝蓝 绿绿 白白德国：黑德国：黑 白白 天蓝天蓝 咖啡最基本的情感表现：好咖啡最基本的情感表现：好 恶恶 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 414.4.3网页设计中色彩的属性及其应用菲律宾：淡黄菲律宾：淡黄 蓝蓝 绿绿印度：红印度：红 黄黄 蓝蓝 绿绿 埃及：绿埃及：绿 红红 黑黑 蓝蓝 绿绿三三. . webweb设计中的色彩应用原理设计中的色彩应用原理确立网站色调确立网站色调确立网站色调的过程确立网站色调的过程决定主体色决定主体色选择辅助色选择辅助色 选择背景色选择背景色安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 424.4.3网页设计中

42、色彩的属性及其应用图4-20图4-21安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 434.4.3网页设计中色彩的属性及其应用色彩调整色彩调整 确定主页的题材后，要了解哪些颜色适合哪些网站，确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的站点，基本任何颜色都适合，但用黑色或如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受深色则更符合夜间观众的视觉感受 页面色彩搭配页面色彩搭配 色相相比色相相比 明度对比明度对比 饱和度对比饱和度对比 补色对比补色对比 面积对比面积对比 调和色调调和色调3. 3. 调和色彩的基本法则调和色彩的基本法则 安

43、庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 444.4.3网页设计中色彩的属性及其应用建立主调统率页面色彩关系建立主调统率页面色彩关系善用金银黑白灰等中性色缓解中和，以烘托主题善用金银黑白灰等中性色缓解中和，以烘托主题拉开距离（从纯度和明度拉开距离（从纯度和明度. .面积上着手）面积上着手）四四. .色彩意象的设计应用色彩意象的设计应用 当当我我们们看看到到色色彩彩时时，除除了了感感觉觉其其对对生生理理和和物物理理方方面面的影响的影响, ,心理也会立即产生感觉，这就是色彩的意象心理也会立即产生感觉，这就是色彩的意象1.1.红色的色彩意象红色的色彩意象 由由于于红红色色容容易易

44、引引起起注注意意，所所以以在在各各种种媒媒体体中中被被广广的的运运用用；除除了了具具有有较较佳佳的的明明视视效效果果之之外外，更更被被用用来来传传达达有有力力 . .热热诚诚. .温温暖暖. .前前进进等等涵涵义义的的企企业业精精神神与与形形象象。另另外外红红也也常常用用来来作作为为警警告告. .危危险险. .禁禁止止. .防防火火等等标标志志用用色色.(.(例例: :中中国人一看见红色就充满了喜悦和激情国人一看见红色就充满了喜悦和激情) ) 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 454.4.3网页设计中色彩的属性及其应用2.2.橙色的色彩意象橙色的色彩意象 橙橙色色

45、明明视视度度高高，在在工工业业安安全全用用色色中中。橙橙色色是是警警戒戒色色。如火车头、登山服饰、救生衣的设计大都含有橙色。如火车头、登山服饰、救生衣的设计大都含有橙色。 由由于于橙橙色色明明亮亮刺刺眼眼，有有时时会会产产生生负负面面低低俗俗的的意意象象。所以运用时，要注意色彩的搭配及表现形式。所以运用时，要注意色彩的搭配及表现形式。 由于符合大自然创造的色彩搭配模式，橙色与具有由于符合大自然创造的色彩搭配模式，橙色与具有一定灰度的绿色搭配效果较好。一定灰度的绿色搭配效果较好。3.3.黄色的色彩意象黄色的色彩意象 黄色明视度高，同样在生活中属警戒色（如交通标黄色明视度高，同样在生活中属警戒色（

46、如交通标志上黄灯）志上黄灯） 高亮度的黄色在页面设计中很少大块面的出现，多高亮度的黄色在页面设计中很少大块面的出现，多半由于颜色本身过于刺眼，造成浏半由于颜色本身过于刺眼，造成浏 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 464.4.3网页设计中色彩的属性及其应用览览者者视视觉觉的的不不愉愉快快。但但与与黑黑色色搭搭配配较较好好，会会强强烈烈突突出出主主体体。在细节部分使用效果更加。在细节部分使用效果更加。4.4.绿色的色彩意象绿色的色彩意象 在在页页面面设设计计中中，绿绿色色所所传传达达的的清清爽爽、理理想想、希希望望、生生长的意象。符合人们接近自然的生理需求。长的意象

47、。符合人们接近自然的生理需求。绿绿色色在在设设计计中中应应用用很很广广，在在工工业业上上许许多多机机械械采采用用绿绿色色，医医疗机构场所，也常用绿色作空间色彩规划。疗机构场所，也常用绿色作空间色彩规划。 5 5蓝色的色彩意象蓝色的色彩意象 由于蓝色沉稳的特性，具有理智、准确的意象。在商由于蓝色沉稳的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选用业设计中，强调科技、效率的商品或企业形象。大多选用蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西方文化的方文化的 影响。蓝色作为页面基调能营造出深邃、忧郁的影响。蓝

48、色作为页面基调能营造出深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比较合适。意境。用其展示博大的胸怀或感性诉求方面比较合适。安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 474.4.3网页设计中色彩的属性及其应用6 6紫色的色彩意境紫色的色彩意境 紫紫色色由由于于其其强强烈烈的的女女性性化化的的性性格格，在在商商业业设设计计用用色色中中，受受到到相相等等大大的的限限制制，除除了了女女性性有有关关的的商商品品或或企企业业形形象外，其它类设计不常作为主色调使用。象外，其它类设计不常作为主色调使用。 紫色被称为紫色被称为“魔鬼魔鬼” 颜色。深紫色会造成恐怖的颜色。深紫色会造成

49、恐怖的气氛，对比气体颜色较难控制气氛，对比气体颜色较难控制 紫色也有其优点：是高紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。关的题材。7.7.褐色的色彩意象褐色的色彩意象 在商业上褐色用来表示原始材料的质感。如麻、木在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、麦类等，或强调古典优雅的企业或商品形象。麦类等，或强调古典优雅

50、的企业或商品形象。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 484.4.3网页设计中色彩的属性及其应用8. 8. 白色的色彩意象白色的色彩意象 白白色色具具有有高高级级，科科技技的的意意象象。痛痛需需和和其其他他色色彩彩搭搭配配使使用用。纯纯白白色色绘绘入入寒寒冷冷，严严峻峻的的感感觉觉。所所以以在在使使用用白白色色时，都会搭配一些其他颜色。如象牙白、米白、乳白等。时，都会搭配一些其他颜色。如象牙白、米白、乳白等。 白白色色是是永永远远流流行行的的主主色色调调，是是能能和和任任何何颜颜色色搭搭配配的的万能色。较容易控制如图（万能色。较容易控制如图（4-224-22）。）

51、。9. 9. 黑色的色彩意象黑色的色彩意象黑黑色色具具有有高高贵贵、稳稳重重、科科技技庄庄严严的的意意象象。黑黑色色也也是是一一种种流行的主色调。适合与许多色彩搭配。流行的主色调。适合与许多色彩搭配。以以黑黑色色为为主主色色调调可可以以创创造造出出神神秘秘的的气气氛氛，另另外外稳稳重重的的黑黑色可以烘托主体超凡气质和美感。色可以烘托主体超凡气质和美感。10. 10. 灰色的色彩意象灰色的色彩意象安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 494.4.3网页设计中色彩的属性及其应用图4-22安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 504.4.3网页设计

52、中色彩的属性及其应用 灰色具有柔和，高雅的意象。属中间色，男女皆能接灰色具有柔和，高雅的意象。属中间色，男女皆能接受，所以，灰色也是永远的主要颜色。许多科技产品，尤受，所以，灰色也是永远的主要颜色。许多科技产品，尤其是和金属材料有关的，凡平却来用灰色来传达高级，科其是和金属材料有关的，凡平却来用灰色来传达高级，科技的形象。以灰色作为设计的基调是当前设计流行的做法，技的形象。以灰色作为设计的基调是当前设计流行的做法，在缓和过对比造成的强烈的反差，灰色显示了其杰出的能在缓和过对比造成的强烈的反差，灰色显示了其杰出的能力。力。五五. . 网页设计的配色技巧网页设计的配色技巧 色色彩彩的的意意象象可可

53、以以延延伸伸设设计计潜潜制制的的效效果果。网网页页设设计计新新手手可可能能喜喜欢欢选选用用一一些些漂漂亮亮的的图图片片作作为为色色彩彩背背景景。但但浏浏览览一一下下大大型型网网站站，会会发发现现它它们们更更多多的的运运用用的的是是黑黑、灰灰、蓝蓝、绿绿、黄黄等等。其其他他的的色色彩彩作作为为背背景景。使使得得网网页页显显得得典典雅雅，温温馨馨而而又不失活泼，同时大大加快了网页加载的速度。又不失活泼，同时大大加快了网页加载的速度。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 514.4.3网页设计中色彩的属性及其应用1. 1. 运用色素运用色素 这里指在主色调选定的基础上，调

54、整色彩的透明度这里指在主色调选定的基础上，调整色彩的透明度或饱和度。将色彩变淡或加深调出新色彩或选用邻近色，或饱和度。将色彩变淡或加深调出新色彩或选用邻近色，使用页色彩统一、有层次感。使用页色彩统一、有层次感。2. 2. 使用对比色使用对比色 可可以以充充分分的的利利用用补补色色原原理理进进行行搭搭配配，同同时时注注意意使使用用灰色调进行调和，这样的作为色彩丰富，意境深远。灰色调进行调和，这样的作为色彩丰富，意境深远。3. 3. 用黑色与明度、纯度、饱和度高的色彩搭配用黑色与明度、纯度、饱和度高的色彩搭配 对比强烈，不光雅致的同时更容易吸引眼球。对比强烈，不光雅致的同时更容易吸引眼球。4. 4

55、. 文字与背景色的搭配文字与背景色的搭配 深色字体配素淡，柔和的色彩，读起来自然流畅，深色字体配素淡，柔和的色彩，读起来自然流畅，深色字体搭配鲜明的字体。如字体作为装饰性来表现出深色字体搭配鲜明的字体。如字体作为装饰性来表现出观而选择中间色调明时，纯度可适当降低如图（观而选择中间色调明时，纯度可适当降低如图（4-234-23）。）。 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 524.4.3网页设计中色彩的属性及其应用 总结总结: :要想将色彩自然和谐的运用于网页设计中，使要想将色彩自然和谐的运用于网页设计中，使网页获得生命力。大自然是最好的老师。春夏秋冬都恩网页获得生命力

56、。大自然是最好的老师。春夏秋冬都恩能够使设计和谐优美。色彩运用中应注意的问题；国家、能够使设计和谐优美。色彩运用中应注意的问题；国家、种族、宗教信仰、风俗种族、宗教信仰、风俗 地理位置、文化修养、性别、地理位置、文化修养、性别、年龄年龄 。 例例: :儿童喜欢对比强烈，生活在草原上的人喜欢红色，儿童喜欢对比强烈，生活在草原上的人喜欢红色，生活在闹市中的人喜欢淡雅的颜色，生活在大沙漠中的生活在闹市中的人喜欢淡雅的颜色，生活在大沙漠中的人喜欢绿色。人喜欢绿色。图4-23安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 534.5 网页创意设计的程序 3.5.1 3.5.1 前期策划前

57、期策划1 3.5.2 3.5.2 后期更新及维护后期更新及维护 2安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 544.5.1 前期策划一一. .明确设计任务明确设计任务 一一个个设设计计师师: :在在接接受受任任务务之之前前, ,必必须须搞搞清清楚楚服服务务对对象象的的基基本本情情况况和和意意图图, ,弄弄清清楚楚所所要要设设计计的的是是一一个个什什么么样样的的任务任务. .企业设计网站的原因很多企业设计网站的原因很多: : (1) (1)宣传新公司或服务的需要宣传新公司或服务的需要 (2) (2)旧网站的改版、更新旧网站的改版、更新 二二. .调查研究与分析调查研究与分析

58、 任任何何主主页页都都要要根根据据主主题题的的内内容容形形成成风风格格, ,只只有有熟熟悉悉题材和内容设计工作才能有的放矢题材和内容设计工作才能有的放矢, ,取得理想效果取得理想效果. . 分析的内容包括分析的内容包括: :1.1.目标市场分析目标市场分析 分析受众群体的文化水平分析受众群体的文化水平, ,价值观念价值观念, , 所在的国家所在的国家, ,安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 554.5.2后期更新及维护族及其喜好等族及其喜好等. .2.2.同类行业网站分析同类行业网站分析 同同类类行行业业网网站站的的总总体体色色彩彩风风格格, ,排排版版布布局局,

59、,页页面面内内容容的选择及表现形式等。的选择及表现形式等。三三 . .创意开发创意开发 由由单单图图表表现现开开始始, ,确确定定设设计计方方向向, ,题题材材, ,构构思思多多个个方方案案, ,尝尝试试从从不不同同角角度度, ,方方向向, ,不不同同方方式式对对网网页页主主题题进进行行挖挖掘掘和表现和表现, ,然后将材料进行整理然后将材料进行整理, ,选择其中较好的进行发散选择其中较好的进行发散. .四四. . 修改及定案修改及定案 应应收收时时的的听听取取多多方方面面的的意意见见及及时时对对收收集集材材料料汇汇集集整整理理, ,修改修改, ,并最终定稿并最终定稿. .安庆职业技术学院安庆职

60、业技术学院 网页设计与制作网页设计与制作 564.5.2后期更新及维护网网站站中中随随着着新新信信息息的的加加入入, ,老老信信息息的的删删除除, ,要要不不断断的的对对网页进行更新并维护网页进行更新并维护, ,使其能始终正常运行。使其能始终正常运行。更新前的准备：更新前的准备：1.1.了解市场需求了解市场需求 大大多多网网页页数数网网页页都都或或多多或或少少的的与与经经济济利利益益相相挂挂钩钩, ,应以市场的导向，为其服务应以市场的导向，为其服务. .2.2.了解询问者的心理了解询问者的心理设计网页需要了解你的观众设计网页需要了解你的观众, ,了解什么东西在吸引他们了解什么东西在吸引他们, ,需要了解他们的感受需要了解他们的感受, ,则有助于你建立站点的色调和个则有助于你建立站点的色调和个性性. . 安庆职业技术学院安庆职业技术学院 网页设计与制作网页设计与制作 571.1.如何才能在作品中充分体现创意如何才能在作品中充分体现创意2.2.简述图形图象的创意技巧简述图形图象的创意技巧3.3.简述色彩的性格对突出网页设计主题的作用简述色彩的性格对突出网页设计主题的作用4.4.什么是创新性思维什么是创新性思维 习 题安庆职业技术学院安庆职业技术学院