宋翠君

摘 要：當(dāng)今高技術(shù)的時(shí)代需要有高情感的環(huán)境，網(wǎng)站的情感設(shè)計(jì)是當(dāng)下網(wǎng)站設(shè)計(jì)的重頭戲，令人愉悅的外觀能夠大大提高網(wǎng)站的可用性。眾多的視覺(jué)元素構(gòu)成了整個(gè)網(wǎng)頁(yè)的外觀，而這些所有視覺(jué)元素的外觀，又是由它們的色彩、形態(tài)和組合方式來(lái)形成的，從這三方面把握好視覺(jué)元素情感設(shè)計(jì)的基本規(guī)律，有助于我們對(duì)網(wǎng)站用戶建立起良好的第一印象，給用戶營(yíng)造出高情感的網(wǎng)絡(luò)環(huán)境。

關(guān)鍵詞：網(wǎng)頁(yè) 視覺(jué)元素 情感設(shè)計(jì)

檢 索：www.artdesign.org.cn

Abstract ：High technology era needs a high emotional environment. Now the emotion design is the highlight of the website design. Pleasant appearance can greatly improve the website usability. The webpage appearance consist of numerous visual elements， and all the visual elements appearance is composed of their color， shape and the way of combination. Grasp the basic rules of emotion design for visual elements from these three aspects， will help us to establish a good first impression and create a high emotional network environment for web users.

Keywords ：Webpage， Visual Elements， Emotion Design

Internet ：www.artdesign.org.cn

一、網(wǎng)頁(yè)視覺(jué)元素情感化設(shè)計(jì)的重要性

當(dāng)今的世界，網(wǎng)絡(luò)媒體以各種形式充斥著人們的生活：電腦、智能手機(jī)、智能家電、手持設(shè)備等等，人們能夠以前所未有的方便快捷的方式來(lái)獲取信息。然而，隨之而來(lái)的一個(gè)重大變化卻被忽略，那就是無(wú)論是在人們的工作、生活還是娛樂(lè)時(shí)，人們直接接觸的對(duì)象始終是機(jī)器，而不再是人。當(dāng)人們的信息交流對(duì)象更多的是高科技的產(chǎn)品而不是其他人時(shí)，人性中情感交流的需求就越發(fā)凸現(xiàn)出來(lái)。宅男宅女盛行的時(shí)代，也正是人們情感缺失的時(shí)代。人們需要交流對(duì)象是有情感的，或者是能激發(fā)自身情感反應(yīng)的。因此，在整個(gè)社會(huì)大力發(fā)展新媒體、新技術(shù)的同時(shí)，這種技術(shù)的情感化方面的研究必須引起足夠的重視，只有用技術(shù)的軟性來(lái)平衡其硬性的一面，才能創(chuàng)造出真正符合人性需求的技術(shù)，才能促進(jìn)社會(huì)的和諧穩(wěn)定發(fā)展。

另一方面，從產(chǎn)品發(fā)展角度來(lái)說(shuō)，產(chǎn)品的生長(zhǎng)周期一般可以分為四個(gè)階段：引入期、成長(zhǎng)期、成熟期和衰退期。在網(wǎng)站誕生之后，人們更多的把精力放在其使用功能的實(shí)現(xiàn)和完善上。然而，一個(gè)成熟的產(chǎn)品應(yīng)該是物質(zhì)和精神的雙重載體，在滿足實(shí)用功能的同時(shí)，豐富著人們的情感需求。目前，網(wǎng)站已進(jìn)入其發(fā)展周期的成長(zhǎng)期，技術(shù)手段的完善和豐富為網(wǎng)站的情感表現(xiàn)提供了可能。同時(shí)，當(dāng)技術(shù)不再是障礙，各種網(wǎng)站如雨后春筍般興起的時(shí)候，其獨(dú)有的精神內(nèi)涵便成了網(wǎng)站的個(gè)性化標(biāo)簽，成為其脫穎而出的必備要素。因此，在保障網(wǎng)站可用性的基礎(chǔ)之上，充分重視更高層次的情感層面的東西，是當(dāng)下網(wǎng)站設(shè)計(jì)的重點(diǎn)，是使網(wǎng)站能夠順利從成長(zhǎng)期發(fā)展到成熟期的關(guān)鍵所在。

