1.4 网页配色

网页设计是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩作为网页视觉元素的一种，不仅情感丰富，其形式的美感也使浏览者得以视觉和心理的享受。将色彩成功地运用在网页创意中，可以强化网页的视觉张力。

1.4.1 色彩的基础概念

色彩是网站最重要的一个部分，在学习如何为网站进行色彩搭配之前，首先要来认识颜色。

1. 色彩与视觉原理

色彩的变化是变幻莫测的，这是因为物体本身除了其自身的颜色外，有时也会因为周围的颜色，以及光源的颜色而有所改变。

□ 光与色

光在物理学上是电磁波的一部分，其波长在700～400nm，在此范围称为可视光线。当把光线引入三棱镜时，光线被分离为红、橙、黄、绿、青、蓝、紫，因而得出的自然光是七色光的混合。这种现象称作光的分解或光谱，七色光谱的颜色分布是按光的波长排列的，如下图所示，可以看出红色的波长最长，紫色的波长最短。

光是以波动的形式进行直线传播的，具有波长和振幅两个因素。不同的波长长短产生色相差别。不同的振幅强弱大小产生同一色相的明暗差别。光在传播时有直射、反射、透射、漫射、折射等多种形式。

光直射时直接传入人眼，视觉感受到的是光源色。当光源照射物体时，光从物体表面反射出来，人眼感受到的是物体表面色彩。当光照射时，如遇玻璃之类的透明物体，人眼看到是透过物体的穿透色，光在传播过程中，受到物体的干涉时，则产生漫射，对物体的表面色有一定影响。如通过不同物体时产生方向变化，称为折射，反映至人眼的色光与物体色相同。

□ 物体色

自然界的物体五花八门、变化万千，它们本身虽然大都不会发光，但都具有选择性地吸收、反射、透射色光的特性。当然，任何物体对色光不可能全部吸收或反射，因此，实际上不存在绝对的黑色或白色。

物体对色光的吸收、反射或透射能力，很受物体表面肌理状态的影响。但是，物体对色光的吸收与反射能力虽是固定不变的，而物体的表面色却会随着光源色的不同而改变，有时甚至失去其原有的色相感觉。所谓的物体“固有色”，实际上不过是常光下人们对此的习惯而已。例如在闪烁、强烈的各色霓虹灯光下，所有建筑几乎都失去了原有本色而显得奇异莫测。

2. 色彩三要素

自然界的色彩虽然各不相同，但任何有彩色的色彩都具有色相、亮度、饱和度这3个基本属性，也称为色彩的三要素。

□ 色相

色相指色彩的相貌，是区别色彩种类的名称。色相是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个字都代表一类具体的色相，它们之间的差别就属于色相差别。当用户称呼到其中某一色的名称时，就会有一个特定的色彩印象，这就是色相的概念。正是由于色彩具有这种具体相貌特征，用户才能感受到一个五彩缤纷的世界。如果说亮度是色彩隐秘的骨骼，色相就很像色彩外表华美的肌肤。色相体现着色彩外向的性格，是色彩的灵魂。

如果把光谱的红、橙、黄、绿、蓝、紫诸色带首尾相连，制作一个圆环，在红和紫之间插入半幅，构成环形的色相关系，便称为色相环。在六种基本色相各色中间加插一个中间色，其首尾色相按光谱顺序为：红、橙红、橙、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、红紫，构成十二基本色相，这十二色相的彩调变化，在光谱色感上是均匀的。如果进一步再找出其中间色，便可以得到二十四个色相（见下图）。

□ 饱和度

饱和度是指色彩的纯净程度。可见光辐射，有波长相当单一的，有波长相当混杂的，也有处在两者之间的，黑、白、灰等无彩色就是波长最为混杂，纯度、色相感消失造成的。光谱中红、橙、黄、绿、蓝、紫等色光都是最纯的高纯度的色光。

饱和度取决于该色中含色成分和消色成分（黑、白、灰）的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低。

当在蓝色中混入了白色时，虽然仍旧具有蓝色相的特征，但它的鲜艳度降低了，亮度提高了，成为淡蓝色；当混入黑色时，鲜艳度降低了，亮度变暗了，成为暗蓝色；当混入与蓝色亮度相似的中性灰时，它的亮度没有改变，饱和度降低了，成为灰蓝色。采用这种方法有十分明显的效果，就是从纯色加灰渐变为无饱和度灰色的色彩饱和度序列（见下图）。

