网页艺术设计基础

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

1、2.1 2.1 网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则 2.1.1 2.1.1 优秀网页的优秀网页的优秀网页的优秀网页的6 6个条件个条件个条件个条件 2.1.2 2.1.2 网页艺术设计的原则网页艺术设计的原则网页艺术设计的原则网页艺术设计的原则 2.1.3 2.1.3 网页设计中的形式美网页设计中的形式美网页设计中的形式美网页设计中的形式美 法则法则法则法则 2.2 2.2 网页的版式与布局设计网页的版式与布局设计网页的版式与布局设计网页的版式与布局设计 2.2.1 2.2.1 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式

2、的基本类型 2.2.2 2.2.2 布局的安排布局的安排布局的安排布局的安排网页艺术设计基础网页艺术设计基础2.3 2.3 网页色彩设计网页色彩设计网页色彩设计网页色彩设计 2.3.1 2.3.1 色彩的基本原理色彩的基本原理色彩的基本原理色彩的基本原理 2.3.2 2.3.2 网页色彩设计原理网页色彩设计原理网页色彩设计原理网页色彩设计原理 2.4 2.4 网页中的文字与图像网页中的文字与图像网页中的文字与图像网页中的文字与图像 2.4.1 2.4.1 文字的格式化文字的格式化文字的格式化文字的格式化 2.4.2 2.4.2 文字的编排文字的编排文字的编排文字的编排 2.4.3 2.4.3

3、网页中图像的格式网页中图像的格式网页中图像的格式网页中图像的格式 2.4.4 2.4.4 图像的编排图像的编排图像的编排图像的编排2.12.1优秀网页的优秀网页的优秀网页的优秀网页的6 6个条件个条件个条件个条件 2.1.12.1.1网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则 2 2个附加条件个附加条件个附加条件个附加条件 表示欢迎态度表示欢迎态度表示欢迎态度表示欢迎态度 1 1加强说服力加强说服力加强说服力加强说服力 2 2 4 4个必要条件个必要条件个必要条件个必要条件 明示标题明示标题明示标题明示标题1 1明示信息明示信息明示信息明示信息2

4、2明示目录信息明示目录信息明示目录信息明示目录信息3 3传达信任感传达信任感传达信任感传达信任感4 41. 明确标题明确标题 ：店名，公司名，网站名等标题要明确，大小颜色的强弱适店名，公司名，网站名等标题要明确，大小颜色的强弱适当当。2. 明示信息明示信息 : 信息内容，行业种类要明确，版面风风格与画面整体的形信息内容，行业种类要明确，版面风风格与画面整体的形像要一致像要一致。如建筑行业的网站，主图就不要放如汽车这类与建筑无关的如建筑行业的网站，主图就不要放如汽车这类与建筑无关的图图。3. 整理目录信息整理目录信息 : 想找的项目录上能找到，信息整理过，可读性强，不想找的项目录上能找到，信息整

5、理过，可读性强，不用移动画面就可以找到项目，可以利用空白，划线，色块进行分组用移动画面就可以找到项目，可以利用空白，划线，色块进行分组。4. 传达信任感传达信任感 : 画面整体保持平衡感，值得信赖完美的图片，隔开辅画面整体保持平衡感，值得信赖完美的图片，隔开辅助造型，端正形状，插图的水准助造型，端正形状，插图的水准。不要配色与插图粗糙可疑，目录信息不要配色与插图粗糙可疑，目录信息缺乏可信度缺乏可信度。5. 表达欢迎态度表达欢迎态度 : 画面整体表达一种欢迎的态度，使访问者的心情平和，画面整体表达一种欢迎的态度，使访问者的心情平和，安定安定。可以通过配色，语言表示欢迎可以通过配色，语言表示欢迎。

6、 6. 加强说服力加强说服力：醒目，印象强烈寻找印象深刻的图片，造型的强度，醒目，印象强烈寻找印象深刻的图片，造型的强度，增强对比，提高说服力增强对比，提高说服力，高雅格调的主页高雅格调的主页。2.1.22.1.2 变化是各个组成部分之间的区别，变化是各个组成部分之间的区别，变化是各个组成部分之间的区别，变化是各个组成部分之间的区别，统一是各部分之间的内在关联。统一是各部分之间的内在关联。统一是各部分之间的内在关联。统一是各部分之间的内在关联。 形式上要丰富有条理；组织上要有秩序而不单调，不混乱形式上要丰富有条理；组织上要有秩序而不单调，不混乱形式上要丰富有条理；组织上要有秩序而不单调，不混乱

7、形式上要丰富有条理；组织上要有秩序而不单调，不混乱。 统一包括版式统一、字体统一、设计风格以及明暗色调的统一等。统一包括版式统一、字体统一、设计风格以及明暗色调的统一等。统一包括版式统一、字体统一、设计风格以及明暗色调的统一等。统一包括版式统一、字体统一、设计风格以及明暗色调的统一等。 网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则统一和变化统一和变化统一和变化统一和变化 对比强调差异，产生冲突，调和寻求共同点，缓和矛盾。两者相对比强调差异，产生冲突，调和寻求共同点，缓和矛盾。两者相对比强调差异，产生冲突，调和寻求共同点，缓和矛盾。两者相对比强调差异，