著名認(rèn)知心理學(xué)家唐納德·A·諾曼教授曾說(shuō)過(guò)：“美觀的物品更好用”[1]，言簡(jiǎn)意賅的道明了網(wǎng)頁(yè)藝術(shù)性與功能性之間的關(guān)系。目前，我們可以通過(guò)網(wǎng)站做多種事情：瀏覽資訊、聊天、找工作、玩游戲、寫(xiě)日志、電子交易、聽(tīng)音樂(lè)、看電影等等。這些不同的事情有著不同的操作方法，同時(shí)操作過(guò)程又牽涉到網(wǎng)站用戶、用戶操作的電腦、網(wǎng)絡(luò)傳輸環(huán)境、服務(wù)器四大對(duì)象，任何一個(gè)環(huán)節(jié)出現(xiàn)問(wèn)題都會(huì)直接影響到用戶操作成功與否。一旦我們的嘗試沒(méi)有達(dá)到需要的結(jié)果，最自然的反應(yīng)是更努力的接著試。然而面對(duì)計(jì)算機(jī)，我們重新做相同的操作難以達(dá)到不同的結(jié)果。正確的反應(yīng)是尋找別的解決方法，而負(fù)面情感會(huì)使人的注意力往深度上深入而不是廣度上擴(kuò)展，積極的情感則使得我們的頭腦靈活富有創(chuàng)造性。因此，如果一個(gè)網(wǎng)站具有美觀的外觀，獲得人們的喜愛(ài)給人帶來(lái)愉悅的感受，那這個(gè)網(wǎng)站的可用性也得以大大提高。

二、網(wǎng)頁(yè)視覺(jué)元素色彩、形態(tài)、組合方式的情感設(shè)計(jì)

唐納德·A·諾曼在其著作《情感化設(shè)計(jì)》中把情感化設(shè)計(jì)分為本能、行為、反思三個(gè)層次?！氨灸芩教幱谝庾R(shí)之前，思維之前。這是外形顯得重要，并會(huì)形成第一印象的原因。本能水平的設(shè)計(jì)與產(chǎn)品的最初效果有關(guān)，涉及產(chǎn)品的外形、質(zhì)地和手感。[1]”本能水平的設(shè)計(jì)是基于人的本能反應(yīng)。在本能水平上，全世界的人都大致相同。網(wǎng)頁(yè)的外形是由眾多視覺(jué)元素組成的，這些視覺(jué)元素主導(dǎo)著網(wǎng)頁(yè)給用戶帶來(lái)的情感。

（一）網(wǎng)頁(yè)視覺(jué)元素色彩的情感設(shè)計(jì)

心理學(xué)研究表明，人的視覺(jué)器官在觀察物體時(shí)，在最初的幾秒內(nèi)色彩感覺(jué)占80%，而形體感覺(jué)只占20%，兩分鐘后色彩占60%，形體占40%，五分鐘后色彩形體各占一半，并維持這種狀態(tài)。在網(wǎng)頁(yè)的各視覺(jué)元素中，表現(xiàn)作用最直接、最快速、最明顯的就是色彩。我們打開(kāi)一個(gè)網(wǎng)站，首先給我們留下深刻印象的不是網(wǎng)站的布局，也不是網(wǎng)站的內(nèi)容或功能，而是網(wǎng)站的色彩體系?？梢?jiàn)色彩設(shè)計(jì)在網(wǎng)頁(yè)的情感設(shè)計(jì)里占據(jù)著非常重要的地位。魯?shù)婪颉ぐ⒍骱Ｄ氛f(shuō)過(guò)：“色彩能夠表現(xiàn)感情，這是一個(gè)無(wú)可辯駁的事實(shí)。[2]”那么，網(wǎng)頁(yè)中運(yùn)用的色彩是如何表現(xiàn)感情的呢，下面從三個(gè)方面進(jìn)行分析：

首先，不同色相的色彩會(huì)給用戶帶來(lái)不同的心理振蕩，形成不同的情感。歌德把色彩劃分為積極的色彩（黃、紅黃、黃紅）和消極的色彩（藍(lán)、紅藍(lán)、藍(lán)紅）。積極的色彩能夠產(chǎn)生出一種“積極的、有生命力的和努力進(jìn)取的態(tài)度”，消極的色彩，則“適合表現(xiàn)那種不安的、溫柔的和向往的情緒”[2]。比如可口可樂(lè)中國(guó)網(wǎng)站的主色運(yùn)用的就是其標(biāo)準(zhǔn)色鮮紅，光亮奪目、熱情似火，充分傳達(dá)出一種激情、快樂(lè)的積極情緒，同時(shí)又滿足了中國(guó)人對(duì)喜慶的紅色的偏好情懷。這里要注意的是，不同文化背景的人對(duì)色彩情感的釋義會(huì)有不同，設(shè)計(jì)師要順利傳達(dá)某種情感，所選擇的色相需要考慮到網(wǎng)站用戶的生活經(jīng)驗(yàn)和文化背景。比如在中國(guó)傳統(tǒng)文化主題的網(wǎng)站里，我們用黃色來(lái)表達(dá)帝王般的尊貴，但在西方文化背景里，紅色才是使人敬畏的帝王的顏色，因?yàn)樗鼤?huì)使人“想起最后審判的日子那布滿天地的紅色”[2]。endprint

