- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6 網頁設計實用教程
- 張志科
- 2725字
- 2020-09-02 15:55:32
1.4 網頁色彩搭配的介紹
在網頁中合理地應用色彩是非常關鍵的,不同的色彩搭配會產生不同的效果,并能夠影響瀏覽者的情緒。
1.4.1 網頁配色基礎
色彩在人類的生活中都是有豐富的感情和含義的,常見顏色的代表意義如下。
● 紅色使人聯想到玫瑰、喜慶及興奮。
● 白色使人聯想到純潔、干凈和簡潔。
● 紫色象征著女性化、高雅和浪漫。
● 藍色象征著高科技、穩重和理智。
● 橙色代表了歡快、甜美和收獲。
● 綠色代表了充滿青春的活力、舒適和希望等。
當然,在特定的場合下,同種色彩也可以代表不同的含義。在網頁中更要合理使用色彩,一個網站不可能單一地運用一種顏色,這樣容易讓瀏覽者感覺單調、乏味。但是也不可能將所有的顏色都運用到網站中,會讓瀏覽者感覺輕浮、花哨。一個網站必須有一種或兩種主題色,一個頁面盡量不要超過4種色彩,用太多的色彩會讓瀏覽者感到沒有方向,沒有側重。當主題色確定好以后,考慮其他配色時,一定要考慮其他配色與主題色的關系,以體現出想要的效果為原則進行搭配。
如圖1-23所示,Logo的右邊是一個紅色的板塊以及紅色的導航欄,廣告區文字也以紅色為主調,顯示出了開心網的喜慶與令用戶興奮的主題。

圖1-23
技巧與提示
在企業網頁中可以使用金屬色,以顯示出企業的穩健與霸氣。
1.4.2 網頁常見的配色方案
網頁顏色搭配的好壞會直接影響到瀏覽者的潛在思維,不好的色彩搭配會讓瀏覽者浮躁以至于失去耐心,好的色彩搭配則會給訪問者帶來很強的視覺沖擊力、提升對企業的好感。網站建設中常見的網頁配色方案介紹如下。
技巧與提示
要說色彩的運用,應先了解黑白灰色彩的應用,因為黑白灰色彩是萬能色,可以跟任意一種色彩搭配。當用戶為某種色彩的搭配苦惱的時候,不妨試試用黑白灰。當覺得兩種色彩的搭配不協調,試試加入黑色或者灰色,或許會有意想不到的效果。
1.同種色彩搭配
同種色彩搭配是指首先選定一種色彩,然后調整透明度或飽和度,將色彩變淡或加深,產生新的色彩。這樣的頁面看起來色彩統一,有層次感,如圖1-24所示。

圖1-24
2.臨近色彩搭配
臨近色是色環上給定顏色臨近的任何一種顏色,如綠色和藍色、紅色和黃色就互為臨近色。采用臨近色可以使網頁避免色彩過于雜亂,易于達到頁面的和諧統一,如圖1-25所示。

圖1-25
3.暖色色彩搭配
暖色色彩搭配是指紅色、橙色、黃色以及褐色等色彩的搭配,運用這種色調,可使網頁呈現溫馨、和諧以及熱情的氛圍,如圖1-26所示。

圖1-26
4.冷色色彩搭配
冷色色彩搭配是指使用綠、藍和紫色等色彩進行的搭配。這種色彩搭配,可使網頁呈現寧靜、清涼以及高雅的氛圍。冷色調與白色搭配一般會獲得較好的效果,如圖1-27所示。

圖1-27
5.有主色的混合色彩搭配
有主色的混合色彩搭配是指以一種顏色作為主要顏色,同時輔以其他色彩混合搭配,形成繽紛但卻不雜亂的搭配效果,如圖1-28所示。

