網(wǎng)頁美工設(shè)計 第2章

第2章網(wǎng)頁配色設(shè)計情景模擬配色是網(wǎng)頁設(shè)計的關(guān)鍵，合理的配色可以使網(wǎng)頁風(fēng)格與網(wǎng)站定位相得益彰，使網(wǎng)頁更具美感和吸引力。小張就讀的學(xué)校采用的是工學(xué)結(jié)合的教學(xué)模式，這天，與學(xué)校合作的企業(yè)給了小張和其同學(xué)一個嬰兒奶粉銷售網(wǎng)站的網(wǎng)頁設(shè)計項目。在對該項目做需求分析時，小張認(rèn)為嬰兒象征活力和希望，因此提議使用紅色作為網(wǎng)站主色，但意見一出就遭到同學(xué)們的反對。下面，我們通過學(xué)習(xí)色彩基礎(chǔ)知識、網(wǎng)頁中的色彩運用和配色技巧等，來判斷小張的意見是否正確。理解色彩基礎(chǔ)知識，包括色彩三要素、色彩的心理效應(yīng)和色彩冷暖理解網(wǎng)頁中色彩的角色和網(wǎng)頁色調(diào)的概念掌握網(wǎng)頁的色彩搭配技巧，能夠根據(jù)需要合理搭配網(wǎng)頁色彩掌握選擇網(wǎng)頁色調(diào)的技巧，能夠根據(jù)需要確定網(wǎng)頁色調(diào)學(xué)習(xí)目標(biāo)2.1色彩基礎(chǔ)網(wǎng)頁配色需要對色彩有清晰的認(rèn)識和敏銳的判斷。由于色彩知識過于抽象，不便于理解，本書從圖2-1所示的二十四色色環(huán)圖出發(fā)來講解色彩的基礎(chǔ)知識及網(wǎng)頁配色設(shè)計，方便網(wǎng)頁設(shè)計初學(xué)者直觀地理解色彩的相關(guān)知識，掌握網(wǎng)頁配色技巧。本節(jié)主要講解色彩三要素、色彩的心理效應(yīng)及色彩的冷暖，為網(wǎng)頁配色打下基礎(chǔ)。圖2-1二十四色色環(huán)圖5

2.1.1色彩三要素1．色相色相是色彩的基本特征，是區(qū)別不同色彩的標(biāo)準(zhǔn)，可以將其理解為色彩的名稱，如紅、橙、黃、綠、青、藍(lán)、紫等顏色。6

人眼觀察到的任何色彩都具有色相、明度和純度三個屬性，它們被稱為色彩三要素。7

提示在使用Photoshop處理圖像時，常用“色階”“曲線”“亮度/對比度”等命令調(diào)節(jié)圖像明度。適當(dāng)提升圖像明度可以增強(qiáng)圖像的通透感，但圖像不宜過亮，否則會損失圖像細(xì)節(jié)。2．明度明度是指色彩的明暗程度。同種色相的色彩在明度上有深淺之分。例如，在圖2-1所示的色環(huán)圖中，同一色相的顏色從內(nèi)環(huán)到外環(huán)，明度逐漸降低，顏色越來越深。此外，不同色相的顏色其明度也有差別，如黃色明度高，紫色明度低。3．純度純度也被稱為色彩飽和度，是指色彩的純凈程度。我們知道，所有顏色都是由原色（紅、綠、藍(lán)或青、品紅和黃）混合而成的，色彩純度主要取決于顏色中某種主要原色成分的比例，比例越大，純度越高，顏色越鮮艷；反之純度越低，顏色越暗淡，越不容易分辨。當(dāng)色彩純度降到最低時，將變?yōu)闊o彩色，即黑、白、灰色。圖2-1所示的色環(huán)圖中，中間一環(huán)的顏色純度最高；內(nèi)環(huán)的顏色因加入白色，在提高明度的同時降低了純度；外環(huán)的顏色因加入黑色，在降低明度的同時也降低了純度。課堂互動觀察圖2-2，指出圖中有幾種顏色（色相）？哪幅圖的色彩純度最高？哪幅圖的色彩純度最低？此外，青、品紅、黃、紅、綠、藍(lán)是否為純度最高的顏色？圖2-2不同色彩純度的圖片9

