網(wǎng)站導(dǎo)航設(shè)計(jì)對(duì)用戶體驗(yàn)的提升作用研究

唐蕓莉　呂悅寧　譚坤

摘 要：導(dǎo)航是引導(dǎo)某一設(shè)備，按指定航線從一點(diǎn)運(yùn)動(dòng)到另一點(diǎn)的方法。而網(wǎng)站導(dǎo)航則是隨著互聯(lián)網(wǎng)的興起而出現(xiàn)的，其目的是引導(dǎo)和幫助瀏覽者瀏覽網(wǎng)頁(yè)，獲取需要的信息內(nèi)容。用戶體驗(yàn)是指用戶在使用產(chǎn)品過(guò)程中形成的主觀心理感受，包含有很強(qiáng)的不確定因素，但它是衡量一個(gè)網(wǎng)站導(dǎo)航是否受用戶歡迎，設(shè)計(jì)是否成功的重要標(biāo)準(zhǔn)。評(píng)價(jià)網(wǎng)站用戶體驗(yàn)的指標(biāo)有很多種，從用戶操作時(shí)的行為特點(diǎn)和心理感受為出發(fā)點(diǎn)來(lái)分析導(dǎo)航設(shè)計(jì)如何提升網(wǎng)站用戶體驗(yàn)，主要從主導(dǎo)航設(shè)計(jì)的角度進(jìn)行探討。

關(guān)鍵詞：網(wǎng)站 導(dǎo)航設(shè)計(jì) 用戶體驗(yàn) 優(yōu)化

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-3973（2013）005-080-02

在網(wǎng)站設(shè)計(jì)中，導(dǎo)航是一個(gè)極為關(guān)鍵的元素，正是通過(guò)導(dǎo)航，把一個(gè)個(gè)獨(dú)立的網(wǎng)頁(yè)聯(lián)系起來(lái)形成完整有序的網(wǎng)站，因此，導(dǎo)航設(shè)計(jì)就成為網(wǎng)站建設(shè)中的一個(gè)重要地關(guān)鍵點(diǎn)，那么，導(dǎo)航設(shè)計(jì)的依據(jù)是什么呢？

網(wǎng)站導(dǎo)航設(shè)計(jì)就是要讓網(wǎng)站有一個(gè)更好的用戶體驗(yàn)，即：讓用戶快速有效的瀏覽網(wǎng)站，準(zhǔn)確找到自己所要獲取的信息，進(jìn)而增加網(wǎng)站粘度，達(dá)到優(yōu)化網(wǎng)站用戶體驗(yàn)的目的。我們從提高網(wǎng)站瀏覽速度、引導(dǎo)用戶有效瀏覽、簡(jiǎn)化用戶操作步驟、改善用戶感官體驗(yàn)四個(gè)方面來(lái)探討網(wǎng)站導(dǎo)航設(shè)計(jì)如何提升用戶體驗(yàn)。

1 提高網(wǎng)站瀏覽速度

網(wǎng)站瀏覽速度低不僅會(huì)直接干擾到頁(yè)面瀏覽效果，也會(huì)影響用戶的瀏覽情緒，降低用戶體驗(yàn)效果。影響網(wǎng)站瀏覽速度的因素有很多，如網(wǎng)站程序編寫不規(guī)范、加載項(xiàng)太多、網(wǎng)速過(guò)慢、界面設(shè)計(jì)不合理導(dǎo)致用戶操作繁復(fù)、圖片太大導(dǎo)致無(wú)法正常載入等。對(duì)于網(wǎng)站導(dǎo)航設(shè)計(jì)而言，就是要盡可能優(yōu)化性能，提高網(wǎng)站瀏覽速度。

1.1 避免使用flash導(dǎo)航

