3.1 手法一：动静交映—网页中的“静态色彩”与“动态色彩”

在网页设计过程中，通过选择“静态色彩”与“动态色彩”添加在不同位置，使得网页的视觉效果能够更加统一、更加和谐。无论是静态色彩还是动态色彩，在网页中都有着其专属的位置。例如，通过静态色彩，实现背景效果的美化；或者通过动态色彩，实现图像中色彩的美化。本节分别对“静态色彩”和“动态色彩”的相关内容进行具体介绍。

3.1.1 静态色彩

网页中结构、背景及表格等所使用的颜色，在很大程度上决定着网页的整体风格，这样的色彩就是静态色彩。打开网页，用户首先看到的会是框架的颜色，所以静态色彩很重要。这一部分介绍网页静态色彩的相关内容，帮助大家掌握静态色彩在网页中的应用。

1. 静态色彩—框架

网页中用于页面布局的框架颜色，是静态色彩的一种。下图所示是一框架，其中的色彩选择了蓝色。

下图所示是框架的又一种形式，边框使用双线条实现。上图和下图是网页中比较常见的框架样式，在色彩选择上都只选择一种颜色。框架色彩的选择，通常配合页面主色调为选择依据，在不影响页面整体色彩效果的基础上选定颜色。

2. 静态色彩—背景

网页的背景颜色，也属于静态色彩。如下图所示，列表框中采用了灰色作为背景颜色。同时，在列表框的周围选择蓝色作为其边框颜色。这里背景部分的灰色和边框的蓝色，分别属于静态色彩的行列。

除了上述的灰色和蓝色，上图中还使用了其他颜色，如与灰色、蓝色比较接近的滚动条的颜色。该列表框中一共使用了下列几种颜色，从而实现对整个列表框的色彩布局。

    01 color: #336699;
    02 background-color:#dcdcdc;
    03 border: solid 3px blue;
    04 scrollbar-face-color: #ffd700;
    05 scrollbar-shadow-color: #e0ffff;
    06 scrollbar-highlight-color: #fa8072;
    07 scrollbar-3dlight-color: #ff0000;
    07 scrollbar-darkshadow-color: #afeeee;
    08 scrollbar-track-color: #ffb6c1;
    09 scrollbar-arrow-color: #e6e6fa;

3. 静态色彩—表格

下图是由多种颜色构成的表格，在网页中这样的表格也是比较常用的。它属于静态色彩的“行列”。表格中采用了六种色彩，每种颜色分别作为表格的一行。通过多种色彩的应用，使表格给用户的视觉感更加丰富。

3.1.2 动态色彩

什么是动态色彩呢？它不是动画中在运动的物体的色彩。动态色彩是指网页中插图、图像、广告、动画等这些区域中给人感觉好像在动的色彩。例如，新浪网首页中的“世界映像 财经视角”版块实现的就是动态色彩的搭配。如下图所示，总体感觉颜色的种类比较多，下面具体介绍动态色彩。

上一小节，对静态色彩的概念进行了详细介绍。在了解了这一部分关于动态色彩的概念之后，可以使得我们对于静态色彩和动态色彩的意义有一个了解。静态色彩的意义在于，保持静态色彩的“静”的状态下，使得色彩能够带给浏览者那种安心的感觉。动态色彩的意义则在于，使得相应色彩在不断变化的同时，能够展现色彩的斑斓，进而传递给用户色彩丰富的感觉。这样，通过页面中动、静结合的色彩应用，从而使得页面更加丰富多彩。

1. 动态色彩—随着时间变化

图片的色彩构成，一般都有着丰富多彩的颜色。鉴于其颜色种类多的特点，所以在进行色彩处理手法上会采用不让多张图片同时出现在页面中。通常采用Script技术，将图片在区域内进行自动播放，来达到这一颜色处理的需要。