提示在使用Photoshop處理圖像時，常用“自然飽和度”“色相/飽和度”等命令調(diào)節(jié)圖像色彩純度。適當(dāng)提升色彩純度可增加圖像的鮮艷度，吸引瀏覽者的目光。10

2.1.2色彩的心理效應(yīng)不同的色彩能帶給人不同的心理感受，讓人產(chǎn)生特殊的情感反應(yīng)和聯(lián)想。因此，在對網(wǎng)頁進(jìn)行配色設(shè)計時，除了需要注重色彩本身的美感外，還需要注意色彩帶給人的情感反應(yīng)和色彩的象征意義，使色彩符合網(wǎng)站的主題。課堂互動圖2-3所示為不同色調(diào)的兩張圖片。看到這兩張圖片，你分別會想到什么呢？圖2-3不同色調(diào)的圖片圖2-4紅色Banner12

1．紅色紅色具有很強(qiáng)的視覺沖擊力，容易引起人注意。紅色常讓人聯(lián)想到熱情、活力、積極、主動、力量、愛情、溫暖、開放、社交性等。在國內(nèi)，紅色還是一種代表喜慶的色彩，每逢節(jié)日，網(wǎng)絡(luò)上都遍布以紅色為主題色的廣告，如圖2-4所示。此外，紅色也常用來做警告、危險、禁止、防火等標(biāo)識的顏色。需要注意的是，在網(wǎng)頁配色中，純粹使用紅色作為主色調(diào)的網(wǎng)站相對較少，通常都配以其他顏色進(jìn)行調(diào)和。13

提示不同純度和明度的紅色給人的感覺是不同的。其中，粉紅色明度高，純度低，視覺柔和，女性特征明顯，給人一種鮮嫩、溫柔、純真、誘惑的感覺，適用于以女性或嬰兒等為主題的網(wǎng)站，如化妝品網(wǎng)站、內(nèi)衣網(wǎng)站等，如圖2-5所示；鮮紅色純度高，視覺刺激強(qiáng)，男性特征明顯，適用于表現(xiàn)熱情、活力、奔放，具有男性特征的網(wǎng)站，如圖2-6所示；深紅色明度低，容易營造出深邃、神秘的氣氛；玫瑰紅則營造的是一種嬌媚、艷麗的氣氛，適用于女性用品及服裝網(wǎng)站。圖2-5化妝品網(wǎng)站主頁圖2-6男裝網(wǎng)站頁面圖2-7橙色Banner14

2．橙色橙色介于紅色與黃色之間，常讓人聯(lián)想到能量、溫暖、健康、活潑、快樂、創(chuàng)造力、社交性等。此外，由于橙色與許多食物的顏色類似，因此橙色容易引起人的食欲。當(dāng)作品中需要加入上述特性時，橙色就成為設(shè)計師的首選，如圖2-7所示。15

黃色給人的感覺與橙色類似，但黃色明度更高，更為醒目。黃色常讓人聯(lián)想到快樂、輕快、撒嬌、可愛、理解、智慧、幸福、食物等。在網(wǎng)頁配色中，黃色常與冷色或明度低的顏色搭配，起到和諧對比的調(diào)和效果，如圖2-8所示。3．黃色圖2-8黃色Banner綠色是大自然中最常見的顏色，常讓人聯(lián)想到生命、安全、和平、理想、希望與青春的活力。綠色常用于與自然、健康等相關(guān)的網(wǎng)頁。此外，當(dāng)作品中需要表現(xiàn)蔬菜、水果、環(huán)保等主題時，也常用綠色作為主色，如圖2-9所示。4．綠色圖2-9水果蔬菜網(wǎng)站主頁16

圖2-10科技企業(yè)網(wǎng)站主頁17