8、产生冲突，调和寻求共同点，缓和矛盾。两者相 互作用，不可分割。互作用，不可分割。互作用，不可分割。互作用，不可分割。 在网页设计中要合理的利用对比的因素，例如文本的排布、字体在网页设计中要合理的利用对比的因素，例如文本的排布、字体在网页设计中要合理的利用对比的因素，例如文本的排布、字体在网页设计中要合理的利用对比的因素，例如文本的排布、字体 大小、粗细、颜色、图片的宽窄、比例的反差、透明、黑白等。大小、粗细、颜色、图片的宽窄、比例的反差、透明、黑白等。大小、粗细、颜色、图片的宽窄、比例的反差、透明、黑白等。大小、粗细、颜色、图片的宽窄、比例的反差、透明、黑白等。2.1.22.1.2对比和调和对

9、比和调和对比和调和对比和调和以调和为主的页面，以调和为主的页面，以调和为主的页面，以调和为主的页面，细节处理不乏对比。细节处理不乏对比。细节处理不乏对比。细节处理不乏对比。 网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则对称与平衡对称与平衡对称与平衡对称与平衡 2.1.22.1.2网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则 页面上的平衡是一个动态的平衡，更多的时候是图和文字的平页面上的平衡是一个动态的平衡，更多的时候是图和文字的平页面上的平衡是一个动态的平衡，更多的时候是图和文字的平页面上的平衡是一个动态的

10、平衡，更多的时候是图和文字的平衡，大块的颜色轻的图和小块的颜色重的图的平衡，以及文本的衡，大块的颜色轻的图和小块的颜色重的图的平衡，以及文本的衡，大块的颜色轻的图和小块的颜色重的图的平衡，以及文本的衡，大块的颜色轻的图和小块的颜色重的图的平衡，以及文本的疏密和大小的平衡。疏密和大小的平衡。疏密和大小的平衡。疏密和大小的平衡。以对称的版式使整以对称的版式使整以对称的版式使整以对称的版式使整个画面简洁大方个画面简洁大方个画面简洁大方个画面简洁大方节奏与韵律节奏与韵律节奏与韵律节奏与韵律 2.1.22.1.2网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则网页设计中的形式美法则 韵

11、律是通过节奏的变化而产生的，但如果因为变化太多而失去韵律是通过节奏的变化而产生的，但如果因为变化太多而失去韵律是通过节奏的变化而产生的，但如果因为变化太多而失去韵律是通过节奏的变化而产生的，但如果因为变化太多而失去秩序，则韵律的美也不复存在。秩序，则韵律的美也不复存在。秩序，则韵律的美也不复存在。秩序，则韵律的美也不复存在。 在网页设计中，韵律主要存在于队比例、轻重、缓急、反复和在网页设计中，韵律主要存在于队比例、轻重、缓急、反复和在网页设计中，韵律主要存在于队比例、轻重、缓急、反复和在网页设计中，韵律主要存在于队比例、轻重、缓急、反复和渐变等形式的把握。渐变等形式的把握。渐变等形式的把握。渐

12、变等形式的把握。通过文字的线条和字通过文字的线条和字通过文字的线条和字通过文字的线条和字体的大小，增强视觉体的大小，增强视觉体的大小，增强视觉体的大小，增强视觉和心理上的韵律感和心理上的韵律感和心理上的韵律感和心理上的韵律感。2.22.2网页的版式与布局设计网页的版式与布局设计网页的版式与布局设计网页的版式与布局设计 2.2.12.2.1 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型 骨骼形骨骼形骨骼形骨骼形页首通栏，下面综合页首通栏，下面综合页首通栏，下面综合页首通栏，下面综合运用多种分栏方式运用多种分栏方式运用多种分栏方式运用多种分栏方式 横向分栏版式横向分栏版

13、式横向分栏版式横向分栏版式 2.2.12.2.1 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型 分割型分割型分割型分割型 以图片吸引浏览者的以图片吸引浏览者的以图片吸引浏览者的以图片吸引浏览者的注意力，右下角的文注意力，右下角的文注意力，右下角的文注意力，右下角的文字也得以强调字也得以强调字也得以强调字也得以强调页面右侧使用斜线页面右侧使用斜线页面右侧使用斜线页面右侧使用斜线再次分割，打破了再次分割，打破了再次分割，打破了再次分割，打破了呆板的感觉呆板的感觉呆板的感觉呆板的感觉 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型2.2.12.2

14、.1 对称型对称型对称型对称型 一一一一般般般般采采采采用用用用相相相相对对对对对对对对称称称称的的的的手手手手法法法法，以以以以避避避避免免免免呆呆呆呆板板板板，左左左左右右右右对对对对称称称称的的的的版版版版式式式式也也也也较较较较常见。常见。常见。常见。 四四四四角角角角型型型型也也也也是是是是对对对对称称称称型型型型的的的的一一一一种种种种，四四四四个个个个角角角角是是是是页页页页面面面面的的的的边边边边界界界界点点点点，在在在在四四四四个个个个角角角角安安安安排排排排的的的的任任任任何何何何内内内内容容容容都都都都能能能能产产产产生生生生安安安安定定定定感感感感。越越越越是是是是凌凌