圖1-28
一個網站不可能單一地運用一種顏色,這樣會讓人感覺單調和乏味,但是也不可能將所有的顏色都運用到網站中,這樣會讓人感覺輕浮和花哨。一個網站必須有一種或兩種主題色,不至于讓客戶迷失方向,也不至于單調,乏味,所以確定網站的主題色也是設計者必須考慮的問題之一。
網站建設中一個頁面盡量不要使用超過4種色彩,用太多的色彩會讓人沒有方向,沒有側重。當主題色確定好以后,考慮其他配色時,一定要考慮其他配色與主題色的關系,要體現什么樣的效果。另外,分清楚哪種因素占主要地位,是明度、純度還是色相。
技巧與提示
對一些明度較高的網站,配以黑色可以適當地降低其明度。白色是網站用得最普遍的一種顏色,很多網站甚至留出大塊的白色空間,作為網站的一個組成部分,這就是留白藝術。留白,給人一個遐想的空間,恰當的留白對于協調頁面的均衡起到相當大的作用。很多設計性網站較多地運用了留白藝術。
1.4.3 網頁色彩搭配的技巧
對于做網頁的初學者來說可能更習慣使用一些漂亮的圖片作為自己網頁的背景,但是瀏覽一下大型的商業網站就會發現,它們更多運用的是白色、藍色和黃色等,使得網頁顯得典雅、大方和溫馨。更重要的是,這樣可以大大加快用戶打開網頁的速度。
下面介紹幾種網頁中常用的顏色。
● BgcolorK″#F1FAFA″—適合做正文的背景色,淡雅。
● BgcolorK″#E8FFE8″—適合做標題的背景色。
● BgcolorK″#E8E8FF″—適合做正文的背景色,文字顏色配黑色。
● BgcolorK″#8080C0″—上面可配黃色或白色文字。
● BgcolorK″#E8D098″—上面可配淺藍色或藍色文字。
● BgcolorK″#EFEFDA″—上面可配淺藍色或紅色文字。
● BgcolorK″#F2F1D7″—適合配黑色文字,顯得素雅,如果配紅色則顯得醒目。
● BgcolorK″#336699″—適合配白色文字。
● BgcolorK″#6699CC″—適合配白色文字,可以做標題。
● BgcolorK″#66CCCC″—適合配白色文字,可以做標題。
● BgcolorK″#B45B3E″—適合配白色文字,可以做標題。
● BgcolorK″#479AC7″—適合配白色文字,可以做標題。
● BgcolorK″#00B271″—適合配白色文字,可以做標題。
● BgcolorK″#FBFBEA″—適合配黑色文字,一般作為正文。
● BgcolorK″#D5F3F4″—適合配黑色文字,一般作為正文。
● BgcolorK″#D7FFF0″—適合配黑色文字,一般作為正文。
● BgcolorK″#F0DAD2″—適合配黑色文字,一般作為正文。
● BgcolorK″#DDF3FF″—適合配黑色文字,一般作為正文。
一般來說,網頁的背景色應該柔和一些、素一些以及淡一些,再配上深色的文字,使人看起來自然和舒暢。而為了追求醒目的視覺效果,可以將標題設為較深的顏色。
圖1-29所示為人人網首頁,采用了淺藍色和灰白的混合搭配。

圖1-29
技巧與提示
下面列出的是一些典型的顏色搭配實例。
淺綠色底配黑色文字,或白色底配藍色文字都很醒目,但前者突出背景,后者突出文字。
紅色底配白色文字,比較深的底色配黃色文字顯得非常有效果。
人的視覺對色彩最為敏感。主頁的色彩處理得好,可以錦上添花,達到事半功倍的效果。
色彩總的應用原則應該是“總體協調,局部對比”,也就是:主頁的整體色彩效果應該是和諧的,只有局部的、小范圍的地方可以有一些強烈色彩的對比。
1.4.4 網頁色彩的注意事項
合理地使用色彩是樹立網站形象的關鍵之一,而如何搭配色彩卻是設計者們感到頭疼的問題。
網頁的背景、文字、圖標、邊框以及超鏈接等,應該采用什么樣的色彩,應該搭配什么色彩才能最好地表達出預想的內涵呢?
搭配網頁色彩時,要注意以下事項。
● 色彩的鮮明性。網頁的色彩要鮮艷,容易引人注目,如圖1-30所示。

圖1-30
● 色彩的獨特性。要有與眾不同的色彩,使得用戶對網頁的印象強烈。如圖1-31所示。

圖1-31
● 色彩的合適性。就是說色彩和設計者表達的內容氣氛相適合。圖1-32所示為世紀佳緣的首頁,使用粉色體現了女性站點的柔美。

圖1-32
● 色彩的聯想性。不同色彩會使人產生不同的聯想,藍色想到天空,黑色想到黑夜,紅色想到喜事等,選擇的色彩要和網頁的內涵是相關聯的。
技巧與提示
專業研究機構的研究表明:彩色的記憶效果是黑白的3.5倍。也就是說,在一般情況下,彩色頁面較完全的黑白頁面更加吸引人。因此,網頁色彩使用的通常做法是:主要內容文字用非彩色(黑色),邊框、背景以及圖片用彩色,這樣頁面整體不單調,看主要內容時也不會眼花。
- Photoshop電商網頁廣告設計實戰從入門到精通(超值版)
- jQuery+Bootstrap Web開發案例教程(在線實訓版)
- 網頁設計與制作:HTML+CSS+JavaScript標準教程
- CSS+DIV網頁樣式與布局案例指導
- HTML5+CSS3網頁制作基礎培訓教程
- HTML5+CSS3網頁設計與制作基礎教程
- jQuery Web開發案例教程(在線實訓版)
- 速學速通:快學Flash動畫制作
- 速學速通:快學Flash網頁動畫
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計基礎培訓教程
- 巧學巧用Dreamweaver CS6制作網頁
- 寬帶接入技術
- Web綜合實戰教程