導(dǎo)航系統(tǒng)的作用：告訴你在哪里，可以去哪里，這里有什么，附近有什么，指引你下一步的行為。
導(dǎo)航系統(tǒng)的分類(lèi)：全站、區(qū)域、情境式、輔助性導(dǎo)航。

瀏覽器的導(dǎo)航特點(diǎn)

考慮瀏覽器環(huán)境，其實(shí)瀏覽器上已經(jīng)有后退、前進(jìn)、收藏、設(shè)為首頁(yè)等功能，但有時(shí)候在頁(yè)面本身的瀏覽情境當(dāng)中也最好要放這些功能，比如在瀏覽一篇文章，到了結(jié)尾能看到[收藏]、[關(guān)閉]、[返回]等功能可以方便不少用戶(hù)看完后其它意圖的操作。還有就是區(qū)分有無(wú)鏈接的文字樣式，區(qū)分是否瀏覽過(guò)文字的樣式（這些其實(shí)是編寫(xiě)CSS樣式范圍內(nèi)的）。

建立情境

最典型的例子用戶(hù)隨便從Google搜索到一張網(wǎng)頁(yè)，當(dāng)點(diǎn)擊進(jìn)入頁(yè)面后，就算是進(jìn)入了一個(gè)情境中。情境中應(yīng)該告訴用戶(hù)這是在哪里？（我在什么位置，這是什么網(wǎng)站），這里有什么（頁(yè)內(nèi)標(biāo)題），用戶(hù)下一步能做什么（能看，能下載，能購(gòu)買(mǎi)），還能去哪里（欄目，本欄頁(yè)內(nèi)導(dǎo)航），以上幾點(diǎn)類(lèi)似于《Don't make me think》中內(nèi)頁(yè)的6點(diǎn)基本要素：1.站點(diǎn)ID、2.頁(yè)面名稱(chēng)、3.欄目下一級(jí)欄目、4.頁(yè)面導(dǎo)航、5.“你在這里”指示器、6.搜索。

改善靈活性

網(wǎng)站中各欄目之間的內(nèi)容可能保持垂直的排列方式，但用戶(hù)在訪問(wèn)內(nèi)容時(shí)要考慮Ta們可以會(huì)隨時(shí)跳轉(zhuǎn)到其它欄目的二級(jí)、三級(jí)頁(yè)面中，保持橫向和縱向的導(dǎo)航，注意不要導(dǎo)航輔助功能的設(shè)置。提供增加的情境和靈活性，彌補(bǔ)等級(jí)式系統(tǒng)的不足之處。

全站導(dǎo)航系統(tǒng)

全站導(dǎo)航系統(tǒng)就是要在網(wǎng)站上的每一頁(yè)都會(huì)展示的導(dǎo)航系統(tǒng)，可直接連向重要的區(qū)域和功能，無(wú)論用戶(hù)在哪個(gè)層次中。全站導(dǎo)航保持一致性，以密集且重復(fù)來(lái)訪的用戶(hù)為中心，進(jìn)行設(shè)計(jì)和測(cè)試。

值得一提：具有情境式的全局導(dǎo)航系統(tǒng)，這類(lèi)導(dǎo)航不僅告訴你這里有什么內(nèi)容，還告訴用戶(hù)正在哪塊內(nèi)容中。（圖1）

圖1

區(qū)域?qū)Ш较到y(tǒng)

當(dāng)用戶(hù)進(jìn)行某個(gè)欄目中后，可能該欄目還會(huì)分很多小欄目，把這些小欄目列出來(lái)，方便用戶(hù)可以立刻瀏覽那些內(nèi)容，有些網(wǎng)站會(huì)把全站導(dǎo)航和區(qū)域?qū)Ш秸铣梢恢虑医y(tǒng)一的系統(tǒng)，如下拉菜單。和全站導(dǎo)航一樣，在同一個(gè)站點(diǎn)中他們的表現(xiàn)形式最好一致且統(tǒng)一的。

情境式導(dǎo)航

進(jìn)入目的頁(yè)面后，會(huì)有一些內(nèi)容指向特定的網(wǎng)頁(yè)、文件、對(duì)象。比如網(wǎng)站上的“相關(guān)文章”，“喜歡這個(gè)商品的用戶(hù)也會(huì)喜歡”，“同類(lèi)TOP10”，要注意[情境式全局導(dǎo)航系統(tǒng)]主要是說(shuō)明所處的位置，[情境式導(dǎo)航]是說(shuō)明在這張頁(yè)面內(nèi)容的情境下，有什么相關(guān)內(nèi)容可以告訴并提供鏈接給用戶(hù)（稱(chēng)外部情境式導(dǎo)航鏈接，玩概念：）。比如你在Joyo買(mǎi)《精通CSS》這本書(shū)，在介紹這本書(shū)的頁(yè)面中，總會(huì)有一些鏈接是指向與CSS類(lèi)的其它書(shū)籍。還有一種是在文章敘述的文字中放鏈接（稱(chēng)內(nèi)聯(lián)情境式導(dǎo)航鏈接，玩概念：）。

實(shí)踐嵌入式導(dǎo)航