15、凌凌乱乱乱乱的的的的页页页页面面面面，越越越越要要要要注注注注意意意意对对对对四个角的控制。四个角的控制。四个角的控制。四个角的控制。 中轴型中轴型中轴型中轴型 中轴版式，给人以中轴版式，给人以中轴版式，给人以中轴版式，给人以轻快、简洁之感轻快、简洁之感轻快、简洁之感轻快、简洁之感 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型2.2.12.2.1 曲线型曲线型曲线型曲线型 运用弧线在平稳运用弧线在平稳运用弧线在平稳运用弧线在平稳中寻求动感中寻求动感中寻求动感中寻求动感 焦点型焦点型焦点型焦点型 利用大面积的留白，利用大面积的留白，利用大面积的留白，利用大面积的留白，

16、使视觉中心的图形使视觉中心的图形使视觉中心的图形使视觉中心的图形成为焦点成为焦点成为焦点成为焦点 将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的视觉中心。视觉中心。视觉中心。视觉中心。 利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心聚拢，形成向心的版式。聚拢，形成向心的版式。聚拢，形成向心的版式。聚拢，形成向心的版式。 视觉元素向外辐射，形成离心的版式。视觉元素向外辐射，形成离心的版式。视觉元素向外辐射，形成离心的版式。视觉元素向外

17、辐射，形成离心的版式。网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型 自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活泼、轻快、美观漂亮。泼、轻快、美观漂亮。泼、轻快、美观漂亮。泼、轻快、美观漂亮。 一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量精美图

18、像。精美图像。精美图像。精美图像。2.2.12.2.1 自由型自由型自由型自由型 导航栏则作为次要的设导航栏则作为次要的设导航栏则作为次要的设导航栏则作为次要的设计元素，自由摆布，起计元素，自由摆布，起计元素，自由摆布，起计元素，自由摆布，起到点缀、修饰、均衡的到点缀、修饰、均衡的到点缀、修饰、均衡的到点缀、修饰、均衡的作用。作用。作用。作用。 2.2.22.2.2 点的布局点的布局点的布局点的布局 布局的安排布局的安排布局的安排布局的安排 艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中

19、的点，是感觉上的点，当它可见时就具备了 一定的面积。一定的面积。一定的面积。一定的面积。 页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉 效果、心理作用也不同。效果、心理作用也不同。效果、心理作用也不同。效果、心理作用也不同。 点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的 大小、形

20、状与排列距离的变化，可以使页面富于节奏韵律。大小、形状与排列距离的变化，可以使页面富于节奏韵律。大小、形状与排列距离的变化，可以使页面富于节奏韵律。大小、形状与排列距离的变化，可以使页面富于节奏韵律。 通过点的大小、主通过点的大小、主通过点的大小、主通过点的大小、主次引起浏览者的视次引起浏览者的视次引起浏览者的视次引起浏览者的视觉流动。觉流动。觉流动。觉流动。 线的布局线的布局线的布局线的布局2.2.22.2.2 布局的安排布局的安排布局的安排布局的安排 作作作作为为为为视视视视觉觉觉觉元元元元素素素素的的的的线线线线，不不不不仅仅仅仅有有有有长长长长度度度度和和和和方方方方向向向向上上上上的

21、的的的变变变变化化化化，还还还还有有有有粗粗粗粗与与与与细细细细、虚虚虚虚与与与与实实实实、粗粗粗粗糙糙糙糙和和和和光光光光滑滑滑滑等等等等变变变变化化化化，这这这这些些些些变变变变化化化化给给给给人人人人的的的的视视视视觉觉觉觉和心理以不同的感受。和心理以不同的感受。和心理以不同的感受。和心理以不同的感受。 线的布局安排主要体现为线的空间分割，分割是版式设计线的布局安排主要体现为线的空间分割，分割是版式设计线的布局安排主要体现为线的空间分割，分割是版式设计线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之一。的主要手段之一。的主要手段之一。的主要手段之一。以直线分割页面，以直线分

22、割页面，以直线分割页面，以直线分割页面，使得画面清晰、使得画面清晰、使得画面清晰、使得画面清晰、有条理有条理有条理有条理随意的弧线增随意的弧线增随意的弧线增随意的弧线增加了画面的活加了画面的活加了画面的活加了画面的活泼、明快感泼、明快感泼、明快感泼、明快感 面的布局面的布局面的布局面的布局 面的布局主要体现为面的空间分割，经分割所产生的比例关系，面的布局主要体现为面的空间分割，经分割所产生的比例关系，面的布局主要体现为面的空间分割，经分割所产生的比例关系，面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协调的重要因素。是决定页面均衡、协调的重要因素。是决定页面均衡、协调

23、的重要因素。是决定页面均衡、协调的重要因素。2.2.22.2.2 布局的安排布局的安排布局的安排布局的安排 利用线利用线利用线利用线将页面分割成大将页面分割成大将页面分割成大将页面分割成大小不一的面，产生空间小不一的面，产生空间小不一的面，产生空间小不一的面，产生空间的对比和节奏感。的对比和节奏感。的对比和节奏感。的对比和节奏感。将不同画面的方将不同画面的方将不同画面的方将不同画面的方形形形形图图以相同大小以相同大小以相同大小以相同大小组织组织排列，求得排列，求得排列，求得排列，求得秩序美感秩序美感秩序美感秩序美感 线条和形状线条和形状线条和形状线条和形状2.2.22.2.2 布局的安排布局的