黑白网页与彩色网页之间存在着非常大的差异。大多数情况下黑白网页给浏览者的视觉冲击力不如彩色网页效果强烈，同时对作品网页的风格也有着一些局限性。而色彩的选择不仅仅决定了作品的风格，同时也使得作品更加饱满，富有魅力（参见下图）。

□ 亮度

亮度是色彩赖以形成空间感与色彩体量感的主要依据，起着“骨架”的作用。在无彩色中，亮度最高的色为白色，亮度最低的色为黑色，中间存在一个从亮到暗的灰色系列（见下图）。

亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。

色相与饱和度则必须依赖一定的明暗才能显现，色彩一旦发生，明暗关系就会同时出现，在用户进行一幅素描的过程中，需要把对象的有彩色关系抽象为明暗色调，这就需要有对明暗的敏锐判断力。用户可以把这种抽象出来的亮度关系看作色彩的骨骼，它是色彩结构的关键（参见下图）。

3. 色彩的混合

客观世界中的事物绚丽多彩，调色板上色彩变化无限，但如果将其归纳分类，基本上就是两大类：一类是原色，即红、黄、蓝；另一类就是混合色。而使用间色再调配混合的颜色，称为复色。从理论上讲，所有的间色、复色都是由三原色调和而成。

在构成网页的色彩布局时，原色是强烈的，混合色较温和，复色在明度上和纯度上较弱，各类间色与复色的补充组合，形成丰富多彩的画面效果。

□ 原色理论

所谓三原色，就是指这三种色中的任意一色都不能由另外两种原色混合产生，而其他颜色可以由这三原色按照一定的比例混合出来，色彩学上将这3个独立的颜色称为三原色。

□ 混色理论

将两种或多种色彩互相进行混合，造成与原有色不同的新色彩称为色彩的混合。它们可归纳成加色法混合、减色法混合、空间混合等3种类型。

加色法混合是指色光混合，也称第一混合，当不同的色光同时照射在一起时，能产生另外一种新的色光，并随着不同色混合量的增加，混色光的明度会逐渐提高。将红（橙）、绿、蓝（紫）3种色光分别做适当比例的混合，可以得到其他不同的色光。反之，其他色光无法混出这3种色光来，故称为色光的三原色，它们相加后可得白光（见下图）。

减色法混合即色料混合，也称第二混合。在光源不变的情况下，两种或多种色料混合后所产生新色料，其反射光相当于白光减去各种色料的吸收光，反射能力会降低。故与加色法混合相反，混合后的色料色彩不但色相发生变化，而且明度和纯度都会降低。所以混合的颜色种类越多，色彩就越暗越混浊，最后近似于黑灰的状态（见下图）。

空间混合法亦称中性混合、第三混合。将两种或多种颜色穿插、并置在一起，于一定的视觉空间之外，能在人眼中造成混合的效果，故称空间混合。其实颜色本身并没有真正混合，它们不是发光体，而只是反射光的混合。因此，与减色法相比，增加了一定的光刺激值，其明度等于参加混合色光的明度平均值，既不减也不加。

由于它实际比减色法混合明度显然要高，因此色彩效果显得丰富、响亮，有一种空间的颤动感，表现自然、物体的光感更为闪耀。

1.4.2 色彩的模式

简单地讲，颜色模式是一种用来确定显示和打印电子图像色彩的模型，即一幅电子图像用什么样的方式在计算机中显示或者打印输出。Photoshop中包含了多种颜色模式，每种模式的图像描述和重现色彩的原理及所能显示的颜色数量各不相同。常见的有如下4种模式。

1. RGB颜色模式

RGB色彩模式是工业界的一种颜色标准，是通过对红（Red）、绿（Green）、蓝（Blue）3个颜色通道的变化，以及它们相互之间的叠加，来得到各式各样的颜色的。RGB即是代表红、绿、蓝3个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一，如下图所示。其中的颜色为每两种颜色的等量，或者非等量相加所产生的颜色。

其中，每两种不同量度相加所产生的颜色如下表所述。

对RGB三基色各进行8位编码，这3种基色中的每一种都有一个从0（黑）～255（白色）的亮度值范围。当不同亮度的基色混合后，便会产生出256×256×256种颜色，约为1670万种，这就是用户常听说的“真彩色”。电视机和计算机的显示器都是基于RGB颜色模式来创建其颜色的。