5．藍(lán)色藍(lán)色常讓人聯(lián)想到天空、海洋、宇宙等事物，給人以靜謐、深邃、博大、高遠(yuǎn)、理智、準(zhǔn)確、信賴、忠誠等感覺，特別適合做強(qiáng)調(diào)科技、效率等企業(yè)網(wǎng)站的主色，如圖2-10所示。藍(lán)色如果與紅、棕、黃等顏色搭配得當(dāng)，可以構(gòu)成和諧對比的調(diào)和關(guān)系。18

紫色是由活躍的紅色和靜謐的藍(lán)色混合而成的，具有神秘、浪漫、高貴的特性。使用不同的顏色與紫色搭配可給人不同的感覺。例如，紅色與深紫色搭配可給人既神秘又溫暖的感覺；粉色與淺紫色搭配可給人浪漫優(yōu)雅的感覺，如圖2-11所示。6．紫色圖2-11以紫色為主色調(diào)的網(wǎng)頁白色是明度最高的顏色，象征著純潔、神圣、明快。白色被稱為“萬能色”，可以和任何顏色搭配使用。其中，白色與暖色搭配可以產(chǎn)生華麗感；與冷色搭配可以產(chǎn)生清爽感。在網(wǎng)頁設(shè)計中，白色多用作背景色與過渡色。在網(wǎng)頁中大面積的留白可以給人簡約、時尚的感覺，并給瀏覽者一定的遐想空間，如圖2-12所示。7．白色圖2-12大面積留白的網(wǎng)頁19

圖2-13使用灰色作為網(wǎng)頁背景色20

8．灰色灰色屬于中性色，和白色、黑色一樣是一種無色彩屬性的顏色。灰色能給人一種柔和、細(xì)致、樸素、大方、舒適、優(yōu)雅的感覺。使用灰色時，大多利用不同明度的灰色變化或搭配其他顏色來調(diào)和畫面的樸素、沉悶?；疑Ｓ糜诰W(wǎng)頁或圖像的背景色，如圖2-13所示。9．黑色黑色也被稱為“萬能色”，其搭配不同的顏色可以呈現(xiàn)出風(fēng)格迥異的效果。當(dāng)黑色與黃色搭配時，會給人一種奢華、高貴的感覺；與白色搭配時，圖像識別度最高，且可以凸顯高級感；與紅色搭配時，會給人富有力量的感覺，如圖2-14所示。21

圖2-14黑色與紅色搭配的Banner課堂互動某快餐外賣網(wǎng)站以藍(lán)色作為主色，你認(rèn)為合適嗎？為什么？應(yīng)該使用什么顏色？此外，在前面情景模擬中提出的嬰兒奶粉銷售網(wǎng)站應(yīng)使用什么顏色作為主色？23

色彩的冷暖是指不同的色彩讓人產(chǎn)生的溫度感覺。如前圖2-1色環(huán)圖所示，以紅、橙、黃為代表的顏色給人以溫暖、熱烈、喜慶之感，這一系列的色彩被稱為暖色；以藍(lán)、綠、青為代表的顏色給人以清涼、沉靜、堅實之感，這一系列的色彩被稱為冷色。1．色彩的冷暖2.1.3色彩的冷暖與網(wǎng)頁色調(diào)提示需要注意的是，除紅色與藍(lán)色是色彩冷暖的兩個極端外，其他許多色彩的冷暖感覺都是相對的。例如，紫色與綠色，紫色中的紅紫色較暖，而藍(lán)紫色則較冷；綠色中的草綠色帶有暖意，而翠綠色則偏冷。24

