網(wǎng)站文字色彩設(shè)計(jì)技巧的實(shí)例分析

圖文是構(gòu)成網(wǎng)頁設(shè)計(jì)的兩大元素，而文字又是主要的組成部分。之前我們講過高水準(zhǔn)網(wǎng)頁設(shè)計(jì)需掌握文字圖片協(xié)調(diào)。本文將對網(wǎng)站文字色彩設(shè)計(jì)技巧的進(jìn)行實(shí)例分析。

一 飽和度與易讀性：
上周在做F同學(xué)的一個(gè)項(xiàng)目時(shí)，涉及到較多列表性的文字鏈接。
目前除去頻道和首頁，全站文字鏈接使用一致的藍(lán)色，色值為#014ccc，飽和度較高，在用戶瀏覽時(shí)更易于吸引注意，但同樣也容易引起視覺疲勞，高飽和度的文字并不易于閱讀。

上圖中，下半部分的文字降低了飽和度，是不是比上半部分讀起來更舒服？
其實(shí)，大多數(shù)門戶類的網(wǎng)站也是使用低飽和度的藍(lán)色作為列表鏈接顏色的：

結(jié)論一：
顏色飽和度達(dá)到一定值，視覺神經(jīng)對此顏色就會(huì)產(chǎn)生興奮，就容易在閱讀中產(chǎn)生疲勞感。
二 關(guān)于視覺神經(jīng)興奮臨界值：
因?yàn)槊恳环N顏色的光因主波長不一樣，所以造成人眼神經(jīng)興奮的飽和度臨界值也不一致。
在光譜中，紅橙黃綠青藍(lán)紫，波長依次減小，眼部神經(jīng)興奮所需要達(dá)到的飽和度呈先增后減的弧狀：
波長較長的顏色和波長較短的顏色，相對較低的飽和度都就能夠刺激視覺神經(jīng)興奮，而波長處于中間的綠色青色，則需要相對較高的飽和度才能刺激視覺神經(jīng)興奮。

由圖中可以看出，藍(lán)色也屬于飽和度興奮臨界點(diǎn)比較低的顏色，所以，應(yīng)該慎用高飽和度的藍(lán)色。
結(jié)論二：
同等飽和度的顏色，紅色和紫色最易產(chǎn)生視覺神經(jīng)興奮，其次是黃色和藍(lán)色，再次是綠色和青色。
因此從單純的色彩來講，在設(shè)計(jì)中應(yīng)：
1.盡量使用低飽和度的紅色，紫色；
2.禁止使用高飽和度的紅色，紫色；
3.少量使用高飽和度的黃色，藍(lán)色。
三 關(guān)于明度，色相，飽和度之間的關(guān)系。
1.名詞解釋：
a）先說說明度：就是明暗程度，也有叫亮度的，計(jì)算機(jī)把明度分成256級色階，黑得伸手不見五指就是0級，白茫茫的一片什么都看不見就是255級：

b）再說說色相：就是平時(shí)所說的哪種顏色，光譜中的紅橙黃青藍(lán)紫，以及千千萬萬種組合都是不同的色相。

c）最后說說飽和度：就是通常所說的顏色純度，鮮艷程度等等。
2.與Red，Green，Blue單色光之間的關(guān)系：
a）先弄清計(jì)算機(jī)中色彩生成的幾點(diǎn)規(guī)則：
i.RGB三種原色光，同時(shí)以1:1：1比例混合，就能產(chǎn)生1份白色的光；
ii.RGB中的任意兩種原色光，混合只能產(chǎn)生另一種色相的光，而不是白色的光；
iii.任意一種原色光，對明度色階的影響為其數(shù)值的一半，轉(zhuǎn)換成色階均不會(huì)超過127級；
因?yàn)槿我鈨煞N有色光混合產(chǎn)生的顏色，色階均不能超過255級即白色光。
比如#000002的藍(lán)色圖片，在其藍(lán)色通道的色階是2級，但將其轉(zhuǎn)換成灰度圖片，色值為#010101，說明此圖片的明度色階為1級。
iv.下面提到的RGB數(shù)值，是指的各顏色通道十六進(jìn)制數(shù)值：

b）明度與RGB中最小值，最大值有關(guān)，計(jì)算方法如下：

i.RGB中最大值越小，意味著有色光越少，則明度越低；
ii.RGB中最小值越小，意味著生成的白色光越少，則明度越低
c）相同明度下，色相與RGB中最大值，最小值的位置，以及中間值的大小有關(guān)：

i.在相同明度下，不同色相的顏色RGB最大值和最小值始終保持恒定；
ii.RGB中最大值和最小值的位置會(huì)影響色相，例如#775533和#557733；
iii.變換RGB的中間值可以影響色相，例如#FF0055和#FF0088；
d）飽和度與RGB中最大值，最小值之間的差值有關(guān)：

i.RGB中最大值，最小值之間的差值越大，飽和度越高；
ii.RGB中當(dāng)最小值趨于00，或者最大值趨于FF后，飽和度不能再提高。
結(jié)論三：
1.在顏色較暗時(shí)（即RGB沒有一項(xiàng)數(shù)值達(dá)到FF），增加明度可以起到增加飽和度的目的，降低明度就會(huì)降低飽和度；
2.在顏色較亮?xí)r（即RGB沒有一項(xiàng)數(shù)值達(dá)到00），增加明度可以起到降低飽和度的目的，降低明度反而會(huì)增加飽和度；
3.顏色飽和度越大（即RGB中最大值與最小值差值越大），在相同明度下的光譜范圍越大（即可變換的顏色種類越少）；
4.顏色飽和度越小（即RGB中最大值與最小值差值越?。?，在相同明度下的光譜范圍越?。纯勺儞Q的顏色種類越少）；
5.色相的變化不會(huì)影響到明度和飽和度；
四 根據(jù)這些研究，我們能夠得到什么可以運(yùn)用的東西？
1.高飽和度的紅色（#FF0000），紫色（#FF00FF）推薦不使用；
2.高飽和度的藍(lán)色（#1834D1），橙色（#FF4E00），可以用于少量的文字可以更好地吸引視覺注意，但最好不要用于列表中的鏈接；
3.根據(jù)前面的分析，我們得出調(diào)制可以用于列表鏈接藍(lán)色的方法：
通過降低藍(lán)色通道色階來降低顏色整體的飽和度（例如將#0000FF調(diào)整為#000099），為避免過暗，和黑色混淆，我們還可以增加其他原色通道的色階，調(diào)整其明度（例如將#000099調(diào)整為#005599）。
4.顏色不協(xié)調(diào)，可以通過降低飽和度來達(dá)到協(xié)調(diào)，也可通過采用調(diào)整色相來達(dá)到目的：

一個(gè)現(xiàn)成的例子就是我們網(wǎng)頁中采用的#FF4E00色值，和#FF0000的飽和度其實(shí)是一致的（不信可以變成灰度圖看看），之所以色值為#FF0000的顏色顯得更刺眼，是因?yàn)樵谕瑯拥娘柡投认?，紅色比橙色更讓視覺神經(jīng)敏感，還記得這張圖么。