Flash導(dǎo)航視覺(jué)效果酷，交互性強(qiáng)，注重用戶鼠標(biāo)操作的動(dòng)態(tài)效果，瞬間抓住用戶的注意力，在網(wǎng)站設(shè)計(jì)中應(yīng)用很廣，也是設(shè)計(jì)師炫技的一個(gè)很好的平臺(tái)。但是實(shí)際瀏覽過(guò)程中，這種炫目的動(dòng)畫往往會(huì)干擾用戶的操作，反而降低瀏覽速度；Flash導(dǎo)航需要瀏覽器的支持；此外，F(xiàn)lash對(duì)搜索引擎不夠友好，有時(shí)候無(wú)法被搜索引擎讀取，尤其是大型的網(wǎng)站更是應(yīng)該避免使用。

1.2 使用文字導(dǎo)航

圖片的載入速度要慢于文字，導(dǎo)航設(shè)計(jì)最好不要使用圖片，如果是用圖片也最好采用背景圖片的形式，而導(dǎo)航內(nèi)容保留文字的格式。當(dāng)然，使用文字導(dǎo)航還有一個(gè)好處，就是有利于于搜索引擎目錄索引和識(shí)別。

2 引導(dǎo)用戶有效瀏覽

2.1 導(dǎo)航位置明了

導(dǎo)航的主要作用就是有效引導(dǎo)用戶瀏覽信息，在網(wǎng)站中需要讓用戶一目了然。有研究跟蹤測(cè)試者瀏覽網(wǎng)頁(yè)的行為，發(fā)現(xiàn)用戶瀏覽網(wǎng)站時(shí)的視線呈F形分布，即用戶的視線主要集中在屏幕的上方和左側(cè)，對(duì)于右側(cè)和底部往往會(huì)忽視。導(dǎo)航需要遵循用戶瀏覽習(xí)慣，引導(dǎo)用戶快速操作，應(yīng)該放置在用戶視線集中的位置，具體實(shí)施需要以導(dǎo)航的形式為依據(jù)。

導(dǎo)航有兩種形式：橫向?qū)Ш胶拓Q向?qū)Ш健M向?qū)Ш酵ǔ７胖迷陧敳?，可以保證導(dǎo)航內(nèi)容在第一屏中完整展示，適合做網(wǎng)站的主導(dǎo)航。由于用戶水平移動(dòng)鼠標(biāo)比垂直移動(dòng)更為快捷，所以采用橫向?qū)Ш绞褂脩舨僮髌饋?lái)更為方便，不過(guò)，橫向?qū)Ш降膬?nèi)容不適合過(guò)多，否則容易顯得凌亂。豎向?qū)Ш降膶?dǎo)航內(nèi)容可以靈活延展，適合放置在左側(cè)，對(duì)于大多數(shù)網(wǎng)站都適宜，但是用戶瀏覽時(shí)不如橫向?qū)Ш椒奖恪?/p>

2.2 導(dǎo)航路徑清晰

即便小型的網(wǎng)站通常也會(huì)有三個(gè)層次：首頁(yè)、欄目頁(yè)、內(nèi)容頁(yè)，總體至少十幾個(gè)頁(yè)面，用戶瀏覽網(wǎng)站從首頁(yè)進(jìn)入其他頁(yè)面，在瀏覽過(guò)程中往往會(huì)有瀏覽其他頁(yè)面的意愿，這就有個(gè)導(dǎo)航路徑設(shè)計(jì)的問(wèn)題。設(shè)計(jì)師需要細(xì)致設(shè)計(jì)用戶的瀏覽路徑，如何進(jìn)入下一級(jí)頁(yè)面，如何返回上級(jí)頁(yè)面，如何進(jìn)入其他頁(yè)面。如果導(dǎo)航不明晰，就如同進(jìn)入迷宮無(wú)所適從，導(dǎo)致用戶耐心喪失，降低網(wǎng)站粘度。導(dǎo)航路徑設(shè)計(jì)原則就是盡可能的簡(jiǎn)化清晰，排除干擾， 減少用戶思考的時(shí)間。

2.3 導(dǎo)航分類明確