例如，下图所示是网页通过JavaScript实现的自动播放图片的页面效果。页面中使用了图片，因为图片的颜色种类一般都比较多，所以在背景色的选择上多以白色或者黑色等与图片中颜色不起冲突的色彩为主。

下图所示是页面播放过程中出现的另一张图片，进一步观察颜色的选择，上图与下图的网页图片中都有占大比例的黄色。所以，在图片下方的滚动条中数字下方的线条采用了亮度不同的黄色，这是动态色彩的搭配。

2. 动态色彩—响应交互动作

动态色彩的另一种实现通过响应交互动作，许多网页的按钮会随着交互操作的状态显示不同的颜色。通过这样的方式，让色彩有了类似于动态的视觉效果，请看下面的具体应用。

如下图（上）所示，是微软网站的导航，通过移动鼠标，导航按钮会变成蓝色。如下图（下）所示的蓝色，表示该功能“被响应”的状态。这样的色彩应用，达到了缩短视觉搜索时间的效果，这是使用动态色彩的作用。

观察网页的整体色彩搭配，有这样一个现象，在静态色彩中包含有动态色彩，例如边框中包含有播放图片的区域。或者是动态色彩中包含有静态色彩，例如播放图片的区域包含有页面背景。所谓动静交映，这样的处理才比较合理，效果才会显得比较好。

3.2 手法二：重点突出—网页中主题色彩的运用

网页中色彩的处理，根据内容在网站中的重要程度，会将重点内容通过色彩的运用达到视觉上突出显示的目的。例如，将一个区域内的文本内容通过不同于文本区域内其他文本颜色的方式，来表示该文本内容比其他文本内容重要。网页中主题色彩的运用，有着一定的处理办法，下面进行具体介绍。

1. 采用醒目颜色的办法

色彩是烘托主题最有效的要素，网页的色彩应用没有固定的模式，色彩的选择搭配要根据网页的内容和主题以及大众的欣赏习惯来确定。下图所示画面中，红色的圆形区域内加入了一个绿色圆形。这样的颜色搭配，让绿色圆形变得醒目。

下图所示是腾讯网中采用醒目颜色的具体操作手法，在文本字体都是黑色的区域内，将重要推荐的微博、QQ电脑管家的文本以红色进行了醒目的标示。这样做，可以起到推广微博和QQ电脑管家这两种腾讯产品的作用。

2. 采用形状不同的办法

如果能够在颜色不同的基础上，辅以形状变化来突出处理，也可以达到不错的效果。如下图所示，在黑色圆圈中加入一个黑色三角形，同样可以突出重点。

将该手法应用于网站，以下图所示麦包包网站的导航为例，其中的按钮形状有着不同区别，从而将内容推荐给用户，吸引他们浏览，实现便捷的有选择性的查看。

3. 采用加背景颜色的办法

突出主题的办法之一，就是添加背景颜色。例如，下图所示为在整体内容中选择其中一个实施添加背景颜色的操作。这样在整个页面中，添加了背景颜色的该部分内容就会在第一时间吸引浏览者的视线，从而达到突出该内容的目的。

将其应用于网页，如下图所示，在“今日”和“音乐/演出”的文本区域内添加背景颜色，是比较常用的。

4. 采用不对齐的办法

如下图所示，页面中的线段都左右对齐，在中间的一条是不对齐的，这是一种突出主题内容的办法。

将其应用于网站的导航，可以有如下图所示的运用。将要突出显示的内容高于其他内容，这样可以起到让用户更快看到该内容的作用。

5. 采用填充的办法

前面已经介绍了加背景色的手法，除此之外通过填充颜色的办法，将某区域内的形状给填满，达到的效果可以丰富主题色彩运用。例如下图所示，将圆填满了。

在进行网页的具体处理时，如下图所示，是采用了该手法的“热门分类”设计效果。

6. 采用加阴影的办法

