第四章第4章網頁配色第一章

網頁設計作為一門新興學科，其色彩風格的審美情趣必然帶有鮮明的時代特征。隨著時代的變遷，適應新時代的設計思想也隨著變化，優秀的設計師應緊跟時代潮流，敏銳地觸摸到色彩的審美變化和對色彩感情的影響，從而確立網頁獨具個性的色彩風格。色彩是人們常見的事物，但是仔細的問起來又是很難講明白的一件事情。因為色彩既是一門藝術，也是一門科學。4.1.1.何為色彩

色彩并不是物體本身固有的，物體的顏色是物體本身吸收和反射光波的結果。色彩與光有著極為密切的聯系，同時又影響到人們的直覺。4.1認識色彩第四章物體表面色彩的形成取決于三個方面：光源的照射、物體本身反射一定的色光、環境與空間對物體色彩的影響。光源色：由各種光源發出的光，光波的長短、強弱、比例性質的不同形成了不同的色光，稱為光源色。物體色：物體色本身不發光，它是光源色經過物體的吸收反射，反映到視覺中的光色感覺，通常把這些本身不發光的色彩統稱為物體色。4.1.2.色彩三要素

色彩的三要素也稱之為色彩三屬性，是指任何一種色彩同時含有的三種屬性，即色相、明度和純度.1.色相(Hue)

又叫色名（Hue，簡稱為Ｈ；或譯為色相）是區分色彩的名稱，也就是色彩的名字，就如同人的姓名一般，用來辨別不同的人。除了黑白灰以外的色彩都有色相的屬性。2.明度(Value)

明度（Value簡稱Ｖ）指顏色的亮度。光線強時，感覺比較亮，光線弱時感覺比較暗，色彩的明暗強度就是所謂的明度，明度高是指色彩較明亮，而相對的明度低，就是色彩較灰暗。第四章3.純度(Chroma)又叫彩度（Chroma，簡稱Ｃ）是指色彩的純度，通常以某彩色的純度所占的比例，來分辨彩度的高低，純色比例高為彩度高，純色比例低為彩度低，在色彩鮮艷狀況下，通常很容易感覺高彩度，但有時不易作出正確的判斷，因為容易受到明度得影響，譬如人們最容易誤會的是，黑白灰是屬於無彩度的，他們只有明度。4.1.3色彩對比

兩種以上的色彩，以空間或時間關系相比較，表現出明顯的差別，并產生比較作用，被稱為色彩對比。

1.色相對比即因色相之間的差別形成對比。當主色相確定后，必須考慮其他色彩與主色相是什么關系，要表現什么內容及效果等，這樣才能增強其表現力。2.明度對比因明度之間的差別形成的對比。（檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度）。第四章將相同的色彩，放在黑色和白色上，比較色彩的感覺，會發現黑色上的色彩感覺比較亮，放在白色上的色彩感覺比較暗，明暗的對比效果非常強烈明顯。如右圖所示黑白底色上的文字與色條線條對比；如圖下所示，就是運用明度對比的網頁。第四章3.純度對比一種顏色與另一種更鮮艷的顏色相比時，會感覺不太鮮明，但與不鮮艷的顏色相比時，則顯得鮮明，這種色彩的對比便稱為純度對比。如左圖所示，中間的色塊比左邊色塊純度高同時又比右邊色塊純度低。如右圖所示，運用純度對比的網頁效果。

4.補色對比將紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色對比。如圖所示，運用補色對比的網頁效果。

第四章

5.冷暖對比

由于色彩感覺的冷暖差別而形成的色彩對比，稱為冷暖對比。（紅、橙、黃使人感覺溫暖；藍、藍綠、藍紫使人感覺寒冷；綠與紫介于其間），另外，色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。如圖所示，運用冷暖對比的網頁效果。

第四章

