許多網(wǎng)站缺乏針對性和友好的導(dǎo)航設(shè)計，難以找到連接到相關(guān)網(wǎng)頁的路徑，也沒有提供有助于讓訪客/用戶找到所需信息的幫助，用戶體驗非常糟糕。這篇文章，我們嘗試就網(wǎng)站導(dǎo)航交互做一些探討。

首先對于WEB交互設(shè)計師來說，解決上面遇到的問題，使之簡單的方法是設(shè)計一套完善的網(wǎng)頁導(dǎo)航系統(tǒng)。

優(yōu)化網(wǎng)站導(dǎo)航設(shè)計的目的

一個網(wǎng)站導(dǎo)航設(shè)計對提供豐富友好的用戶體驗有至關(guān)重要的地位，簡單直觀的導(dǎo)航不僅能提高網(wǎng)站易用性，而且在方便用戶找到所要的信息后，可有助提高用戶轉(zhuǎn)化率。

如果把主頁比作網(wǎng)站門面，那么導(dǎo)航就是通道，這些通道走向網(wǎng)站的每個角落，導(dǎo)航的設(shè)計是否合理對于一個網(wǎng)站是具有非常大意義的。

1） 決定用戶在網(wǎng)站中穿梭瀏覽的體驗，這一點是最基本的。
2） 網(wǎng)站導(dǎo)航設(shè)計合理，可以將網(wǎng)站的內(nèi)容和服務(wù)最大面積的展現(xiàn)在用戶面前。
3） 合理的導(dǎo)航設(shè)計可以增加用戶黏性，提高網(wǎng)站的瀏覽深度，從而提高網(wǎng)站PV值。
4） 促進用戶消費，提高網(wǎng)站盈利。引導(dǎo)用戶消費，將用戶真正需要的產(chǎn)品和服務(wù)展示在他面前，甚至用戶想不到的服務(wù)你也呈現(xiàn)。
5） 提高網(wǎng)站廣告價值，增加網(wǎng)站廣告收益。
……

網(wǎng)站導(dǎo)航的常見結(jié)構(gòu)

雅虎的網(wǎng)頁設(shè)計一直是國內(nèi)眾門戶模仿的對象，我們首先來看看Yahoo網(wǎng)站現(xiàn)有的幾種導(dǎo)航樣式：

1） Yahoo首頁 （最常用的欄目導(dǎo)航）

Yahoo首頁左側(cè)的導(dǎo)航列出了網(wǎng)站最常用（或訪問最頻繁，或網(wǎng)站運營最想讓用戶知道）的幾個欄目。這種導(dǎo)航（也包括網(wǎng)頁頂部橫向結(jié)構(gòu)）是目前互聯(lián)網(wǎng)中使用最廣泛的導(dǎo)航方式。

2） More Yahoo！Services （更多的導(dǎo)航信息的展現(xiàn)）

Yahoo作為一個全球大型綜合門戶網(wǎng)站，所提供的服務(wù)肯定不止首頁左側(cè)導(dǎo)航顯示的那幾個，那么更多的服務(wù)如何導(dǎo)航？同時又如何展現(xiàn)給用戶呢？于是Yahoo的設(shè)計師們給我我們一種解決方案，如上圖，點擊從網(wǎng)頁左側(cè)展開一浮出層樣式的服務(wù)導(dǎo)航頁面。可以發(fā)現(xiàn)，這種導(dǎo)航也是多維度的（下面我們會專門探討）

3） Tab式位置導(dǎo)航變體

我們還可以在Yahoo！TV 等欄目上發(fā)現(xiàn)這樣有趣的導(dǎo)航結(jié)構(gòu)，我們暫且認為他是Tab 式結(jié)構(gòu)加上一個下拉菜單的一種導(dǎo)航組合。

• TV Home – Shows – American Idol – Overview 組成了一個單維度的導(dǎo)航。
• TV Home同時提供了下拉菜單方便用戶快速的轉(zhuǎn)到其二級欄目下。

4） Amazon首頁

Amazon可以說是在網(wǎng)絡(luò)產(chǎn)品導(dǎo)航上的鼻祖了，讓我們再來看看Amazon的導(dǎo)航樣式又有什么特色。