24、安排布局的安排布局的安排 直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。 曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。力的视觉效果。一般应用于青春、活泼的主页题材。力的视觉效果。一般应用于青春、活泼的主页题材。力的视觉效

25、果。一般应用于青春、活泼的主页题材。 把以上两种线条和形状结合起来运用，可以大大丰富主页的表把以上两种线条和形状结合起来运用，可以大大丰富主页的表把以上两种线条和形状结合起来运用，可以大大丰富主页的表把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力。现力。现力。现力。巧妙地利用曲线巧妙地利用曲线巧妙地利用曲线巧妙地利用曲线作为导航栏，创作为导航栏，创作为导航栏，创作为导航栏，创意活泼又生动意活泼又生动意活泼又生动意活泼又生动2.3.12.3.1 色彩的基本原理色彩的基本原理色彩的基本原理色彩的基本原理 色相色相色相色相 亮度亮度亮度亮度 饱和度饱和度饱和度饱和度2.32.3网页色彩设

26、计网页色彩设计网页色彩设计网页色彩设计 色彩的三属性色彩的三属性色彩的三属性色彩的三属性 十二色相环十二色相环十二色相环十二色相环（1 1）色彩有冷暖感。）色彩有冷暖感。）色彩有冷暖感。）色彩有冷暖感。（2 2）色彩有兴奋感与沉静感。）色彩有兴奋感与沉静感。）色彩有兴奋感与沉静感。）色彩有兴奋感与沉静感。（3 3）色彩有膨胀感与收缩感。）色彩有膨胀感与收缩感。）色彩有膨胀感与收缩感。）色彩有膨胀感与收缩感。（4 4）色彩有前进感与后退感。）色彩有前进感与后退感。）色彩有前进感与后退感。）色彩有前进感与后退感。（5 5）色彩有轻重感。）色彩有轻重感。）色彩有轻重感。）色彩有轻重感。 色彩的心理感

27、觉色彩的心理感觉色彩的心理感觉色彩的心理感觉 色彩具有三种属性，即色相、亮度、饱和度。HSB模型以人类对颜色的感觉为基础，描述了颜色的三种基本特性： (1) 色相是从物体反射或透过物体传播的颜色。在0360 的标准色轮上，按位置度量色相。在通常的使用中，色相由颜色名称标识，如红色、橙色或绿色。 (2) 亮度是颜色的相对明暗程度，通常用0%(黑色)100%(白色)的百分比来度量。 (3) 饱和度(有时称为彩度)是指颜色的强度或纯度。饱和度表示色相中灰色分量所占的比例，它使用0%(灰色)100%(完全饱和)的百分比来度量。在标准色轮上，饱和度从中心到边缘递增。 色彩三要素色彩三要素色彩三要素色彩三

28、要素 HSB 模型 自然界的白色光(如阳光)是由红(Red)、绿(Green)、蓝(Blue)三种波长不同的颜色光组成的(其深层原因是由于人类视网膜上只有感受红、绿、蓝三种波长的感光细胞)。这三种颜色称为RGB三原色。三种原色中的任意两种颜色相互重叠，就会产生间色；三种原色相互混合形成白色，所以又称为“加色法三原色”，如图所示。计算机显示器与电视机屏幕的颜色组成原理相同，是由能在屏幕上分别打出红(R)、绿(G)、蓝(B)三种荧光的三种电子枪扫描合成的。它们大多采用24 bit系统，能显示224种颜色。 三原色三原色三原色三原色加色法三原色 CMYK模型以打印在纸上的油墨的光线吸收特性为基础。当

29、白光照射到半透明油墨上时，某些可见光波长被吸收，而其他波长则被反射回眼睛。 理论上，青色(C)、洋红(M)和黄色(Y)色素在合成后可以吸收所有光线并产生黑色。因此称这些颜色为减色，同时洋红、青色、黄色又称为“减色法三原色”，如图所示。由于所有打印油墨都包含一些杂质，因此这三种油墨实际生成土灰色，必须与黑色(K)油墨合成才能生成真正的黑色(为避免与蓝色混淆，黑色用K而非B表示)。将这些油墨混合重现颜色的过程称为四色印刷。 减色(CMYK)和加色(RGB)是互补色。每对减色产生一种加色，反之亦然。减色法三原色 L * a * b模型模型 L*a*b颜色与设备无关，无论使用何种设备(如显示器、打印机

30、、计算机或扫描仪)创建或输出图像，这种模型都能生成一致的颜色。 L*a*b颜色由亮度或光亮度分量(L)和两个色度分量组成。其中，这两个色度分量是a分量(从绿色到红色)和b分量(从蓝色到黄色)。 下图表示的是L*a*b模型：A为亮度=100(白色)；B为绿色到红色分量；C为蓝色到黄色分量；D为亮度=0(黑色)。L*a*b模型 色彩意象色彩意象 由于生长在一个充满着色彩的世界里，色彩一直刺激着我们的视觉器官，而色彩也往往是作品给人的第一印象。色彩的视觉效果和我们的味觉效果相似，一样的材料但因为用了不同的调味料而有了不同的味道，成功的好吃，失败的往往让人难以下咽。色彩对生理与心理都有重大的影响，当我