4.1.4色調的變化色調傾向大致可歸納成鮮色調、灰色調、淺色調、深色調、中色調等。1．鮮色調在確定色相對比的角度、距離后，尤其是中差（90度）以上的對比時，必須與無彩色的黑、白、灰及金、銀等光澤色相配，在高純度、強對比的各色相之間起到間隔、緩沖、調節的作用，以達到既鮮艷又真實、既變化又統一的積極效果。感覺生動、華麗、興奮、自由、積極、健康等（左圖）。2．灰色調在確定色相對比的角度、距離后，于各色相之中調入不同程度、不等數量的灰色，使大面積的總體色彩向低純度方向發展，為了加強這種灰色調傾向，最好與無彩色特別是灰色組配使用。感覺高雅、大方、沉著、古樸、柔弱等（右圖）。

第四章

3．深色調在確定色相對比的角度、距離時，首先考慮多選用些低明度色相，如藍、紫、藍綠、藍紫、紅紫等，然后在各色相之中調入不等數量的黑色或深色，同時為了加強這種深色傾向，最好與無彩色中的黑色組配使用，感覺老練、充實、古雅、樸實、強硬、穩重、男性化等（上圖）。4．淺色調在確定色相對比的角度、距離時，首先考慮多選用些高明度色相，如黃、桔、桔黃、黃綠等，然后在各色相之中調入不等數量的白色或淺灰色，同時為了加強這種粉色調傾向，最好與無彩色中的白色組配使用（下圖）第四章

5．中色調

中色調是一種使用最普遍、數量最眾多的配色傾向，在確定色相對比的角度、距離后，于各色相中都加入一定數量黑、白、灰色，使大面積的總體色彩呈現不太淺也不太深，不太鮮也不太灰的中間狀態。感覺隨和、樸實、大方、穩定等（上圖）。

在優化或變化整體色調時，最主要的是先確立基調色的面積占優勢。一幅多色組合的作品，大面積、多數量使用鮮色，勢必成為鮮調。大面積、多數量使用灰色，勢必成為灰調，其他色調依此類推。這種優勢在整體的變化中能使色調產生明顯的統一感，但是，如果只有基調色而沒有鮮色調就會感到單調、乏味。如果設置了小面積對比強烈的點綴色、強調色、醒目色，由于其不同色感和色質的作用，會使整個色彩氣氛豐富，活躍起來。但是整體與對比是矛盾的統一體，如果對比、變化過多或面積過大，易破壞整體，失去統一效果而顯得雜亂。

第四章

4.2網頁配色常見問題1.缺乏主色調

在網上經?？梢钥吹竭@樣的網站，網頁上的元素色相眾多，一個標題就是一種顏色，每一個框、線的顏色都不同，令人眼花繚亂。雖然畫面色彩繁多，好像很豐富的樣子，但過多的色相給人一種復雜混亂的視覺效果，使訪問者無法明確地識別重點內容，甚至起到反作用。

一般來說，色調明確的網頁更受訪問者的歡迎，因為這樣的網頁主次分明，易于找到重點，能有效減少視覺負擔。

左圖所示是韓國POSCO公司的官方網站，也是韓國網站版式設計比較有代表性的一個網頁。頁面左邊是網站的LOGO，右邊是導航欄。POSCO公司是從事汽車產業生產方面的公司，所以頁面中間選擇的是汽車前蓋及車燈部分的一個特寫，暗紅色的車身，也是整個網頁上的一處亮點。網站整體選擇了灰色為主色調，深淺不同的灰色對整個網頁的區域進行了劃分，左側利用插圖和文字介紹公司的產品；中間部分是告示欄；最右邊是關于公司生產線的一個介紹及其相關的動畫，均為可點擊的子目錄。整個網頁版式設計條理清楚，色彩運用簡單卻不呆板，能體現出工業產品的特點。

第四章右圖這是韓國HAUZEN公司的網站，它是一家以家電制造為主的公司。藍色的主色調，是與家電品最為吻合的色彩。頁面做了一分為二的設計，上半部分展示的是本公司的洗衣機，可以強調了洗衣機的LOGO部分，頁面頂端依然是公司LOGO和導航欄。下半部分主要是文字性的子目錄，包括告示新聞、公司其他產品以及公司廣告，均為可點擊的子目錄。以頂端導航相呼應的，頁面底端也設計了導航欄。

