8.3.3 网站配色设计
色彩是网站设计工作的重要方面, 是确立网站风格的前提, 决定着网站给浏览者的第一印象。页面的整体色调有活泼或庄重、雅致或热烈等不同的趋向, 在用色方面也有繁简之分。不同内容的网站或网站的不同部分, 在这方面都会有所不同。
1.色彩基础
对于网站设计, 了解和掌握色彩知识是必要的。另外在确定Web 页面要使用的颜色之前, 还需要补充一些关于计算机运用色彩表达的基础知识。尽管它看上去似乎与Web页面设计不沾边, 也很乏味, 但确实很有用。了解它们, 对色彩不太敏感的人也能配出合适的色彩组合。
(1) 色彩的基本原理
现代物理学证实, 色彩是光刺激眼睛, 再传到大脑的视觉中枢而产生的一种感觉。这个过程涉及生理学和从感觉至知觉过程的心理学知识。人类对色彩的认识应该包括自身的理性、鉴赏力以及许多无法表述的因素, 自然界中的色彩已被科学地识别并显示的有1亿种。客观地讲, 除了观念上的限制, 每个人欣赏颜色的才能是与生俱来的。
不能用其他颜色混合而成的色彩称为原色, 而用原色却可以调配出其他色彩。电脑屏幕的色彩是由红、绿、蓝3种原色组成的。色相、饱和度和明度构成色彩的三要素。自然界中的颜色可分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色, 其他所有颜色均属于彩色。色相是色彩的相貌, 也就是区分色彩种类的名称, 如红、黄、蓝每个字都代表一个具体的色相。色相由波长决定, 如天蓝、蓝色、靛蓝是同一色相, 它们看上去有区别是因为明度和饱和度不同。饱和度又称为纯度, 是指色彩的纯净程度, 也可以说是色相感觉鲜艳或灰暗程度。光谱中单色光都是纯度最高的光。任何一个色彩加入白、黑或灰都会降低它的纯度, 含量越多纯度越低。明度是指色彩的明暗程度, 体现颜色的深浅。它是全部色彩都具有的属性, 最适合表现物体的立体感和空间感。在其他颜色中加入白色, 可提高混合色的明度; 加入黑色则作用相反。非彩色只有明度特征, 没有色相和饱和度的区别。此外, 色彩还能代表不同文化内涵和心理。
(2) 色彩的计算机表示
我们知道, 计算机采用的是二进制计数方式, 只有0和1, 逢2进位。在对颜色的表示上, 如果只采用1位二进制, 那么可以表示2种颜色; 如果采用2位二进制, 那么可以表示22=4种颜色; 依此类推, 8位二进制可以表示28=256种颜色。但是用二进制计数实在太麻烦了, 因此计算机在提供给人们的应用接口上采用的是八进制和十六进制。在对颜色的表示上, 通常采用十六进制。十六进制, 逢16进位, 有0～9和A～F 共16个基本数。如果要用二进制中的0和1表示这16个基本数, 至少要用4位二进制数, 由0000表示0,直至1111表示F。
现在常用的真彩色显示模式是由24位二进制数组成。如果用十六进制来表示, 则只需用6位。如FFFFFF 代表白色, 000000代表黑色, 888888代表中间的灰色, 数值越大颜色越浅。由于所有颜色均由红、绿、蓝3种三原色搭配而来, 所以6位数值中, 前两位代表红, 中间两位代表绿, 后两位代表蓝。由此可知, FF0000代表正红, 00FF00代表正绿, 0000FF 代表正蓝。所有的颜色都由这6位数字的不同组合得到, 区别是前两位数值大代表红色在颜色中所占的比例大, 中间两位数值大代表绿色所占的比例大, 后两位数值大代表蓝色所占的比例大。
也有一些图像处理软件向人们提供了十进制接口, 对颜色来说, 这就是RGB 值表示。R 代表红色(Red), G 代表绿色(Green), B 代表蓝色(Blue), 它的值是3个十进制数,与十六进制数是一一对应的。例如, 十六进制中的F 对应十进制中的1, FF 对应2; 白色的十六进制数为FFFFFF, 则它的RGB 值为R: 2, G: 2, B: 2。Photoshop 同时提供了这两种接口, 在熟悉了这些数字后, 我们甚至可以不用看颜色只调整数字即可调配色彩。
(3) 浏览器的安全色彩
在我们的网络中, 有一个程序员使用数学立方体结构创建的浏览器调色板。这个调色板包含了在任何平台上任何分辨率显示的21种安全颜色的机制, 则是网络颜色的标准。如果我们使用了这个调色板以外的颜色, 当显示器设定到低分辨率时显示该种颜色抖动。
为避免发生抖动现象, 在Web 页面中应尽量使用安全色彩。我们通过一些简单的计算可以得到浏览器的安全色彩, 只要简单地记住RGB 值必须是1的倍数即可。如果用十六进制表示, 只要包含00、33、33、99、CC、FF, 那么就是浏览器的安全颜色了。Front-Page 和Dreamweaver 中提供了浏览器安全颜色图表, 我们可以很方便地在安全范围内选择颜色。
2.基于Web 页面的色彩应用
设计精良的网站有其色调构成的总体倾向。以一种颜色或几种邻近颜色为主导, 使全局呈现某种和谐、统一的色彩倾向, 如同人的衣着一样, 信息空间的构造也需要恰如其分的包装和表达。
(1) 页面用色要求
我们知道, 颜色可以表达设计者的态度和情感。在这里, 我们考虑的不是具体色彩的使用, 而是Web 页面用色的两个基本原则: 一致性和选择适当的颜色来满足不同题材的需要。
(2) 页面色彩的选择
和之前设计网站结构一样, 在考虑有关具体工作之前, 需要考虑一些因素来帮助我们确定可供选择的色彩的范围, 主要考虑文化、流行趋势、浏览人群、个人偏好。
Web 页面主题色彩主要考虑主色、辅色和背景色3个方面。
①主色。主色是指页面中相对较大面积使用的色彩, 反映整个网页的风格。例如影视题材的站点适用任何色彩, 用黑色或其他较深的色彩比较好, 因为电影适合在黑暗的环境下观看, 网页上使用深色符合人们的习惯; 有关健康的题材可以采用绿色, 因为绿色代表蓬勃的生命力。需要注意的是, 应尽可能在浏览器的安全颜色范围内选择主色。
②辅色。辅色是指页面中相对较小面积使用的色彩。它是主色的衬托, 使用恰当能起到画龙点睛的作用。通常应用于图标、文字、表格、线条、输入框及超链接。
③背景色。背景色是主页的底色, 有时和主色是同一色彩。底色深, 文字的颜色就要浅, 以深色的背景衬托浅色的内容(文字、图片); 反之, 底色浅, 文字的颜色就要深,以浅色的背景衬托深色的内容(文字、图片)。
(3) 页面色彩的搭配
日常生活中人们对色彩搭配都有一些基本概念, 如红配绿、蓝配白等。但是要在成千上万种颜色中挑选出几种来搭配一个协调而互补的Web 页面色彩方案, 并非人人都可以轻易做到。
一个最简单的方法是调整数字。先根据页面主题选定一个主色, 保持红、绿、蓝3种色调中的一个或多个数字不变, 将可变的数字同时加上或减去相同的数字, 这样得出来的色彩都是相容的, 可以放在同一页面上组合出不错的搭配。例如, 色彩#CCCC99, 按照上面所说的方法, 可以选择#CC3333、#CC3300、#CCCCFF、#333300等作为辅色。其中前两种色彩保持原色彩的红色调不变, 第3种保持红、绿色调不变, 这几种搭配在一起: 实际上先选定色彩, 再选择和它同一色调的色彩或对比色, 同时注意使用灰色进行调和, 这样整个页面色彩丰富、意境深远。而#333300与#CCCC99属于同一色系, 区别只是色彩的明暗程度不同, 前者比后者暗几个层次, 两者搭配在一起: 实际上将色彩加入白色(或黑色) 使其变浅(或变深), 调和出新的不同的色彩, 这样的页面看起来色彩统一, 有层次感。