試論色彩在網站設計中的運用

劉　乾

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

[關鍵詞]設計色彩網站

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

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

一、有關網站色彩的理論知識

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

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

(二)色彩的三原色

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

(三)色彩的三要素

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

1.色相

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

2.明度

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

3.彩度

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

(四)色彩的冷暖

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

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

二、網站色彩的情感象征

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

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

三、網站色彩的搭配

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

(一)無彩色和彩色搭配

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

(二)特色鮮明

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

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

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

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

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

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

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

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

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

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

(五)網站中的“靜態色彩”與“動態色彩”

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

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

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

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

(七)注重網站色彩的平衡與整體規化

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

四、結束語

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

參考文獻:

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

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

[3]解勇,網頁設計視覺形態[M].沈陽:遼寧美術出版社,2004.

[4]顧群業,網頁配色密碼[M].北京:清華大學出版社,2006.

作者簡介:

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