1.4 網頁配色

網頁設計是平面設計的一個分支，和其他平面設計類似，對色彩都有較大的依賴性。色彩作為網頁視覺元素的一種，不僅情感豐富，其形式的美感也使瀏覽者得以視覺和心理的享受。將色彩成功地運用在網頁創意中，可以強化網頁的視覺張力。

1.4.1 色彩的基礎概念

色彩是網站最重要的一個部分，在學習如何為網站進行色彩搭配之前，首先要來認識顏色。

1. 色彩與視覺原理

色彩的變化是變幻莫測的，這是因為物體本身除了其自身的顏色外，有時也會因為周圍的顏色，以及光源的顏色而有所改變。

□ 光與色

光在物理學上是電磁波的一部分，其波長在700～400nm，在此范圍稱為可視光線。當把光線引入三棱鏡時，光線被分離為紅、橙、黃、綠、青、藍、紫，因而得出的自然光是七色光的混合。這種現象稱作光的分解或光譜，七色光譜的顏色分布是按光的波長排列的，如下圖所示，可以看出紅色的波長最長，紫色的波長最短。

光是以波動的形式進行直線傳播的，具有波長和振幅兩個因素。不同的波長長短產生色相差別。不同的振幅強弱大小產生同一色相的明暗差別。光在傳播時有直射、反射、透射、漫射、折射等多種形式。

光直射時直接傳入人眼，視覺感受到的是光源色。當光源照射物體時，光從物體表面反射出來，人眼感受到的是物體表面色彩。當光照射時，如遇玻璃之類的透明物體，人眼看到是透過物體的穿透色，光在傳播過程中，受到物體的干涉時，則產生漫射，對物體的表面色有一定影響。如通過不同物體時產生方向變化，稱為折射，反映至人眼的色光與物體色相同。

□ 物體色

自然界的物體五花八門、變化萬千，它們本身雖然大都不會發光，但都具有選擇性地吸收、反射、透射色光的特性。當然，任何物體對色光不可能全部吸收或反射，因此，實際上不存在絕對的黑色或白色。

物體對色光的吸收、反射或透射能力，很受物體表面肌理狀態的影響。但是，物體對色光的吸收與反射能力雖是固定不變的，而物體的表面色卻會隨著光源色的不同而改變，有時甚至失去其原有的色相感覺。所謂的物體“固有色”，實際上不過是常光下人們對此的習慣而已。例如在閃爍、強烈的各色霓虹燈光下，所有建筑幾乎都失去了原有本色而顯得奇異莫測。

2. 色彩三要素

自然界的色彩雖然各不相同，但任何有彩色的色彩都具有色相、亮度、飽和度這3個基本屬性，也稱為色彩的三要素。

□ 色相

色相指色彩的相貌，是區別色彩種類的名稱。色相是根據該色光波長劃分的，只要色彩的波長相同，色相就相同，波長不同才產生色相的差別。紅、橙、黃、綠、藍、紫等每個字都代表一類具體的色相，它們之間的差別就屬于色相差別。當用戶稱呼到其中某一色的名稱時，就會有一個特定的色彩印象，這就是色相的概念。正是由于色彩具有這種具體相貌特征，用戶才能感受到一個五彩繽紛的世界。如果說亮度是色彩隱秘的骨骼，色相就很像色彩外表華美的肌膚。色相體現著色彩外向的性格，是色彩的靈魂。

如果把光譜的紅、橙、黃、綠、藍、紫諸色帶首尾相連，制作一個圓環，在紅和紫之間插入半幅，構成環形的色相關系，便稱為色相環。在六種基本色相各色中間加插一個中間色，其首尾色相按光譜順序為：紅、橙紅、橙、黃、黃綠、綠、青綠、藍綠、藍、藍紫、紫、紅紫，構成十二基本色相，這十二色相的彩調變化，在光譜色感上是均勻的。如果進一步再找出其中間色，便可以得到二十四個色相（見下圖）。

