網(wǎng)頁GUI設(shè)計中的配色設(shè)計

【摘 要】色彩作為網(wǎng)頁設(shè)計的第一視覺元素深受設(shè)計者的關(guān)注，在網(wǎng)頁設(shè)計課程中配色設(shè)計是靜態(tài)頁面設(shè)計中的重要環(huán)節(jié)，它影響網(wǎng)站的整體風(fēng)格定位和情境氛圍。那么，如何實(shí)現(xiàn)最優(yōu)的網(wǎng)頁配色，更好的服務(wù)于設(shè)計，成為我們本次探討的中心話題。

【關(guān)鍵詞】網(wǎng)頁配色設(shè)計；網(wǎng)頁設(shè)計；項(xiàng)目教學(xué)

現(xiàn)代社會“網(wǎng)頁”的出鏡率不斷攀升，在人們的工作、學(xué)習(xí)和生活中扮演重要的角色，成為人們熟悉、使用互聯(lián)網(wǎng)的關(guān)鍵通路。

網(wǎng)頁設(shè)計作為一門技術(shù)與藝術(shù)銜接比較緊密的設(shè)計課程，同時也是“教育與產(chǎn)業(yè)發(fā)展相結(jié)合”的實(shí)踐環(huán)節(jié)，常常開設(shè)在各大專院校和職業(yè)學(xué)院，并被設(shè)置為主干課程。在教學(xué)過程中，我們一般沿用工程項(xiàng)目的構(gòu)思、設(shè)計、實(shí)施、運(yùn)行的流程開展教學(xué)活動。而本文中重點(diǎn)談到的是這些教學(xué)活動中涉及到的具體“配色設(shè)計”。

1.網(wǎng)頁GUI配色設(shè)計作用

1.1 網(wǎng)頁配色設(shè)計的心理學(xué)作用[1]

網(wǎng)頁設(shè)計中，設(shè)計師往往通過色彩傳達(dá)豐富的信息，色彩除了發(fā)揮基本的辨識作用外，還可在更深層次影響人們的心理活動，更進(jìn)一步影響人們的行為活動。

1.1.1 紅色

紅色作為可見光譜中光波最長的顏色，鮮明的色彩成為人們關(guān)注的視覺中心。紅色還會帶給人們直接的生理感受，在紅色環(huán)境中會刺激人們腎上腺素分泌，產(chǎn)生興奮、緊張等情緒。在色彩表現(xiàn)上，紅色傳達(dá)著熱情、奔放、活力、戰(zhàn)爭、危險等訊息。在網(wǎng)頁設(shè)計配色方案中，我們常常會接觸到紅黑、紅黃和紅白的配色應(yīng)用。在設(shè)計中紅黑配色是經(jīng)典的配色方案，給人帶來沉穩(wěn)、安全的心理感受。紅黃配色為網(wǎng)頁營造帶來富貴、喜慶、活力的氛圍。紅白搭配給人帶來醒目、清新的氣氛。

1.1.2 橙色

橙色是一種成熟的顏色，帶給人們甜蜜、豐收和喜悅的色彩感情。橙色屬于暖色系色彩，可以營造出溫暖、柔和、舒適的色彩氛圍。在網(wǎng)頁設(shè)計中運(yùn)用橙色，會帶給訪問者朝氣、活力、喜悅、愉快的心理感受。網(wǎng)頁設(shè)計中常用的配色方案有橙白、橙黃、橙藍(lán)、橙綠等。

1.1.3 黃色

黃色在光譜中波長處于中間位置，黃色也是有彩色中明度最高的顏色，黃色帶給人們明亮、絢爛等太陽的特質(zhì)，也會為人們帶來愉快的心情，黃色也是一種青春的顏色，即懵懂又青澀。在特定背景下黃色也有不同的含義，如中國古代帝王使用黃色，黃色代表尊貴和權(quán)力。佛教中黃色表示脫俗、素雅、超然物外。