第四章

2.文字能見度低

人眼識別色彩的能力有一定的限度，由于色的同化作用，色與色之間對比強者易分辨，弱者難分辨，色彩學上稱為易見度。

確保選擇的字體在較小的屏幕上依舊清晰可辨，應選擇粗細均勻且大小適中的字體（左圖）。設計師進行網頁文字設計時應避免選擇過于繁復的字體，如右圖的維瓦爾第字體將難以在小屏幕上閱讀。

第四章

在高明度色彩的背景上，低明度的文字易于識別，如果背景和文字明度接近，就容易出現難以識別的問題，如左圖所示字體顏色與文字相近，并不利于瀏覽者更好的閱讀；而右圖中字的顏色則根據背景色的變化調整字的顏色，突出字體，更加清晰。

3.增加視覺負擔在瀏覽網頁時，當然不希望對自己的視力有損害，因此，網頁配色要盡量少用視疲勞度高的色調。一般來說，高明度、高純度的顏色刺激強度高，疲勞度也大。如左圖所示的藍顏色只是用來點綴畫面，視覺絲毫沒有感覺到有負擔，而右圖同樣是黑色背景，則采用2種高亮度的色彩作為點綴，大大激發了瀏覽者的探究的欲望。第四章4.3網頁配色原則

色彩是頁面設計中重要的設計元素之一。優秀的色彩搭配不僅可以吸引用戶的注意力，同時還可以為頁面的設計添彩，統一設計風格，從視覺上就給用戶帶去良好的體驗。

不同的色彩具有不同的情感。心理學研究表明，暖色可以引起瞳孔放大，心臟脈搏跳動加快，心情興奮；冷色可以引起眼睛的淡漠感覺，心臟、脈搏跳動平穩，心情沉靜，有收縮、寒冷的感覺；中間色（介于暖色與冷色之間）處于興奮和冷靜之間，眼睛不過于疲勞，給人以柔和、寧靜與舒適的感覺，如左圖與眾不同的色彩界面與右圖冷暖色區分清晰，不同的顏色會給瀏覽者不同的心理感受。第四章4.3.1三色搭配原則

三色搭配原則是指一個設計作品中，顏色應保持在三種之內。同樣，對于界面設計中的主要色彩最好不要超過三種（通常擁有獨立色值的算一個），可以表達出主題即可。因為太多的顏色會讓頁面變得雜亂無章，干擾到主要信息。1.主色

主色是決定畫面的風格趨向的色彩，通常情況下，主色約占75%。主色并不一定只能有一個顏色，它還可以是一種色調，最好選擇同色系或鄰近色中的1~3個，要保持協調。通常情況下，主色調主要是由界面中整體或中心圖像所形成的中等面積的色塊，它在界面的空間中具有重要的作用，通常形成界面的視覺中心。通常認為飽和度高的顏色一般為主色；深顏色一般為主色；面積大的一般為主色；視覺中心所呈現的一般為主色。第四章

2.輔助色

主色調與輔助色共同構成界面的標準色彩，起到烘托主色調、支持主色調以及融合主色調的作用。輔助色在整體的畫面中應該起到平衡主色調的視覺效果和減輕用戶所產生的視覺疲勞，起到一定視覺分散，使畫面豐富，更具細節的作用，輔助色約占20%。輔助色也不一定只能有一個顏色，也可以多色相輔助。同類色作為輔助色，畫面較柔和，整體顯得和諧統一，如上圖所示。鄰近色作為輔助色，會產生高度和色相對比，畫面較豐富，如中圖所示；對比色或是互補色作為輔助色，畫面色彩層次豐富，主色更鮮明，如下圖所示；也可以充分利用背景色，正確運用背景色會讓畫面更有特色。另外也可使用輔助圖，輔助畫面、裝飾畫面，但點綴圖案通常為1~2種，否則容易花哨或者分散主題。第四章

3.點睛色