□ 飽和度

飽和度是指色彩的純凈程度。可見光輻射，有波長相當單一的，有波長相當混雜的，也有處在兩者之間的，黑、白、灰等無彩色就是波長最為混雜，純度、色相感消失造成的。光譜中紅、橙、黃、綠、藍、紫等色光都是最純的高純度的色光。

飽和度取決于該色中含色成分和消色成分（黑、白、灰）的比例，含色成分越大，飽和度越大；消色成分越大，飽和度越小，也就是說，向任何一種色彩中加入黑、白、灰都會降低它的飽和度，加的越多就降的越低。

當在藍色中混入了白色時，雖然仍舊具有藍色相的特征，但它的鮮艷度降低了，亮度提高了，成為淡藍色；當混入黑色時，鮮艷度降低了，亮度變暗了，成為暗藍色；當混入與藍色亮度相似的中性灰時，它的亮度沒有改變，飽和度降低了，成為灰藍色。采用這種方法有十分明顯的效果，就是從純色加灰漸變為無飽和度灰色的色彩飽和度序列（見下圖）。

黑白網頁與彩色網頁之間存在著非常大的差異。大多數情況下黑白網頁給瀏覽者的視覺沖擊力不如彩色網頁效果強烈，同時對作品網頁的風格也有著一些局限性。而色彩的選擇不僅僅決定了作品的風格，同時也使得作品更加飽滿，富有魅力（參見下圖）。

□ 亮度

亮度是色彩賴以形成空間感與色彩體量感的主要依據，起著“骨架”的作用。在無彩色中，亮度最高的色為白色，亮度最低的色為黑色，中間存在一個從亮到暗的灰色系列（見下圖）。

亮度在三要素中具有較強的獨立性，它可以不帶任何色相的特征而通過黑白灰的關系單獨呈現出來。

色相與飽和度則必須依賴一定的明暗才能顯現，色彩一旦發生，明暗關系就會同時出現，在用戶進行一幅素描的過程中，需要把對象的有彩色關系抽象為明暗色調，這就需要有對明暗的敏銳判斷力。用戶可以把這種抽象出來的亮度關系看作色彩的骨骼，它是色彩結構的關鍵（參見下圖）。

3. 色彩的混合

客觀世界中的事物絢麗多彩，調色板上色彩變化無限，但如果將其歸納分類，基本上就是兩大類：一類是原色，即紅、黃、藍；另一類就是混合色。而使用間色再調配混合的顏色，稱為復色。從理論上講，所有的間色、復色都是由三原色調和而成。

在構成網頁的色彩布局時，原色是強烈的，混合色較溫和，復色在明度上和純度上較弱，各類間色與復色的補充組合，形成豐富多彩的畫面效果。

□ 原色理論

所謂三原色，就是指這三種色中的任意一色都不能由另外兩種原色混合產生，而其他顏色可以由這三原色按照一定的比例混合出來，色彩學上將這3個獨立的顏色稱為三原色。

□ 混色理論

將兩種或多種色彩互相進行混合，造成與原有色不同的新色彩稱為色彩的混合。它們可歸納成加色法混合、減色法混合、空間混合等3種類型。

加色法混合是指色光混合，也稱第一混合，當不同的色光同時照射在一起時，能產生另外一種新的色光，并隨著不同色混合量的增加，混色光的明度會逐漸提高。將紅（橙）、綠、藍（紫）3種色光分別做適當比例的混合，可以得到其他不同的色光。反之，其他色光無法混出這3種色光來，故稱為色光的三原色，它們相加后可得白光（見下圖）。

減色法混合即色料混合，也稱第二混合。在光源不變的情況下，兩種或多種色料混合后所產生新色料，其反射光相當于白光減去各種色料的吸收光，反射能力會降低。故與加色法混合相反，混合后的色料色彩不但色相發生變化，而且明度和純度都會降低。所以混合的顏色種類越多，色彩就越暗越混濁，最后近似于黑灰的狀態（見下圖）。