其次，色彩的情感表現(xiàn)不僅取決于它的色相，還取決于它的明度和飽和度。不同色調(diào)配色的網(wǎng)頁(yè)能夠表現(xiàn)出不同的情感。如由高純色相組成的純色調(diào)充滿活力與朝氣，給人以積極奮進(jìn)的情感體驗(yàn)；加入了大量白色的明色調(diào)透明、明凈、清麗，給人以輕快的感受；加入了適量灰色的中灰調(diào)高雅、大方、古樸，給人以安寧、沉靜的心理感受；加入了大量黑色的暗色調(diào)低沉、冷漠，讓人覺(jué)得壓抑，心情黯淡。這些不同色調(diào)引發(fā)的不同感情傾向，為網(wǎng)頁(yè)設(shè)計(jì)師運(yùn)用色彩表達(dá)情感提供了另一種途徑。

最后，還有一些外在的因素會(huì)影響到色彩的情感表現(xiàn)，如色彩的形式、表現(xiàn)的主題等?？刀ㄋ够凇墩撍囆g(shù)的精神》里提到：“色彩和形式之間的必然聯(lián)系向我們提出了形式對(duì)色彩的作用的問(wèn)題?！薄昂苊黠@，某些色彩的內(nèi)涵能夠因?yàn)樗玫哪承┬问蕉靡约訌?qiáng)或減弱。一般來(lái)說(shuō)，刺眼的色彩較適用于輪廓鮮明的形狀（如黃色用于三角形），柔和、深暗的色彩較適用于圓形（如藍(lán)色用于一個(gè)圓圈）?！盵3]色彩必定要以一定的形狀呈現(xiàn)出來(lái)，同色彩一樣，不同的形狀也有不同的情感，如果兩者表現(xiàn)出來(lái)的情感一致，則色彩的情感內(nèi)涵得以強(qiáng)化，反之則弱化。比如網(wǎng)頁(yè)界面中的Hot圖標(biāo)，常常設(shè)計(jì)成醒目的紅色或者紅黃色再配以有著尖角的星形，從而營(yíng)造出一種緊張的氣氛，以吸引瀏覽者的注意。

另外，同一種色彩表現(xiàn)出來(lái)的情感還可以因網(wǎng)站的主題而改變。比如前面提到的可口可樂(lè)網(wǎng)站的鮮紅色，傳達(dá)出一種熱情、快樂(lè)、喜慶的情緒，但同樣的紅色運(yùn)用到恐怖電影的網(wǎng)站上，則表現(xiàn)出的是讓人心驚膽戰(zhàn)的血腥氣息了。這是因?yàn)槿藗冊(cè)谟^看色彩時(shí)，除了感官被動(dòng)接受色彩帶來(lái)的刺激外，思維還會(huì)主動(dòng)攜帶著這些色彩所要表現(xiàn)的情景的含意來(lái)進(jìn)行觀察。

（二）網(wǎng)頁(yè)視覺(jué)元素形態(tài)的情感設(shè)計(jì)

除了色彩，形態(tài)是被眼睛把握到的物體的第二大基本特征。在用戶對(duì)網(wǎng)頁(yè)第一印象獲取的過(guò)程中，繼色彩沖擊之后緊跟著的重要信息便是網(wǎng)頁(yè)上各視覺(jué)元素的存在形態(tài)。在人們閱讀這些元素的具體內(nèi)容之前，它們的外形就已經(jīng)在人們的心理上植入了相應(yīng)的情感。在網(wǎng)頁(yè)中，形態(tài)有兩大類型，一是就外部形式而言的實(shí)體形態(tài)，比如一張圓形的圖片，一條筆直的分割線。二是就骨骼結(jié)構(gòu)而言的假想形態(tài)，比如人的視線流程所形成的線條。