色調(diào)是指畫面中色彩的總體傾向。當(dāng)網(wǎng)頁中包含大面積的冷色時，網(wǎng)頁呈現(xiàn)冷色調(diào)，如圖2-15所示；當(dāng)網(wǎng)頁中包含大面積的暖色時，網(wǎng)頁呈現(xiàn)暖色調(diào)，如圖2-16所示。此外，黑、白、灰色被稱為中性色（非冷非暖），當(dāng)網(wǎng)頁中包含大面積的中性色時，網(wǎng)頁呈現(xiàn)中性色調(diào)，給人一種高端、大氣、簡潔的感覺，如圖2-17所示。2．網(wǎng)頁的色調(diào)圖2-15冷色調(diào)網(wǎng)頁圖2-16暖色調(diào)網(wǎng)頁圖2-17中性色調(diào)網(wǎng)頁色調(diào)如同網(wǎng)頁的性格，不同色調(diào)的網(wǎng)頁會給訪問者不同的心理感受。冷暖對比是自然平衡的規(guī)律，在網(wǎng)頁設(shè)計中恰當(dāng)?shù)厥褂美渖团M(jìn)行搭配，可增加網(wǎng)頁的活力。課堂互動觀察圖2-15和圖2-16，分析圖中冷色與暖色的使用比例，說明這樣搭配有什么好處。2.2網(wǎng)頁設(shè)計中最敏感和最重要的就是色彩的運用。網(wǎng)頁中色彩的類型、數(shù)量、面積、冷暖等直接影響著網(wǎng)頁的視覺效果和要表達(dá)的主題。因此，掌握網(wǎng)頁色彩運用的知識是制作優(yōu)秀網(wǎng)頁的關(guān)鍵。網(wǎng)頁中的色彩運用網(wǎng)頁設(shè)計常用配色表2.2.1網(wǎng)頁中的色彩角色為網(wǎng)頁配色時，應(yīng)注意頁面中顏色的數(shù)量與主次關(guān)系。如果網(wǎng)頁中不同顏色所占的面積相當(dāng)，會讓人感覺頁面風(fēng)格不統(tǒng)一，沒有整體感；如果網(wǎng)頁中使用的顏色過多，則會讓人感覺頁面過于瑣碎、花哨、輕浮，沒有內(nèi)涵。因此，為網(wǎng)頁配色時，應(yīng)根據(jù)網(wǎng)站的主題區(qū)別顏色主次，讓不同的顏色扮演不同的角色，發(fā)揮不同的功能。根據(jù)不同顏色在網(wǎng)頁中的視覺主次、面積大小和所起的作用，可將其分為主色、副色和背景色，下面分別說明。27

28

提示副色中有一種顏色叫點睛色，它在小范圍內(nèi)用強(qiáng)烈的顏色來突出效果、活躍氣氛，使頁面的色彩更加生動。在網(wǎng)頁設(shè)計中，點睛色常用于占用面積較小的按鈕、標(biāo)簽等，數(shù)量根據(jù)畫面的需要而定。主色：主色是網(wǎng)頁中使用面積最大、出現(xiàn)次數(shù)最多的顏色。它貫穿網(wǎng)站的所有頁面，在創(chuàng)造特定氣氛和意境上發(fā)揮著主導(dǎo)作用，是整個網(wǎng)站色彩表現(xiàn)的靈魂。通常，在描述網(wǎng)頁是什么色調(diào)時指的就是其主色。副色：副色也稱為輔助色，它在頁面中所占面積比主色小，起到與主色呼應(yīng)，調(diào)和畫面色彩關(guān)系的作用。根據(jù)實際需要，同一網(wǎng)頁中的副色可以有多種顏色，作為區(qū)分欄目、標(biāo)識等作用。29

背景色：背景色是用于網(wǎng)頁背景的顏色，起到協(xié)調(diào)、襯托頁面整體色彩關(guān)系的作用。通常背景色僅起到陪襯作用，在畫面中顯露的面積較小，但有些網(wǎng)頁的背景色對頁面的影響較大，既是背景色也是主色。以美團(tuán)網(wǎng)為例，該網(wǎng)頁主色為Logo中提取的綠色，副色為橙色和紅色（起點睛作用），背景色為白色。主色占所用顏色的比例較大，屬于冷色系顏色，副色用量較少，屬于暖色系顏色，頁面冷暖搭配得當(dāng)，能給瀏覽者舒適的瀏覽體驗，如圖2-18所示。圖2-18美團(tuán)網(wǎng)網(wǎng)頁副色副色主色30

