網(wǎng)頁圖標視覺引導設計研究

摘要：

網(wǎng)頁國標作為網(wǎng)站設計中一個不可或缺的組成部分，起著對網(wǎng)頁信息的強調(diào)和提示性作用，引導人們的行為操作和信息獲取的重要功能。本文從網(wǎng)頁國標的基本功能出發(fā)，結(jié)合認知心理學，闡述了要構(gòu)建有效的網(wǎng)頁圖標視覺引導主要有四種設計方法：隱喻引導、分類引導、方向性引導、動態(tài)元素引導。此外，本文還就不同表現(xiàn)形式的網(wǎng)頁圖標的特點和視覺引導優(yōu)勢做了闡述。

關(guān)鍵詞：

網(wǎng)頁圖標 視覺引導 設計方法 表現(xiàn)形式

中國分類號：J045

文獻標識碼：A

文章編號：1003-0069（2015）04-0148-03

網(wǎng)頁是一種采用圖像性的方式來呈現(xiàn)的互聯(lián)網(wǎng)用戶操作界面，其中圖標的設計對于建立網(wǎng)頁的界面邏輯結(jié)構(gòu)和視覺表現(xiàn)力起著非常重要的作用。正如Patrick McNeil所說“圖標是非常小的可視控件，它們的唯一用途就是以最簡單的方式傳遞大量的信息?！薄g覽者從圖標獲取信息比從文字要快，語言不再是障礙，人們可以更自由地解讀。把信息解構(gòu)重組后再用圖形圖像表達出來的方式，越來越受到瀏覽者的歡迎

一 網(wǎng)頁圖標的基本功能

在網(wǎng)頁的瀏覽過程中，瀏覽者很容易不知所措，不知道自己處在一個什么樣的位置，或者已經(jīng)瀏覽過哪些內(nèi)容，又或如何進行下一步的操作。這時除了網(wǎng)站的主導航外，網(wǎng)頁中各種圖標的存在是最直觀、最便捷的引導和傳達信息給瀏覽者的方法之一。國標相對于語言和文字，存在比較明顯的差異性和優(yōu)勢。瀏覽者在瀏覽網(wǎng)頁時發(fā)現(xiàn)網(wǎng)頁上的圖標，他們會根據(jù)其形狀和色彩進行相關(guān)的信息聯(lián)想，于是圖標便以圖形、文字、色彩、語言多種形式存儲起來。網(wǎng)頁圖標借助人們對視覺形象的識別、聯(lián)想等思維能力來傳達具有特定內(nèi)涵的信息，并引導人們正確便捷地操作網(wǎng)頁。網(wǎng)頁圖標的這種優(yōu)勢使不同年齡段以及不同文化水平的瀏覽者都易接受，也更便于瀏覽者記憶。所以網(wǎng)頁圖標的基本功能應是以圖形化的方式構(gòu)建視覺引導，起著對網(wǎng)頁信息的強調(diào)和提示性作用，引導人們的行為操作和信息獲取。

此外，網(wǎng)頁圖標圖形化的設計不僅能以結(jié)構(gòu)化的形式更好地讓瀏覽者理解信息，而且還會給瀏覽者帶來更加有趣的瀏覽體驗。這種情感化的體驗是更深度的內(nèi)容加工和功能設定，能為網(wǎng)站的品牌認知起著積極有效的作用。

二 網(wǎng)頁圖標視覺引導設計方法

目前網(wǎng)頁的展示平臺已不僅僅局限于PC端，還可以在移動端，尤其是智能手機上進行操作，其視覺呈現(xiàn)和人機交互也變得更為復雜。但無論是PC端，還是移動端的網(wǎng)頁瀏覽，實驗均表明，用戶不會花很多精力來瀏覽網(wǎng)頁，而只是會掃描—下界面，來尋找能吸引其注意力的內(nèi)容。要在這么短的時間內(nèi)引導瀏覽者獲取信息，網(wǎng)頁圖標必須建立有效的視覺引導設計方法。

弗洛伊德的精神分析法說，真正影響用戶的顯性人格并非是理性，而是在各個生理時期形成的潛意識因子。由此可見，網(wǎng)頁圖標如果可以與人們現(xiàn)實生活經(jīng)歷中的潛意識因子相呼應，那么當瀏覽者看到網(wǎng)頁界面時，就可以在很短時間內(nèi)被吸引，接受引導，捕獲信息。在這個過程中最為重要的，就是如何使設計的網(wǎng)頁圖標與其所傳達的信息在瀏覽者的認知中匹配度更高。

