资源简介

(共24张PPT)
第2章
网页配色设计
2.1
色彩基础
网页配色需要对色彩有清晰的认识和敏锐的判断。由于色彩知识过于抽象，不便于理解，本书从图2-1所示的二十四色色环图出发来讲解色彩的基础知识及网页配色设计，方便网页设计初学者直观地理解色彩的相关知识，掌握网页配色技巧。
本节主要讲解色彩三要素、色彩的心理效应及色彩的冷暖，为网页配色打下基础。
图2-1 二十四色色环图
3
2.1.1
色彩三要素
1．色相
色相是色彩的基本特征，是区别不同色彩的标准，可以将其理解为色彩的名称，如红、橙、黄、绿、青、蓝、紫等颜色。
4
人眼观察到的任何色彩都具有色相、明度和纯度三个属性，它们被称为色彩三要素。
5
提 示
在使用Photoshop处理图像时，常用“色阶”“曲线”“亮度/对比度”等命令调节图像明度。适当提升图像明度可以增强图像的通透感，但图像不宜过亮，否则会损失图像细节。
2．明度
明度是指色彩的明暗程度。同种色相的色彩在明度上有深浅之分。例如，在图2-1所示的色环图中，同一色相的颜色从内环到外环，明度逐渐降低，颜色越来越深。此外，不同色相的颜色其明度也有差别，如黄色明度高，紫色明度低。
3．纯度
纯度也被称为色彩饱和度，是指色彩的纯净程度。我们知道，所有颜色都是由原色（红、绿、蓝或青、品红和黄）混合而成的，色彩纯度主要取决于颜色中某种主要原色成分的比例，比例越大，纯度越高，颜色越鲜艳；反之纯度越低，颜色越暗淡，越不容易分辨。当色彩纯度降到最低时，将变为无彩色，即黑、白、灰色。
图2-1所示的色环图中，中间一环的颜色纯度最高；内环的颜色因加入白色，在提高明度的同时降低了纯度；外环的颜色因加入黑色，在降低明度的同时也降低了纯度。
课堂互动
观察图2-2，指出图中有几种颜色（色相）？
哪幅图的色彩纯度最高？
哪幅图的色彩纯度最低？
此外，青、品红、黄、红、绿、蓝是否为纯度最高的颜色？
图2-2 不同色彩纯度的图片
7
提 示
在使用Photoshop处理图像时，常用“自然饱和度”“色相/饱和度”等命令调节图像色彩纯度。适当提升色彩纯度可增加图像的鲜艳度，吸引浏览者的目光。
8
2.1.2
色彩的心理效应
不同的色彩能带给人不同的心理感受，让人产生特殊的情感反应和联想。因此，在对网页进行配色设计时，除了需要注重色彩本身的美感外，还需要注意色彩带给人的情感反应和色彩的象征意义，使色彩符合网站的主题。
课堂互动
图2-3所示为不同色调的两张图片。
看到这两张图片，你分别会想到什么呢？
图2-3 不同色调的图片
图2-4 红色Banner
10
1．红色
红色具有很强的视觉冲击力，容易引起人注意。红色常让人联想到热情、活力、积极、主动、力量、爱情、温暖、开放、社交性等。在国内，红色还是一种代表喜庆的色彩，每逢节日，网络上都遍布以红色为主题色的广告，如图2-4所示。此外，红色也常用来做警告、危险、禁止、防火等标识的颜色。
需要注意的是，在网页配色中，纯粹使用红色作为主色调的网站相对较少，通常都配以其他颜色进行调和。
11
提 示
不同纯度和明度的红色给人的感觉是不同的。其中，粉红色明度高，纯度低，视觉柔和，女性特征明显，给人一种鲜嫩、温柔、纯真、诱惑的感觉，适用于以女性或婴儿等为主题的网站，如化妆品网站、内衣网站等，如图2-5所示；鲜红色纯度高，视觉刺激强，男性特征明显，适用于表现热情、活力、奔放，具有男性特征的网站，如图2-6所示；深红色明度低，容易营造出深邃、神秘的气氛；玫瑰红则营造的是一种娇媚、艳丽的气氛，适用于女性用品及服装网站。
图2-5 化妆品网站主页
图2-6 可口可乐公司网站主页
图2-7 餐厅网站主页
12
2．橙色
橙色介于红色与黄色之间，常让人联想到能量、温暖、健康、活泼、快乐、创造力、社交性等。此外，由于橙色与许多食物的颜色类似，因此橙色容易引起人的食欲。当作品中需要加入上述特性时，橙色就成为设计师的首选，如图2-7所示。
13
黄色给人的感觉与橙色类似，但黄色明度更高，更为醒目。黄色常让人联想到快乐、轻快、撒娇、可爱、理解、智慧、幸福、食物等。在网页配色中，黄色常与冷色或明度低的颜色搭配，起到和谐对比的调和效果，如图2-8所示。
3．黄色
图2-8 游戏促销活动网页
绿色是大自然中最常见的颜色，常让人联想到生命、安全、和平、理想、希望与青春的活力。绿色常用于与自然、健康等相关的网页。此外，当作品中需要表现蔬菜、水果、环保等主题时，也常用绿色作为主色，如图2-9所示。
4．绿色
图2-9 水果蔬菜网站主网页
14
图2-10 科技企业网站主页
15
5．蓝色
蓝色常让人联想到天空、海洋、宇宙等事物，给人以静谧、深邃、博大、高远、理智、准确、信赖、忠诚等感觉，特别适合做强调科技、效率等企业网站的主色，如图2-10所示。蓝色如果与红、棕、黄等颜色搭配得当，可以构成和谐对比的调和关系。
16
紫色是由活跃的红色和静谧的蓝色混合而成的，具有神秘、浪漫、高贵的特性。使用不同的颜色与紫色搭配可给人不同的感觉。例如，红色与深紫色搭配可给人既神秘又温暖的感觉；粉色与浅紫色搭配可给人浪漫优雅的感觉，如图2-11所示。
6．紫色
图2-11 以紫色为主色调的网页
白色是明度最高的颜色，象征着纯洁、神圣、明快。白色被称为“万能色”，可以和任何颜色搭配使用。其中，白色与暖色搭配可以产生华丽感；与冷色搭配可以产生清爽感。在网页设计中，白色多用作背景色与过渡色。在网页中大面积的留白可以给人简约、时尚的感觉，并给浏览者一定的遐想空间，如图2-12所示。
7．白色
图2-12 大面积留白的网页
17
图2-13 使用灰色作为网页背景色
18
8．灰色
灰色属于中性色，和白色、黑色一样是一种无色彩属性的颜色。灰色能给人一种柔和、细致、朴素、大方、舒适、优雅的感觉。使用灰色时，大多利用不同明度的灰色变化或搭配其他颜色来调和画面的朴素、沉闷。灰色常用于网页或图像的背景色，如图2-13所示。
9．黑色
黑色也被称为“万能色”，其搭配不同的颜色可以呈现出风格迥异的效果。当黑色与黄色搭配时，会给人一种奢华、高贵的感觉；与白色搭配时，图像识别度最高，且可以凸显高级感；与红色搭配时，会给人富有力量的感觉，如图2-14所示。
19
图2-14 黑色与红色搭配的网页
课堂互动
某快餐外卖网站以蓝色作为主色，你认为合适吗？
为什么？应该使用什么颜色？
此外，在前面情景模拟中提出的婴儿奶粉销售网站应使用什么颜色作为主色？
21
色彩的冷暖是指不同的色彩让人产生的温度感觉。如前图2-1色环图所示，以红、橙、黄为代表的颜色给人以温暖、热烈、喜庆之感，这一系列的色彩被称为暖色；以蓝、绿、青为代表的颜色给人以清凉、沉静、坚实之感，这一系列的色彩被称为冷色。
1．色彩的冷暖
2.1.3
色彩的冷暖与网页色调
提 示
需要注意的是，除红色与蓝色是色彩冷暖的两个极端外，其他许多色彩的冷暖感觉都是相对的。例如，紫色与绿色，紫色中的红紫色较暖，而蓝紫色则较冷；绿色中的草绿色带有暖意，而翠绿色则偏冷。
22
色调是指画面中色彩的总体倾向。当网页中包含大面积的冷色时，网页呈现冷色调，如图2-15所示；当网页中包含大面积的暖色时，网页呈现暖色调，如图2-16所示。此外，黑、白、灰色被称为中性色（非冷非暖），当网页中包含大面积的中性色时，网页呈现中性色调，给人一种高端、大气、简洁的感觉，如图2-17所示。
2．网页的色调
图2-15 冷色调网页
图2-16 暖色调网页
图2-17 中性色调网页
色调如同网页的性格，不同色调的网页会给访问者不同的心理感受。冷暖对比是自然平衡的规律，在网页设计中恰当地使用冷色和暖色进行搭配，可增加网页的活力。
课堂互动
观察图2-15和图2-16，分析图中冷色与暖色的使用比例，说明这样搭配有什么好处。
THANK YOU!

展开更多......

收起↑