31、们看到色彩时，除了会感觉其物理方面的影响，心里也会立即产生感觉，这种感觉我们一般难以用言语形容，我们称之为印象，也就是色彩意象。 红色的热烈红色的热烈 红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还是一种容易造成人视觉疲劳的颜色。 在众多颜色里，红色是最鲜明生动、最热烈的颜色，极易吸引人的目光。红与黑的搭配，在商业设计中被誉为商业成功色，鲜亮的红色多用于小面积的点缀色。 常见的红色有大红、桃红、砖红、玫瑰红等，所表达的情感是不同的。 大面积背景大面积背景鲜明的红，配以鲜明的红，配以前景纯度及高的前景纯度及高的邻近色，给人以

32、邻近色，给人以强烈的兴奋度。强烈的兴奋度。 鲜嫩而充满诱惑，鲜嫩而充满诱惑，以粉红为主色调的网站以粉红为主色调的网站较适用于女性、化妆品、较适用于女性、化妆品、服饰等网站。服饰等网站。 橙色的华丽橙色的华丽 橙色具有轻快、欢欣、收获、温馨、时尚的效果。橙色具有极高的兴奋度，是最耀眼的色彩，给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色，有健康、富有活力、勇敢自由等象征意义。 在网页颜色里，橙色适用于视觉要求较高的时尚网站，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。 常见的橙色有鲜橙、橘橙、朱橙、香吉士等。橙色的跳跃橙色的跳跃浅橙黄的明快浅橙黄的明快 黄色的明快黄色的明快 黄色

33、是阳光的色彩，含有十分年轻的感觉，具有活泼与轻快的特点，象征光明、希望、高贵、愉快。黄色和其他颜色配合很活泼，有温暖感。黄色也代表着土地，象征着权力，并且还具有神秘的宗教色彩。 黄色的性格冷漠、高傲、敏感，具有扩张和不安宁的视觉印象。 中黄色传达中黄色传达着崇高、尊贵、着崇高、尊贵、辉煌、扩张的心辉煌、扩张的心理感受。理感受。 深黄的高深黄的高贵、温和、内贵、温和、内敛、稳重。敛、稳重。 米黄的雅致、清爽米黄的雅致、清爽 绿色的活力绿色的活力 绿色与人类息息相关，是永恒的自然之色，代表了生命与希望，也充满了青春活力。绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用

34、。 绿色在黄色和蓝色的冷暖之间，这样使得绿色的性格最为平和、安稳、宽容，是一种恬静、满足、优美、受欢迎的颜色。温柔又有春天生机盎然温柔又有春天生机盎然的气氛，只使用了少许的气氛，只使用了少许蓝色作为点缀，立即增蓝色作为点缀，立即增添了活力。添了活力。深绿的茂盛、健康、成深绿的茂盛、健康、成熟、稳重、生命、开阔熟、稳重、生命、开阔浅绿的优雅、安全、和浅绿的优雅、安全、和睦、宁静、柔和。睦、宁静、柔和。 蓝色的博大蓝色的博大 蓝色是色彩中比较沉静的颜色，象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。 蓝色朴实、稳重、内向的性格，能够衬托那些性格活跃、具有较强扩张力的色彩，同时也活

35、跃了页面；另一方面蓝色也有消极、冷淡、保守等意味。蓝色与红、黄等颜色运用得当，可以构成和谐的对比调和关系。 蓝色也是网站设计中运用得最多的颜色。通过不同明度的蓝色，通过不同明度的蓝色，以渐变的方式把海水的以渐变的方式把海水的感觉表达的淋漓尽致。感觉表达的淋漓尽致。浅蓝传达的淡雅、清新、浅蓝传达的淡雅、清新、浪漫、高级的心理感受。浪漫、高级的心理感受。深蓝的稳重、冷静、严深蓝的稳重、冷静、严谨、深沉、成熟。谨、深沉、成熟。 紫色的高贵紫色的高贵 紫色是一种在自然界中比较少见的颜色，象征着女性化，代表着高贵与奢华、优雅与魅力，也具有庄重、神圣和浪漫的品质；另一方面又有孤独、神秘等意味。 在紫色中红

36、色的成分较多时，显得华丽、和谐。在紫色中加入少量的黑色，具有沉重、庄严的感觉。在紫色中加入白色，则变得优雅并充满女性魅力。紫色为主调点缀紫色为主调点缀纯度较高的邻近纯度较高的邻近色、对比色时，色、对比色时，亮丽而悦目，使亮丽而悦目，使整个页面充满时整个页面充满时尚现代感。尚现代感。 黑色的色彩意象黑色的色彩意象 黑色是暗色，是纯度、色相、明度最低的非彩色，象征着力量，有时感觉沉默、空虚，有时感觉庄严、肃穆，有时又意味着不详和罪恶，世界各族都公认黑色代表死亡和悲哀。黑色还具有吸收光线的特性，有一种变幻无常的感觉。 黑色能和许多色彩构成良好的对比调和关系，运用范围很广，也常来表示英俊的男人。黑色在