2. CMYK颜色模式

CMYK颜色模式是一种印刷模式。其中4个字母分别指青（Cyan）、洋红（Magenta）、黄（Yellow）、黑（Black），在印刷中代表4种颜色的油墨。CMYK基于减色模式，由光线照到有不同比例C、M、Y、K油墨的纸上，部分光谱被吸收后，反射到人眼的光产生颜色。在混合成色时，随着C、M、Y、K 4种成分的增多，反射到人眼的光会越来越少，光线的亮度会越来越低（参见下图）。

3. HSB颜色模式

色泽（Hue）、饱和度（Saturation）和明亮度（Brightness）也许更适合人们的习惯，它不是将色彩数字化成不同的数值，而是基于人对颜色的感觉，让人觉得更加直观一些。其中色泽（Hue）是基于从某个物体反射回的光波，或者是透射过某个物体的光波；饱和度（Saturation），经常也称作chroma，是某种颜色中所含灰色的数量多少，含灰色越多，饱和度越小；明亮度（Brightness）是对一个颜色中光的强度的衡量。明亮度越大，则色彩越鲜艳（参见下图）。

4. Lab颜色模式

Lab色彩模式是以数学方式来表示颜色，所以不依赖于特定的设备，这样确保输出设备经校正后所代表的颜色能保持一致性。其中L指的是亮度；a是由绿至红；b是由蓝至黄（见下图）。

1.4.3 自定义网页颜色

一般情况下，访问者的浏览器Netscape Navigator和Internet Explorer选择了网页的文本和背景的颜色，让所有的网页都显示这样的颜色。但是，网页的设计者经常为了视觉效果而选择了自定义颜色。自定义颜色是一些为背景和文本选取的颜色，它们不影响图片或者图片背景的颜色，图片一般都以它们自身的颜色显示。自定义颜色可以为下列网页元素独自分配颜色。

□ 背景：网页的整个背景区域可以是一种纯粹的自定义颜色。背景色总是在网页的文本或者图片的后面。

□ 普通文本：网页中除了链接之外的所有文本。

□ 超级链接文本：网页中的所有文本链接。

□ 已被访问过的链接文本：访问者已经在浏览器中使用过的链接。访问过的文本链接以不同的颜色显示。

□ 当前链接文本：当一个链接被访问者单击的瞬间，它转换了颜色以表明它已经被激活了。

对于制作网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅、大方和温馨，如下图所示的网页中，主要由白色背景，和蓝色、黄色、粉红色以及黑色笔触组成，能够加快浏览者打开网页的速度（参见下图）。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。一些经常用到的网页背景颜色列表，如下表所述。

此表只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。

1.4.4 色彩推移

色彩推移是按照一定规律有秩序地排列、组合色彩的一种方式。为了使画面丰富多彩、变化有序，网页设计师通常采用色相推移、明度推移、纯度推移、互补推移、综合推移等推移方式组合网页色彩。

1. 色相推移

选择一组色彩，按色相环的顺序，由冷到暖或者由暖到冷进行排列、组合。可以选用纯色系或者灰色系进行色相推移（见下图）。

2. 明度推移

选择一组色彩，按明度等差级数的顺序，由浅到深或者由深到浅进行排列组合的一种明度渐变组合。一般都选用单色系列组合。也可以选用两组色彩的明度系列按明度等差级数的顺序交叉组合（见下图）。

3. 纯度推移

选择一组色彩，按纯度等差级数或者比差级数的顺序，由纯色到灰色或者由灰色到纯色进行排列组合（见下图）。

4. 综合推移

选择一组或者多组色彩，按色相、明度、纯度推移进行综合排列组合的渐变形式，由于色彩三要素的同时加入，其效果当然要比单项推移复杂、丰富得多（见下图）。

1.5 网页的艺术表现与风格设计

网页设计属于平面设计的范畴，所以网页效果同样包含色彩与布局这两种元素。网页设计虽然具有其自身的结构布局方式，但是平面设计中的构成原理和艺术表现形式也适用于网页设计。并且当两者成功结合时，制作的网页才更受浏览者喜爱。

1.5.1 网页形式的艺术表现