在設(shè)計中通常不大面積使用黃色，黃色明度較高，長時間觀看容易引起視覺疲勞，另外，在心理上黃色過多使心情急躁。在網(wǎng)頁設(shè)計中黃色常與其他顏色搭配調(diào)和使用，如黃黑、黃白、黃藍(lán)、同色系搭配等方案。

1.1.4 綠色

綠色在光譜中的分布居中，視覺感覺較為平和。綠色帶給人自然、新鮮、希望、健康等心理聯(lián)想。在網(wǎng)頁設(shè)計中常見綠黃、綠白、綠藍(lán)漸變過渡，給人提供清新、舒適、安全等信息。

1.1.5 藍(lán)色

藍(lán)色屬于冷色調(diào)，在光譜中屬于頻率最短的顏色。藍(lán)色帶給人睿智、沉穩(wěn)、憂郁、寧靜等心理感受。在網(wǎng)頁設(shè)計中藍(lán)色和灰色常常帶有科技色彩，會出現(xiàn)在信息類網(wǎng)站的頁面配色中。另外，明度較高的淺藍(lán)色也會給人帶來活潑、松弛、休閑的感受。網(wǎng)頁中常使用藍(lán)黃、藍(lán)白、藍(lán)與彩色等不同的配色。

1.1.6 紫色

紫色是波長最短的可見光。紫色帶給人以權(quán)利、高貴、神秘、迷惘、歷史感等感覺。紫色介于藍(lán)色與紅色的混合，因此我們還會接觸到藍(lán)紫色與紫紅色兩種顏色。在網(wǎng)頁配色中我們常見的有紫白、紫黃、紫蘭、紫紅等搭配。

1.1.7 黑色

黑色屬于無彩色，常常做為輔助色和多種顏色搭配，增加網(wǎng)頁頁面效果。黑色表達(dá)深沉、穩(wěn)定、尊貴、苦澀、痛苦和死亡等多種含義。

1.1.8 白色

白色也屬于無彩色，具有純潔、干凈、干練等特質(zhì)。在網(wǎng)頁中常常和多種顏色搭配使用，增加頁面明度和空氣感，不會使頁面沉悶；同時，也會與黑色搭配使用，以國畫白描和西方素描的繪畫形式表現(xiàn)頁面效果。

1.2 網(wǎng)頁配色設(shè)計的交互式體驗(yàn)作用[2]

1.2.1 色彩中的視覺體驗(yàn)

色彩可以反映特定國家、地域和民族的文化，同時承載特定歷史時期的時代訊息，為人們留下深刻的印象和豐富的聯(lián)想。

在我國人們對紅色情有獨(dú)鐘，紅色除了色彩辨識上的鮮明特色外，具有諸多的引申釋義，如：吉祥、喜慶、熱烈的感情等，常出現(xiàn)在節(jié)慶裝點(diǎn)、婚慶服飾、傳統(tǒng)藝術(shù)與古代建筑中；可口可樂在紅色的使用上更好的與中國“節(jié)慶文化”鏈接，充分展現(xiàn)了紅色熱烈、喜慶的特質(zhì)。

色彩在各國出現(xiàn)的顯著代表如：各國的國旗、服裝、飲食等。以國旗為例，中國的五星紅旗，美國的星條旗，英國的米字旗，法國和意大利的三色旗等。國旗的配色都共同反映了本國家、民族的特色，及其特定歷史時期的文化承載。

1.2.2 色彩中的感知覺體驗(yàn)

色彩可以提供給我們冷暖的體驗(yàn)。夏天，我們喜歡穿淺色的服裝，帶給人涼爽的感覺。冬天，人們大多喜歡選擇穿著色彩飽和度較高的服裝，如深藍(lán)色、紫色、紅色、褐色、黑色等顏色。在網(wǎng)頁設(shè)計中我們也通過這種冷暖關(guān)系影響訪問者的心理，進(jìn)而產(chǎn)生色彩的冷暖感知交互。必勝客官網(wǎng)選用紅色的漸變效果來展示自己的產(chǎn)品，給人火熱、新鮮出爐的感覺，進(jìn)而影響人們的食欲，促進(jìn)消費(fèi)心理。雪碧官網(wǎng)采用不同明度的綠色和藍(lán)色搭配，給人帶來涼爽、清新的感受，正應(yīng)和了那句slogan，“透心涼，心飛揚(yáng)”。

