本节书摘来自异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章,第2.2节,作者: 何新起 , 娄彦杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.2 网页色彩搭配
色彩搭配既是一项技术性工作,同时也是一项艺术性很强的工作,因此在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,这样才能设计出色彩鲜明、性格独特的网站。
2.2.1 网页色彩搭配原理
网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框及链接等,应该采用什么样的色彩,应该搭配什么色彩才能最好地表达网站的内涵和主题呢?下面是网页色彩搭配的一些原理。
- 色彩的鲜明性
网页的色彩要鲜明,容易引人注目,图2-6所示为色彩鲜明的网页。
- 色彩的独特性
要有与众不同的色彩,网页的用色必须要有自己独特的风格,这样才能给浏览者留下深刻的印象。图2-7所示的网页采用了独特的色彩。
![33713cf4dcbcfa32f84ab80d234e673830871e27](https://yqfile.alicdn.com/33713cf4dcbcfa32f84ab80d234e673830871e27.png)
![91ef4290b9eadab0ffa57c09b5b965250a354bb6](https://yqfile.alicdn.com/91ef4290b9eadab0ffa57c09b5b965250a354bb6.png)
- 色彩的艺术性
网站设计也是一项艺术活动,因此必须遵循艺术规律,在考虑到网站本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。不同色彩会使人产生不同的联想,色彩的选择要和网页的内涵相关联。
- 色彩搭配的合理性
网页设计虽然属于平面设计的范畴,但又与其他平面设计不同,它在遵循艺术规律的同时,还需考虑人的心理特点。合理的色彩搭配,给人一种和谐、愉快的感觉。避免采用纯度很高的单一色彩,这样容易造成视觉疲劳。
2.2.2 网页设计中色彩搭配的技巧
到底用什么色彩搭配好看呢?下面是网页色彩搭配的一些常见技巧。
- 使用单色
尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。
- 使用邻近色
所谓邻近色,就是在色带上相邻近的颜色,如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一,如图2-8所示。
![a73d577b07c53e7b67ce97c5535c71bece6ecd58](https://yqfile.alicdn.com/a73d577b07c53e7b67ce97c5535c71bece6ecd58.png)
- 使用对比色
对比色可以突出重点,产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用,如图2-9所示。
![1f19f526dfe2e4c743cb30971100016a80d54029](https://yqfile.alicdn.com/1f19f526dfe2e4c743cb30971100016a80d54029.png)
- 黑色的使用
黑色是一种特殊的颜色,如果使用恰当、设计合理,往往产生很强烈的艺术效果。黑色一般用作背景色,与其他纯度色彩搭配使用。
- 背景色的使用
背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景要与文字的色彩对比强烈一些,如图2-10所示。
![ee2cc813e79fee2e86d766759d13641b40755844](https://yqfile.alicdn.com/ee2cc813e79fee2e86d766759d13641b40755844.png)
- 色彩的数量
一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。
2.2.3 常见的网页配色方案
下面介绍一些常见的网页配色方案。
- 红色代表热情、活泼、热闹、温暖、幸福和吉祥。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动,还是一种容易造成人视觉疲劳的颜色,如图 2-11所示。
- 黄色代表明朗、愉快、高贵和希望。黄色是各种色彩中最为娇气的一种色,图2-12所示为使用黄色的页面。
![9aed47854513b84164e5458e412723bb66f1fae0](https://yqfile.alicdn.com/9aed47854513b84164e5458e412723bb66f1fae0.png)
![e21c4920bdf2006b6bc1d252c5174a42a77e7c1f](https://yqfile.alicdn.com/e21c4920bdf2006b6bc1d252c5174a42a77e7c1f.png)
- 蓝色代表深远、永恒、沉静、理智、诚实、公正和权威。蓝色是一种在淡化后仍然能保持较强个性的颜色,如图2-13所示。如果在蓝色中分别加入少量的红、黄、黑、橙或白等色,均不会对蓝色的性格构成较明显的影响。
- 白色的色感光明,性格朴实、纯洁和快乐。白色代表纯洁、纯真、朴素、神圣、明快。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色,都会影响其纯洁性,使其性格变得含蓄。
- 紫色代表优雅、高贵、魅力、自傲及神秘。在紫色中加入白色,可变得优雅、娇气,并充满女性的魅力。
- 绿色代表新鲜、希望、和平、柔和、安逸、青春。绿色是具有黄色和蓝色两种成分的色。图2-14所示是以绿色为主色调的网站。
![95b892f7152eacff48a43cbe4a7ca432278917a5](https://yqfile.alicdn.com/95b892f7152eacff48a43cbe4a7ca432278917a5.png)
- 灰色在商业设计中,具有柔和、高雅的意象,而且属于中间性格,男女皆能接受,所以灰色也是永远流行的主要颜色。在许多的高科技产品中,尤其是和金属材料有关的,几乎都采用灰色来传达高级、科技的形象。使用灰色时,利用不同的层次变化组合或搭配其他色彩,才不会给人过于平淡、沉闷、呆板、僵硬的感觉。