網(wǎng)頁設(shè)計中的視覺語義與寓意

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

網(wǎng)頁設(shè)計中的視覺語義與寓意

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

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

網(wǎng)頁；視覺設(shè)計；用戶；審美寓意

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

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

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

一、界面語言傳達(dá)的視覺語義

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

斯坦福大學(xué)的一項研究證實，“人們判斷網(wǎng)站可信度的首要因素，是他們對網(wǎng)頁視覺設(shè)計的第一印象?！绻雌饋聿豢尚牛蛘呖雌饋頉]有他們想象的那樣可靠，他們就會離開，沒有第二次測試機會。這與判斷生活中其它一些事情的方式，沒有什么不同。這也是我們判斷一輛汽車或一名政客的方式?！薄固垢４髮W(xué)普適科技實驗室主任B.J.Fogg如是說。

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

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

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

二、界面語義的直觀性

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

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

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

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

圖2 兩個提示界面③

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

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

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

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

隱喻應(yīng)用在網(wǎng)頁視覺設(shè)計中具有以下的價值：

1.傳達(dá)操作功能

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

圖3 刻錄軟件圖標(biāo)④

2.易識別

隱喻建立的基礎(chǔ)是人們的現(xiàn)實生活以及自身的既往經(jīng)驗，人們在識別圖像時，寓意傳達(dá)的速度比口頭描述要快得多。

3.易記憶

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

4.跨文化

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

5. 更少的占用空間

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

圖4 Automator軟件圖標(biāo)⑤

6. 情感引導(dǎo)

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

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

[][]

注釋

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

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

③www.xxchixx.com.提示界面設(shè)計.

④http://www.chinaz.com/news/2009/0210/66042. shtml. Roxio Toast圖標(biāo).

⑤http://www.chinaz.com/news/2009/0210/66042. shtml Automator.軟件圖標(biāo).

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

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

[3]唐納德.A.諾曼.設(shè)計心理學(xué)[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

鄧念，武漢科技大學(xué)城市學(xué)院藝術(shù)學(xué)部助教。