摘要：

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

關(guān)鍵詞：

網(wǎng)頁(yè)圖標(biāo) 視覺(jué)引導(dǎo) 設(shè)計(jì)方法 表現(xiàn)形式

中國(guó)分類(lèi)號(hào)：J045

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2015）04-0148-03

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

一 網(wǎng)頁(yè)圖標(biāo)的基本功能

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

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

二 網(wǎng)頁(yè)圖標(biāo)視覺(jué)引導(dǎo)設(shè)計(jì)方法

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

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

（一）隱喻引導(dǎo)

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

（二）分類(lèi)引導(dǎo)

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

（三）方向性引導(dǎo)

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

（四）動(dòng)態(tài)元素引導(dǎo)

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

三 基于視覺(jué)引導(dǎo)的網(wǎng)頁(yè)圖標(biāo)表現(xiàn)形式

網(wǎng)頁(yè)圖標(biāo)具有美觀性而又不失實(shí)用性的功能，但每一個(gè)網(wǎng)站因?yàn)槠湫袠I(yè)和信息類(lèi)別的不同，網(wǎng)頁(yè)圖標(biāo)的表現(xiàn)形式各不相同。而不同表現(xiàn)形式的網(wǎng)頁(yè)圖標(biāo)在視覺(jué)引導(dǎo)設(shè)計(jì)上的優(yōu)勢(shì)也各有不同。

（一）擬物化網(wǎng)頁(yè)圖標(biāo)

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

（二）扁平化網(wǎng)頁(yè)國(guó)標(biāo)

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

（三）文字類(lèi)網(wǎng)頁(yè)國(guó)標(biāo)

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

（四）數(shù)字類(lèi)網(wǎng)頁(yè)圖標(biāo)

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

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