網頁設計中的視覺語義與寓意

鄧念 DENG Nian武漢科技大學城市學院 430083（Wuhan University of Science and Technology City College , 430083 WuHan）

網頁設計中的視覺語義與寓意

鄧念 DENG Nian
武漢科技大學城市學院 430083（Wuhan University of Science and Technology City College , 430083 WuHan）

網頁設計的目的是要建立條理清晰的網站框架,亦即通過設計有秩序的導航,順暢傳達主題的種種內容。因此,設計新穎的視覺語言、建立吸引用戶的導航方式成了網頁視覺設計的重要內容。在視覺語言一般性表達的基礎上,努力提高視覺語言寓意的文化性與藝術語義的表現性。增強網頁界面的傳達效率與價值則是探討、研究的重點。

網頁；視覺設計；用戶；審美寓意

今天，我們使用的網頁界面全都具有強大的操作功能和技術含量，通過人-機交流的方式以實現界面使用的功能。界面的信息與受眾之間除了一般性語義指示交流之外，還需要使訪問者達到視覺上的愉悅甚至產生更為重要的意義。“人”也就成了設計者研究繞不過去的目標對象，如果界面設計傳達的信息指示不明確，結果就會導致用戶對界面角色產生不確定的信息甚至信息混淆的困惑。即使是在網頁呈現內容的方式等基本問題解決之后，視覺語義的表達在界面視覺設計過程中就更加重要。在多元而快節奏的信息社會，“好酒也怕巷子深”，優良產品的價值是要通過更明確、更有文化品質的視覺語言才能淋漓盡致地表達出來，才能被更多的人更快地所接受的。

通常我們在交談某個事件（信息）的過程中，語言只是傳遞著某一部分的信息，大量其它信息的傳達則是通過語氣、面部表情，甚至肢體語言、手勢等行為實現的。網頁的視覺設計就如交談過程中的一般性語言，但是其一般性語言以外的各種表現形式就更具有表現價值。一般性視覺語言主要是指直觀視覺元素的設計關系，包括文字、符號、色彩、布局、排版、圖像等，但是網站的語義風格、藝術表現、文化寓意卻能夠塑造網站的個性與品質，令網站具有獨特的表現力和吸引力。因此，網頁界面設計的審美第一層次是用直觀視覺元素來闡明網站的基本結構，使整個網站的視覺能夠達到同一性。而直觀視覺元素包括色彩、布局、圖形、字體、輸入表單和導航符號等。第二層次則是設計者需要用心研究用戶的心理及審美水平，通過體驗、人文、情感、道德等載體以形成視覺語義，再通過寓意的表達，使用戶在操作界面時完成使用、真情的參與、自我實現的過程，這就是我們所說的“人機合一”。如此，才能實現網頁界面功能指示性與表現性的完美統一。

對于網頁界面的視覺設計，視覺語義與審美寓意的表現尤為重要。人具有典型的視覺系特征，如和一個人第一次見面，90%都會在10秒鐘之內對各自的外表作出評判，在4分鐘之內就能對其形成基本的看法[1]。通過外觀，可以判斷一家餐廳食物的風味；通過包裝，可以判斷產品的主要特征；通過封面，可以判斷書籍的內容。而通過網頁的視覺語義傳達，可以更加方便快捷地傳達網站的全貌與內涵。

一、界面語言傳達的視覺語義

對于網頁設計的可用性，目前有兩種截然不同的觀點。“可用性”擁護者認為網頁設計應該更加注重使用的便捷。可用性大師Jakob Nielsen①認為：“幾乎所有為視覺效果而設計的事情，都會對可用性產生妨礙。將功能完全徹底簡單化才是網站設計所要達到的最終目的。應當避免使用圖像、色彩背景、精美布局等等。黑色的文本，幾乎沒有圖形的白色背景，才是最好的界面。”與其相反的觀點持有者則將界面的視覺語義上升到“體驗”的高度，甚至認為好的網頁視覺設計在各元素之間建立起主次漸進關系的基礎上，要賦予網頁一定的意境，達到刺激、吸引訪問者的效果[2]。為訪問者與網站的交流提供語境，從而喚起人們的認知情感，使網站顯得尤為專業與可靠，無形之中便加強了訪問者的信任感。

斯坦福大學的一項研究證實，“人們判斷網站可信度的首要因素，是他們對網頁視覺設計的第一印象。……如果它看起來不可信，或者看起來沒有他們想象的那樣可靠，他們就會離開，沒有第二次測試機會。這與判斷生活中其它一些事情的方式，沒有什么不同。這也是我們判斷一輛汽車或一名政客的方式。”——斯坦福大學普適科技實驗室主任B.J.Fogg如是說。