色彩還可以提供給我們嗅覺的體驗(yàn)，在記錄片“舌尖上的中國”中，我們很好的感受到了色彩帶給我們的嗅覺盛宴，各色特色美食，為我們帶來的視覺與嗅覺的沖擊，調(diào)動人們即刻前往品嘗的欲望。

在網(wǎng)頁設(shè)計中，我們也時常根據(jù)產(chǎn)品與信息設(shè)置網(wǎng)站配色?？Х壬?、黑色會帶給人苦澀的滋味，在特定咖啡品牌網(wǎng)站或可可飲品銷售網(wǎng)站中比較多見。橘色和紅色帶給人酸甜、鮮辣的嗅覺體驗(yàn)，在餐飲類網(wǎng)站選色中多被采用。不同明度的綠色代來新鮮、多汁、酸澀的體驗(yàn)，多出現(xiàn)在餐飲、兒童等特定網(wǎng)站中。

2.網(wǎng)頁GUI配色設(shè)計應(yīng)用[3]

2.1 單色應(yīng)用

在網(wǎng)頁設(shè)計中單色應(yīng)用交常見，可以根據(jù)色彩的心理影響來選擇，比較好掌握，可以配合黑和白這兩種無彩色使用。在化妝品牌“安娜蘇”的官網(wǎng)界面設(shè)計中，采用了紫色這一主色，一是紫色為其企業(yè)形象配色，另外，紫色代表高貴、典雅、溫柔、神秘等女性特質(zhì)，正好迎合了該品牌的產(chǎn)品。

2.2 雙色應(yīng)用

在網(wǎng)頁設(shè)計中雙色應(yīng)用也交常見，可以選用對比色或互補(bǔ)色，營造特別的視覺效果。亨氏兒童輔食網(wǎng)站，網(wǎng)頁配色上采用明亮的淺綠色、天藍(lán)色和白色，給人清新、健康、安全的感受，讓訪問者可以放心購買這種品牌的食品。普拉提健身網(wǎng)站，采用橙綠的主題配色方案，給人健康、愉悅、放松身心的感受。

2.3 多色應(yīng)用

在網(wǎng)頁設(shè)計中多色應(yīng)用會根據(jù)需求使用，可以選用近似色或同類色，或者漸變色等。同時，多色的使用會在視覺上造成雜亂，中心點(diǎn)不明確等感受，應(yīng)遵循統(tǒng)一性、平衡性和變異性等設(shè)計原則。多色設(shè)計多出現(xiàn)在兒童相關(guān)網(wǎng)站、個人風(fēng)格網(wǎng)站（設(shè)計師網(wǎng)站等）、和特定企業(yè)網(wǎng)站中（如攝影機(jī)構(gòu)網(wǎng)站等）。

3.小結(jié)

網(wǎng)頁設(shè)計課程依據(jù)實(shí)際項(xiàng)目案例教學(xué)，教師可以根據(jù)實(shí)例引導(dǎo)式教學(xué)，以“臨摹”實(shí)例的方式，教導(dǎo)學(xué)生理解運(yùn)用技能，再進(jìn)一步擬定題目，變換要求，鍛煉學(xué)生的創(chuàng)新思維，將理論結(jié)合實(shí)踐，在實(shí)踐中鍛煉創(chuàng)新，為今后的教學(xué)與產(chǎn)業(yè)結(jié)合打好基礎(chǔ)。

參考文獻(xiàn)：

[1]王娜.Dreamweaver網(wǎng)頁制作與色彩搭配全攻略[J].清華大學(xué)出版社，2006.

[2][美]Elliot Jay Stocks.網(wǎng)頁的吸引力設(shè)計法則[M].電子工業(yè)出版社，2011.

[3][日]奧博斯科編輯部（Obscureinc）.配色設(shè)計原理[M].中國青年出版社，2009.