網頁視覺元素的情感設計

宋翠君

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

關鍵詞：網頁 視覺元素 情感設計

檢 索：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

一、網頁視覺元素情感化設計的重要性

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

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

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

二、網頁視覺元素色彩、形態、組合方式的情感設計

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

（一）網頁視覺元素色彩的情感設計

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

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

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

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

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

（二）網頁視覺元素形態的情感設計

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

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

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

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

（三）網頁視覺元素組合方式的情感設計

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

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

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

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

比例是數量之間的對比關系，是部分與部分或部分與全體之間的數量關系。恰當的比例有一種諧調的美感，是視覺美感的重要內容。最知名的如早在古希臘就已被發現的黃金分割比1：1.618。在網頁設計中，各視覺元素之間形的大小、寬窄、高低的比例關系協調與否，是直接決定著頁面形態的視覺美感的重要因素。

三、結語

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

注釋

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

[2] [美]魯道夫·阿恩海姆.藝術與視知覺[M].騰守堯，朱疆源，譯.成都：四川人民出版社，2001：457-467

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

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

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