網(wǎng)頁(yè)中各視覺(jué)元素的存在形態(tài)可歸為點(diǎn)、線、面三種類型。點(diǎn)是靜止的、穩(wěn)固的、簡(jiǎn)明的。單獨(dú)的點(diǎn)有很強(qiáng)的注目性，能夠產(chǎn)生視覺(jué)中心的效果，網(wǎng)頁(yè)中單個(gè)點(diǎn)的形態(tài)能讓人心靈安靜且注意力集中，這種形式在網(wǎng)站的首頁(yè)更常見(jiàn)。需要注意的是，單個(gè)的點(diǎn)放在頁(yè)面中的位置不同所引起的心理感受也是不同的。放在畫(huà)面的正中間，能給人平靜、聚焦的感覺(jué)；放在畫(huà)面頂部，會(huì)給人以不穩(wěn)定感；放在畫(huà)面的底部，能給人安定的感覺(jué)，但容易被忽視。因此在以單個(gè)點(diǎn)為布局形態(tài)的頁(yè)面中，常把最重要的信息如網(wǎng)站LOGO等形成的點(diǎn)放置在畫(huà)面三分之二偏上的位置。

線是源于點(diǎn)的運(yùn)動(dòng)，線的最基本形態(tài)有直線、曲線兩種。正如康定斯基在《點(diǎn)、線、面》里所述：“直線和曲線組成了一對(duì)最基本的對(duì)立線。[4]”線有很強(qiáng)的心理暗示作用，不同的線具有不同的感情性格。政府機(jī)構(gòu)類、資訊門(mén)戶類網(wǎng)站的版式往往是由直線劃分組成的網(wǎng)格型，因?yàn)橹本€嚴(yán)肅有力、安穩(wěn)大氣；兒童、女性、娛樂(lè)類網(wǎng)站的版式則多采用曲線型，因?yàn)榍€輕松活潑、柔美優(yōu)雅。折線有一種速度感同時(shí)又不斷改變方向，讓人立刻聯(lián)想到激動(dòng)、不穩(wěn)定和力量感[5]，因此運(yùn)動(dòng)類網(wǎng)站的頁(yè)面上常見(jiàn)到這種形態(tài)。直線中的水平線讓人有寧?kù)o、平和、安穩(wěn)的感覺(jué)，而垂直線給人崇高、尊嚴(yán)、有力的感覺(jué)，不斷往下延展的垂直線則強(qiáng)化了線的運(yùn)動(dòng)性，如目前流行的瀑布流式布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，錯(cuò)落有致的圖片如同瀑布一般傾瀉而下，給人輕松自由的心理感受。

面是線的移動(dòng)終結(jié)而形成的，一般來(lái)講，由什么類型的線組成的面，它就具有該種線的情感特征。一個(gè)網(wǎng)站的信息量很多，為了更有效的傳達(dá)信息，網(wǎng)頁(yè)上的內(nèi)容文字和內(nèi)容圖片都是以塊面狀來(lái)展現(xiàn)，因此它們不同的情感特征更多的是通過(guò)其輪廓線的形態(tài)來(lái)體現(xiàn)，我們可以結(jié)合前面所述的線的情感特征對(duì)其邊緣輪廓進(jìn)行處理。

（三）網(wǎng)頁(yè)視覺(jué)元素組合方式的情感設(shè)計(jì)

網(wǎng)頁(yè)中視覺(jué)元素的色彩與形態(tài)具有豐富的情感特征，這在上文已有詳細(xì)論述，另一方面，這些視覺(jué)元素之間的組合方式同樣能給人帶來(lái)不同的情感體驗(yàn)。能夠帶來(lái)美好的情感體驗(yàn)的組合規(guī)律有平衡、對(duì)比、節(jié)奏、比例等。

一般而言，平衡是指矛盾雙方在力量上相抵而保持一種相對(duì)靜止的狀態(tài)。在網(wǎng)頁(yè)中，通過(guò)對(duì)視覺(jué)元素的位置、大小、比例、色彩、質(zhì)感等各方面進(jìn)行設(shè)計(jì)，頁(yè)面可以形成一種視覺(jué)平衡。平衡關(guān)系是視覺(jué)美感的最基本要求，視覺(jué)上的平衡能夠給觀者帶來(lái)心理上的平靜。平衡包括對(duì)稱式平衡和非對(duì)稱式平衡，對(duì)稱式平衡是可見(jiàn)的形式上的平衡，而非對(duì)稱式平衡則是抽象的力場(chǎng)上的平衡。對(duì)稱式平衡構(gòu)成的網(wǎng)頁(yè)給人以莊重、穩(wěn)定的感覺(jué)，而非對(duì)稱式平衡構(gòu)成的網(wǎng)頁(yè)視覺(jué)上更豐富活潑、更有動(dòng)感。

