探析色彩搭配在網頁設計教學中的有效運用

張淑榮蘇兵

(1.廣東白云學院電氣與信息工程學院，廣東廣州510450；2.廣州白云工商高級技工學校，廣東廣州510450)

1.引言

對于剛剛學習網頁設計的學生而言，在網頁設計中，最難的不是各種工具怎么使用，而是要懂得怎么把一個網頁設計得非常漂亮，這個不僅僅考驗大家的技術，更考驗網頁設計者的藝術美感。每個網頁設計師在遵循設計規律的同時還希望能夠有自己獨特的風格，這就需要勇氣，敢于創新，大膽地進行藝術創作，唯有這樣才能夠做出符合客戶要求，同時又不超出這類網站要求，且具有藝術特色、風格獨特、個性鮮明的網頁。然而隨著行業的增多，在網頁設計中色彩運用的重要性也突出地體現出來。由于高職院校的培養目標是技能型的人才，要在有限的時間掌握從業所需的技能，提高學生的綜合素質和動手操作能力?？煽v觀歷屆學生的作品不難發現，在這些作品中，最大的問題就在于網頁中的色彩搭配。就此問題，本文從色彩搭配的理論講解及其實操訓練兩個方面探析網頁設計教學過程中色彩該如何合理有效地被運用。

2.在理論講解中，讓學生了解網頁設計的色彩搭配理論

2.1 認識色彩搭配的整體性

既然色彩被人為地賦予了情感色彩，自然可以帶給人的心理感受也不同，所以網站的信息主題是進行色彩設計的首要考慮因素，網站的整體色彩搭配應符合網站的主題信息特征。同一個網站的不同頁面能夠局部使用同一色彩，這樣就可以通過色彩將頁面之間的聯系傳達給瀏覽者，由此產生整體和諧之美。一般說來，一個網站的標準色彩不超過三種，色彩過多易造成搭配效果的雜亂無章。在網頁配色設計中，確定網頁的主色調是第一步，也是非常關鍵的一步，主色調就猶如船的風帆，對整個網頁起著主導作用。網站整體的色彩設計是個系統工程，要有計劃性，必須進行統一規劃，統一風格，這樣才可以形成整個網頁的整體性。下面談談確定主色調的兩種常用方法：

(1)根據企業的行業特點和產品特點，確定主色調。例如，兒童教育網或一些母嬰網站，多應用橙色為主色調，因為橙色是最溫暖的色彩，給人帶來幸福的感覺，更能吸引兒童或家長的眼球。

(2)根據企業網站面向的主要用戶群體的喜好，確定主色調。例如，一個以女性為主題的網站，可以使用粉色，象征著女性的柔美。

另外，網頁文字色彩的處理對文字顏色的處理要把握兩方面的原則：可讀性和感情傳達。文字是傳達信息的載體，字體顏色選擇必須易于辨識和閱讀，而不能僅為了設計而設計。每一種字體都有自己獨特形態，同樣，不同的字體顏色也有自己的情感象征內涵。

2.2 了解色彩搭配的適應性

色彩本身有自己的情感，不同的色彩能夠表達不同的心理感受。作為網頁設計者，色彩的選擇應有針對性，選擇與主題相一致的色彩。下面對一些常見的顏色進行分析：

紅色——是一種激奮的色彩，能使人產生沖動、憤怒、熱情、活力的感覺，這種顏色在表達吉祥喜慶氛圍和食品的網站中被廣泛應用。

綠色——介于冷暖兩種色彩的中間，給人以和睦、寧靜、健康、安全的感覺，在教育、環保和健康類的網站中，綠色應用最為廣泛。

藍色——是最具涼爽、清新、專業的色彩，體現柔順、淡雅、浪漫的氣氛。主要應用于銀行、高科技企業網站，在一些表達感性訴求的文學作品網站中也可以應用。

白色——具有潔白、明快、純真、清潔的感受，在一些高檔商品的網站中經常應用。

黑色——具有深沉、神秘、敏銳、先進、穩重的感受，這一類的配色方案可應用于軍事網站，高科技產品等。

另外，流行色是人們對色彩的偏好和追求時髦的心理表現，受時間性和季節性的影響，體現了不同時代、不同文化背景下的人們對于色彩的選擇和情感，反映了一個時代的審美特征。2012年是奧運年，玫瑰紅是今年的流行色，不論是在奧運場館還是大大小小的網站，無處不在的就是那一抹玫瑰紅。作為網頁設計師，就要特別關注流行色的發展，做一個色彩方面的有心人，就會使自己的網頁作品富有朝氣，充滿人氣。