平面构成的原理已经广泛应用于不同的设计领域，网页设计也不例外。在设计网页时，平面构成原理的运用能够使网页效果更加丰富。

1. 分割构成

在平面构成中，把整体分成部分，叫做分割。在日常生活中这种现象随时可见，如房屋的吊现出顶、地板都构成了分割。下面介绍几种常用的分割方法。

□ 等形分割

该分割方法要求形状完全一样，如果分割后再把分隔界线加以取舍，会有良好的效果（参见下图）。

□ 自由分割

该分割方法是不规则的将画面自由分割的方法，它不同于数学规则分割产生的整齐效果，但它的随意性分割，给人活泼不受约束的感觉（见下图）。

□ 比例与数列

利用比例完成的构图通常具有秩序、明朗的特性，给人清新之感。分隔给予一定的法则，如黄金分割法、数列等（如下图）。

2. 对称构成

对称具有较强的秩序感。可是仅仅居于上下、左右或者反射等几种对称形式，便会产生单调乏味之感。所以，在设计时要在几种基本形式的基础上，灵活加以应用。以下是网页中常用的几种基本对称形式。

□ 左右对称

左右对称是平面构成中最为常见的对称方式，该方式能够将对立的元素平衡地放置在同一个平面中。如下图所示，为某网站的进站首页。该页面通过左右对称结构，将黑白两种完全不同的色调融入同一个画面。

中轴对称布局比较简单，所以在修饰方面也要采用简单大方的元素（如下图）。

□ 回转对称

回转对称构成给人一种对称平衡的感觉，使用该方式布局网页，打破导航菜单一贯长条制作的方法，又从美学角度使用该方法平衡页面（如下图）。

3. 平衡构成

在造型的时候，平衡的感觉是非常重要的，由于平衡造成的视觉满足，使人们能够在浏览网页时产生一种平衡、安稳的感受。平衡构成一般分为两种：一是对称平衡，如人、蝴蝶，一些以中轴线为中心左右对称的形状；另一种是非对称平衡，虽然没有中轴线，却有很端正的平衡美感。

□ 对称平衡

对称是最常见、最自然的平衡手段。在网页中以局部或者整体彩页对称平衡的方式进行布局，能够得到视觉上的平衡效果。下图就是在网页的中间区域采用了对称平衡构成，使网页保持了平稳的效果（如下图）。

□ 非对称平衡

非对称其实并不是真正的“不对称”，而是一种更高层次的“对称”，如果把握不好页面就会显得乱，因此使用起来要慎重，更不可用得过滥。如下图所示，通过左上角浅色图案堆积与右下角深色填充的非对称设计，形成非对称平衡结构。

1.5.2 网页构成的艺术表现

重复、渐变以及空间构成，这都是色彩构成的方式，它们同样也适用于网页。运用这些形式不仅可以使网页具有充实、厚重、整体、稳定的视觉效果，而且能够丰富网页的视觉效果，尤其是空间构成的运用，能够产生三维的空间，增强网页的深度感以及立体感。

1. 重复构成

重复是指同一画面上，同样的造型重复出现的构成方式，重复无疑会加深印象，使主题得以强化，也是最富秩序的统一观感的手法。在网站构成中使用重复，可以分成背景和图像两种形态出现，在背景设计中就是形状、大小、色彩、肌理完全重复（如下图）。

2. 渐变构成

渐变是骨骼或者基本形循序渐进的变化过程中，呈现出阶段性秩序的构成形式，反映的是运动变化的规律。例如按形状、大小、方向、位置、疏密、虚实、色彩等关系进行渐次变化排列的构成形式（如下图）。

3. 空间构成

用户一般所说的空间，是指的二维空间。在日常生活中用户可以看见，物体在空间给人的感觉总是近大远小。例如在火车站，月台上的柱子近的高，远的低，铁轨是近的宽，远的窄，用户要对这些特性加以研究探索，分析立体形态元素之间的构成法则，提高在平面中创建三维形态的能力。

□ 平行线的方向

改变排列平行线的方向，会产生三次元的幻象。下图为具有空间感的网页效果。

□ 折叠表现

在平面上一个形状折叠在另一个形状之上，会有前有后、上下的感觉，产生空间感（如下图）。

□ 阴影表现

阴影的区分会使物体具有立体感和凹凸感。下图为通过阴影得到的立方体效果的网页。

