劉　乾

[摘要]色彩的合理搭配在網(wǎng)站設計中起著非常關鍵的作用,很多網(wǎng)站以其成功的色彩搭配令人過目不忘。色彩作為網(wǎng)站設計的第一視覺要素,有持久的藝術魅力,備受設計師的重視。對于網(wǎng)站設計者來說,怎樣駕馭好網(wǎng)頁的顏色搭配,是一個有待于研究的課題。介紹網(wǎng)站色彩的理論知識,著重論述網(wǎng)站設計中色彩搭配應該注意的幾個問題。

[關鍵詞]設計色彩網(wǎng)站

中圖分類號:TP3文獻標識碼:A文章編號:1671-7597(2009)0710111-02

隨著時代的進步,科學的發(fā)展,人們對美的追求逐步提高,色彩則是組成美的重要因素。掌握色彩的藝術規(guī)律和自然規(guī)律,最終體現(xiàn)在作品中的色彩關系,應該是科學與藝術完美的結合。對于網(wǎng)站來說,頁面中刺激記憶最初、最持久的元素就是色彩搭配。網(wǎng)頁的背景、文字、圖標、邊框、超鏈接……應該采用什么樣的色彩,如何進行搭配,才能最好地表達出預想的內涵,這都是我們要面對的新課題。事實上運用色彩、進行色彩搭配幾乎是大部分設計師感到最棘手的問題,筆者將根據(jù)多年來的平面設計和網(wǎng)站設計經(jīng)驗,來闡述色彩及搭配中的相關問題。

一、有關網(wǎng)站色彩的理論知識

(一)基于web網(wǎng)頁安全色的應用

web網(wǎng)頁安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合(調色板),也就是說這些顏色在任何終端瀏覽用戶顯示設備上的現(xiàn)實效果都是相同的。使用216網(wǎng)頁安全色進行網(wǎng)頁配色可以避免原有的顏色失真問題。這對于一個網(wǎng)頁設計師來說是必備的常識,利用它可以擬定出更安全、更出色的網(wǎng)頁配色方案?；趙eb應用的顏色可以用16進制的數(shù)值進行描述,例如標準的紅色可以描述為#FF0000。

(二)色彩的三原色

人眼所見的各種色彩是因為光線有不同波長所造成的,經(jīng)過實驗發(fā)現(xiàn),人類肉眼對其中三種波長的感受特別強烈,只要適當調整這三種光線的強度,就可以讓人類感受到幾乎所有的顏色?，F(xiàn)實中的三原色為紅黃藍,但是網(wǎng)站色彩和現(xiàn)實生活中的色彩還是有區(qū)別的,電腦屏幕的三原色是紅(red),綠(green),藍(blue)。網(wǎng)頁設計中的所有顏色均可用紅綠藍三種顏色調和而成,因此計算機里頭就用RGB三個數(shù)值的大小來標示顏色。例如標準的紅色可以用R:255、G:0、B:0表示。

(三)色彩的三要素

自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬于彩色。任何一種彩色都具有明度、色相和彩度三大屬性。

1.色相

色相,指色彩的基本相貌,它是顏色彼此區(qū)別的最主要、最基本的特征。色相體現(xiàn)著色彩外向的性格,是色彩的靈魂。同類顏色色系中,也可以分為幾種色相,其中的紅色可以分為橘紅、大紅、土紅等,綠色系列則可以分為粉綠、淡綠、翠綠等。

2.明度

明度指色彩的明暗程度,也可稱色彩的亮度、深淺度。明度層次一般分為:低明度色、中明度色、高明度色。明度關系可以說是色彩搭配的基礎。如果在設計中掌握好色相的明度,就能形成一種雅致、和諧、柔和、耐看的視覺效果。

3.彩度

彩度是指色彩的鮮艷程度,即飽和度。彩度越高,色相感越強。任何一個色彩加白、加黑、加灰都會降低它的彩度。

(四)色彩的冷暖

在網(wǎng)站設計中,對冷色與暖色的把握是很重要的。冷暖是依據(jù)心理感覺,對色彩的物理性進行分類的結果。在色環(huán)中,紅、橙、黃屬于暖色,綠、紫、藍屬于冷色。暖色能給人一種溫暖的、有激情的感覺,是一種能激勵人、使人興奮的色彩、暖色是前進色;冷色能給人一種平靜的、寒冷的、清爽的感覺,冷色是后褪色。網(wǎng)站色彩的基調很多,冷色調與暖色調都是經(jīng)常用到的。例如,在設計喜慶、體育、喜事等內容的網(wǎng)站時,可以考慮采用情緒興奮沖動的暖色調,以便達到我們的視覺傳達效果。

色彩中的冷暖并不是絕對的,而是相對的。色彩的冷暖是在畫面上比較出來的,有時黃顏色對于紫色是暖顏色,而它和朱紅相比,又成了偏冷的色。在設計色彩時,一定要靈活運用冷暖變化規(guī)律,而不是機械、簡單地套用一些模式。

二、網(wǎng)站色彩的情感象征