認(rèn)識(shí)到全站、區(qū)域和情境區(qū)導(dǎo)航元素都在大多數(shù)網(wǎng)頁(yè)上同時(shí)共存，如何在網(wǎng)站中整合好。不過(guò)這個(gè)問(wèn)題可能涉及到：網(wǎng)站欄目多少、頁(yè)面結(jié)構(gòu)復(fù)雜度、實(shí)現(xiàn)一些效果的JS程序、交互過(guò)程相關(guān)這些。

輔助性導(dǎo)航系統(tǒng)

包括網(wǎng)站地圖、索引、指南。確保大型網(wǎng)站可用性和可尋性的關(guān)鍵。
網(wǎng)站地圖：1.強(qiáng)化信息層次，使得用戶(hù)熟悉對(duì)內(nèi)容的組織方式。2.對(duì)了解網(wǎng)站用途的用戶(hù)，則便利其快速、直接訪問(wèn)內(nèi)容。3.避免讓用戶(hù)承擔(dān)太多信息，協(xié)助用戶(hù)。網(wǎng)站地圖強(qiáng)化層次感，探索感。網(wǎng)站地圖有一個(gè)很實(shí)在的好處,當(dāng)你在搜索引擎中找到某個(gè)網(wǎng)站，它可以直接把你帶到相關(guān)的欄目中。（圖2）

圖2
網(wǎng)站索引：就是將網(wǎng)站的內(nèi)容以關(guān)鍵詞、詞匯、標(biāo)簽按一定順序(字母，筆劃)排列而成。內(nèi)容之間可以沒(méi)有等級(jí)關(guān)系。方便已知條目的尋找，比如歌星中找“曾軼可"，只要有找首字首拼音“Z”就可以。
對(duì)小型網(wǎng)站可以利用你對(duì)內(nèi)容了解的知識(shí)來(lái)決定要引入哪些鏈接，來(lái)創(chuàng)建索引。
對(duì)大型網(wǎng)站首先用戶(hù)從索引中選擇術(shù)語(yǔ)，再?gòu)囊栽撔g(shù)語(yǔ)為索引的文件清單中選出想要的。

指南:網(wǎng)站的新手指南。設(shè)計(jì)指南原則1.指南要短。2.無(wú)論何時(shí)，用戶(hù)都能離開(kāi)指南。3.允許用戶(hù)在指南中，前進(jìn)，后退的自由移動(dòng)。4.指南的設(shè)計(jì)目的是回答問(wèn)題的。5.截圖應(yīng)該明確，具有把重點(diǎn)功能放大的效果。6.如果指南有好幾頁(yè)，要目錄。

向?qū)Ш团渲闷鳎褐饕菂f(xié)助用戶(hù)選擇配置產(chǎn)品細(xì)節(jié)（圖3）


圖3

高級(jí)導(dǎo)航方法

個(gè)性化和定制化：個(gè)性化(猜測(cè)用戶(hù)想要什么。在特定環(huán)境中會(huì)運(yùn)行的很好，但在用戶(hù)體驗(yàn)時(shí)，就會(huì)失敗)就是針對(duì)個(gè)人的行為、需求、喜好提供剪裁后的網(wǎng)頁(yè)給用戶(hù)。如網(wǎng)上買(mǎi)書(shū)時(shí)，會(huì)有“推薦同類(lèi)書(shū)籍”，可能有些推薦的書(shū)你已經(jīng)買(mǎi)過(guò)并看過(guò)了。定制化(用戶(hù)告訴我們想要什么。但有時(shí)候用戶(hù)自己都不知道他們要需要什么)是給用戶(hù)直接控制權(quán)，可以針對(duì)展現(xiàn)格式、導(dǎo)航和內(nèi)容選項(xiàng)的組合做調(diào)整。如Google　Reader。

可視化：讓用戶(hù)可能采用可視化的方式瀏覽GROXIS。(在網(wǎng)上瀏覽博物館網(wǎng)站時(shí)就像逛現(xiàn)實(shí)生活中的博物館一樣身臨其境的感覺(jué)，想了想谷歌音樂(lè)的[挑歌]欄目可能比較類(lèi)似這種概念)

社會(huì)化導(dǎo)航：用戶(hù)上網(wǎng)的需求點(diǎn)、興趣點(diǎn)可以從觀察其它用戶(hù)行為中推論出來(lái)的基礎(chǔ)上。比如說(shuō)一些人上論壇，微博時(shí)就是看最近有什么網(wǎng)絡(luò)話(huà)題，關(guān)注一些熱門(mén)的標(biāo)簽，標(biāo)題；而這類(lèi)標(biāo)簽，話(huà)題主要是通過(guò)搜索日志、使用量統(tǒng)計(jì)數(shù)據(jù)、顧客數(shù)據(jù)庫(kù)等站長(zhǎng)統(tǒng)計(jì)軟件中獲得。（其實(shí)這也是情境式導(dǎo)航，只不過(guò)作者用這類(lèi)導(dǎo)航的產(chǎn)生方式來(lái)歸納：這類(lèi)導(dǎo)航的內(nèi)容是通過(guò)用戶(hù)的行為統(tǒng)計(jì)產(chǎn)生的，就成了[社會(huì)化導(dǎo)航]了）（完）