空間混合法亦稱中性混合、第三混合。將兩種或多種顏色穿插、并置在一起，于一定的視覺空間之外，能在人眼中造成混合的效果，故稱空間混合。其實顏色本身并沒有真正混合，它們不是發光體，而只是反射光的混合。因此，與減色法相比，增加了一定的光刺激值，其明度等于參加混合色光的明度平均值，既不減也不加。

由于它實際比減色法混合明度顯然要高，因此色彩效果顯得豐富、響亮，有一種空間的顫動感，表現自然、物體的光感更為閃耀。

1.4.2 色彩的模式

簡單地講，顏色模式是一種用來確定顯示和打印電子圖像色彩的模型，即一幅電子圖像用什么樣的方式在計算機中顯示或者打印輸出。Photoshop中包含了多種顏色模式，每種模式的圖像描述和重現色彩的原理及所能顯示的顏色數量各不相同。常見的有如下4種模式。

1. RGB顏色模式

RGB色彩模式是工業界的一種顏色標準，是通過對紅（Red）、綠（Green）、藍（Blue）3個顏色通道的變化，以及它們相互之間的疊加，來得到各式各樣的顏色的。RGB即是代表紅、綠、藍3個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一，如下圖所示。其中的顏色為每兩種顏色的等量，或者非等量相加所產生的顏色。

其中，每兩種不同量度相加所產生的顏色如下表所述。

對RGB三基色各進行8位編碼，這3種基色中的每一種都有一個從0（黑）～255（白色）的亮度值范圍。當不同亮度的基色混合后，便會產生出256×256×256種顏色，約為1670萬種，這就是用戶常聽說的“真彩色”。電視機和計算機的顯示器都是基于RGB顏色模式來創建其顏色的。

2. CMYK顏色模式

CMYK顏色模式是一種印刷模式。其中4個字母分別指青（Cyan）、洋紅（Magenta）、黃（Yellow）、黑（Black），在印刷中代表4種顏色的油墨。CMYK基于減色模式，由光線照到有不同比例C、M、Y、K油墨的紙上，部分光譜被吸收后，反射到人眼的光產生顏色。在混合成色時，隨著C、M、Y、K 4種成分的增多，反射到人眼的光會越來越少，光線的亮度會越來越低（參見下圖）。

3. HSB顏色模式

色澤（Hue）、飽和度（Saturation）和明亮度（Brightness）也許更適合人們的習慣，它不是將色彩數字化成不同的數值，而是基于人對顏色的感覺，讓人覺得更加直觀一些。其中色澤（Hue）是基于從某個物體反射回的光波，或者是透射過某個物體的光波；飽和度（Saturation），經常也稱作chroma，是某種顏色中所含灰色的數量多少，含灰色越多，飽和度越小；明亮度（Brightness）是對一個顏色中光的強度的衡量。明亮度越大，則色彩越鮮艷（參見下圖）。

4. Lab顏色模式

Lab色彩模式是以數學方式來表示顏色，所以不依賴于特定的設備，這樣確保輸出設備經校正后所代表的顏色能保持一致性。其中L指的是亮度；a是由綠至紅；b是由藍至黃（見下圖）。

1.4.3 自定義網頁顏色

一般情況下，訪問者的瀏覽器Netscape Navigator和Internet Explorer選擇了網頁的文本和背景的顏色，讓所有的網頁都顯示這樣的顏色。但是，網頁的設計者經常為了視覺效果而選擇了自定義顏色。自定義顏色是一些為背景和文本選取的顏色，它們不影響圖片或者圖片背景的顏色，圖片一般都以它們自身的顏色顯示。自定義顏色可以為下列網頁元素獨自分配顏色。

□ 背景：網頁的整個背景區域可以是一種純粹的自定義顏色。背景色總是在網頁的文本或者圖片的后面。

□ 普通文本：網頁中除了鏈接之外的所有文本。

