中文版Dreamweaver CS6/Flash CS6/Photoshop CS6 网页设计实用教程
上QQ阅读APP看书,第一时间看更新

1.4 网页色彩搭配的介绍

在网页中合理地应用色彩是非常关键的,不同的色彩搭配会产生不同的效果,并能够影响浏览者的情绪。

1.4.1 网页配色基础

色彩在人类的生活中都是有丰富的感情和含义的,常见颜色的代表意义如下。

● 红色使人联想到玫瑰、喜庆及兴奋。

● 白色使人联想到纯洁、干净和简洁。

● 紫色象征着女性化、高雅和浪漫。

● 蓝色象征着高科技、稳重和理智。

● 橙色代表了欢快、甜美和收获。

● 绿色代表了充满青春的活力、舒适和希望等。

当然,在特定的场合下,同种色彩也可以代表不同的含义。在网页中更要合理使用色彩,一个网站不可能单一地运用一种颜色,这样容易让浏览者感觉单调、乏味。但是也不可能将所有的颜色都运用到网站中,会让浏览者感觉轻浮、花哨。一个网站必须有一种或两种主题色,一个页面尽量不要超过4种色彩,用太多的色彩会让浏览者感到没有方向,没有侧重。当主题色确定好以后,考虑其他配色时,一定要考虑其他配色与主题色的关系,以体现出想要的效果为原则进行搭配。

如图1-23所示,Logo的右边是一个红色的板块以及红色的导航栏,广告区文字也以红色为主调,显示出了开心网的喜庆与令用户兴奋的主题。

图1-23

技巧与提示

在企业网页中可以使用金属色,以显示出企业的稳健与霸气。

1.4.2 网页常见的配色方案

网页颜色搭配的好坏会直接影响到浏览者的潜在思维,不好的色彩搭配会让浏览者浮躁以至于失去耐心,好的色彩搭配则会给访问者带来很强的视觉冲击力、提升对企业的好感。网站建设中常见的网页配色方案介绍如下。

技巧与提示

要说色彩的运用,应先了解黑白灰色彩的应用,因为黑白灰色彩是万能色,可以跟任意一种色彩搭配。当用户为某种色彩的搭配苦恼的时候,不妨试试用黑白灰。当觉得两种色彩的搭配不协调,试试加入黑色或者灰色,或许会有意想不到的效果。

1.同种色彩搭配

同种色彩搭配是指首先选定一种色彩,然后调整透明度或饱和度,将色彩变淡或加深,产生新的色彩。这样的页面看起来色彩统一,有层次感,如图1-24所示。

图1-24

2.临近色彩搭配

临近色是色环上给定颜色临近的任何一种颜色,如绿色和蓝色、红色和黄色就互为临近色。采用临近色可以使网页避免色彩过于杂乱,易于达到页面的和谐统一,如图1-25所示。

图1-25

3.暖色色彩搭配

暖色色彩搭配是指红色、橙色、黄色以及褐色等色彩的搭配,运用这种色调,可使网页呈现温馨、和谐以及热情的氛围,如图1-26所示。

图1-26

4.冷色色彩搭配

冷色色彩搭配是指使用绿、蓝和紫色等色彩进行的搭配。这种色彩搭配,可使网页呈现宁静、清凉以及高雅的氛围。冷色调与白色搭配一般会获得较好的效果,如图1-27所示。

图1-27

5.有主色的混合色彩搭配

有主色的混合色彩搭配是指以一种颜色作为主要颜色,同时辅以其他色彩混合搭配,形成缤纷但却不杂乱的搭配效果,如图1-28所示。

图1-28

一个网站不可能单一地运用一种颜色,这样会让人感觉单调和乏味,但是也不可能将所有的颜色都运用到网站中,这样会让人感觉轻浮和花哨。一个网站必须有一种或两种主题色,不至于让客户迷失方向,也不至于单调,乏味,所以确定网站的主题色也是设计者必须考虑的问题之一。

网站建设中一个页面尽量不要使用超过4种色彩,用太多的色彩会让人没有方向,没有侧重。当主题色确定好以后,考虑其他配色时,一定要考虑其他配色与主题色的关系,要体现什么样的效果。另外,分清楚哪种因素占主要地位,是明度、纯度还是色相。

