淺談網頁設計中的基本要素

【摘要】：網頁設計中總是由具有某種內在聯系的各種色彩，組成一個完整統一的整體，形成畫面色彩總的趨向，稱為色調，也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。

【關鍵詞】：網頁設計；色調；對比調和

1 RGB與HSB

在實用美術中，常有\"遠看色彩近看花，先看顏色后看花，七分顏色三分花\"的說法。這也說明，在任何設計中，色彩對視覺的刺激起到第一信息傳達的作用。因此，對色彩的基礎知識的良好掌控，在網頁設計中才能做到游刃有余。為了使下面的網頁配色分析更易于理解，我們先來了解色彩的RGB模式和HSB模式。

RGB是表示紅色綠色藍色又稱為三原色光，英文為R（Red）、G（Green）、B（Blue），在計算機中，RGB的所謂\"多少\"就是指亮度，并使用整數來表示。

通常情況下，RGB各有256級亮度，用數字表示為從0、1、2至255。雖然數字最高是255，但0也是數值之一，因此共256級。按照計算，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色（2的24次方）。對于單獨的R或G或B而言，當數值為0時，代表這種顏色不發光；如果為255，則該顏色為最高亮度。RGB模式是顯示器的物理色彩模式。這就意味著無論在軟件中使用何種色彩模式，只要是在顯示器上顯示的，圖像最終就是以RGB方式出現。

HSB是顏色分為色相、飽和度、明度三個因素。英文為H（Hue）、S（Saturation）B（Brightness）飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低

2 無處不在的“調子”

網頁頁面中總是由具有某種內在聯系的各種色彩，組成一個完整統一的整體，形成畫面色彩總的趨向，稱為色調。也可以理解為色彩狀態。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的把握其規律來更好的分析學習，我們把視覺角色主次位置分為如下幾個概念，以便在網頁設計配色時更輕易操縱主動權。

2.1 主色調

頁面色彩的主要色調、總趨勢，其他配色不能超過該主要色調的視覺面積。（背景白色不一定根據視覺面積決定，可以根據頁面的感覺需要。）

2.2 輔色調

僅次與主色調的視覺面積的輔助色，是烘托主色調、支持主色調、起到融合主色調效果的輔助色調。

2.3 點睛色

在小范圍內點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。

2.4 背景色

襯托環抱整體的色調，協調、支配整體的作用。

一個頁面的色彩角色主要是根據其面積多少的來區別主次關系、達到最終目的的。當不同的顏色使用的面積相當，這個頁面輕易呈現枯燥單調之感，而沒有局部細節的變化。當一個頁面使用的顏色過多、面積大小用得過于瑣碎，這個頁面輕易呈現花哨、主次不分沒有整體的感覺。為頁面設計配色的時候，應根據主題內容主次需要，各顏色有其各自的功能角色--面積使用最多的、最少的、不多不少的，加上冷暖的適度安排，純度明度的合理變化，遵循這條原則，網頁配色定能得心應手。

3大于“一”的對比與調和

在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環境下，多色彩給人一種印象，色彩單一給人另一種印象。各種純色的對比會產生鮮明的色彩效果，很輕易給人帶來視覺與心理的滿足。紅、黃、藍三種顏色是最極端的色彩，它們之間對比，哪一種顏色也無法影響對方。很多朋友都以為色彩對比主要是紅綠、橙藍、黃紫色的對比，實際色彩對比范疇不局限于這些。是指各種色彩的界面構成中的面積、外形、位置以及色相、明度、純度之間的差別，使網頁色彩配合增添了許多變化、頁面更加豐富多彩。

3.1 色相對比

是指因色相之間的差別形成的對比。當主色相確定后，必須考慮其他色彩與主色相是什么關系，要表現什么內容及效果等，這樣才能增強其表現力。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。越接近補色，對比效果越強烈。

3.2 明度對比

明度對比可分為：彩色差的明度對比及非彩色差的明度對比，是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當的黑、白、灰效果的主要手段。明度對比在視覺上對色彩層次和空間關系影響較大。例如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。

3.3 純度對比

是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經調和過的原色純度是最高的，而間色多屬中純度的色彩，復色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。

3.4 補色對比

將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色對比。

3.5 冷暖對比

是指不同色彩之間的冷暖差別形成的對比。色彩分為冷、暖兩大色系，以紅、橙、黃為暖色體系，藍、綠、紫則代表著冷色系，兩者基本上互為補色關系。另外，色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。

3.6 純度調和

降低冷暖兩色純度。用明度黑、白、灰變化來調整畫面的層次、直接使用黑、白、灰色系進入畫面搭配，或者加入補色的諧調，也都能很好的起到協調的效果。

3.7 面積調和

主次的面積區分。根據設計主題的需要，在畫面的面積上以一方為主色，于是就掌控畫面的色調作用，其他的顏色在使用面積上拉開距離，使畫面的主次關系更突出，在統一的同時富有變化。

4結語

為了使網頁的整體畫面呈現穩定協調的感覺，以便充分的把握其規律來更好的分析學習，我們必須掌握網頁設計中色彩的應用的基本原則，而對網頁中色彩的研究會隨著技術的改變和提高而產生相對的變化，我們對它的研究與討論也一直在“路上”步步前行。

參考文獻：

[1] 王娜. Dreamweaver 網頁制作與色彩搭配全攻略[M]. 北京：清華大學出版社，2007

[2] 陳超華. 網站策劃與設計[M]. 北京：北京郵電大學出版社，2015