网页布局颜色搭配布局总结

一、色彩在网页中的作用

(一)主题营造风格

色彩是具有色相，明度，和纯度的属性不同的色相可以个人不同的心里感受，营造不同的风格氛围。色彩搭配能准确为产品定位并给人视觉美感，能得到更高的精神享受。例如脉动的广告采用的是以蓝色为主的色调，营造出清凉、舒爽的风格;而可口可乐公司则是以红色为主色调，营造出热情、奔放的风格特点。

(二)划分布局

优秀的网页往往具有丰富，详细的信息内容。条理清晰的内容版块划分有利于受众轻松阅读站内信息。利用色彩进行页面划分。配合合理的色彩搭配，表现独特的视觉效，也使网页具有良好的阅读性，利于便捷传递产品信息。

(三)视觉引导

视觉传达中的信息层次往往通过恰当的对不划分。网页设计中我们经常用到的就是利用不同的色彩就结合不同形式的搭配，从而对需要推广的信息进行视觉强化，容易使浏览者印象深刻，提高网页的浏览率，只有这样，在展示网页的时候，才能够成功的吸引更多的浏览者。

二、色彩在网页的搭配原则

(一)色彩调和

为了达到合理传达网页信息，就需要通过色彩的三要素进行合理配置从而达到统一，谐调的画面效果。色彩调和是相对而言的，对比与谐调是其两个基本属性，可以通过同种色调调和，类似色调和，对比色调和达成色彩色调和的目的。
1.同种色调和

以图2-1为例，网站统一色调，运用适度的明度和纯度差异形成对比。图中我们可以看到，我们把色相的明度和纯度稍微的加以改变，就会在视觉上产生非常微妙的韵律美，给人一种循序渐进的感觉，弥补了同一种色相始终如一的单调感，为了使整个界面不过于单调，在其中加入少量的白色字体进行点缀，起到画龙点睛的作用。

图2-1

2.类似色调和

在色环中，靠的最近的颜色称为类似色，图2-2就是由一组由黄色、橙色、橙黄、红色组的网站主页，颜色的色相靠的越近，就越容易调和，而成果也就越成功。色彩也就更加丰富，更加富于变化。

图2-2

3.对比色调和

对比色是色相最强的对比，可以通过四种方式到达调和的目的：一是运用无色彩进行分割;二是提高或者降低对比色的色彩纯度;三是采用调整双方色彩面积方法，使一色占主导地位，另一色占次要位置;最后就是在对比色中加入某一类颜色达到调和的效果。图2-3中的个人网页就采用了对比色通过上半部分高明度色彩对比下半部，仔细看的话就会看出，实际上网页的下半部分是紫色而不是黑色。

图2-3

(二)行业匹配

每一个网站都有不痛的行业特征市场定位必然需要不同的风格特征，色彩是烘托主题，渲染气氛的效果。选择合理的色彩搭配，彰显行业特征，从而到达准确传递信息效果。

蓝绿色搭配的企业一般都是制药、服饰、金融、交通的行业。12306的官方主页，以蓝色为基准颜色，配以绿色为点缀颜色，给人一种清新的视觉感受，上网买票本来就是一件需要耐心的事情，那么网站的颜色配比就起到了很好的冷静作用。

红黄色给人温暖，喜庆的性格，充满活力。应用于运动网站，活动网站，食物等。如图所示的网站是创业商机网的首页，作为饮食类网站，采用的是红黄色的颜色搭配，充分调动消费者对色彩寓意的联想。

黄紫色搭配给人传递高贵，典雅的风格。一般用于化妆品的网站和宣传，黄色作为暖色系给人轻快、充满活力的印象，而紫色给人一种高贵、优雅的视觉感受，两者的有机结合，形成了鲜明的对比，高贵而不失活力

(三)情感表达

色相是传达情感的首要因素通过正确色相运用可以清晰抒发网页的情感。图2-7中的色彩采用了渐变的方式，最左侧是紫色，最右侧是蓝色，越居中色彩越柔和，这个网站的着陆页采用色彩与背景图互相叠加的方法，既没有紫色的艳丽、高贵，也没有海蓝色的宁静、忧郁，这个网页就很好的做到了色调的控制，总体上给人一种清新、舒适的视觉感受。

三、大数据展示案例

以下就是我们百度到得两个比较优秀得案例，颜色搭配融洽，布局紧凑而不乱，关键点突出一目了然。

四、实现大数据展示

1.将标题分为几组，每一组得颜色做设置，最好就是以字体大小分组，相同字体得一个组。在颜色方面，根据背景色做设置，我们选择蓝色作为标题色，因为白色有点刺眼，灰色有点不明显。
2.内容块，得颜色尽量统一，我们选择白色带点灰色，不太刺眼。另外有些需要突出得内容选择字体加粗，颜色上面区分开。
3.有状态变化得相关内容，根据状态设置不同颜色。比如我们就根据开机、关机、异常设置了绿色、灰色、红色三种状态。
4.字体大小根据屏幕设置，尽量大一些。