《网站设计 开发 维护 推广 从入门到精通》—— 2.2 网页色彩搭配

简介:

本节书摘来异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章,第2.2节,作者:何新起 ,娄彦杰,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 网页色彩搭配

色彩搭配既是一项技术性工作,同时也是一项艺术性很强的工作,因此在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,这样才能设计出色彩鲜明、性格独特的网站。

2.2.1 网页色彩搭配原理

网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框及链接等,应该采用什么样的色彩,应该搭配什么色彩才能最好地表达网站的内涵和主题呢?下面是网页色彩搭配的一些原理。

色彩的鲜明性
网页的色彩要鲜明,容易引人注目,图2-6所示为色彩鲜明的网页。

色彩的独特性
要有与众不同的色彩,网页的用色必须要有自己独特的风格,这样才能给浏览者留下深刻的印象。图2-7所示的网页采用了独特的色彩。

6e141c7af5bbac12ae6111496a66de7f0beb066e

色彩的艺术性
网站设计也是一项艺术活动,因此必须遵循艺术规律,在考虑到网站本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。不同色彩会使人产生不同的联想,色彩的选择要和网页的内涵相关联。

色彩搭配的合理性
网页设计虽然属于平面设计的范畴,但又与其他平面设计不同,它在遵循艺术规律的同时,还需考虑人的心理特点。合理的色彩搭配,给人一种和谐、愉快的感觉。避免采用纯度很高的单一色彩,这样容易造成视觉疲劳。

2.2.2 网页设计中色彩搭配的技巧

到底用什么色彩搭配好看呢?下面是网页色彩搭配的一些常见技巧。

使用单色
尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。

使用邻近色
所谓邻近色,就是在色带上相邻近的颜色,如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一,如图2-8所示。

b04c05d3fa5f61ff8d131ebcc64e604c4af09550

使用对比色
对比色可以突出重点,产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用,如图2-9所示。

c05c587f6478215009c003c42acd6f6fa9ab72b5

黑色的使用
黑色是一种特殊的颜色,如果使用恰当、设计合理,往往产生很强烈的艺术效果。黑色一般用作背景色,与其他纯度色彩搭配使用。

背景色的使用
背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景要与文字的色彩对比强烈一些,如图2-10所示。

9cb9490b0507e662fb6cc024022e8c29c5e65123

色彩的数量
一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。

2.2.3 常见的网页配色方案

下面介绍一些常见的网页配色方案。

红色代表热情、活泼、热闹、温暖、幸福和吉祥。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动,还是一种容易造成人视觉疲劳的颜色,如图 2-11所示。
黄色代表明朗、愉快、高贵和希望。黄色是各种色彩中最为娇气的一种色,图2-12所示为使用黄色的页面。

1b5608bd1359fa68392058962d400c2355382464

蓝色代表深远、永恒、沉静、理智、诚实、公正和权威。蓝色是一种在淡化后仍然能保持较强个性的颜色,如图2-13所示。如果在蓝色中分别加入少量的红、黄、黑、橙或白等色,均不会对蓝色的性格构成较明显的影响。

416014bcf6880dd86bfc89d238148f86b57a54e8

白色的色感光明,性格朴实、纯洁和快乐。白色代表纯洁、纯真、朴素、神圣、明快。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色,都会影响其纯洁性,使其性格变得含蓄。
紫色代表优雅、高贵、魅力、自傲及神秘。在紫色中加入白色,可变得优雅、娇气,并充满女性的魅力。
绿色代表新鲜、希望、和平、柔和、安逸、青春。绿色是具有黄色和蓝色两种成分的色。图2-14所示是以绿色为主色调的网站。

d9fe34b6924c9e17fc102cc3ac875711ac170dea

灰色在商业设计中,具有柔和、高雅的意象,而且属于中间性格,男女皆能接受,所以灰色也是永远流行的主要颜色。在许多的高科技产品中,尤其是和金属材料有关的,几乎都采用灰色来传达高级、科技的形象。使用灰色时,利用不同的层次变化组合或搭配其他色彩,才不会给人过于平淡、沉闷、呆板、僵硬的感觉。

相关文章