提示在網(wǎng)頁設(shè)計中，主色通常用在導(dǎo)航和其他重要位置；而Banner和海報為了更加醒目，主色通常用在背景上，如圖2-19所示。圖2-19使用主色做底色的Banner課堂互動在圖2-20所示的網(wǎng)頁中，分別指出其使用的主色、副色、點睛色和背景色。圖2-20辨識網(wǎng)頁中的色彩角色2.2.2如何搭配網(wǎng)頁色彩在搭配網(wǎng)頁色彩時應(yīng)先從網(wǎng)站風(fēng)格和內(nèi)容出發(fā)，選擇合適的主色，然后從視覺效果出發(fā)，選擇副色并控制主色和副色之間的比例，使網(wǎng)頁整體色調(diào)美觀、舒適。在進(jìn)行網(wǎng)頁配色設(shè)計時，除了使用前面介紹的冷暖色搭配外，還可使用以下色彩搭配方式。32

提示在進(jìn)行冷暖色搭配時，應(yīng)注意：①控制好冷色與暖色的面積比例。因為冷色與暖色處于同一畫面時對抗非常激烈，所以應(yīng)選擇一種作為主色，另一種作為副色。②降低其中一種顏色的明度或飽和度，從而產(chǎn)生明暗對比，以緩沖對抗。③可在畫面中加入少量與副色相近的顏色或黑、白、灰色作為裝飾色進(jìn)一步緩沖對抗。在搭配網(wǎng)頁色彩時應(yīng)先從網(wǎng)站風(fēng)格和內(nèi)容出發(fā)，選擇合適的主色，然后從視覺效果出發(fā)，選擇副色并控制主色和副色之間的比例，使網(wǎng)頁整體色調(diào)美觀、舒適。在進(jìn)行網(wǎng)頁配色設(shè)計時，除了使用前面介紹的冷暖色搭配外，還可使用以下色彩搭配方式。33

同類色搭配是指色相環(huán)上位置相鄰（15°夾角內(nèi)），或者同一色相中不同明度或純度的顏色之間搭配，如深藍(lán)色與淺藍(lán)色、紅色與橙紅色搭配。同類色搭配的優(yōu)點是可以產(chǎn)生有秩序的漸變感覺，使畫面顯得協(xié)調(diào)統(tǒng)一，缺點是由于色彩相同，容易產(chǎn)生平淡、單調(diào)的感覺。在進(jìn)行網(wǎng)頁配色時，可以加大顏色明度與純度的對比來彌補(bǔ)單調(diào)感，或者加入小面積的其他顏色作點綴，如圖2-21所示。1．同類色搭配圖2-21使用同類色配色的網(wǎng)頁34

近似色搭配是指色相環(huán)上距離較近（15°～60°夾角內(nèi)）、色相差別不大的顏色之間搭配，如紅色與黃色、黃色與綠色、藍(lán)色與紫色搭配。近似色搭配是一種很理想的色彩搭配方案。其色彩相近而不相同，統(tǒng)一中有變化，變化又不失協(xié)調(diào)。此外，色彩既有對比又相互調(diào)和，視覺關(guān)系上能做到清晰明朗、層次豐富。因此，近似色搭配是應(yīng)用范圍最廣的一種網(wǎng)頁配色方案，如圖2-22所示。2．近似色搭配圖2-22使用近似色配色的網(wǎng)頁35

對比色搭配是指色相環(huán)上距離較遠(yuǎn)（相差120°左右）、色相差異較大的顏色之間搭配，如紅色與藍(lán)色、橙色與綠色、紫色與綠色搭配。對比色搭配屬于強(qiáng)對比搭配方案，視覺效果強(qiáng)烈、鮮亮，畫面效果層次清楚、結(jié)構(gòu)明顯，特別易于突出主體，展示亮點，如圖2-23所示。3．對比色搭配圖2-23使用對比色配色的網(wǎng)頁由于對比色搭配色相差異較大，色彩之間有一定的沖突感，因此在運用時應(yīng)多用灰色、白色或近似色做過渡，以降低色彩的不協(xié)調(diào)性。同時，需要注意色彩的主次之分，應(yīng)加大主色與副色的面積對比，以達(dá)到色彩平衡的效果。36