江淹《別賦》云:“春草碧色,春水綠波。送君南浦,傷如之何?！边@春草的“碧”和春水的“綠”,成了詩人借以表現(xiàn)離情別緒的景色,明顯地帶有凄婉和感傷的味道。這種景色描繪,實際上就是詩人和作家主觀上的感受和心目中的印象。既是事物的客觀現(xiàn)實的色彩,同時又是主觀情感化了的色彩。色彩具有不同的情感特征,色彩運用最終的目的是表達和傳遞感情。設計網(wǎng)站色彩,除注意色彩的科學性之外,應充分認識色彩的感情作用,即對色彩的反映。色相的一般特性為:

此外也和人的年齡、性格、素養(yǎng)、民族、習慣分不開。人們對色彩的這種由經(jīng)驗感覺到主觀聯(lián)想,再上升到理智的判斷,既有普遍性,也有特殊性;既有共性,也有個性;既有必然性,也有偶然性。因此,我們在進行選擇色彩作為某種象征和含義時,應該根據(jù)具體情況具體分析,需要反復推敲、慘淡經(jīng)營,才能配出好的色彩關系。

三、網(wǎng)站色彩的搭配

色彩的合理搭配在網(wǎng)站設計中起著非常關鍵的作用,很多網(wǎng)站以其成功的色彩搭配令人過目不忘。對于網(wǎng)站設計者來說,怎樣駕馭好網(wǎng)頁的顏色搭配,是一個有待于研究的課題。

(一)無彩色和彩色搭配

無彩色與彩色進行搭配是常用的配色形式。網(wǎng)站采用多種不同色相時,或畫面中含有過于強烈的對比色彩時,都可以加入黑色進行調和。黑色可以穩(wěn)住跳躍的色彩,使畫面和諧,利于達到統(tǒng)一的視覺效果,同時黑色給人以穩(wěn)重的心理感覺,常與其他的色彩搭配。在網(wǎng)頁上,白色和灰色常用來做背景色,它們明視度低,對視覺沒有刺激,適合閱讀。白與灰可以諧調各種色彩關系,分割色彩,使對比弱化,使網(wǎng)站整體色彩在視覺上達到統(tǒng)一。

(二)特色鮮明

網(wǎng)站設計的色彩運用,必須要有自身獨特的風格,使網(wǎng)站個性鮮明,才能給用戶留下深刻的印象,在眾多的網(wǎng)站中脫穎而出。在Microsoft.com

頁面中,只采用了一種色相藍色。在色彩表現(xiàn)上采取了多種漸變手法,鋪墊到信息格局的背景里,在頁面頂部增加層次感。如果用多種色相調配著一起使用,對于那些健康類、兒童類、游戲類等網(wǎng)站比較適合,但對于Microsoft.com這樣的想要表達出“一種聲音”的網(wǎng)站來說,單一色相可以給人一種清晰悅目的感覺,整潔、統(tǒng)一反而會加深印象,給人留下深刻的感受。所以,在網(wǎng)站用色上不能千篇一律,跟著感覺走,要有自己的特色。

(三)確立網(wǎng)站的主色、輔助色、背景色

確立網(wǎng)站色調的過程:1.決定主色;2.選擇輔助色;3.選擇背景色。

主色是指頁面中相對較大面積使用的色彩,反映著整個網(wǎng)頁的風格。主色的視覺形象是靠協(xié)調的色彩來體現(xiàn),色彩的搭配不僅體現(xiàn)著美學的訴求,而且是一種可以強化的識別信號。所以,主色一經(jīng)確定,要保持一定的穩(wěn)定性,用這種色彩來幫助受眾對網(wǎng)站的識別。比如說可口可樂公司網(wǎng)站主色采用紅色調,配以灰色來襯托,取得了很好的視覺效果。不但感覺和諧,而且非常時尚,傳遞著熱烈、激動、健康時尚的信息。對于識別和強化網(wǎng)站的產(chǎn)品信息起了很大的作用。再如有關藥業(yè)題材的網(wǎng)站,主色可以采用綠色,因為綠色帶有環(huán)保的意義,使網(wǎng)站看起來很有親和力。

輔助色是指頁面中相對較小面積使用的色彩。它是主色的襯托,在小范圍內使用能起到突出主題,融合主色效果的輔助作用,使頁面更加鮮明生動。通常應用于圖標、文字、表格、線條、輸入框及超鏈接等?？煽诳蓸饭揪W(wǎng)站主色采用紅色,輔助色采用藍色、紫色、黑色。索尼公司的網(wǎng)站主色采用深灰色,輔助色采用黑色、藍色、銀灰色,具有很強的科技感和現(xiàn)代感;局部少量純色的運用,為網(wǎng)站增添了時尚感。

背景色是網(wǎng)頁的底色,有時和主色是同一色彩,環(huán)抱整體色調,起到協(xié)調、支配整體的作用。設計背景色時,要考慮頁面底色的深、淺。底色淺的稱為高調;底色深的稱為低調。底色深,文字的顏色就要淺,以深色的背景襯托淺色的內容(文字或圖片);反之,底色淡的,文字的顏色就要深些,以淺色的背景襯托深色的內容(文字或圖片)。有些頁面,底色是黑的,但文字也選用了較深的色彩,由于色彩的明度比較接近,讀者在閱覽時,眼睛就會感覺很吃力,影響了閱讀效果。我們常常遇到的問題其實主要是背景顏色和字體顏色的搭配問題:達到既不顯得呆板,又不至于過于亮麗而造成過強刺激的視覺效果。