當然，網頁設計的視覺可用性和視覺語義表現并不沖突。我們以復雜的建筑體系為例。建筑結構的復雜性遠大于網頁的技術結構，但優秀的建筑設計師依然可以巧妙地設計出既美觀又實用的建筑。美國著名建筑設計大師弗蘭克·蓋里被譽為“建筑界的畢加索”，他的設計采用多種材料、運用各種建筑形式，并將幽默、神秘以及夢想等元素融入設計之中。他曾經說過：“我喜歡這種在建筑過程中看不見的美，而這種美又常常在技術制造過程中失落了。”蓋里設計的沃特迪士尼音樂廳就表達出他獨特的設計理念，在建筑形式上傳達出音樂廳生命延續的寓意。

可以看出，獨特的外觀與實用的功能（可用性）是能保持一致的（見圖1）。這種平衡也同樣可以應用在網頁界面的設計中，搶眼的視覺沖擊力與完善的功能操作共存 ，就能夠最大限度地激發訪問者的應用興趣。因此，設計者要最大程度地保持形式與功能的平衡。假如說，可用性因素使網站具有了功能性，那么視覺設計語義傳達則會使網頁令人流連忘返，二者兼具才是網頁界面設計的最佳方式。

圖1 西班牙的畢爾巴鄂古根海姆博物館②

二、界面語義的直觀性

用戶在初始登陸網頁界面時，也許并不清楚網頁界面具備怎樣的實際操作功能，即這些功能如何使用或者能否操作成功等。因此，界面要建立起清晰的層次，每個層次都有明確的指示性，各層指示信號的強度根據各層信息的重要性來確定，一旦指示的需求與強度確定下來，包括大小、方向、題材等設計元素就可以有針對性的靈活應用了。

網頁界面的功能是由視覺器官來感知，通過感知留存于記憶中的。因此，界面需要更明確的功能操作指示傳達語義，比如，提示哪一部分是用來操作的，它們是如何操作的，用戶如何與網頁界面進行交互等。界面語義的直觀性體現了目標動作和實際操作之間的對應。如果用戶因為需要操作某項功能而必須記住網頁界面的操作方式，在下一次使用時，他將花費更長的時間甚至需要借助一點運氣才能找到并激活這一功能，如果這一功能是不可見的，使用者則需要像大海撈針一樣尋找。正如許多網頁游戲界面都沒有文檔說明，但游戲的控制方式和功能都是對應的關系那樣。如果游戲界面都加上了說明文檔，游戲的價值也就不高了。

如圖2中的界面提示設計，這兩種設計采用直觀的時鐘和百分制進度條形象，提醒用戶操作的時間以及還要等待多長的時間，可以將時間信息有效并且準確地傳達給用戶。

為了在設計中實現可視性（相關的物品零件必須顯而易見[3]），必須系統分析用戶的行為特征與所處的文化環境，這種行為特征是人們在長期的生活實踐中形成的習慣與經驗。比如，我們在界面中設計一個類似音量控制的旋鈕圖形，用戶就會嘗試轉動那個旋鈕。蘋果手機的解鎖鍵slide to unlock也是一個很好的范例——它沒有華麗的圖形，只是設置了一個凹槽與滑塊箭頭，這樣的直觀性指示驅使用戶滑動解鎖鍵，無論成年人還是小孩都能得心應手的使用。對于初次操作的用戶來說，這種直觀性界面能夠讓信息傳達變得更為簡單、直接和準確。

圖2 兩個提示界面③

三、“隱喻”在視覺傳達中的功能意義

“隱喻”的設計方法就是通過某種指示性的圖形幫助使用者快速實施某種功能，“隱喻”雖然不是直接的功能語言，但它調動了使用者的體驗經驗與想象力，從而使功能語言傳達得更加快捷。筆者認為，計算機桌面上的文件夾和回收站圖標是最好的隱喻方式。

設計者可以把網站當作一個整體，以一種更加開放的方式使用隱喻。有效的隱喻有助于視覺語言對操作功能的詮釋，實現使用功能目標將會變得更加簡單。例如，可以把酒店的主頁設計成一個有登記臺、餐廳入口、服務臺等設施的酒店大廳圖形，通過點擊這些設施的圖形，能夠分別進入客房預約頁面、餐廳菜單頁面、服務臺頁面和當地特色頁面。這種“隱喻”的設計方式可以使酒店信息有效傳達給消費者并能讓消費者即時理解。要達到令人印象深刻的“隱喻”目的，需要概念與視覺上的整體協調。