互補(bǔ)色搭配是指色相環(huán)上直徑兩端（相差180°），距離最遠(yuǎn)的顏色之間搭配，如紅色與綠色、黃色與紫色、藍(lán)色與橙色搭配。互補(bǔ)色搭配是最強(qiáng)烈、最富刺激性的配色方案。使用互補(bǔ)色搭配的畫面特別鮮明、艷麗，很容易吸引人的注意力。但是，使用互補(bǔ)色配色時，強(qiáng)烈的刺激會讓人產(chǎn)生不安定感，如果搭配不當(dāng)，容易產(chǎn)生生硬、急躁的效果。因此，使用互補(bǔ)色配色時，應(yīng)通過調(diào)整主色與副色的面積大小，或者提高（或降低）互補(bǔ)色的明度（或純度），或者使用灰色、白色或近似色作為過渡，以降低畫面的不適感，如圖2-24所示。4．互補(bǔ)色搭配圖2-24使用互補(bǔ)色配色的網(wǎng)頁37

提示色調(diào)明確、統(tǒng)一、和諧、易于識別的網(wǎng)頁更受訪問者歡迎。但是，在設(shè)計網(wǎng)頁時，部分初學(xué)者為了區(qū)別網(wǎng)頁中的不同版塊，在網(wǎng)頁中使用了大量的顏色，讓頁面的視覺效果顯得凌亂、復(fù)雜。使用“色不過三”原則能夠有效地避免頁面顏色混亂的問題。所謂“色不過三”，不是限定網(wǎng)頁中使用的顏色不超過三種，而是指不超過三種色相。在設(shè)計網(wǎng)頁時，可通過調(diào)整色彩的明度或飽和度來對色彩進(jìn)行變化，產(chǎn)生多種顏色，而色相不變。除了避免在網(wǎng)頁中運用過多色彩外，在設(shè)計網(wǎng)頁時還應(yīng)注意網(wǎng)頁文字與底色的搭配應(yīng)遵循“三個不要”原則，即：不搭配同色系顏色，如深紅配大紅；不搭配飽和度接近的顏色，如深紫色配棕色；不搭配明度接近的顏色，如白色配檸檬黃。否則，會造成文字識別度低。課堂互動（1）總結(jié)上述幾種網(wǎng)頁色彩搭配方式的優(yōu)缺點和應(yīng)用技巧。（2）指出圖2-25所示網(wǎng)頁中的色彩搭配問題。圖2-25指出網(wǎng)頁中的色彩搭配問題2.2.3如何選擇網(wǎng)頁色調(diào)網(wǎng)頁頁面由具有內(nèi)在聯(lián)系的各種色彩組成一個完整統(tǒng)一的整體，形成畫面色彩的總體趨向，稱為網(wǎng)頁色調(diào)。網(wǎng)頁色調(diào)如同網(wǎng)頁的性格，不同色調(diào)的網(wǎng)頁會給訪問者不同的心理感受。網(wǎng)站的類型和風(fēng)格是決定網(wǎng)頁色調(diào)的主要因素，不同類型的網(wǎng)站，其色調(diào)會有明顯差異。下面就來學(xué)習(xí)確定網(wǎng)頁色調(diào)的方法。39

40

幾乎所有的網(wǎng)站都有自己的Logo，用于展示網(wǎng)站形象，提高網(wǎng)站辨識度。使用Logo中的某種顏色作為網(wǎng)頁的色調(diào)有兩個好處：一是Logo的色彩使用較為規(guī)范，往往都考慮了網(wǎng)站本身的特點，能更好地展示網(wǎng)站形象；二是Logo與網(wǎng)頁色調(diào)相互呼應(yīng)，易于給訪問者留下規(guī)范、嚴(yán)謹(jǐn)?shù)挠∠蟆Ｒ蕴詫毦W(wǎng)為例，該網(wǎng)頁使用Logo中的橙色作為網(wǎng)頁的主色調(diào)，如圖2-26所示。1．根據(jù)網(wǎng)站Logo確定網(wǎng)頁色調(diào)圖2-26通過Logo確定網(wǎng)頁色調(diào)41