導(dǎo)航的內(nèi)容設(shè)置要講究，合理有效地導(dǎo)航分類清晰，層次分明，能準(zhǔn)確描述鏈接頁(yè)面的內(nèi)容，可以使用戶快速分辨，從而有效進(jìn)行操作。根據(jù)用戶瀏覽習(xí)慣，在瀏覽網(wǎng)站過(guò)程中視線移動(dòng)具有從左向右、從上向下的規(guī)律，因此瀏覽網(wǎng)站時(shí)會(huì)更多的注意前面和上面的內(nèi)容，所以導(dǎo)航內(nèi)容要進(jìn)行分析，重要的內(nèi)容盡可能往前、往上排列，而其他內(nèi)容根據(jù)重要性依次排列，吸引用戶的注意力。

2.4 設(shè)置返回首頁(yè)

通常而言，首頁(yè)是進(jìn)入欄目頁(yè)的入口，而通過(guò)欄目頁(yè)又可以進(jìn)入內(nèi)容頁(yè)面，對(duì)于用戶而言只要回到首頁(yè)就不會(huì)迷失，所以，在頁(yè)面中設(shè)置“返回首頁(yè)”的鏈接會(huì)使用戶瀏覽起來(lái)更為順暢。

3 簡(jiǎn)化用戶操作步驟

3.1 使用扁平式導(dǎo)航

大型網(wǎng)站導(dǎo)航的層級(jí)往往比較深，有的甚至到四級(jí)，而且通常采用彈出式導(dǎo)航和下拉式導(dǎo)航的形式，這樣會(huì)導(dǎo)致導(dǎo)航過(guò)于龐大。網(wǎng)站導(dǎo)航的層級(jí)越少用戶操作次數(shù)也會(huì)越少，采用三個(gè)層級(jí)和兩個(gè)層級(jí)的導(dǎo)航相比，用戶瀏覽網(wǎng)站時(shí)鼠標(biāo)的動(dòng)作更繁復(fù)，移動(dòng)范圍大，操作起來(lái)極不方便。而如果采用扁平式導(dǎo)航，將導(dǎo)航內(nèi)容歸類，將三個(gè)層級(jí)變?yōu)閮蓚€(gè)層級(jí)，可以最大限度的減少用戶的操作頻率和范圍，用戶瀏覽會(huì)更順暢。一般而言，即便是大型網(wǎng)站，瀏覽者進(jìn)入目的頁(yè)面的點(diǎn)擊次數(shù)最好也不要超過(guò)三次。

因此，有些網(wǎng)站雖然導(dǎo)航內(nèi)容多，也會(huì)將所有的層級(jí)簡(jiǎn)化為一個(gè)層級(jí)，而以多行的形式出現(xiàn)，就是為了讓用戶能夠盡量減少操作頻率，快速找到操作內(nèi)容。當(dāng)然，這樣也會(huì)帶來(lái)一定的問(wèn)題，會(huì)破壞原本層次分明的邏輯關(guān)系，需要設(shè)計(jì)師謹(jǐn)慎的選擇。

3.2 提供搜索功能

網(wǎng)站的內(nèi)容很多，少則幾個(gè)頁(yè)面，多則幾十個(gè)上百個(gè)頁(yè)面，即便對(duì)于瀏覽目標(biāo)明確的用戶，要找到自己需要的信息也不容易。增加搜索功能可以使用戶快速準(zhǔn)確尋找信息，避免用戶盲目的瀏覽，對(duì)于大型網(wǎng)站而言非常有效。

3.3 標(biāo)明當(dāng)前位置

用戶瀏覽網(wǎng)站時(shí)，當(dāng)從首頁(yè)不斷深入網(wǎng)站內(nèi)部瀏覽時(shí)往往會(huì)不知道身在何處，換言之，用戶在網(wǎng)站中迷失了，在這種情況下，用戶通常會(huì)嘗試性的點(diǎn)擊，或者返回首頁(yè)重新瀏覽，更多的時(shí)候甚至?xí)x開網(wǎng)站。最直接的方法是在導(dǎo)航欄中把當(dāng)前頁(yè)面的導(dǎo)航內(nèi)容從視覺(jué)上做一下區(qū)分，就可以使用戶清楚明了。