（一）隱喻引導

“圖標的視覺符號需要與它指代的功能相關(guān)，這樣可以令使用者產(chǎn)生聯(lián)想，從而激發(fā)使用者的形象思維，提高圖標的使用效率。”。但是設計師在為網(wǎng)頁界面設計圖標時會遇到很多人機操作的抽象概念，比如上傳、下載、分享、收藏、評論、提交等，這些概念很難從現(xiàn)實生活中找到直接對應的物體形式，這就需要設計師運用隱喻?！皬脑~源上看，‘隱喻’在希臘文中的意思是‘意義的轉(zhuǎn)換’，即賦予一個詞它本來不具有的含義；或者用一個詞來暗示它本來表達不了的意義?！?。隱喻是語言學修辭的一種手法，是在某類事物暗示下的一種對另一類事物的聯(lián)想、認知和體驗的心理行為、語言行為和文化行為?！半[喻設計是界面設計中的重要組成部分，它解決了通過圖形界面?zhèn)鬟_抽象信息的難題，使界面設計化繁為簡，把復雜的問題變得簡單了。”。設計師借用人們所熟知的，生活化的，對于事物的知識（視覺、功能等）進行提煉，概括簡化為網(wǎng)頁圖標的形狀，讓瀏覽者在網(wǎng)頁場景中能夠通過條件反射簡單快速地對所獲網(wǎng)頁圖標產(chǎn)生聯(lián)想，對信息進行自然匹配，從而在網(wǎng)頁場景中自然地做出反應。網(wǎng)頁國標的隱喻引導選擇的設計要素多是從功能出發(fā)，尋找與之可以在功能與操作信息上有關(guān)聯(lián)性的事物進行隱喻設計，讓各種設計要素以瀏覽者能理解并能幫助想象的方式溝通，讓人們找到一種似曾相識的感覺。隱喻引導可以幫助瀏覽者更快地理解圖標的含義，提高操作效率，避免誤操作。此外網(wǎng)頁圖標的隱喻引導，應具有跨文化的認同。如一個向下箭頭的網(wǎng)頁圖標就是基于人們對方向性的普遍認同，引導瀏覽者在網(wǎng)頁情境操作中對下載功能的聯(lián)想和認知。信息匹配度高的隱喻引導設計不僅可以提高網(wǎng)頁圖標的識別度，還可以由于其易學性和易操作性能給瀏覽者帶來使用過程的愉悅感。

（二）分類引導

視覺流程是網(wǎng)頁界面設計的重要內(nèi)容，“網(wǎng)頁界面的條理性、時效性、在很大程度上取決于其合理的視覺流程。視覺流程是視線隨著頁面各構(gòu)成元素在空間沿著一定的軌跡運動的過程。當瀏覽者注視頁面的時候，很自然地會按照各個訴求內(nèi)容一步一步地閱讀，這條無形的視覺空間流動線就稱為視覺流程?！?。在網(wǎng)頁視覺流程的建立中，網(wǎng)頁圖標是重要的組成元素，它以圖形化的視覺元素吸引用戶選擇和點擊，從而起著對網(wǎng)頁信息的強調(diào)和提示性作用。網(wǎng)頁圖標可充分利用其形狀、色彩、大小及視覺元素的相似性或統(tǒng)一性進行分類引導，牽引瀏覽者的視覺和操作路徑。如圖1，當網(wǎng)頁需要在有限的屏幕空間中引導瀏覽者點擊查看更多信息時，通過用一個“+”所做的網(wǎng)頁圖標在形狀、色彩上的統(tǒng)一性可快速地引起瀏覽者的關(guān)注，并通過聯(lián)想在情景中獲取相應的信息認知，引發(fā)選擇和點擊行為。

（三）方向性引導