在已有形状的基础上，通过在其适当位置添加阴影效果的办法，可以突出该形式，使得它在相同的形状中被凸显出来。例如下图所示，左侧中间的圆加了阴影效果，使得它与其他圆更具视觉吸引力。

将该手法应用于网页，下图所示的“微博报道”按钮使用的就是给该按钮添加阴影的处理办法。

网页的色彩选择是确立一种色彩作为主色调，通过调整明度变化，达到不同的效果。这是颜色处理手法上的原则，网页中主题色彩运用就是围绕该处理手法展开，最终实现网页色彩效果的提升。色彩可以有各种表现手法，能够达到实用性和审美性统一就是好的色彩处理。

3.3 手法三：一枝独秀—单一页面的色彩布局

网站由多个页面构成，不同的页面使用于同一网站时需要考虑该页面在整个网站中色彩以及内容的统一性。另外，单一页面的色彩，需要将其作为单个整体进行布局设计。这样，才能使得每个页面的色彩效果搭配更好。在单面的色彩布局上，需要把握色彩平衡、色彩面积对比、色彩情感与插图情感一致这几方面的内容。这一节介绍单一页面的色彩布局。

3.3.1 色彩平衡

设计网页时如何达到色彩平衡?色彩的平衡与否，将直接影响色彩在页面的布局效果，因此掌握达到色彩平衡的处理手法比较重要。

1. 主要色彩的选择

主要色彩的选择，可以采用以下几种手法。

⑴ 考虑用一种色彩：通过调整该色彩的透明度或者饱和度，产生新的色彩，从而实现色彩在页面的布局；并且能够达到色彩的统一，使得页面有层次感。

⑵ 考虑用两种颜色 ：在选定一种颜色之后，再选择该种颜色的对比色，这样也可以达到色彩的平衡。

⑶ 考虑用一个色系的颜色：例如，将淡黄、淡蓝、淡绿等同一色系的颜色在同一页面搭配使用。又或者将土黄、土灰、土蓝等同一色系的颜色在同一页面搭配使用。

以下图（上）所示立顿网站的首页为例，网站的整体框架有红线划分的三部分。这三部分的背影颜色比较接近，检测其具体颜色值，从上到下分别如下图（下）所示。

2. 搭配色彩的选择

选择了主要色彩之后，在与之搭配的图片、文字等内容的颜色选择上需要根据已经选定的主要色彩来进行搭配，以保持色彩的平衡。主要有如下两种手法。

⑴ 选择主要颜色为较深的色彩类别，在图片、文字等内容的色彩选择上使用较浅的色彩。

⑵ 选择主要颜色为较浅的色彩类别，在图片、文字等内容的色彩选择上使用较深的色彩。

上述两点内容，通过一个实例来进一步了解。例如，下图所示的页面效果，因为背景颜色属于较浅的颜色，所以在文字与图形（树）的颜色选择上采用了深色的。这样使得页面的色彩搭配比较协调统一，从而保持色彩平衡。

3.3.2 色彩面积对比

因为颜色的不同，填充同样的区域需要考虑面积对比，从而对两个或更多色块的填充区域形成视觉上大与小、多与少的对比。例如下图（左）和下图（右）所示，是同样大小的正方体，因为填充了不同区域，视觉上的大与小、多与少的对比就比较明显。

在了解网页中色彩面积对比的应用前，先认识一个概念，即决定了色彩力量的明度和面积。歌德给出了明度变化中黄、橙、红、紫、蓝、绿这几种颜色的具体值。在将光亮度转变成为和谐色域时，光亮度的比例就需要倒转，也就是下表中“面积”的对应值。

因为色彩面积对比这一情况的存在，实施配色过程中，针对页面中不同色彩的搭配需要根据具体明度与面积，对其在整个页面中的实际大小进行合理安排。下面给出几种颜色搭配方案。

方案一：

例如，下图所示的黄色与蓝色的搭配效果可用于网页中页面背景与内容背景之间的布局。

方案二：