(四)要針對不同的主題來布置色彩

網(wǎng)站色彩的運用還要根據(jù)主題和內容來定。制作一個網(wǎng)站,如果把所有精彩的色彩都放在上面,那么往往會事與愿違,給人的感覺是沒有主題。確定了主題之后,要選擇一種適合主題內容的色調作為主色,來表現(xiàn)網(wǎng)站的內容。如果選擇的色彩不適合主題內容,就會起到事倍功半的效果。舉例來說,一個有關于環(huán)保的網(wǎng)站,若用大紅色作為網(wǎng)頁底色,不會有人聯(lián)想到網(wǎng)頁的內容是與環(huán)保有關。而快餐店采用大紅色就比較適合現(xiàn)代的生活節(jié)奏,用色彩來吸引顧客,攬招顧客的回頭率,這是設計師用色彩與受眾進行心理溝通的方式。同樣的道理,做新聞類的網(wǎng)站就要考慮到受眾瀏覽網(wǎng)站的目的是攝入大量的信息,所以可用較為強烈的色彩組合,這樣就能使讀者快速的攝入信息,感受到信息的高速傳遞。把握好用色的技巧,是網(wǎng)頁設計成功的一個方面。

當然,每個人的審美觀不同,可能也會對顏色的代表性看法不同,但既然網(wǎng)站不只是寫給某個人看的,就應該要顧及大多數(shù)人的審美取向和審美情趣,從大多數(shù)人的欣賞眼光出發(fā)來設計網(wǎng)頁。網(wǎng)站的種類很多:企業(yè)的、新聞的、政府組織、體育組織、文化組織、個人主頁等等,不同內容的網(wǎng)頁在用色時有較大的區(qū)別,作為網(wǎng)頁設計師,做到有針對性的用色是相當重要的,合理地使用色彩,把握色彩的情感象征以體現(xiàn)網(wǎng)站的主題及特色。

(五)網(wǎng)站中的“靜態(tài)色彩”與“動態(tài)色彩”

靜態(tài)色彩主要是結構色彩、背景色彩和表格色彩等帶有特殊識別意義、決定網(wǎng)站色彩風格的色彩。打開網(wǎng)站時,給人的第一印象就是網(wǎng)頁的框架色彩。如新浪網(wǎng)結構框架中的黃色。

動態(tài)色彩主要是插圖、照片、廣告等復雜圖像和swf動畫中帶有的色彩,對于動態(tài)網(wǎng)站更新后,動態(tài)色彩就“消失”了。兩種色彩各有用途,相互影響、相互協(xié)作。無論強調哪一種色彩,都要相應地處理好對比、調和等關系,才能使網(wǎng)站頁面色彩達到統(tǒng)一和諧的視覺效果。

(六)講究網(wǎng)站色彩的藝術性

凡經(jīng)過設計的色彩都具有某種程度的藝術性,既符合實用要求,又符合美學原則,給人以美感,是對其藝術性的基本要求。一般來說,藝術性強的色彩更能吸引和感染人,給人以強烈和深刻的印象。網(wǎng)站色彩設計要遵循藝術設計的一般常規(guī)規(guī)律,這就要求設計師根據(jù)內容,要大膽的進行藝術創(chuàng)新,設計出高水平的藝術風格網(wǎng)站。

(七)注重網(wǎng)站色彩的平衡與整體規(guī)化

色彩的平衡主要表現(xiàn)在色彩的面積、色彩的位置、文字信息的排版和頁面的其他元素的協(xié)調。網(wǎng)站所有頁面的風格,色彩調子和色彩搭配都要保持一致。網(wǎng)站整體的色彩設計要有計劃性,是設計師先理智后感性的思維過程。

四、結束語

互聯(lián)網(wǎng)已成為人們生活中不可缺少的工具,頁面設計日益被人們重視,在如此復雜的色彩環(huán)境中,我們對色彩要予以更多地關注,培育出豐富的、有規(guī)律的色彩文化。設計師不僅要具備網(wǎng)站制作的技術,還要具有很好的信息結構,對色彩的駕馭能力,這需要不斷地思考、感受和實踐。

參考文獻:

[1]梁景紅,網(wǎng)站設計與網(wǎng)頁配色實例精講[M].北京:人民郵電出版社,2004.

[2]郭永燦、孟凡奇、王軍,網(wǎng)頁美工設計[M].上海:上海交通大學出版社,2005.

[3]解勇,網(wǎng)頁設計視覺形態(tài)[M].沈陽:遼寧美術出版社,2004.

[4]顧群業(yè),網(wǎng)頁配色密碼[M].北京:清華大學出版社,2006.

作者簡介:

劉乾(1981-),男,山東濟寧人,從事裝飾藝術設計專業(yè)教學。