從認知心理學角度出發，人們會比照自身熟悉的對象，通過對象形體的感知經驗來理解無形的抽象概念,尋找建立圖形與功能之間的聯想從而達到隱喻性表達的思維方式，實現對界面功能的建構與理解。在網頁界面設計時使用隱喻手段，能夠清晰地表現出功能程序的概念及特點。比如將辦公桌隱喻為文件組織的認知，并將其轉化為可視化圖形，一頁紙圖形表示一個文件概念；文件夾形狀表示網站中的一組文件概念；字紙簍的形狀表示存放刪除文件的概念等。菜單是桌面隱喻的延伸，訪問者從計算機菜單進行選擇的行為將會與在餐廳中用菜單點菜聯系在一起。在計算機環境中使用“菜單”這個詞則加強了人們可以利用計算機等數碼產品進行選擇的意識。桌面形態系統的隱喻也是概念與事物關聯的隱喻。

隱喻應用在網頁視覺設計中具有以下的價值：

1.傳達操作功能

通過隱喻，找出適合的符號載體以及功能特性與之相關聯，使抽象的語義通過訪問者熟悉的方式表達出來。圖3是被譽為界面設計中應用隱喻傳達信息的杰出案例——蘋果Mac刻錄軟件Roxio Toast的圖標——刻錄軟件“燒錄”的功能通過烤面包機的形態詮釋了出來。

圖3 刻錄軟件圖標④

2.易識別

隱喻建立的基礎是人們的現實生活以及自身的既往經驗，人們在識別圖像時，寓意傳達的速度比口頭描述要快得多。

3.易記憶

相對于文字，圖形符號的認知往往更容易讓用戶記憶深刻。

4.跨文化

隱喻圖形相較于詞語而言，在交流以及語言障礙的突破上變得更加簡單起來。

5. 更少的占用空間

在描述相同概念時，隱喻圖形比詞語占用更少的空間。Automator軟件圖標（見圖4）是用來幫助創建腳本以自動完成某些任務的。比起其他用鼠標指針、按鈕之類來表示的同類軟件圖標，機器人小助手形象能更好地幫助用戶理解軟件的實質內容與實際用途。

圖4 Automator軟件圖標⑤

6. 情感引導

視覺設計中的隱喻會讓用戶感受到抽象意象與情趣。每一種隱喻都可以被看作是一種陳述，它強調了情境中的外觀性質，展示了特征，是一種表現情感的手段。

隱喻在網頁界面的視覺設計中能夠為用戶提供直接的通道，使網頁界面更具吸引力，但是，隱喻也是存在一定的風險的。當隱喻與訪問者心智模型不一致時，視覺語言與指示功能就會模糊不清，因此，任何隱喻手法的運用必須建立在對用戶研究的基礎上，只有找到用戶的行為驅使動因，界面視覺設計語言才能通過寓意的方法實現語義的有效傳達。

[][]

注釋

①Jakob Nielsen，尼爾森-諾曼集團的主要負責人之一，他被《美國新聞與世界報道》雜志譽為“Web可用性方面的世界頂尖專家”.

②http://wenhuachina.cn.西班牙畢爾巴鄂古根海姆博物館.

③www.xxchixx.com.提示界面設計.

④http://www.chinaz.com/news/2009/0210/66042. shtml. Roxio Toast圖標.

⑤http://www.chinaz.com/news/2009/0210/66042. shtml Automator.軟件圖標.

[1]Ben Shneiderman，Catherine Plaisant.用戶界面設計:有效的人機交互策略[M].張國印，李健利，汪濱琦，譯.北京：電子工業出版社，2010：49.

[2]Jef Raskin.人本界面-交互式系統設計[M].史元春,譯.北京：機械工業出版社，2011:66-67.

[3]唐納德.A.諾曼.設計心理學[M].梅瓊,譯.北京：中信出版社，2010:122.

On the Semantic and Symbolic Meaning of Vision in Web Design

The goal of web design is to build clear website architecture. Website architecture designers can effectively express topic of the website through designing well-organized guide. Therefore, fresh visual language and attractive website guide is becoming the main method of web visual design. The main point of this article is improving the transmission eff i ciency and value of web interface through enhancing the article and culture expression of the visual language based on the general expression of visual language.

website; visual design; customer; aesthetics implication

J0-03

A

10.3963/j.issn.2095-0705.2013.05.009（0041-04）

2013-09-20

鄧念，武漢科技大學城市學院藝術學部助教。