□ 超級鏈接文本：網頁中的所有文本鏈接。

□ 已被訪問過的鏈接文本：訪問者已經在瀏覽器中使用過的鏈接。訪問過的文本鏈接以不同的顏色顯示。

□ 當前鏈接文本：當一個鏈接被訪問者單擊的瞬間，它轉換了顏色以表明它已經被激活了。

對于制作網頁的初學者可能更習慣于使用一些漂亮的圖片作為自己網頁的背景，但是，瀏覽一下大型的商業網站，你會發現他們更多運用的是白色、藍色、黃色等，使得網頁顯得典雅、大方和溫馨，如下圖所示的網頁中，主要由白色背景，和藍色、黃色、粉紅色以及黑色筆觸組成，能夠加快瀏覽者打開網頁的速度（參見下圖）。

一般來說，網頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標題使用較深的顏色。一些經常用到的網頁背景顏色列表，如下表所述。

此表只是起一個“拋磚引玉”的作用，大家可以發揮想象力，搭配出更有新意、更醒目的顏色，使網頁更具有吸引力。

1.4.4 色彩推移

色彩推移是按照一定規律有秩序地排列、組合色彩的一種方式。為了使畫面豐富多彩、變化有序，網頁設計師通常采用色相推移、明度推移、純度推移、互補推移、綜合推移等推移方式組合網頁色彩。

1. 色相推移

選擇一組色彩，按色相環的順序，由冷到暖或者由暖到冷進行排列、組合。可以選用純色系或者灰色系進行色相推移（見下圖）。

2. 明度推移

選擇一組色彩，按明度等差級數的順序，由淺到深或者由深到淺進行排列組合的一種明度漸變組合。一般都選用單色系列組合。也可以選用兩組色彩的明度系列按明度等差級數的順序交叉組合（見下圖）。

3. 純度推移

選擇一組色彩，按純度等差級數或者比差級數的順序，由純色到灰色或者由灰色到純色進行排列組合（見下圖）。

4. 綜合推移

選擇一組或者多組色彩，按色相、明度、純度推移進行綜合排列組合的漸變形式，由于色彩三要素的同時加入，其效果當然要比單項推移復雜、豐富得多（見下圖）。

1.5 網頁的藝術表現與風格設計

網頁設計屬于平面設計的范疇，所以網頁效果同樣包含色彩與布局這兩種元素。網頁設計雖然具有其自身的結構布局方式，但是平面設計中的構成原理和藝術表現形式也適用于網頁設計。并且當兩者成功結合時，制作的網頁才更受瀏覽者喜愛。

1.5.1 網頁形式的藝術表現

平面構成的原理已經廣泛應用于不同的設計領域，網頁設計也不例外。在設計網頁時，平面構成原理的運用能夠使網頁效果更加豐富。

1. 分割構成

在平面構成中，把整體分成部分，叫做分割。在日常生活中這種現象隨時可見，如房屋的吊現出頂、地板都構成了分割。下面介紹幾種常用的分割方法。

□ 等形分割

該分割方法要求形狀完全一樣，如果分割后再把分隔界線加以取舍，會有良好的效果（參見下圖）。

□ 自由分割

該分割方法是不規則的將畫面自由分割的方法，它不同于數學規則分割產生的整齊效果，但它的隨意性分割，給人活潑不受約束的感覺（見下圖）。

□ 比例與數列

利用比例完成的構圖通常具有秩序、明朗的特性，給人清新之感。分隔給予一定的法則，如黃金分割法、數列等（如下圖）。

2. 對稱構成

對稱具有較強的秩序感。可是僅僅居于上下、左右或者反射等幾種對稱形式，便會產生單調乏味之感。所以，在設計時要在幾種基本形式的基礎上，靈活加以應用。以下是網頁中常用的幾種基本對稱形式。

□ 左右對稱

左右對稱是平面構成中最為常見的對稱方式，該方式能夠將對立的元素平衡地放置在同一個平面中。如下圖所示，為某網站的進站首頁。該頁面通過左右對稱結構，將黑白兩種完全不同的色調融入同一個畫面。

