网页设计中的色彩选取

最近和朋友一起讨论设计页面时选取颜色应该注意到的一个小问题,简单的整理一下,有什么说的不对的地方还请大家提意见。

现在的电脑对颜色的显示的支持已经不像以前那么差,大多都能达到32bit的真彩色。所以现在的网页设计人员对色彩的使用也变的格外大胆,特别是个人的作品,往往没有条件拿那么多的显示器做测试,造成的后果往往是想要表现的效果跟实现的效果差距很大,客户不满意,造成作品的失败。

为什么会这样呢,首先,CRT显示器主要是依靠显象管内的电子枪发射的电子束射击显示屏内侧的荧光粉来发光,而TFT-LCD却是采用“背光(backlight)”原理,使用灯管作为背光光源,通过辅助光学模组和液晶层对光线的控制来实现显示效果。目前这两种显示器是主流的显示器,两种显示器使用了不同的方式显像,所以对色彩亮度的显示也很不一样,一般来说液晶的显示器对颜色的显示偏亮,更鲜艳一点,例如#EEEEEE,在CRT的显示器下看很明显能看出来是灰色的,而在LCD下看几乎与白色没什么区别。工欲善其事,必先利其器,一般来说CRT的显示器对颜色的显示比较真实,在设计页面的时候最好能够有一台CRT的显示器,哪怕是做完了用它来做测试。然后在选择工作空间的时候,最好是选用sRGB,因为它针对于显示器显示效果的颜色工作空间。

大多数信息类的网页中的主体是文字,所以说文字和文字的背景颜色的选取就非常值得商契了。如果你想用彩色的文字,那你得注意了,什么样的颜色合适呢,在网页中中的文字在使用颜色的时候最常用的是#000000~到#666666之间的颜色,当然我指的是黑白色,如果你的文字颜色比#666666还 亮,而且你的背景颜色的亮度也比较高,那你的页面用户看起来的时候就会比较累了。文字与背景的对比度不够会让人在看起来的时候感觉很累,用户会很费劲的去 阅读你所要展现的内容,如果长时间的阅读自然会让人感觉累,特别你的内容不那么吸引用户的时候,那么他很可能不会再来了,慢慢的造成用户的流失。特别是在 文字的颜色用彩色,或者背景的颜色用彩色的时候,如果搭配不好更容易出现这种问题。

怎么解决这个问题? 首先注意你的文字与背景之间的对比度。在取色的时候你会注意到,在PhotoShop的拾色器中有个HSB色彩模式,它们分别代表的是色相、饱和度、明度,在拾色器的X轴上移动光标,你会发现颜色的B也就是明度值是不改变的,也就是它们给人们的亮度感觉是一致的,只有饱和度上的不同,X轴越往右靠,则S也就是饱和度的值越高,给人的感觉就越鲜艳。而在页面中给人视觉上的对比度主要是由明度来决定的,在示意图中,三种颜色分别是#006600,#666666,#00FF00,三段字的颜色也分别是这三种颜色,显然,纯绿色虽然饱和度与暗绿色的没有改变只是明度上的改变,用暗绿色和灰色颜色的文字的可辨识性比用纯绿色的文字高很多。而在文字的亮度比较高的情况下,背景的选用则应该用明度比较低的背景。在用彩色文字的时候这点应该特别注意。

所以一个比较简单的方法就是在选取颜色的时候,先在拾色器的右侧竖条栏中选择你要用的色相,再在左侧的拾色框中选择你所使用的饱和度,最后比照着最左侧的亮度在X轴平移就可以选择出合适亮度的颜色来了。

转载请注明原文出处《网页设计中的色彩选取》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

我要评论