2．根據(jù)網(wǎng)站類型確定網(wǎng)頁色調(diào)圖2-27使用藍(lán)色作為主色調(diào)的企業(yè)網(wǎng)站網(wǎng)頁（1）企業(yè)網(wǎng)站。企業(yè)網(wǎng)站是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行形象宣傳、產(chǎn)品展示和加強(qiáng)客戶服務(wù)的平臺。設(shè)計企業(yè)網(wǎng)站時，可根據(jù)企業(yè)類型和色彩的象征意義確定網(wǎng)頁色調(diào)。例如，科技類、商業(yè)類企業(yè)可使用藍(lán)色、灰色等作為網(wǎng)頁色調(diào)，這些色調(diào)能給人帶來理性、穩(wěn)重、高效、安全的感覺，有利于企業(yè)品牌形象的建立與提升，如圖2-27所示。關(guān)于不同色調(diào)帶給人的心理感覺和象征意義，請參考2.1.2節(jié)內(nèi)容。42

圖2-28購物類網(wǎng)站網(wǎng)頁（2）購物類網(wǎng)站。網(wǎng)購已成為當(dāng)今主要的購物方式之一。購物類網(wǎng)站應(yīng)根據(jù)銷售的商品類型選擇合適的顏色作為網(wǎng)頁色調(diào)。當(dāng)網(wǎng)站主要銷售名表、高級紅酒等高端商品時，可選擇黑色、白色、灰色等顏色作為網(wǎng)頁色調(diào)，這些顏色給人高貴、奢華、精致的感覺，如圖2-28（a）所示；當(dāng)網(wǎng)站經(jīng)營的商品種類繁多時，可以使用橙色、紅色、黃色等顏色作為網(wǎng)頁色調(diào)，這些顏色給人活躍、熱烈的感覺，能潛移默化地促進(jìn)購買，如圖2-28（b）所示。（a）（b）43

圖2-29娛樂類網(wǎng)站網(wǎng)頁（3）娛樂類網(wǎng)站。娛樂休閑類網(wǎng)站包括電影網(wǎng)站、音樂網(wǎng)站、游戲網(wǎng)站、交友網(wǎng)站、社區(qū)論壇等。此類網(wǎng)站的設(shè)計風(fēng)格多樣，或輕松活潑，或時尚另類；或鮮艷亮麗，或簡潔明快。因此配色也非常靈活，可以使用任何色彩搭配，如圖2-29所示。44

3．根據(jù)網(wǎng)站風(fēng)格確定網(wǎng)頁色調(diào)

圖2-30男性風(fēng)格網(wǎng)站的網(wǎng)頁（1）男性風(fēng)格。男性風(fēng)格的網(wǎng)頁主要用于戶外運動、健身、男性服飾等與男性相關(guān)的網(wǎng)站。設(shè)計此類網(wǎng)站的網(wǎng)頁時，可選用具有力量感的圖片及黑色、棕色、藍(lán)色、紅色、橙色等作為網(wǎng)頁色調(diào)。此外，網(wǎng)頁中還可使用直線、折線等硬角元素，以凸顯男士的陽剛和力量，如圖2-30所示。為了貼合人們的認(rèn)知習(xí)慣和審美要求，在設(shè)計網(wǎng)頁時可根據(jù)網(wǎng)站內(nèi)容和風(fēng)格選擇不同的色彩和視覺元素，使網(wǎng)頁達(dá)到形式和內(nèi)容的統(tǒng)一。圖2-31女性風(fēng)格網(wǎng)站的網(wǎng)頁（2）女性風(fēng)格。女性風(fēng)格的網(wǎng)頁主要用于與美容、化妝、休閑娛樂、女性服飾等相關(guān)的網(wǎng)站。此類網(wǎng)頁中使用的元素相對柔和，色調(diào)可以選擇低明度的紫色、暗紅色等，以表現(xiàn)成熟女性的神秘和優(yōu)雅；或者使用高明度的粉色、黃色、藍(lán)色等，以表現(xiàn)年輕女性的俏皮和清純，如圖2-31所示。45