37、服装、音黑色在服装、音乐、个人网页等乐、个人网页等颇具个性色彩的颇具个性色彩的网站有较多的应网站有较多的应用。用。按黑、白、灰使用的面按黑、白、灰使用的面积不同，形成一种统一积不同，形成一种统一单纯的独特风格。单纯的独特风格。黑与红的经典搭配黑与红的经典搭配 灰色的色彩意象灰色的色彩意象 两种或两种以上的色彩混合，如能配上灰色，这两个色调本身必能相互调和。 灰色介于黑色和白色之间，是中性色，具有中等明度、无彩色特点。如搭配不好，页面容易显得灰暗、肮脏。任何彩色加入灰色都显得含蓄而柔和。灰色给人高品位、含蓄、精致等感觉，同时也容易产生颓废、消极、沮丧、沉闷的意味。 灰色也被称为高级灰，是经久不衰

38、、最经看的颜色。 白色的色彩意象白色的色彩意象 白色是亮色，是明度最高的非彩色。色感光明，也是最显眼的颜色之一。白色的性格朴实、纯洁、快乐，象征纯粹、朴素、高雅等。 作为非彩色，白色与黑色一样，能与各种颜色相配合，构成明快的对比调和关系。与鲜明的色彩搭配时，显得更清爽，更具活力。 通常在网页配色时，若感觉页面沉闷，可以考虑加入白色试试，往往就是点睛之笔。 大面积的白色，只要在面积上能把握住主次分别，再添加少许大面积的白色，只要在面积上能把握住主次分别，再添加少许颜色，一样可以起到和谐统一的效果。颜色，一样可以起到和谐统一的效果。 色彩调和是指将两种或两种以上的色彩组合在一起时所产生的既协调又统

39、一的视觉效果。调和可以使有明显差别的色彩变得协调统一。我们在日常生活中常常发现，有的物品色彩搭配非常协调、雅致，令人陶醉，而有的却乏味、低俗。单一的颜色无所谓协调，只有在几种颜色具有基本的共同性或融合性时，才会变得协调。以纯度较高的红色和绿色为例，红与绿是两种对立的色彩，即我们常说的互补色。假如我们把两种面积相同的红色和绿色放置在一起。我们会感到太刺眼，很不舒服。如果在这两种纯度都很高的互补色中加入相同量的同一种颜色，如白色或其他颜色，或者将红色面积减小，这时我们就会感到很舒服，这就是调和。2.3.22.3.2 网页色彩设计原理网页色彩设计原理网页色彩设计原理网页色彩设计原理 色彩调和色彩调和

40、 色彩的对比色彩的对比色彩的对比色彩的对比 色彩对比是指将两种或两种以上的具有补色关系的色彩并列在一起，产生一种鲜明强烈的视觉感受，但仍不失统一协调的色彩关系。对比主要是通过色彩的明暗、冷暖，面积的大、小，距离的远近，形态的动、静等多方面色彩因素来达到对立又统一的视觉效果。对比的最大特征就是产生比较作用，使主题更加鲜明、突出，“万绿丛中一点红”即为此道理。在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补色

41、作为文本色。色作为文本色。色作为文本色。色作为文本色。 色彩平衡色彩平衡色彩平衡色彩平衡 设计中经常会遇到这样的情况，淡色与深色搭配在一起时，淡色感觉很轻，而深色感觉很重，这是因为色彩在视觉上有轻重的感觉。色彩的轻重感是依据它的明度高低而定的，例如相同明度的两种色彩搭配时，彩度较高的色在视觉上感觉较轻。设计中的颜色平衡就是把这种轻重悬殊很大的颜色合理搭配，使之在设计中感觉舒服、稳定。在设计时还要注意平衡轻色与重色的关系以及膨胀色与收缩色的色性。面积同样大小的浅黄色和红色，在视觉上红色比浅黄色有重量感；面积同样大小的黄色和青色放置在一起，视觉上黄色有膨胀感，青色有收缩感。 色彩节奏与韵律色彩节奏

42、与韵律 节奏本指音乐中音响节拍强弱缓急的变化和重复，在设计中一般是指同一色彩要素连续重复时所产生的运动感。韵律则有较多的变化意味，是指色彩的浓淡、明暗、色块大小等的组合而产生的视觉效果。在色彩设计中节奏是一种简洁、鲜明的韵律，而韵律又是复杂含蓄的节奏。 配色的基本概念，这是我们在做图时常常遇见的问题，若能将这些概念了解，在颜色的搭配上自然比较占优势。 明度对比明度对比 将相同的色彩放在黑色和白色上，比较色彩的感觉，会发现放在黑色上的色彩感觉比较亮，放在白色上的色彩感觉比较暗，明暗的对比效果非常强烈。明度差异很大的对比，会让人有不安的感觉。 彩度对比彩度对比 某色彩和另一彩度较高的色彩并列时，会

