浅谈色彩在网页中的视觉设计

华柔远+夏一霖

在视觉设计中的色彩搭配跟网页设计中的色彩搭配会有很多的相似之处。因此我开始寻找把视觉传达设计当中的色彩技巧运用到网页设计的方法。经调查研究，此过程可分为三个阶段。

第一阶段：网页创意风格定位阶段

一：网页设计为何需要创意风格定位

设计网页前要注意，设计一个网站前首先需要了解是为什么东西设计网页。每个网站都会有自己的风格。风格主要按该网页展示内容设定，因此需要了解网站展示的内容来确定风格。

二：网页设计如何来确定创意风格

网页最常见的大致有办公行政、服务、各式企业、纯商业网站或产品推广网站四大类。办公行政展现的是严谨、大方、内容为本；服务型的是以浪漫、温馨为主；各类企业一般都是采取清新、简洁、大方（跟办公行政类有点像，但形式上没有那么严谨，跟公司发展路线有关）；纯商业网站或产品推广网站则是抒情活泼的风格，画面上或许会大量采用图画。

第二阶段：网页主色调选择阶段

一：主色调含义跟作用

（一）：主色调作用

一个网页必有其主色调，确认风格后，就可挑主色调，一般一个网站只有一个主色调，这样好控制颜色搭配，若主色调多，页面容易混乱。

为什么设计师一开始设计就要确定主色调呢？如何理解主色调的作用？从视觉设计角度打个比方，一个企业往往会设计一个logo代表它，logo设计越出色、越适合企业形象，就证明它的代表性很强。例，看到铜钱，也许会想到工商银行logo也是铜钱的样子。它会不知不觉的打广告。经调查研究，主色调可分为两种形式，一是明确纯色的主色，二是有明确颜色变化方向的色调。

（二）：有明确纯色的主色含义

网页中有明确纯色的主色一般代表性强，视觉性强。例如淘宝，它的主色便是橙色了。橙色就成为淘宝的代表色了，看到淘宝我们便能想到橙色，反之也是如此。这便是视觉设计的效果了。

（三）：有明确颜色变化方向色调的主色含义

这种主色调不一定有第一种那么明确，反而更容易产生朦胧美，它也许是一张有明确颜色主色调的背景图片，也许是渐变色，或是明度变换后运用在网页各处，在整体上形成一种主色调。两者都能统一网页的风格，烘托主题。

二：主色选择步骤

（一）：主色选择步骤概论

选择主色有多种方法，可以从不同的角度选择主色。或是从色彩基本构成要素（色相、明度、纯度）着手。或是从色调着手。

经调查研究，最上手的方法是先从色调入手，选中色调后，再考虑色阶、明度。此法挑主色的范围可以简单的一层层缩小，不会因为颜色范围太大不知所措。纯度又指饱和度，简单理解为饱和度低，颜色暗沉；饱和度高，颜色鲜艳。一般纯商业网站或产品推广网站会使用较鲜艳的颜色吸引顾客。

（一）：色调选择

色调有冷暖之分，冷色调多为安静、清新、简洁；暖色调多为活泼、视觉冲击性强。例，环保型大多为绿色系，企业型大多为蓝、绿色，许多会选择跟logo搭配颜色。在确认启用主色调之后，开始挑色阶、明度。

（二）：色阶选择

色阶表示图像亮度强弱的指数标准，即颜色深浅。色彩千变万化，即使选择同一色调，其颜色的深浅所体现的视觉效果可能有截然相反的结果。同一色调，颜色深，一般会有沉稳、严肃的效果；颜色浅，一般会有一种鲜活的效果。

（三）：明度选择

色彩的明度指的是色彩的明暗程度。因明度分为不同色系之间跟同一色系之间，为了不搞混，就从同一色系中的色彩明度选择。例，暖色调中红色系，粉红色稍亮，紫红色稍暗；冷色调中天蓝稍亮，深蓝稍暗。看起来纯度明度相似，但明度跟纯度却不一定成正比。