圖2-32“中國風(fēng)”網(wǎng)頁（3）古典風(fēng)格。古典風(fēng)格的網(wǎng)頁主要用于企業(yè)形象或商品風(fēng)格偏向“中國風(fēng)”或“歐洲古典風(fēng)”的網(wǎng)站。“中國風(fēng)”的網(wǎng)頁較為素雅，通常使用毛筆字體和印章元素來傳達(dá)中國文化，并使用黑色、墨綠色和白色等作為網(wǎng)頁色調(diào)，以體現(xiàn)中國人獨有的水墨情懷，如圖2-32所示?！皻W洲古典風(fēng)”的網(wǎng)頁色彩感覺相對厚重，往往使用深紅、黑色、褐色、鈷藍(lán)、金色等，營造出如油畫般質(zhì)感的頁面，如圖2-33所示。圖2-33“歐洲古典風(fēng)”網(wǎng)頁46

圖2-34自然風(fēng)格網(wǎng)頁（4）自然風(fēng)格。自然風(fēng)格的網(wǎng)頁主要用于與休閑旅游、食品、化妝品等相關(guān)的網(wǎng)站。這種風(fēng)格的網(wǎng)頁大多會使用真實的外景素材來體現(xiàn)自然氣息。設(shè)計時，色彩可以提取自然界的顏色，如天的藍(lán)色、云的白色、樹的綠色、草的青色等，如圖2-34所示。47

48

圖2-35時尚風(fēng)格網(wǎng)頁（5）時尚風(fēng)格。時尚風(fēng)格的網(wǎng)頁多用于與珠寶、化妝品、婚紗、潮流科技產(chǎn)品等相關(guān)的重視視覺效果的網(wǎng)站。這種風(fēng)格的網(wǎng)頁需要呈現(xiàn)出簡約、精致、高品質(zhì)的感覺。設(shè)計時，可以使用飽和度高、對比鮮明的色彩來烘托氣氛，如圖2-35所示；也可以使用高明度顏色或直接使用黑色、白色或灰色，給人高品質(zhì)的感覺。2.3學(xué)以致用才能搭配好網(wǎng)頁顏色，下面應(yīng)用前面所學(xué)知識為網(wǎng)頁Banner進(jìn)行配色。通過本案例，讀者將掌握配色思維模式。課堂案例——為網(wǎng)頁Banner配色視頻講解50

在Photoshop中打開本書配套素材“第2章”文件夾中的“為網(wǎng)頁Banner配色素材.psd”素材文件，如圖2-36所示。步驟1圖2-36打開素材文件51

在為作品配色前需要先確定設(shè)計思路，分析作品要表達(dá)的效果及設(shè)計方向，如圖2-37所示。步驟2圖2-37確定作品要表達(dá)的效果及設(shè)計方向52

確定作品的設(shè)計方向后，需要對配色進(jìn)行考慮。首先確定色調(diào)冷暖，再確定使用什么色系。本例首先考慮使用冷色調(diào)的藍(lán)色系，如圖2-38所示。步驟3圖2-38確定作品要使用的色調(diào)和色系53

藍(lán)色表示純凈、清新，很符合肌膚水化妝品的特點。將背景色確定為藍(lán)色，搭配體現(xiàn)女性優(yōu)雅、奢華和品位的紅色作為畫面的輔助色，然后在產(chǎn)品后方添加綻放的冰塊（與背景顏色相匹配），最后將文案對稱排列，完成初稿的制作，如圖2-39所示。步驟4圖2-39藍(lán)紅搭配54

藍(lán)色與紅色雖然比較搭配，但初稿中顏色純度偏高，沒有達(dá)到清新、純凈、自然的視覺效果，因此調(diào)整畫面中素材的排列位置，并重新搭配顏色，如圖2-40（a）所示。再根據(jù)藍(lán)色進(jìn)行聯(lián)想，搭配粉色的花瓣和白色云彩，藍(lán)色作為