第二章 网页色彩的组成部分-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Part of web design 第二章 网页色彩的 组成部分 2 网页的主色调 The Main Tone of The Page 1 网页的辅助色 The Auxiliary Color of The Web Page 2 网页的点睛色 The Highlight of The Web Page 3 4 目 录 CONTENTS 网页的背景色 The Background Color of The Web Page 3 网页的主色调 网页的主色调 1 PART 4 请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。 网页的主色调 The Main Tone of The Page 2.1. 网页的主色调 从色彩学的角度上说，一个网页中只有一个主题色，也称为主色调。 主色调是指在网页中运用的最主要的色彩，其中包括大面积的背景色和装饰图形、图片颜色等构成视觉中心的颜色。主色调是网页色彩设计的中心色，在搭配其他的颜色的过程中，通常以主色调为作为基础， 与其互相协调和统一。 图2-1所示网页的主色调是蓝紫色， 与不同纯度和明度的蓝紫色相搭配， 使整个页面相互协调，蓝紫色是此 网页视觉中心的颜色。 图2-1 网页主色调 5 2.1. 网页的主色调 如图2-2所示，此网页的主色调选择了与背景色或者与辅助色相近的同色色相颜色或邻近色，营造了华丽而晦暗的场景，使得页面整体协调，视觉效果稳重。 图2-2 稳重的网页主色调 网页的主色调 The Main Tone of The Page 6 2.1. 网页的主色调 如图2-3所示的网页是太和环球嘉年华游乐园网站的首页，其使用了一种非传统配色方案，利用与背景色相对比的红色和橙色，再结合丰富的动画元素，为浏览者营造出一种欢快、愉悦的氛围。 图2-3太和环球嘉年华游乐园 网页的主色调 The Main Tone of The Page 7 2.1. 网页的主色调 如图2-4所示的网站页面的主色调是渐变的蓝色，整体给人一种淡雅、清新与浪漫的心理感受，让人感到洗衣液产品的可靠性与真实性。 图2-4蓝月亮网站 网页的主色调 The Main Tone of The Page 8 网页的辅助色 2 PART 网页的辅助色 9 网页的辅助色 The Auxiliary Color of The Web Page 2.2. 网页的辅助色 主色调与辅助色共同构成网页的标准色彩。辅助色的页面占用比例仅次于主色调，起到烘托主色调、支持主色调以及融合主色调的作用。辅助色在整体的画面中应该起到平衡主色调的视觉效果和减轻用户所产生的视觉疲劳，起到一定视觉分散的作用。图2-5所示，此网页的辅助色只使用一种色彩，网页选取了与主色调相协调的深蓝色作为辅助色，使得网页更加有层次。 图2-5以 一种色彩为辅助色的网页 10 2.2. 网页的辅助色 图2-6所示的是西班牙一个餐饮类网站的首页，设计者巧妙地让绿色系的美食作为辅助色，并悬浮在纯白的背景上，逼真的食物仿佛轻盈无重量一般，呈现出独特的视觉体验。 图2-6 一种单色系为辅助色的网页 网页的辅助色 The Auxiliary Color of The Web Page 11 2.2. 网页的辅助色 图2-7所示，此网页的辅助色是第三种形式：由几种色彩组合而成的色系。黄色和橙黄色偏多，这两种颜色有刺激食欲的心理效应，很好地宣传了网页的广告效益。另外，红色和黄色所占的比例恰当，使得这两种颜色起到很好的视觉效果，平衡了网页的主色调，吸引眼球。 图2-7 不同色彩组合为辅助色的网页 网页的辅助色 The Auxiliary Color of The Web Page 12 2.2. 网页的辅助色 图2-8主色调为大面积的蓝灰色。而白色与灰色则为辅助色，整个页面从主页到链接页都显得沉稳、冷静与高雅。 图2-8 kazustyle网站 网页的辅助色 The Auxiliary Color of The Web Page 13 网页的点睛色 网页的点睛色 3 PART 14 网页的点睛色 The Highlight of