看看它和誰最像？

5） Amazon購物列表頁面

由Amazon購物列表頁引申的討論：

單一維度 和 多維度的導(dǎo)航結(jié)構(gòu)

我們通常認為面包屑導(dǎo)航為單一維度的導(dǎo)航結(jié)構(gòu)，如上圖紅色實線框所示，即它是一種線性的導(dǎo)航方式。不過在網(wǎng)頁的應(yīng)用中，“面包屑”導(dǎo)航的應(yīng)用有兩種：

a) “追溯來路”即跟蹤用戶行為，記錄的用戶在網(wǎng)站的活動足跡的一種“線性導(dǎo)航”，
b) 用來表達內(nèi)容歸屬關(guān)系的界面元素，也就是我們經(jīng)?？吹降摹爸鞣诸?gt;一級分類>二級分類>三級分類>……>最終內(nèi)容頁面”這樣的層級歸屬關(guān)系.

而改網(wǎng)頁左側(cè)的導(dǎo)航卻提供多種維度的導(dǎo)航，且這多種維度可以組合成不同層級的面包屑結(jié)構(gòu)

如，我想買一臺LCD平板電視，進到了：
Electronics ? Audio & Video ? TVs & HDTVs ? Flat-Panel TVs ? Flat-Panel LCD TVs
在這個頁面上，左側(cè)導(dǎo)航給我提供了品牌、供貨商、價格、顯示屏尺寸……等多種選擇。

我可以先選品牌再選尺寸，如：

也可以先選尺寸再選品牌，如：

因此這種方式為用戶提供了多種維度的導(dǎo)航，運行用戶如在電器超市隨意逛逛挑選商品，而不必考慮該先問導(dǎo)購員有什么品牌還是問有什么尺寸好。這一點符合用戶的心理模型，值得設(shè)計中借鑒。

?網(wǎng)站導(dǎo)航設(shè)計需要注意的問題及基本原則

我們就網(wǎng)站組日常需求中，有關(guān)導(dǎo)航的交互設(shè)計工作進行了交流，總結(jié)出在網(wǎng)站導(dǎo)航設(shè)計中需要注意的幾點問題及基本的原則。

1. 導(dǎo)航條的位置。主導(dǎo)航條的位置應(yīng)該在接近頂部或網(wǎng)頁左側(cè)的位置，如果因為內(nèi)容過多需要子導(dǎo)航時，要讓用戶容易地分辨出哪個是主導(dǎo)航條，哪個是某主題的子導(dǎo)航條。

2. 導(dǎo)航使用的簡單性。導(dǎo)航的使用必須得盡可能的簡單，避免使用下拉或彈出式菜單導(dǎo)航，如果沒辦法一定得用，那么菜單的層次不要超過兩層。

3. 面包屑導(dǎo)航。應(yīng)該讓用戶知道現(xiàn)在所看的網(wǎng)頁是什么和與現(xiàn)在所看網(wǎng)頁的相關(guān)網(wǎng)頁是什么，例如通過輔助導(dǎo)航“首頁 > 新聞頻道 >新聞全名”里的對所在網(wǎng)頁位置的文字說明，同時配合導(dǎo)航的顏色高亮，可以達到視覺直觀指示的效果。

4. 導(dǎo)航內(nèi)容明顯的區(qū)別。導(dǎo)航的目錄或主題種類必須得清晰，不要讓用戶困惑，而且如果有需要突出主要網(wǎng)頁的區(qū)域，則應(yīng)該與一般網(wǎng)頁在視覺上有所區(qū)別。

5. 導(dǎo)航和排序的區(qū)別。導(dǎo)航和排序容易混淆，需要留意（看圖指出問題）

這里的tab是導(dǎo)航還是排序？

Google Reader上的處理

6. 準確的導(dǎo)航文字描述。用戶在點擊導(dǎo)航鏈接前對他們所找的東西有一個大概的了解，鏈接上的文字必須能準確描述鏈接所到達的網(wǎng)頁內(nèi)容。

來源：http://www.iptimes.cn/article/201307/2777.html