點睛色或點綴圖主要用于引導閱讀，裝飾畫面，營造獨特的畫面風格，約占5%。為了營造出生動的頁面氛圍，點睛色應該選擇較鮮艷的顏色，在少數情況下，為了特別營造低調柔和的整體氛圍，則點綴色還是可以選用與背景色接近的顏色，如左圖點睛色與背景強烈反差與右圖點綴色與背景相近二者對比效果。第四章

1.色彩心理暗示

研究表明，色彩心理受個人認知影響。社會因素中，如性別也對顏色如何被感知有一定影響作用。進一步研究表明，不僅是顏色自身含義的影響，也是關于在使用中如何讓用戶恰當的感知到用在品牌上的顏色含義。因此色彩及心理學是相互關聯的，但它們又是如何作用于網頁界面設計之上呢？

首先看一下色彩在心理暗示的意義：

⑴黃色：過度耀眼會讓人討厭，有警示的寓意（交通法規中常用），但兒童非常喜歡這個顏色；

②橘色：溫暖而不危險，與能量有關（飲料、運動、健身），兒童也同樣喜歡這個顏色；

⑶紅色：提示操作、興奮、沖動、血腥，象征激情和理想的時尚／化妝品牌，交友網站和食物使用較多（如麥當勞、肯德基）

⑷紫色：代表奢華、典雅、溫柔、女性，只有在暗色系的紫色才有一些恐怖灰暗的聯想；

⑸黑色：代表上等的、漂亮的、傳統的、團體的、企業的、優秀、卓越等

⑹綠色：代表自然、能提升幸福感、健康產品、道德活動、新理念、新觀點；

⑺藍色：代表智力理性，深藍色與奢侈品有關聯，淺藍與清新的產品和想法有關，藍色有利于抑制食欲，所以幾乎食品都不用藍色系做廣告；

⑻粉色：用來吸引女性用戶的注意力，一般對喜愛甜食的人比較有刺激效果；

⑼白色：代表純凈、涼爽、冷靜和現代；

第四章

2.色彩的大小位置

主要標準色使用大面積色塊，大塊的色彩在烘托氣氛與主題方面較為穩定，而小塊的色彩則常用于點綴，起到豐富畫面的作用。另外，色彩的搭配需要統一顏色，在不同的頁面框架中盡可能統一顏色，從而給用戶一種非常統一的印象，讓用戶一目了然，記憶深刻。

3.在相似中找呼應色彩

想要讓界面變得更有節奏感，可以運用相似色去進行色彩呼應。首先需要定義色彩的基調，找到最主要的色彩。如果在設計中采用單一顏色進行設計，使用大小關系區分功能的主次關系，雖然視覺上較為平衡但顯得比較單調；然后在主要功能上使用補色對比，以此讓用戶聚焦在主要功能上。切記不要采用過多色彩，否則會使得界面沒有秩序感，給用戶帶來一種混亂感。

在色彩搭配問題上，不僅僅是聚焦用戶的注意力，還要講究顏色的呼應性，同類色彩就會彼此呼應，從而使得聚焦點聚集在主要的點上，如圖所示。第四章

4.4界面設計配色技巧界面中的色彩運用可以體現出界面的風格和所展現的主題，具有引導作用。同時，可以表達出網站的情感和意圖，向用戶說明此網站的意義和存在價值。還可以體現出網站的針對人群，更加快捷、方便為大眾所用。1.使用鄰近色

這里所說的鄰近色，就是在色環中向鄰近和靠近的顏色，可以是兩兩相靠的顏色，也可以是相隔幾個色彩的顏色，但是相隔的色彩至多不能超過5個。

左圖所示此界面利用紅與黃這一對鄰近色相搭配，使得界面整體協調，不突兀，自然而然地使得用戶的重點放在界面的文字中，不喧賓奪主，起到很好的引導作用。右圖所示的是一個關于字母游戲的界面，其中運用藍色和綠色這一對鄰近色作為界面的主色，其次利用字母的排列方式，體現界面和游戲的趣味性。第四章

2．使用對比色