例如，下图所示的页面颜色将黄色与绿色进行等比例分配，可用于网站的背景配色。

方案三：

例如，下图所示的三种颜色搭配，可用于导航栏与栏目划分这些区域的颜色搭配，以及网站中其他可以使用对比效果颜色的地方。

3.3.3 色彩情感与插图情感一致

如果将下图的四个绿色正方形分别代表不同区域，其中每个区域中包含的白色正方形代表图片的大小，就能够了解一些色彩情感与插图情感的内容。例如，页面与图之间，图不能太大（例如左上角），但如果太小了（例如右下角）就不能够容纳普通图片，右下角的白色区域，在网页中一般是按钮的区域。

继续看下一张图，黄色作为区域，蓝色作为图片，每一个蓝色面积不大。如果整个页面放了数量如此多的图片，那么除非网站只会放图片，不放别的内容了；否则，这样的网站设计就不太合理了。

由此可见，色彩情感与插图情感一致是多么的重要！下面，具体来了解实际的网页中是如何做到这一点的。以“金吉列”网站为例，暂且不管网站的内容，下面具体介绍处理手法。

1. 选择对比颜色的图片

下图（上）是网站的Banner，其中涉及的图片采用了与网站导航等主题颜色红色有对比效果的绿色。达到色彩情感与插图情感一致的处理手法，即采用与网页基本色有对比效果的颜色作为图片主要颜色。具体采用的颜色如下图（下）所示。

2. 选择同色系的图片

选择同色系的图片，可达到情感的一致。其效果如下图（左）所示。该页面选择与网站主要颜色红色相近的颜色作为图片的主要配色，具体如下图（右）所示。

3. 选择相近颜色的图片

与网站基本色“红色”相近的颜色，可以有多种选择。如下图（左）所示，是该网站导航下方的，用于引导用户了解专题以及报名的链接。采用的手法是，选择与网站基本色相近的图片，添加相近颜色的按钮。具体采用的颜色如下图（右）所示。

3.4 手法四：层峦叠嶂—多栏目页面的色彩布局

现在网站需要发布的信息量越来越多，这样无形中增加了页面内容放置的压力。为了让内容能够进行有层次的编排，网站中多采用分栏目的形式，并将内容分门别类地归入相应的栏目中。这时，页面中就会有很多栏目。本节将介绍多栏目页面的色彩布局。

以下图所示的淘宝网首页为例，有想从网站中购买东西的用户，也有在网站中开设网店的卖家，网站的栏目划分比较多。分析该网站的色彩布局，主要有如下几点。

1. 导航的色彩布局

下面通过导航的色彩布局，来了解多栏目页面中的色彩布局。以淘宝网为例，下面分析导航的色彩应用。

导航1：如下图所示。

观察颜色使用，分别有黄色导航文字、橙色导航文字填充、白色导航文字、白色导航条背景，具体的颜色值如下图所示。

导航2：如下图（左）所示。

观察颜色使用，分别有黄色边框、奶黄色背景、分栏线、黑色文字、黄色按钮、绿色与白色搭配的提醒按钮，具体选择的颜色如下图（右）所示。

2. 产品类别的色彩布局

以下图的产品类别色彩布局为例，下面对其选择的颜色进行具体分析。

⑴ 橙色交互操作边框：颜色值为#FF4400。

⑵ 灰色边框：颜色值为#D8D8D8。

⑶ 产品类别划分线：实线，颜色值为#D8D8D8。

⑷ 产品划分线：虚线，颜色值为#C2C2C2。

⑸ 文字颜色：橙色、黑色、蓝色，颜色值分别为#FF5500、#444444、#076FA2。

⑹ 产品链接标签：应用于产品图片下方的文字，颜色值为#FF4400。

总结上述颜色的应用，⑴ ~⑹ 的具体颜色及其颜色值如下图所示。