2.3 了解網頁色彩搭配的技巧

(1)用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，其實就是將色彩變淡或加深，產生新的色彩，用于網頁。這樣的頁面看起來色彩統一，有層次感。

(2)用兩種色彩。先選定一種色彩，然后選擇它的對比色。比如，藍色和黃色就是對比色。這樣整個頁面色彩豐富但不花哨。

(3)用一個色系。簡單地說就是用一個感覺的色彩，例如淡藍、淡綠；或者土黃、土藍。

(4)用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很“跳”。

3.在實操訓練中，讓學生掌握色彩搭配在網頁設計的有效運用

3.1 教師實例分析，學生模仿訓練

在學生了解了網頁設計的色彩搭配理論之后，教師需要及時做舉例分析，學生模仿訓練，讓學生消化這些比較抽象的理論。下面以一個主色調為藍色的網頁進行舉例分析。主要因為藍色是冷色調最典型的代表色，是網站設計中運用得最多的顏色，也是許多人鐘愛的顏色。下面根據藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配。

圖1 Everyone’s Hero網站首頁效果圖

如圖1所示，該網站的藍色系強對比：藍色+紅色。藍色是冷色系的最典型的代表了，而紅色是暖色系里最典型的代表，兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮，很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框起來，在藍色背景對比下，很好的突出主題，又好似模仿投影熒屏的感覺，讓人迅速聚焦于視頻中心，達到網站背后的最終目的。輔色調是紅色，從數值上看接近于正紅色，紅色對視覺傳遞的信息是很快的，屬于高昂響亮的顏色。點睛色分別是黃色、黃綠色。大家知道，黃色是明度最高的顏色，也較響亮、刺目，在這里的運用能強烈地突現標題。從整體來看，點睛色黃綠色與輔助色紅色是對比色，雖然面積不太大，只小范圍的對比，但是已經足以達到了迅速傳遞信息的效果，讓人印象深刻，促成再訪點擊。

教師首先邊實例講解，邊演示操作，再指導學生模仿設計，最后教師點評一些做得好的和一些做得不太好的地方，或教師讓學生互相點評，這樣不但能提高學生網頁設計的技能和學習該課程的興趣，還能提高學生的語言表達能力和增強師生的課堂互動，讓學生“愛學”和“樂學”該課程，為培養新一代網頁設計師奠定基礎。

3.2 學生自由設計為主，教師講解為輔

學生通過模仿訓練，從中理解這種色彩搭配的理念，經過幾次類似的訓練后，喜歡網頁設計的學生會掌握上面所述的網頁設計的色彩搭配理論。接著下一個重點的教學任務轉向學生依據這些原則自由設計網站，教師定期對學生進行專業的指導。并不是所有學生都喜歡這門課程，所以教師在中后期的指導中，挖掘一些這方面的苗子進行重點培養，鼓勵他們參加課外的網頁設計協會和參與協會的外包網頁設計項目，學習更多更新的關于網頁設計的理念和技能，并鼓勵他們參加校內外的網頁設計技能競賽，從中獲得更多更好的實戰經驗，這對一個想成為網頁設計師的在校學生來說，再好不過了。如果有條件，可推薦這些優秀的學生在寒暑假到網頁設計的公司打寒暑假工，或學生自找公司，更能成就學生。

4.結束語

總之，教師要培養學生對色彩的敏感度，當他們首次接觸一件設計作品，最先攫取其注意力的，就是作品的顏色，其次是圖像，最后才是文字。經過教師的引導，并結合學生長期的努力才能在實操訓練中理解色彩搭配的理論，才能在個人的作品中表現這些理念，故培養學生從“做”中“學”，又“學”中“做”，進而成為優秀的網站設計者，為學生的人生增加一項謀生的技能，也為IT行業的高質量發展做出教師應有的貢獻。

[1]楊旭蘭.色彩在網頁設計中的應用研究[D].南京林業大學學報，2009.

[2]王萍.淺談網頁色彩的配色[J].硅谷，2009(1)：124.

[3]劉會菊.淺析網頁美工設計中色彩搭配[J].城市建設理論研究，2011，6.

[4]陳慧民，李咸龍.web標準的發展與應用[J]北京：計算機系統應用，2008(10).