中軸對稱布局比較簡單，所以在修飾方面也要采用簡單大方的元素（如下圖）。

□ 回轉對稱

回轉對稱構成給人一種對稱平衡的感覺，使用該方式布局網頁，打破導航菜單一貫長條制作的方法，又從美學角度使用該方法平衡頁面（如下圖）。

3. 平衡構成

在造型的時候，平衡的感覺是非常重要的，由于平衡造成的視覺滿足，使人們能夠在瀏覽網頁時產生一種平衡、安穩的感受。平衡構成一般分為兩種：一是對稱平衡，如人、蝴蝶，一些以中軸線為中心左右對稱的形狀；另一種是非對稱平衡，雖然沒有中軸線，卻有很端正的平衡美感。

□ 對稱平衡

對稱是最常見、最自然的平衡手段。在網頁中以局部或者整體彩頁對稱平衡的方式進行布局，能夠得到視覺上的平衡效果。下圖就是在網頁的中間區域采用了對稱平衡構成，使網頁保持了平穩的效果（如下圖）。

□ 非對稱平衡

非對稱其實并不是真正的“不對稱”，而是一種更高層次的“對稱”，如果把握不好頁面就會顯得亂，因此使用起來要慎重，更不可用得過濫。如下圖所示，通過左上角淺色圖案堆積與右下角深色填充的非對稱設計，形成非對稱平衡結構。

1.5.2 網頁構成的藝術表現

重復、漸變以及空間構成，這都是色彩構成的方式，它們同樣也適用于網頁。運用這些形式不僅可以使網頁具有充實、厚重、整體、穩定的視覺效果，而且能夠豐富網頁的視覺效果，尤其是空間構成的運用，能夠產生三維的空間，增強網頁的深度感以及立體感。

1. 重復構成

重復是指同一畫面上，同樣的造型重復出現的構成方式，重復無疑會加深印象，使主題得以強化，也是最富秩序的統一觀感的手法。在網站構成中使用重復，可以分成背景和圖像兩種形態出現，在背景設計中就是形狀、大小、色彩、肌理完全重復（如下圖）。

2. 漸變構成

漸變是骨骼或者基本形循序漸進的變化過程中，呈現出階段性秩序的構成形式，反映的是運動變化的規律。例如按形狀、大小、方向、位置、疏密、虛實、色彩等關系進行漸次變化排列的構成形式（如下圖）。

3. 空間構成

用戶一般所說的空間，是指的二維空間。在日常生活中用戶可以看見，物體在空間給人的感覺總是近大遠小。例如在火車站，月臺上的柱子近的高，遠的低，鐵軌是近的寬，遠的窄，用戶要對這些特性加以研究探索，分析立體形態元素之間的構成法則，提高在平面中創建三維形態的能力。

□ 平行線的方向

改變排列平行線的方向，會產生三次元的幻象。下圖為具有空間感的網頁效果。

□ 折疊表現

在平面上一個形狀折疊在另一個形狀之上，會有前有后、上下的感覺，產生空間感（如下圖）。

□ 陰影表現

陰影的區分會使物體具有立體感和凹凸感。下圖為通過陰影得到的立方體效果的網頁。

1.5.3 網頁紋理的藝術表現

紋理歸根結底是色彩。它是網頁的重要視覺特征。在網頁設計時，使用不同的紋理，配以適當的內容，能夠讓瀏覽者記憶深刻，尤其當運用牛皮紙、木紋等圖案時，使得在網頁中具有了更強的真實感。此外，發射與密集構成的圖案，能夠增強網頁的空間感，將瀏覽者的思維轉換到三維空間，充分發揮其想象力。

1. 肌理構成

肌理又稱質感，由于物體的材料不同，表面的排列、組織、構造上不同，因而產生粗糙感、光滑、軟硬感。在設計中，為達到預期的設計目的，強化心理表現和更新視覺效應，必須研究創造更新更美的視覺效果。

