宋翠君

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

關(guān)鍵詞：網(wǎng)頁 視覺元素 情感設計

檢 索：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)頁視覺元素情感化設計的重要性

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

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

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

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

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

（一）網(wǎng)頁視覺元素色彩的情感設計

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

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

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

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

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

（二）網(wǎng)頁視覺元素形態(tài)的情感設計

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

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

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

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

（三）網(wǎng)頁視覺元素組合方式的情感設計

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

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

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

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

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

三、結(jié)語

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

注釋

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

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

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

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

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