摘要:
網(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á)不了的意義?!薄k[喻是語(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ò)程。