淺談網(wǎng)頁設(shè)計中的基本要素

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

【關(guān)鍵詞】：網(wǎng)頁設(shè)計；色調(diào)；對比調(diào)和

1 RGB與HSB

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

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

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

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

2 無處不在的“調(diào)子”

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

2.1 主色調(diào)

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

2.2 輔色調(diào)

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

2.3 點睛色

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

2.4 背景色

襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。

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

3大于“一”的對比與調(diào)和

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

3.1 色相對比

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

3.2 明度對比

明度對比可分為：彩色差的明度對比及非彩色差的明度對比，是指色彩之間明暗程度的差別而形成的對比。是頁面形成恰當?shù)暮凇住⒒倚Ч闹饕侄巍Ｃ鞫葘Ρ仍谝曈X上對色彩層次和空間關(guān)系影響較大。例如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。

3.3 純度對比

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

3.4 補色對比

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

3.5 冷暖對比

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

3.6 純度調(diào)和

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

3.7 面積調(diào)和

主次的面積區(qū)分。根據(jù)設(shè)計主題的需要，在畫面的面積上以一方為主色，于是就掌控畫面的色調(diào)作用，其他的顏色在使用面積上拉開距離，使畫面的主次關(guān)系更突出，在統(tǒng)一的同時富有變化。

4結(jié)語

為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺，以便充分的把握其規(guī)律來更好的分析學(xué)習(xí)，我們必須掌握網(wǎng)頁設(shè)計中色彩的應(yīng)用的基本原則，而對網(wǎng)頁中色彩的研究會隨著技術(shù)的改變和提高而產(chǎn)生相對的變化，我們對它的研究與討論也一直在“路上”步步前行。

參考文獻：

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

[2] 陳超華. 網(wǎng)站策劃與設(shè)計[M]. 北京：北京郵電大學(xué)出版社，2015