對(duì)于多層次的網(wǎng)站而言，采用面包屑導(dǎo)航是一種行之有效的方法。面包屑導(dǎo)航是一種輔助導(dǎo)航，其基本功能就是定位。例如：文庫(kù) > 專業(yè)資料 > 人文社科 > 廣告?zhèn)髅?，通過(guò)這種方式可以使用戶對(duì)于自身所處位置有明確的認(rèn)識(shí)，清楚地表明了當(dāng)前頁(yè)面的層級(jí)，同時(shí)幫助用戶很方便的返回到上面幾級(jí)頁(yè)面。面包屑導(dǎo)航適合層級(jí)較深的導(dǎo)航，加強(qiáng)了內(nèi)部鏈接，可以降低用戶跳出率。

4 改善用戶感官體驗(yàn)

所謂的感官體驗(yàn)在網(wǎng)站中通常就是指網(wǎng)站瀏覽過(guò)程中給用戶視覺(jué)和聽(tīng)覺(jué)上帶來(lái)的感受，尤其是視覺(jué)感受。網(wǎng)站和用戶之間的交互基本上都是依賴視覺(jué)來(lái)實(shí)現(xiàn)的，因此，雖然大部分用戶瀏覽網(wǎng)站的目的并不是欣賞網(wǎng)站，但是網(wǎng)站帶給用戶的視覺(jué)體驗(yàn)卻往往影響著用戶是否會(huì)在網(wǎng)站上停留、能停留多久、會(huì)不會(huì)再次訪問(wèn)。

這種感官體驗(yàn)的影響因素很多，從視覺(jué)上看，色彩、風(fēng)格、文字、布局都是影響因素，不同用戶感受的差異性也是重要因素，而各個(gè)網(wǎng)站建設(shè)都有目標(biāo)用戶，是否針對(duì)目標(biāo)用戶進(jìn)行分析和策劃，決定著網(wǎng)站視覺(jué)設(shè)計(jì)是否符合目標(biāo)用戶的審美訴求。具體到導(dǎo)航而言，設(shè)計(jì)風(fēng)格要符合整個(gè)網(wǎng)站的定位，色彩設(shè)計(jì)協(xié)調(diào)舒適，文字清晰可讀，鼠標(biāo)滑過(guò)狀態(tài)和當(dāng)前頁(yè)面顯示狀態(tài)的設(shè)計(jì)醒目而不突兀，整體讓用戶感覺(jué)美觀舒適，才能帶給用戶良好的感官體驗(yàn)。

5 結(jié)論

網(wǎng)站導(dǎo)航是網(wǎng)站中的一個(gè)基礎(chǔ)元素，是關(guān)系到整個(gè)網(wǎng)站結(jié)構(gòu)搭建是否清晰的重要元素。優(yōu)秀的導(dǎo)航能夠幫助用戶了解網(wǎng)站結(jié)構(gòu)，不僅僅是快速準(zhǔn)確的搜索需求的信息內(nèi)容，還要讓用戶明確自身在網(wǎng)站中的位置，明確操作流程，在整個(gè)瀏覽過(guò)程中輕松舒適，從而增加用戶粘度，提高訪問(wèn)質(zhì)量。

作為設(shè)計(jì)師，我們不可否認(rèn)網(wǎng)站的真正使用者就是用戶，在進(jìn)行導(dǎo)航設(shè)計(jì)時(shí)就要從在用戶的角度上去進(jìn)行策劃和設(shè)計(jì)，要從整體上去衡量用戶在網(wǎng)站導(dǎo)航的內(nèi)容搭建、視覺(jué)效果、操作路徑、功能設(shè)計(jì)等多個(gè)方面的使用感覺(jué)，以達(dá)到最完善的使用體驗(yàn)。

參考文獻(xiàn)：

[1] 尤文勝.以用戶為中心的首頁(yè)導(dǎo)航設(shè)計(jì)初探[J].上海藝術(shù)家，2009（4）.

[2] 黃燕云.淺談網(wǎng)站導(dǎo)航系統(tǒng)設(shè)計(jì)[J].科教文匯，2009（7）.