現代計算機、攝影和印刷技術的發展更加擴大了肌理、材質的表現性，成為現代設計的重要手段。抽象主義和其他現代藝術流派創造的各種表現技法，是藝術設計師必須研習的課題。肌理即形象表面的紋理特征，用戶可以通過多種方法創建不同的肌理。

□ 紙類肌理

各種不同的紙張，由于加工的材料不同，本身在粗細、紋理、結構上不同，或人為的折皺、揉搓產生特殊的肌理效果。

物體表面的編排樣式不僅反映其外在的造型特征，還反映其內在的材質屬性，如下圖所示，該網頁以布料肌理為背景。

□ 利用噴繪

使用噴筆、金屬網、牙刷將溶解的顏料刷下去后，顏料如霧狀地噴在紙上，也可以創造出個性的肌理。下圖所示為毛筆紋理的網頁。

□ 渲染

這種方法是在具有吸水性強的材料表面，通過液體顏料進行渲染、浸染，顏料會在表面自然散開，產生自然優美的肌理效果（如下圖）。

□ 自然界元素

現在網站設計對背景的重視程度越來越高，因為網站要給人一種整體效果。下圖為木紋與綠葉肌理形成的網頁背景。

2. 發射構成

發射的現象在自然界中廣泛存在，太陽的光芒、盛開的花朵、貝殼、螺紋和蜘蛛網等形成發射圖形。可以說發射是一種特殊的重復和漸變，其基本形和骨骼線均環繞著一個或者幾個中心。發射有強烈的視覺效果，能引起視覺上的錯覺，形成令人眩目的、有節奏的、變化不定的圖形。

□ 中心點式發射構成

該構成方式是由中心向外或由外向內集中的發射。發射圖案具有多方的對稱性，有非常強烈的焦點，而焦點易于形成視覺中心，發射能產生視覺的光效應，使所有形象有如光芒從中心向四面散射（如下圖）。

□ 螺旋式發射

它是以旋繞的排列方式進行的，旋繞的基本形逐漸擴大形成螺旋式的發射（如下圖）。

□ 同心式發射

同心式發射是以一個焦點為中心，層層環繞發射。下圖所示為同心式發射網頁背景效果。

3. 密集構成

密集在設計中是一種常用的組圖手法，基本形在整個構圖中可自由散布，有疏有密。最疏松或者最緊密的地方常常成為整個設計的視覺焦點，在畫面中造成一種視覺上的張力，像磁場一樣，具有節奏感。密集也是一種對比的情況，利用基本形數量排列的多少，產生疏密、虛實、松緊的對比效果。下圖所示為雙色圓環圖案的網頁背景。

1.5.4 網頁設計風格類型

隨著審美要求的提高，網頁視覺效果越來越被重視。由于網頁設計隸屬于平面設計，所以平面設計中的繪畫風格同樣能夠應用于網頁設計。

1. 平面風格

平面風格是通過色塊或者位圖等元素形成二維的效果，這種效果最常出現在網頁設計中（見下圖）。

2. 矢量風格

矢量風格的網頁是通過矢量圖像組合而成，這種風格的網頁圖像效果可以任意地放大與縮小，而不會影響查看效果，所以經常應用于動畫網站中（如下圖）。

3. px風格

px畫也屬于點陣式圖像，但它是一種圖標風格的圖像，更強調清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，所以常常采用.gif格式，同時它的造型比較卡通，得到很多朋友的喜愛。下圖所示的網頁，就是采用了px畫與真實人物結合的方式制作而成的。

4. 三維風格

三維是指在平面二維系中又加入了一個方向向量構成的空間系。三維風格中的三維空間效果，在網頁中的運用，能夠使其效果無限延伸（如下圖）。

而三維風格中的三維對象在網頁中的應用，則能夠在顯示立體空間的同時，突出其主題（如下圖）。