通过对淘宝网上述颜色搭配的分析，其有着“层峦叠嶂”的效果，是合理的。由此，在帮助提升多栏目页面色彩布局技巧的同时，也可以发现多栏目页面的色彩布局，不同栏目采用不同颜色搭配的手法。

3.5 手法五：色以类聚—网站同色系规划

很多时候，在色彩上会选择同色系的。对于网站也不例外，规划同色系网站是网页色彩搭配的手法之一。在这一节中，通过“可读性”的色彩设计与色彩计划，来介绍网站同色系规划的相关内容。

3.5.1 “可读性”的色彩设计

如何提高网站色彩的可读性呢？下面，针对不同的设计模块进行具体分析。例如，网页中的版式、对齐、文字颜色等效果的好坏，都会不同程度地影响“可读性”。具体如何实施，以下内容会有介绍。

1. 受排版的影响

通过字距、亮度、采用动态效果、是否截线等调整排版手法，就会达到不同的效果。以字体大小的排版为例，网页中字体有着12、14⋯48、60不同大小，选择不同大小的字体，就会在一定程度上影响页面的效果。如下图所示，不同大小的字体在同一页面中有着不同的视觉效果。

2. 受页面空白处的影响

假如网站的页面不留一点空隙，密密麻麻地挤满内容，会影响页面内容的可读性。例如不在网页的左右或者上下留空白处，就会使得用户在浏览内容时感到困难。其实，留白处不一定需要占很大面积，只是为了让用户在浏览时明白这些是不同区域内的。

试想，在不确定内容是不是自己需要的资源之前，用户怎么可能会仔细、认真地浏览所有内容呢？通过这样的方式，可以让用户达到快速浏览，查找到自己所需资源的目的。例如下图所示页面，分别在留白处添加了背景色，这样使得页面的色彩搭配更加具备“可读性”。

3. 受对齐线和格影响

网页中页面内容由文章、图片以及其他网页元素如标签、按钮等组成。如果将这些内容没有秩序地进行放置，就会影响可读性。通过对齐线和格，如下图所示，可以让页面的组成内容变得非常有序，从而吸引用户浏览。

4. 受色影对比效果的影响

如下图所示，确保元素间的对比、背景和文字的对比，可增强文本的可阅读性。试想，白色文字、黑色背景，阅读起来肯定比其右侧的灰色文字要容易。反之，白色背景，黑色文字，以及灰色文字也是相同的。

在页面基本颜色确定之后，通过对比度选择文本颜色时，就比较合理。通过不同颜色的对比，使页面的可读性得以优化。

以搜狐网为例，如下图所示，网站在文本颜色的选择上，采用的就是这一手法。当页面选择了白色为背景色，通过对比色蓝色作为文本颜色，使页面的可读性变得更好。

5. 受内容简洁、段落层次的影响

下图是网站中文章内容的截图，左右两侧分别是不同的文章。其中，左侧文章只有文章标题和正文内容，并且正文内容的段落层次不明显。再观察右侧的文章，除了文章标题和正文内容这样相同的编排方式，正文内容的段落层次非常明显，这样使得文章要点清晰，从而看起来更简洁。

3.5.2 色彩计划

通过网站同色系规划，实现将同色系的色彩应用于一个网站甚至于一个页面中，这是色彩处理的常用手法。设计同色系网站，在色彩的选择搭配上是有考究的。下面通过应用于网页的实例色彩搭配，来了解同色系网站的色彩计划。

例如，蓝色给人以安定的感觉，IT企业的很多网站，又或者其他行业的网站，很多都采用蓝色作为基本色。这里以不同的颜色选择为对象，介绍同色系网站具体的色彩计划。

方案一：

如下图所示，是网站的首页，页面以蓝色为基本颜色，通过其他颜色的搭配，实现网站的色彩选择。页面的背景选择蓝色，LOGO使用白色，导航选择绿色背景黑色文字，栏目采用白色文字蓝色背景，其他颜色作为辅助。