技巧与提示

对一些明度较高的网站,配以黑色可以适当地降低其明度。白色是网站用得最普遍的一种颜色,很多网站甚至留出大块的白色空间,作为网站的一个组成部分,这就是留白艺术。留白,给人一个遐想的空间,恰当的留白对于协调页面的均衡起到相当大的作用。很多设计性网站较多地运用了留白艺术。

1.4.3 网页色彩搭配的技巧

对于做网页的初学者来说可能更习惯使用一些漂亮的图片作为自己网页的背景,但是浏览一下大型的商业网站就会发现,它们更多运用的是白色、蓝色和黄色等,使得网页显得典雅、大方和温馨。更重要的是,这样可以大大加快用户打开网页的速度。

下面介绍几种网页中常用的颜色。

● BgcolorK″#F1FAFA″—适合做正文的背景色,淡雅。

● BgcolorK″#E8FFE8″—适合做标题的背景色。

● BgcolorK″#E8E8FF″—适合做正文的背景色,文字颜色配黑色。

● BgcolorK″#8080C0″—上面可配黄色或白色文字。

● BgcolorK″#E8D098″—上面可配浅蓝色或蓝色文字。

● BgcolorK″#EFEFDA″—上面可配浅蓝色或红色文字。

● BgcolorK″#F2F1D7″—适合配黑色文字,显得素雅,如果配红色则显得醒目。

● BgcolorK″#336699″—适合配白色文字。

● BgcolorK″#6699CC″—适合配白色文字,可以做标题。

● BgcolorK″#66CCCC″—适合配白色文字,可以做标题。

● BgcolorK″#B45B3E″—适合配白色文字,可以做标题。

● BgcolorK″#479AC7″—适合配白色文字,可以做标题。

● BgcolorK″#00B271″—适合配白色文字,可以做标题。

● BgcolorK″#FBFBEA″—适合配黑色文字,一般作为正文。

● BgcolorK″#D5F3F4″—适合配黑色文字,一般作为正文。

● BgcolorK″#D7FFF0″—适合配黑色文字,一般作为正文。

● BgcolorK″#F0DAD2″—适合配黑色文字,一般作为正文。

● BgcolorK″#DDF3FF″—适合配黑色文字,一般作为正文。

一般来说,网页的背景色应该柔和一些、素一些以及淡一些,再配上深色的文字,使人看起来自然和舒畅。而为了追求醒目的视觉效果,可以将标题设为较深的颜色。

图1-29所示为人人网首页,采用了浅蓝色和灰白的混合搭配。

图1-29

技巧与提示

下面列出的是一些典型的颜色搭配实例。

浅绿色底配黑色文字,或白色底配蓝色文字都很醒目,但前者突出背景,后者突出文字。

红色底配白色文字,比较深的底色配黄色文字显得非常有效果。

人的视觉对色彩最为敏感。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。

色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。

1.4.4 网页色彩的注意事项

合理地使用色彩是树立网站形象的关键之一,而如何搭配色彩却是设计者们感到头疼的问题。

网页的背景、文字、图标、边框以及超链接等,应该采用什么样的色彩,应该搭配什么色彩才能最好地表达出预想的内涵呢?

搭配网页色彩时,要注意以下事项。

● 色彩的鲜明性。网页的色彩要鲜艳,容易引人注目,如图1-30所示。

图1-30

● 色彩的独特性。要有与众不同的色彩,使得用户对网页的印象强烈。如图1-31所示。

图1-31

● 色彩的合适性。就是说色彩和设计者表达的内容气氛相适合。图1-32所示为世纪佳缘的首页,使用粉色体现了女性站点的柔美。

图1-32

● 色彩的联想性。不同色彩会使人产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择的色彩要和网页的内涵是相关联的。

技巧与提示

专业研究机构的研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全的黑白页面更加吸引人。因此,网页色彩使用的通常做法是:主要内容文字用非彩色(黑色),边框、背景以及图片用彩色,这样页面整体不单调,看主要内容时也不会眼花。