第三阶段：网页配色选择阶段

一：配色的含义与作用

确认主色后，开始挑配色。一个网页不可能只有一种颜色，网页中有文字、logo、小图标、导航栏、背景等方面需要配色。在避免配色抢夺视觉效果下，适当运用配色，保持视觉的平衡、色调统一，主色占大部分，配色占小部分。为了让网页更美观，我们可以把视觉设计中学到的配色技巧运用到网页设计中。

二：配色选择方法

（一）：配色选择方法

配色可以通过色相配色、明度配色、纯度配色、强调冷暖色倾向配色、冷暖协调的配色。不同配色方法所呈现的视觉效果也不同。

（二）：色相配色

色相配色中单暖色调的配色，利用红、橙、黄在画面中占优势地位，会给人温暖感，有积极效果；在色相配色中单冷色调的配色，利用青、蓝、紫的冷色在画面中占优势地位，会给人寒冷感，有镇静、安神的效果。

（三）：明度配色

色彩的明度能够体现色彩的轻重感，明度配色能很好地表现网页空间感。例，黑、白、灰的配色。明度配色也可以运用到导航栏上。选择一种与主色适配的颜色作为导航栏背景色。因导航栏分多个模块，每个模块都可点击进入下个页面。在点击的过程中，为了突出点击的模块，增添动感跟空间感，一般会在鼠标放在模块上面的同时更换同一色系的明度。因需要保持网页整体色调的统一，颜色不能随意跟换，被更换的颜色大多与导航栏的颜色保持统一，在明度上进行变换。

（四）：纯度配色

纯度配色的作用是能简单明了的看出网页主题、重点。因为纯度的对比会形成视觉焦点。如网页产品展示图片，产品是高纯度比较鲜艳的颜色，背景一般使用低纯度颜色。那么在人体视觉上很容易能忽略背景，更能突出产品。

（五）：强调冷暖色倾向的配色

如果一个网页中把冷暖色调放在一起，冷暖对比则会比类似色的对比视觉效果更强烈，也会让画面更加丰富。当然，要注意冷暖色在网页中的主次地位。小面积使用鲜艳的冷暖色对比色相，即便整体颜色偏素雅，也可以给人生机勃勃的感觉。例如小图标的颜色运用，可参照此法。导航栏中，为了使画面更加活泼，也可运用此法，鼠标放到模块上，模块的背景颜色与原来的颜色可进行冷暖对比。

（六）：冷暖协调的配色

冷暖协调的配色会给人较强的韵律感，稳定的感觉，此法虽然没有以上三种方法的视觉冲击力强，但它的平衡感最稳定，因此也是让人看着最舒服的配色。黑色跟高纯度色彩放一起，在视觉上让高纯度的色彩显得更亮丽。因此在网页设计上文字大多用黑色衬托其他颜色的亮丽。白色跟高纯度色彩同一画面时，可以在视觉上提高纯色的明度，且会有透气、舒畅的感觉，不会很沉闷。导航栏上，若背景色较深，黑色的文字无法很好的显示，就可以运用白色文字，简单又透气。

在研究这个课题的过程中，主要通过了网页的创意风格定位阶段、网页的主色选择阶段、网页的配色选择阶段这三个步骤，把视觉传达中的色彩技巧运用在网页设计中，解释了如何进行网页创意风格定位，解释了为何要选择网页的主色以及如何选择主色，解释了如何在网页中进行配色。

参考文献：

[1]曹军，王诗彦，刘志农，陈德润，色彩形态构成[M]，中国民族摄影艺术出版社。

[2]曹军，王诗彦，刘志农，陈德润，色彩形态构成[M]，中国民族摄影艺术出版社。

[3]张晓景，设计师专业色谱与配色设计[M]，电子工业出版社，第1版（2011年10月1日）

[4]宋玉洁，设计密码：综合配色完全攻略[M]，清华大学出版社，2012年

[5]张晓景，设计师专业色谱与配色设计[M]，电子工业出版社，第1版（2011年10月1日）