對(duì)比是把反差很大的兩個(gè)視覺(jué)要素成功地放置在一起，在某些方面這兩個(gè)視覺(jué)要素有著鮮明的反差，而在其它方面，他們又顯示出統(tǒng)一和諧的感覺(jué)。網(wǎng)頁(yè)中的對(duì)比關(guān)系可以通過(guò)視覺(jué)元素的色彩、形狀、方向、位置、數(shù)量等多方面的比較來(lái)實(shí)現(xiàn)。合理的運(yùn)用對(duì)比關(guān)系不僅能夠使頁(yè)面信息有著明確的主次關(guān)系，而且能夠使頁(yè)面的視覺(jué)效果更加活躍，從而避免沉悶、呆板的情感體驗(yàn)。

節(jié)奏本是指音樂(lè)中音響節(jié)拍輕重緩急的變化和重復(fù)，在設(shè)計(jì)上則是指以同一視覺(jué)要素連續(xù)重復(fù)時(shí)所產(chǎn)生的運(yùn)動(dòng)感。需要注意的是，這種重復(fù)是有變化的而不是簡(jiǎn)單重復(fù)。在網(wǎng)頁(yè)中，重復(fù)的同一視覺(jué)要素很多，如一段段內(nèi)容文字、一個(gè)個(gè)欄目標(biāo)題、一張張圖片等等，如果這些視覺(jué)元素都是按照同一種形式簡(jiǎn)單重復(fù)排版，可以想見(jiàn)最終的頁(yè)面將是多么單調(diào)乏味！而具有節(jié)奏韻律的頁(yè)面，應(yīng)該在這些元素重復(fù)放置時(shí)，進(jìn)行大小、色彩、形態(tài)、距離等方面的變化，從而形成錯(cuò)落有致、富有律動(dòng)感的效果，賦予頁(yè)面以活力和生命，給網(wǎng)站用戶帶來(lái)美妙的情感體驗(yàn)。

比例是數(shù)量之間的對(duì)比關(guān)系，是部分與部分或部分與全體之間的數(shù)量關(guān)系。恰當(dāng)?shù)谋壤幸环N諧調(diào)的美感，是視覺(jué)美感的重要內(nèi)容。最知名的如早在古希臘就已被發(fā)現(xiàn)的黃金分割比1：1.618。在網(wǎng)頁(yè)設(shè)計(jì)中，各視覺(jué)元素之間形的大小、寬窄、高低的比例關(guān)系協(xié)調(diào)與否，是直接決定著頁(yè)面形態(tài)的視覺(jué)美感的重要因素。

三、結(jié)語(yǔ)

網(wǎng)頁(yè)上聚集著各種各樣的視覺(jué)元素，像文字、圖片、動(dòng)畫(huà)、背景等等，文字又分標(biāo)識(shí)文字、導(dǎo)航文字、標(biāo)題文字、正文等，圖片又分為圖形、圖像、小圖標(biāo)等。眾多的視覺(jué)元素各自傳遞著豐富的信息，實(shí)現(xiàn)著網(wǎng)站的功能。它們構(gòu)成了整個(gè)網(wǎng)頁(yè)的外觀，而這些所有視覺(jué)元素的外觀，又是由它們的色彩、形態(tài)和組合方式來(lái)形成的。把握好這些視覺(jué)元素色彩、形態(tài)、組合方式的情感設(shè)計(jì)基本規(guī)律，便能有目的有意圖的營(yíng)造出適當(dāng)?shù)木W(wǎng)頁(yè)情感，從而給網(wǎng)站用戶建立起良好的第一印象，給用戶營(yíng)造出高情感的網(wǎng)絡(luò)環(huán)境。

注釋

[1] [美]唐納德·A·諾曼.情感化設(shè)計(jì)[M].付秋芳，程進(jìn)三，譯.北京：電子工業(yè)出版社，2005：2-20

[2] [美]魯?shù)婪颉ぐ⒍骱Ｄ?藝術(shù)與視知覺(jué)[M].騰守堯，朱疆源，譯.成都：四川人民出版社，2001：457-467

[3] [俄]瓦·康定斯基.論藝術(shù)的精神[M].查立，譯.北京：中國(guó)社會(huì)科學(xué)出版社，1987： 37

[4] [俄]瓦西里·康定斯基.點(diǎn)、線、面——抽象藝術(shù)的基礎(chǔ)[M].羅世平，譯.上海：上海人民美術(shù)出版社，1996：61.

[5] 段軒如.藝術(shù)的表達(dá)與表現(xiàn)[M].北京：北京交通大學(xué)出版社，2009：21.endprint