在網(wǎng)頁的瀏覽過程中很多時候會存在操作復雜和步驟較多的交互任務，瀏覽者如果沒有清晰的視覺引導，會造成諸多操作失誤。這種未知和不可控的情況總會令人不安，甚至導致心理挫敗。相反，清晰的方向性可以提升瀏覽者操作的效率。因此為了增強瀏覽者的可控感，網(wǎng)頁界面需要預先提供一些提示，讓瀏覽者建立預期。網(wǎng)頁圖標可以通過帶有方向性或數(shù)字類的圖形進行視覺引導，建立明確的方向性，在陌生的網(wǎng)頁瀏覽環(huán)境下為瀏覽者指引路線，如圖2。同時還能告訴瀏覽者，要完成交互任務一共需要多少步驟，你所在的步驟是哪個，還有多少步驟可以完成。通過網(wǎng)頁圖標的方向性引導，可以讓瀏覽者對網(wǎng)頁的交互任務操作有個預期，并得到及時的交互反饋。

（四）動態(tài)元素引導

美國認知心理學家唐納德·諾曼在其所著《情感化設計》這本書中就提出“產(chǎn)品具有好的功能是重要的；產(chǎn)品讓人易學會用也是重要的；但更重要的是，這個產(chǎn)品要能讓人感到愉悅?！薄Ｇ楦械挠鋹傇谠O計中有著重要的意義，所以“界面圖標設計不只是只有功能的描述，還可以反映出設計者和用戶之間的情感共鳴?！盵6。在符合功能調(diào)性的情況下，適當?shù)厥褂靡恍┨卣骰瘖蕵坊膭討B(tài)視覺引導往往能給瀏覽者留下深刻的印象。動態(tài)元素的網(wǎng)頁圖標所帶來的視覺關(guān)注和引導效果也會變得更加強烈。網(wǎng)頁圖標的動態(tài)設計多為形變，即對圖標進行大小、形狀、透明度、明暗、顏色的改變。在確定了動態(tài)設計的大體形態(tài)后，節(jié)奏速度以及執(zhí)行的時間就是需要細摳的部分。網(wǎng)頁圖標的動態(tài)元素可采用具象形態(tài)進行一定程度的抽象、隱喻，用簡單直觀的形式提升瀏覽者的情感體驗。但動態(tài)元素引導只是輔助表達的一種方式，更重要的還是引導瀏覽者聚焦網(wǎng)頁信息，所以最好是能與某一交互操作的提示相結(jié)合。如圖3，在為網(wǎng)店設計的電子領(lǐng)券圖標上加入了一只在招手的卡通爪子，動態(tài)元素的引導生動而信息明確，點到為止又抓人眼球。

三 基于視覺引導的網(wǎng)頁圖標表現(xiàn)形式

網(wǎng)頁圖標具有美觀性而又不失實用性的功能，但每一個網(wǎng)站因為其行業(yè)和信息類別的不同，網(wǎng)頁圖標的表現(xiàn)形式各不相同。而不同表現(xiàn)形式的網(wǎng)頁圖標在視覺引導設計上的優(yōu)勢也各有不同。

（一）擬物化網(wǎng)頁圖標

雖然隱喻性引導對于網(wǎng)頁圖標設計來說是一種非常有效的信息傳遞方式和情感表達方式，不過有時根據(jù)網(wǎng)頁整體的設計風格定位，擬物化的網(wǎng)頁圖標也是很好的選擇。擬物是一種在設計中融入真實環(huán)境的模擬設計，是最直接的借鑒現(xiàn)實世界的表現(xiàn)形式，能讓用戶第一眼就認出這個是代表什么東西，用途是什么。擬物化網(wǎng)頁圖標通過將現(xiàn)實生活中的對象引入到網(wǎng)頁設計中，讓用戶能夠根據(jù)已有的生活經(jīng)驗來操作網(wǎng)頁，有效地實現(xiàn)圖標與信息的自然匹配。擬物化網(wǎng)頁圖標主要從對象的形狀、材質(zhì)、顏色、環(huán)境光照等方面入手，在視覺設計方面表現(xiàn)得精巧而考究。擬物化網(wǎng)頁圖標不僅有較強的視覺震撼力及親和力，還能減低瀏覽者的學習成本，有效引導瀏覽者正確操作。如圖4中，逼真地放大鏡讓瀏覽者一眼就能判斷在網(wǎng)頁的這個位置可以進行信息檢索。擬物化網(wǎng)頁圖標基本忠實于客觀物象的自然形態(tài)，但是擬物化并不意味著要100%還原物理世界的真實質(zhì)感，而是需要通過強調(diào)提煉、概括和簡化，突出與夸張本體的本質(zhì)特征。如果過于追求細節(jié)處理，就會給瀏覽者造成視覺和認知上的負累?；跀M物化網(wǎng)頁圖標所要展現(xiàn)的細節(jié)較多，設計元素較為復雜，它更適合在PC端顯示的網(wǎng)頁中使用。