1.5.3 网页纹理的艺术表现

纹理归根结底是色彩。它是网页的重要视觉特征。在网页设计时，使用不同的纹理，配以适当的内容，能够让浏览者记忆深刻，尤其当运用牛皮纸、木纹等图案时，使得在网页中具有了更强的真实感。此外，发射与密集构成的图案，能够增强网页的空间感，将浏览者的思维转换到三维空间，充分发挥其想象力。

1. 肌理构成

肌理又称质感，由于物体的材料不同，表面的排列、组织、构造上不同，因而产生粗糙感、光滑、软硬感。在设计中，为达到预期的设计目的，强化心理表现和更新视觉效应，必须研究创造更新更美的视觉效果。

现代计算机、摄影和印刷技术的发展更加扩大了肌理、材质的表现性，成为现代设计的重要手段。抽象主义和其他现代艺术流派创造的各种表现技法，是艺术设计师必须研习的课题。肌理即形象表面的纹理特征，用户可以通过多种方法创建不同的肌理。

□ 纸类肌理

各种不同的纸张，由于加工的材料不同，本身在粗细、纹理、结构上不同，或人为的折皱、揉搓产生特殊的肌理效果。

物体表面的编排样式不仅反映其外在的造型特征，还反映其内在的材质属性，如下图所示，该网页以布料肌理为背景。

□ 利用喷绘

使用喷笔、金属网、牙刷将溶解的颜料刷下去后，颜料如雾状地喷在纸上，也可以创造出个性的肌理。下图所示为毛笔纹理的网页。

□ 渲染

这种方法是在具有吸水性强的材料表面，通过液体颜料进行渲染、浸染，颜料会在表面自然散开，产生自然优美的肌理效果（如下图）。

□ 自然界元素

现在网站设计对背景的重视程度越来越高，因为网站要给人一种整体效果。下图为木纹与绿叶肌理形成的网页背景。

2. 发射构成

发射的现象在自然界中广泛存在，太阳的光芒、盛开的花朵、贝壳、螺纹和蜘蛛网等形成发射图形。可以说发射是一种特殊的重复和渐变，其基本形和骨骼线均环绕着一个或者几个中心。发射有强烈的视觉效果，能引起视觉上的错觉，形成令人眩目的、有节奏的、变化不定的图形。

□ 中心点式发射构成

该构成方式是由中心向外或由外向内集中的发射。发射图案具有多方的对称性，有非常强烈的焦点，而焦点易于形成视觉中心，发射能产生视觉的光效应，使所有形象有如光芒从中心向四面散射（如下图）。

□ 螺旋式发射

它是以旋绕的排列方式进行的，旋绕的基本形逐渐扩大形成螺旋式的发射（如下图）。

□ 同心式发射

同心式发射是以一个焦点为中心，层层环绕发射。下图所示为同心式发射网页背景效果。

3. 密集构成

密集在设计中是一种常用的组图手法，基本形在整个构图中可自由散布，有疏有密。最疏松或者最紧密的地方常常成为整个设计的视觉焦点，在画面中造成一种视觉上的张力，像磁场一样，具有节奏感。密集也是一种对比的情况，利用基本形数量排列的多少，产生疏密、虚实、松紧的对比效果。下图所示为双色圆环图案的网页背景。

1.5.4 网页设计风格类型

随着审美要求的提高，网页视觉效果越来越被重视。由于网页设计隶属于平面设计，所以平面设计中的绘画风格同样能够应用于网页设计。

1. 平面风格

平面风格是通过色块或者位图等元素形成二维的效果，这种效果最常出现在网页设计中（见下图）。

2. 矢量风格

矢量风格的网页是通过矢量图像组合而成，这种风格的网页图像效果可以任意地放大与缩小，而不会影响查看效果，所以经常应用于动画网站中（如下图）。

3. px风格

px画也属于点阵式图像，但它是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常常采用.gif格式，同时它的造型比较卡通，得到很多朋友的喜爱。下图所示的网页，就是采用了px画与真实人物结合的方式制作而成的。

4. 三维风格

三维是指在平面二维系中又加入了一个方向向量构成的空间系。三维风格中的三维空间效果，在网页中的运用，能够使其效果无限延伸（如下图）。

而三维风格中的三维对象在网页中的应用，则能够在显示立体空间的同时，突出其主题（如下图）。