所謂的對比色，是指色環中相差不到180度的兩種顏色，相互之間的角度越大，也就意味著對比度越大。比如說藍色與橙色、紅色與綠色以及紫色與黃色等等。通過合理地使用對比色，能夠使界面特色鮮明，給用戶一種鮮活的視覺效果，并且突出界面的重點，吸引用戶的進一步瀏覽和更深層次地了解此網站的信息。第四章

3．使用黑色

黑色是經典的色彩，更是神秘的色彩，它蘊含著攻擊性，但它在邪魅中還隱藏著優雅，在沉穩中里還包含權威，它與力量密不可分，它總是最具有表現力的色彩之一，強烈而鮮明。所以，當黑色同銳利多變的排版結合起來，加上對比色和輔助色，頁面就會擁有獨特而鮮明的質感。黑色系的界面設計往往可以順利隱藏一部分缺陷，并讓一些內容和效果突出展現。

如左圖所示，此界面中非凡的細節設計和獨特的個人風格從黑色的頁面中自然而然地體現出來，整個頁面在沉穩的黑色中展現出令人著迷的節奏感，黑色的視覺吸引力在這個界面中得到了清晰的呈現。

如右圖所示，此界面使用傳統而經典的黑白系配色互相映襯，讓界面的主題效果更加突出，整個界面的細節設計微妙而漂亮。第四章

4．使用背景色

在一般情況下，使用素淡清雅的顏色作為背景色，避免采用花紋復雜的圖片和純度較高的色彩，背景色的顏色要與界面的主色調相協調，背景色的目的是輔助主色調，豐富界面設計的整體性，因此背景色不能使用純度過高的色彩。如果為了美化界面使用一些顏色過于復雜的圖片，不但使得界面華而不實，而且會混淆視聽，不易突出重點。同時需要注意的是背景色要與文字的色彩對比強烈一些，這樣才能突出文字，進而突出界面的主題。如圖所示，此界面中利用黑板的形式作為背景，而且將字體設計成粉筆字，二者相互聯系。同時背景與文字的黑白色彩形成了強烈的對比，使得界面的中心落在文字之中，主次分明。第四章

5．色彩的數量

初學者在進行界面設計的時候，往往大多數會采用多種顏色，這樣做的弊端容易使得界面整體顯得很花哨，缺乏統一性和協調性，雖然表面能吸引眼球，但是缺少內在的美感。由此可見，在界面設計中的配色方面，不一定顏色用的越多效果越好，相反還會起到不好效果。事實上，色彩的數量一般控制在2-5種顏色之間最好，通過顏色屬性的不斷調整來產生不同的效果。但在個別的一些界面中可以使用多種色彩，比如說社交類、時尚類、美食類、購物類、兒童類等界面中，色彩相對豐富一些。如左圖所示的是英國航空公司的網站，此界面雖然只用到一種色彩，但是充滿了現代氣息的整體設計，利用精致入微的專業圖片為背景，再使用舒適的白色，讓你在網站上找到云層之上的體驗。右圖是藝術家遠藤健治的官方網站，中性的黑白色調構成了界面的主色調，強烈的對比和留白令界面設計感十足。第四章

左圖所示的界面運用了紅、白、黑三種顏色，雖然色彩較少，但是界面整體協調，色彩搭配合理。

右圖所示，此界面是Facebook社交軟件的界面設計，其用色豐富，吸引眼球，很好體現界面的主題。第四章

4.5兒童線上教育網站案例制作（一）如圖4-47所示，這是一個用Photoshop制作的兒童線上教育網站首頁的網頁界面設計效果。頁面在傳統的三三式構圖的基礎上變化發展，整個頁面黃色占據視覺中心，顯得充滿童趣和活潑。案例設計主要步驟：1.布局2.logo部分制作3.制作圖標4.頁中部分5.網站頁腳制作第四章

（二）注冊/登錄頁面（三）視頻學習頁面實踐與提高1.搜集5-6個案例并分析其設計中在色彩搭配方面的優缺點。2.規劃自己主頁的主色、輔助色及點睛色。3.手繪3-4個創意草案表現不同風格的兒童主頁。第五章第5章綜合案例制作第一章

5.1銀時代網頁設計“銀時代”是一家頗有名氣的淘寶店鋪，是一