（二）扁平化網(wǎng)頁國標

扁平化網(wǎng)頁圖標指的是借助于抽象的點、線、面、體來構(gòu)成象征性或者模擬性的圖形，這樣的抽象圖形可以直觀地表現(xiàn)圖標所要象征的意義和所要表達的特殊含義。扁平化網(wǎng)頁圖標在很大程度上是出于強化對網(wǎng)頁信息的傳遞，弱化網(wǎng)頁界面中無效元素的干擾，讓瀏覽者的目光快速聚焦到所需信息上。如圖5，右側(cè)的幾個單線條抽象圖標的設計，可以在最小的屏幕空間中引導瀏覽者關(guān)注相關(guān)信息，如購物車、個人資產(chǎn)、關(guān)注品牌、收藏產(chǎn)品等。此外，在簡化圖標造型之后，扁平化網(wǎng)頁圖標的顏色也成了一大表現(xiàn)要素。通過色彩的相似、對比引導瀏覽者識別網(wǎng)頁信息，并帶給瀏覽者活潑、愉悅、生動的感覺。扁平化網(wǎng)頁圖標最大的優(yōu)勢就是給網(wǎng)頁的內(nèi)容展示提供了更大的空間，同時由于其占用的屏幕空間少，也為瀏覽者的交互使用提供了更為簡單的操作步驟，瀏覽者可以在所在的任何頁面通過相關(guān)圖標進行一些網(wǎng)站的快捷操作。扁平化網(wǎng)頁圖標可以在一定程度上減弱尺寸變化對像素精度的影響，它能夠快速地適應各種設備的屏幕，非常適合在跨平臺的響應式網(wǎng)頁設計中使用。

（三）文字類網(wǎng)頁國標

文字類網(wǎng)頁圖標是采用有特殊含義的文字或者字母和圖形組合成一個整體來引導瀏覽者關(guān)注信息。文字具有強烈的視覺記憶性。文字類網(wǎng)頁圖標通常采用簡潔的圖文表現(xiàn)形式，配以色彩的差異化使用以達到視覺引導的功能。如圖6，天貓網(wǎng)站中的文字類網(wǎng)頁圖標，采用在電子商務網(wǎng)站中具有特定意義的漢字將其做成類似中國印章的圖形表現(xiàn)，令瀏覽者一目了然，記憶深刻，在全站中任何位置再見到這樣的圖標，即使沒有旁邊的文字說明，也會對其功能非常明確。

（四）數(shù)字類網(wǎng)頁圖標

數(shù)字類網(wǎng)頁圖標可分為阿拉伯數(shù)字和漢字數(shù)字網(wǎng)頁圖標。相對于漢字和拉丁字母，數(shù)字所表達的功能更加純粹和單一，多運用在計數(shù)和排序時給瀏覽者視覺流程的引導。但在一些情況下，數(shù)字類網(wǎng)頁圖標會根據(jù)網(wǎng)站中的一些特定功能來呈現(xiàn)特定的信息。如圖7，天貓網(wǎng)站中的數(shù)字類網(wǎng)頁圖標，簡單的數(shù)字在網(wǎng)站中成為一種約定性記號，配以醒目的色彩使其中的信息更加清晰、醒目。四結(jié)語

網(wǎng)頁圖標具有文字所不能代替的優(yōu)勢，它用圖形化的表現(xiàn)形式將復雜的網(wǎng)頁功能描述成易懂的信息內(nèi)容，這種方式越來越受到瀏覽者的歡迎。網(wǎng)頁圖標的設計絕不僅僅是對藝術(shù)美感的體現(xiàn)，更重要的是承擔起視覺引導的作用。在網(wǎng)頁國標設計中合理地利用視覺引導將會減輕瀏覽者的認知難度，讓瀏覽者在輕松愉悅的狀態(tài)下完成網(wǎng)頁瀏覽和交互的過程。