43、觉得本身彩度变低，而和另一个彩度较低的色彩并列时，会觉得彩度变高，这种现象称为彩度对比。 补色对比补色对比 两个互为补色的色彩在一起时，会产生明显的效果，使色彩彼此色感更强，我们称之为补色对比。 面积对比面积对比 将两个强弱不同的色彩放在一起，若要得到对比均衡的效果，必须以不同的面积大小来调整，弱色占大面积，强色占小面积，而色彩的强弱是以其明度和彩度来判断，这种现象称为面积对比。 在考虑如何配色时，必须先确定自己到底需要什么样的配色效果。一般配色设置顺序为： 决定主体色； 选择搭配色； 选择背景色； 明彩度调整，完成配色。 配色的基本类型配色的基本类型 网页配色分析网页配色分析网页配色分析网页

44、配色分析2.4.12.4.1 文字的格式化文字的格式化文字的格式化文字的格式化 常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。 常用的英文字体有常用的英文字体有常用的英文字体有常用的英文字体有ArialArial、Times New RomanTimes New Roman、ImpactImpact等。等。等。等。 艺术字能为网页添色不少，但也不能随便地套用各种艺术字体。艺术字能为网页添色不少，但也不能

45、随便地套用各种艺术字体。艺术字能为网页添色不少，但也不能随便地套用各种艺术字体。艺术字能为网页添色不少，但也不能随便地套用各种艺术字体。 最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为1212磅左右磅左右磅左右磅左右 许多新闻性网站，由于一个页面中要安排的的内容较多，通常许多新闻性网站，由于一个页面中要安排的的内容较多，通常许多新闻性网站，由于一个页面中要安排的的内容较多，通常许多新闻性网站，由于一个页面中要安排的的内容较多，通常 采用采用采用采用9 9磅的字号。磅的字号。磅的字号。磅的字号。2.42.4网页中的

46、文字与图像网页中的文字与图像网页中的文字与图像网页中的文字与图像通过文字大小疏密通过文字大小疏密通过文字大小疏密通过文字大小疏密的调整，突出重点，的调整，突出重点，的调整，突出重点，的调整，突出重点，层次分明层次分明层次分明层次分明 2.4.22.4.2 文字的编排文字的编排文字的编排文字的编排 常常常常见见的文字的文字的文字的文字编编排形式有两端排形式有两端排形式有两端排形式有两端对齐对齐、居中、居中、居中、居中对齐对齐、左、左、左、左对齐对齐或有或有或有或有对齐对齐和和和和绕图绕图排列。排列。排列。排列。右右右右侧侧文字采用左文字采用左文字采用左文字采用左对齐对齐，参与参与参与参与页页面分

47、割，面分割，面分割，面分割，产产生生生生虚虚虚虚实实相生的效果相生的效果相生的效果相生的效果文字与文字与文字与文字与图图片穿插片穿插片穿插片穿插排列，密集的文排列，密集的文排列，密集的文排列，密集的文字形成字形成字形成字形成块块面，丰面，丰面，丰面，丰富了富了富了富了页页面面面面层层次次次次 文字的图形化文字的图形化文字的图形化文字的图形化 文字的强调文字的强调文字的强调文字的强调2.4.32.4.3 网页中图像的格式网页中图像的格式网页中图像的格式网页中图像的格式 GIFGIF格式格式格式格式GIFGIF格式是非失真压缩。格式是非失真压缩。格式是非失真压缩。格式是非失真压缩。GIFGIF格式

48、支持透明和渐进交错模式，支持动格式支持透明和渐进交错模式，支持动格式支持透明和渐进交错模式，支持动格式支持透明和渐进交错模式，支持动画功能，在网页中应用非常广泛。画功能，在网页中应用非常广泛。画功能，在网页中应用非常广泛。画功能，在网页中应用非常广泛。GIFGIF格式的缺点是只支持格式的缺点是只支持格式的缺点是只支持格式的缺点是只支持256256种颜种颜种颜种颜色，存储格式有色，存储格式有色，存储格式有色，存储格式有1 1位位位位88位，不能用于存储高质量的图像。位，不能用于存储高质量的图像。位，不能用于存储高质量的图像。位，不能用于存储高质量的图像。 JPEGJPEG格式格式格式格式JPEG

49、JPEG格式的图像采用失真的压缩算法，压缩比例越大，图像质量格式的图像采用失真的压缩算法，压缩比例越大，图像质量格式的图像采用失真的压缩算法，压缩比例越大，图像质量格式的图像采用失真的压缩算法，压缩比例越大，图像质量越差。越差。越差。越差。JPEGJPEG格式支持格式支持格式支持格式支持2424位真彩色。位真彩色。位真彩色。位真彩色。 PNGPNG格式格式格式格式 PNGPNG格式是一种非失真压缩格式，具有格式是一种非失真压缩格式，具有格式是一种非失真压缩格式，具有格式是一种非失真压缩格式，具有JPEGJPEG和和和和GIFGIF格式的全部格式的全部格式的全部格式的全部优点。优点。优点。优点。

50、PNGPNG图像的缺点是不支持动画的应用，图像的缺点是不支持动画的应用，图像的缺点是不支持动画的应用，图像的缺点是不支持动画的应用，PNGPNG不支持不支持不支持不支持CMYKCMYK色彩模式。色彩模式。色彩模式。色彩模式。 SWFSWF格式格式格式格式 SWFSWF是是是是Macromedia FlashMacromedia Flash软件生成的流式多媒体文件，其特点软件生成的流式多媒体文件，其特点软件生成的流式多媒体文件，其特点软件生成的流式多媒体文件，其特点是具有小巧精致的矢量画面以及非常强大的交互性能，可以在下载是具有小巧精致的矢量画面以及非常强大的交互性能，可以在下载是具有小巧精致的