整个页面中，主要的色彩使用如下图所示。除了文本颜色上的不同，出于“可读性”的考虑，其他颜色都与蓝色类似。

方案二：

下图（上）所示是以浅灰为主要色彩，与其在同一色系的其他颜色为辅，实现网页的配色。观察页面的色彩，主要采用了黑色、浅蓝、灰色等辅助色彩。关于该页面的色彩使用，如下图（下）所示，整个页面感觉比较素净。同时，因为颜色选择了相互比较接近的同一色系，所以页面的协调、统一效果比较好。

方案三：

下图所示是一深蓝色系搭配的网页。下面具体分析该页面的颜色使用，从而帮助了解该页面的色彩计划，及其颜色搭配的处理手法。

上图页面中，主要采用了蓝色作为页面色彩，通过深蓝、蓝色、淡蓝这几种蓝色的相互搭配，最终使得页面的内容在色彩上达到了和谐统一。具体颜色使用如下图所示。

3.6 手法六：我行我素—色彩设计与网站风格

在进行网页设计时，是不是想过采用不同于他人的网页框架，以及不同于他人的网页配色呢？因为与众不同，所以更受关注。这是色彩搭配以及网页设计能够吸引用户的好手法。假如自己的网站与别的网站不同，一定能更受关注。这一部分，介绍独特的网站风格及色彩设计。

1. 不同的网站风格

下图所示是紫色调的网站页面，该页面是网站的首页，有不同语言类别的导航供用户选择，从而提升用户的体验，这是其他网站也经常使用的手法。观察该网站有以下几点比较少见的手法。

⑴ 在颜色搭配上：网站采用紫色系，混搭了多种颜色。既有与紫色相同色系的淡紫，又有相近的黑色，以及相反的白色等。同时，使用的图案中，有红色、绿色这样有着强烈对比效果的颜色作为点缀。这样的颜色搭配，不同于大多数网站的配色处理。

⑵ 在功能设置上：整个页面除了几个文字用于引导不同语言的用户进入，没有其他的导航文字。这是因为导航内容被隐藏在了图形中，通过点击图形会有相应的效果。这样的功能处理，可以避免因为颜色过多，从而造成无法将文本内容突出的弊端。这样的处理手法，也是有别于一般网站刚进入就能看到导航的功能设置。

2. 独特的色彩设计

案例网站颜色搭配与颜色种类上有着许多与众不同之处。正是因为这样的手法，才使得网站的色彩设计更加独特。看一下案例网站的简体中文页面，如下图所示，就可以了解色彩设计的内容，有着不同的色彩处理。

除了已经在首页中介绍的功能，在简体中文页面中继续使用之外，页面的色彩种类更多。分析网页所使用的色彩，主要有如下图（左）所示色彩类别。

网页的特别之处，在于页面中使用了很多色彩，尤其图像中色彩种类相较于一般网页要多许多。具体使用的颜色如下图（右）所示。

高手私房菜

以上几节内容，将网站色彩处理的手法进行了阐述。针对上述内容，下面将要分享的是网站色彩处理的技巧。

技巧：网页配色——透明度

在进行网页配色时，通过选定一种颜色，变动颜色的值，获得相近、相反、相似的新色彩，这是进行网页配色的一种手法。下面针对这种处理手法，进一步介绍“透明度（填充）”的处理。

选择一种颜色，这里以蓝色为基本色，可选择的合适色域以“最佳色域”作为参考。接着通过设置“叠加”、“柔光”的效果，从而实现色彩的“饱和度”、“明度”调整。具体如下图所示。

将上述操作综合应用，可实现页面的布局，以及网游页面中超炫颜色的搭配。下图所示是分别以蓝色、绿色、橙色作为基本色，应用透明度（填充）手法，实现的页面版式效果。这样的处理可使得页面颜色深浅有所区别，从而突出页面的层次、结构。