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

《浅谈色彩在网页中的视觉设计》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、浅谈色彩在网页中的视觉设计　　在视觉设计中的色彩搭配跟网页设计中的色彩搭配会有很多的相似之处。因此我开始寻找把视觉传达设计当中的色彩技巧运用到网页设计的方法。经调查研究，此过程可分为三个阶段。　　第一阶段：网页创意风格定位阶段　　一：网页设计为何需要创意风格定位　　设计网页前要注意，设计一个网站前首先需要了解是为什么东西设计网页。每个网站都会有自己的风格。风格主要按该网页展示内容设定，因此需要了解网站展示的内容来确定风格。　　二：网页设计如何来确定创意风格　　网页最常见的大致有办公行政、服务、各式企业、纯商业网站或产品推广网站四大类。办公行政展现的是严谨

2、、大方、内容为本；服务型的是以浪漫、温馨为主；各类企业一般都是采取清新、简洁、大方（跟办公行政类有点像，但形式上没有那么严谨，跟公司发展路线有关）；纯商业网站或产品推广网站则是抒情活泼的风格，画面上或许会大量采用图画。　　第二阶段：网页主色调选择阶段　　一：主色调含义跟作用　　（一）：主色调作用　　一个网页必有其主色调，确认风格后，就可挑主色调，一般一个网站只有一个主色调，这样好控制颜色搭配，若主色调多，页面容易混乱。6　　为什么设计师一开始设计就要确定主色调呢？如何理解主色调的作用？从视觉设计角度打个比方，一个企业往往会设计一个logo代表它，logo

3、设计越出色、越适合企业形象，就证明它的代表性很强。例，看到铜钱，也许会想到工商银行logo也是铜钱的样子。它会不知不觉的打广告。经调查研究，主色调可分为两种形式，一是明确纯色的主色，二是有明确颜色变化方向的色调。　　（二）：有明确纯色的主色含义　　网页中有明确纯色的主色一般代表性强，视觉性强。例如淘宝，它的主色便是橙色了。橙色就成为淘宝的代表色了，看到淘宝我们便能想到橙色，反之也是如此。这便是视觉设计的效果了。　　（三）：有明确颜色变化方向色调的主色含义　　这种主色调不一定有第一种那么明确，反而更容易产生朦胧美，它也许是一张有明确颜色主色调的背景图片，也

4、许是渐变色，或是明度变换后运用在网页各处，在整体上形成一种主色调。两者都能统一网页的风格，烘托主题。　　二：主色选择步骤　　（一）：主色选择步骤概论　　选择主色有多种方法，可以从不同的角度选择主色。或是从色彩基本构成要素（色相、明度、纯度）着手。或是从色调着手。6　　经调查研究，最上手的方法是先从色调入手，选中色调后，再考虑色阶、明度。此法挑主色的范围可以简单的一层层缩小，不会因为颜色范围太大不知所措。纯度又指饱和度，简单理解为饱和度低，颜色暗沉；饱和度高，颜色鲜艳。一般纯商业网站或产品推广网站会使用较鲜艳的颜色吸引顾客。　　（一）：色调选择　　色调有冷

5、暖之分，冷色调多为安静、清新、简洁；暖色调多为活泼、视觉冲击性强。例，环保型大多为绿色系，企业型大多为蓝、绿色，许多会选择跟logo搭配颜色。在确认启用主色调之后，开始挑色阶、明度。　　（二）：色阶选择　　色阶表示图像亮度强弱的指数标准，即颜色深浅。色彩千变万化，即使选择同一色调，其颜色的深浅所体现的视觉效果可能有截然相反的结果。同一色调，颜色深，一般会有沉稳、严肃的效果；颜色浅，一般会有一种鲜活的效果。　　（三）：明度选择　　色彩的明度指的是色彩的明暗程度。因明度分为不同色系之间跟同一色系之间，为了不搞混，就从同一色系中的色彩明度选择。例，暖色调中红色

6、系，粉红色稍亮，紫红色稍暗；冷色调中天蓝稍亮，深蓝稍暗。看起来纯度明度相似，但明度跟纯度却不一定成正比。　　第三阶段：网页配色选择阶段　　一：配色的含义与作用6　　确认主色后，开始挑配色。一个网页不可能只有一种颜色，网页中有文字、logo、小图标、导航栏、背景等方面需要配色。在避免配色抢夺视觉效果下，适当运用配色，保持视觉的平衡、色调统一，主色占大部分，配色占小部分。为了让网页更美观，我们可以把视觉设计中学到的配色技巧运用到网页设计中。　　二：配色选择方法　　（一）：配色选择方法　　配色可以通过色相配色、明度配色、纯度配色、强调冷暖色倾向配色、冷暖协调的

7、配色。不同配色方法所呈现的视觉效果也不同。　　（二）：色相配色　　色相配色中单暖色调的配色，利用红、橙、黄在画面中占优势地位，会给人温暖感，有积极效果；在色相配色中单冷色调的配色，利用青、蓝、紫的冷色在画面中占优势地位，会给人寒冷感，有镇静、安神的效果。　　（三）：明度配色　　色彩的明度能够体现色彩的轻重感，明度配色能很好地表现网页空间感。例，黑、白、灰的配色。明度配色也可以运用到导航栏上。选择一种与主色适配的颜色作为导航栏背景色。因导航栏分多个模块，每个模块都可点击进入下个页面。在点击的过程中，为了突出点击的模块，增添动感跟空间感，一般会在鼠标放在模块

8、上面的同时更换同一色系的明度。因需要保持网页整体色调的统一，颜色不能随意跟换，被