51、矢量画面以及非常强大的交互性能，可以在下载是具有小巧精致的矢量画面以及非常强大的交互性能，可以在下载时同步播放。时同步播放。时同步播放。时同步播放。2.4.42.4.4 图像的编排图像的编排图像的编排图像的编排 图像的形式图像的形式图像的形式图像的形式网页排版通常有四种形式：方形图、退底图、出血图以及这网页排版通常有四种形式：方形图、退底图、出血图以及这网页排版通常有四种形式：方形图、退底图、出血图以及这网页排版通常有四种形式：方形图、退底图、出血图以及这三种形式的结合。三种形式的结合。三种形式的结合。三种形式的结合。 四角与中轴四点结构四角与中轴四点结构四角与中轴四点结构四角与中轴四点结构经

52、过页经过页面中心的垂面中心的垂面中心的垂面中心的垂直直直直线线和水平和水平和水平和水平线线，轻轻易地将易地将易地将易地将视线视线引向引向引向引向页页面中心面中心面中心面中心 块状组合与散点组合结构块状组合与散点组合结构块状组合与散点组合结构块状组合与散点组合结构采用了随意的布局方式，在木质采用了随意的布局方式，在木质采用了随意的布局方式，在木质采用了随意的布局方式，在木质地板上放上地板上放上地板上放上地板上放上CDCD、照片、日记本、照片、日记本、照片、日记本、照片、日记本、墨水，贴近生活。不仅是在布局墨水，贴近生活。不仅是在布局墨水，贴近生活。不仅是在布局墨水，贴近生活。不仅是在布局一个网页

53、还是在布局自己的生活一个网页还是在布局自己的生活一个网页还是在布局自己的生活一个网页还是在布局自己的生活方式。方式。方式。方式。 不同性质的网站不同性质的网站不同性质的网站不同性质的网站 门户网站门户网站门户网站门户网站 框架结构合框架结构合框架结构合框架结构合理、页面空理、页面空理、页面空理、页面空间节省、图间节省、图间节省、图间节省、图片大小优化。片大小优化。片大小优化。片大小优化。 企业网站企业网站企业网站企业网站 框架结构根框架结构根框架结构根框架结构根据内容多少据内容多少据内容多少据内容多少更随意、自更随意、自更随意、自更随意、自由，图片质由，图片质由，图片质由，图片质量要求高。量要

54、求高。量要求高。量要求高。 电子商务网站电子商务网站电子商务网站电子商务网站 类似于门户类似于门户类似于门户类似于门户网站，一般网站，一般网站，一般网站，一般为上下结构，为上下结构，为上下结构，为上下结构，上部导航，上部导航，上部导航，上部导航，下部为商品下部为商品下部为商品下部为商品的专门频道。的专门频道。的专门频道。的专门频道。 产品宣传网站产品宣传网站产品宣传网站产品宣传网站 企业企业企业企业CICI的延的延的延的延伸，充分表伸，充分表伸，充分表伸，充分表现了企业文现了企业文现了企业文现了企业文化的特征。化的特征。化的特征。化的特征。页面上一般页面上一般页面上一般页面上一般有企业标志、有

55、企业标志、有企业标志、有企业标志、名称、宣传名称、宣传名称、宣传名称、宣传口号等要素。口号等要素。口号等要素。口号等要素。2.1 2.1 网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则网页艺术设计的基本原则 2.1.1 2.1.1 优秀网页的优秀网页的优秀网页的优秀网页的6 6个条件个条件个条件个条件 2.1.2 2.1.2 网页艺术设计的原则网页艺术设计的原则网页艺术设计的原则网页艺术设计的原则 2.1.3 2.1.3 网页设计中的形式美网页设计中的形式美网页设计中的形式美网页设计中的形式美 法则法则法则法则 2.2 2.2 网页的版式与布局设计网页的版式与布局设计网页的

56、版式与布局设计网页的版式与布局设计 2.2.1 2.2.1 网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型 2.2.2 2.2.2 布局的安排布局的安排布局的安排布局的安排2.3 2.3 网页色彩设计网页色彩设计网页色彩设计网页色彩设计 2.3.2 2.3.2 网页色彩设计原理网页色彩设计原理网页色彩设计原理网页色彩设计原理 2.4 2.4 网页中的文字与图像网页中的文字与图像网页中的文字与图像网页中的文字与图像 2.4.1 2.4.1 文字的格式化文字的格式化文字的格式化文字的格式化 2.4.2 2.4.2 文字的编排文字的编排文字的编排文字的编排 2.4.3 2.4.3 网页中图像的格式网页中图像的格式网页中图像的格式网页中图像的格式 2.4.4 2.4.4 图像的编排图像的编排图像的编排图像的编排 小结小结小结小结第第第第2 2章章章章 网页艺术设计基础网页艺术设计基础网页艺术设计基础网页艺术设计基础