在進(jìn)入今天的主題之前，我們先來探討導(dǎo)航的重要性，并分析一下門戶網(wǎng)站中導(dǎo)航的表現(xiàn)。

導(dǎo)航直接影響到公司的財(cái)政收入

導(dǎo)航會(huì)給我們帶來哪些好處？導(dǎo)航不光只是提供信息獲取的途徑，它的設(shè)計(jì)優(yōu)劣會(huì)直接影響到整個(gè)公司財(cái)政收入。下面我們看一個(gè)例子（以下內(nèi)容來自alibaba李凡的《設(shè)計(jì)師的商業(yè)意識(shí)》）：

?

alibaba大致的廣告價(jià)格

上圖反映了阿里巴巴網(wǎng)站大致的廣告價(jià)格。

其實(shí)頁(yè)面上方大量的空間都被導(dǎo)航占據(jù)了，見下圖：

?

可以看出，上方的導(dǎo)航非常龐大，在一屏之內(nèi)，用戶幾乎看不到搜索結(jié)果。

用戶是來找信息的，第一屏完全看不到結(jié)果?。?！

下面我們要為導(dǎo)航減肥：

導(dǎo)航減肥后的頁(yè)面

這是減肥之后的導(dǎo)航，搜索結(jié)果在更高的位置呈現(xiàn)，同時(shí)每個(gè)產(chǎn)品位的價(jià)格也增加了很多，第一個(gè)位置的廣告位由9.5萬增加到12萬。

導(dǎo)航的改變，直接帶來了網(wǎng)站的財(cái)政收益。

導(dǎo)航在Web設(shè)計(jì)中占據(jù)著非常重要的位置，但是我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，常常會(huì)忽略導(dǎo)航的重要性，特別在門戶網(wǎng)站中，這種現(xiàn)象更加普遍。以下為網(wǎng)易財(cái)經(jīng)頻道的頁(yè)面導(dǎo)航：

?

財(cái)經(jīng)頻道頁(yè)面

第一幅圖是財(cái)經(jīng)頻道的首頁(yè)、第二幅為二級(jí)頻道股票的首頁(yè)，第三幅圖是大盤的首頁(yè)。

從上圖可以看出：

• 三張圖對(duì)比，主導(dǎo)航有了明顯的變化，且這個(gè)變化是顛覆性的，我們完全沒法找出一些關(guān)聯(lián)性的東西。當(dāng)看到首頁(yè)時(shí)我在想，操盤是股票下面的二級(jí)頁(yè)，但是到了股票的頁(yè)面，卻沒有操盤這個(gè)導(dǎo)航項(xiàng)了。
• 同一頁(yè)面上不支持多級(jí)導(dǎo)航，導(dǎo)航能體現(xiàn)的層級(jí)有限。
• 打開大盤頁(yè)面用戶更加不知所措，我到底在哪，導(dǎo)航上沒有當(dāng)前選中的導(dǎo)航。
• 幾乎每點(diǎn)擊一次導(dǎo)航，都會(huì)在新窗口打開頁(yè)面，這樣給瀏覽器造成了很大壓力。

總覽各大門戶網(wǎng)站，由于信息內(nèi)容龐大，結(jié)構(gòu)復(fù)雜，前期規(guī)劃不當(dāng)，信息需要快速迭代等因素，導(dǎo)航上面都會(huì)有很多問題。解決導(dǎo)航問題已經(jīng)刻不容緩。

在研究導(dǎo)航問題時(shí)，閱讀了《Web導(dǎo)航設(shè)計(jì)》這本書，對(duì)書中的內(nèi)容進(jìn)行了一些總結(jié)歸納。今天主要分享一下“導(dǎo)航設(shè)計(jì)中的信息結(jié)構(gòu)”這一方面。

什么是信息結(jié)構(gòu)

結(jié)構(gòu)能夠具體的涵蓋頁(yè)面和內(nèi)容的特定位置。信息結(jié)構(gòu)指的是網(wǎng)站上頁(yè)面的規(guī)劃或是架構(gòu)圖，它是你網(wǎng)站的骨架。信息的結(jié)構(gòu)類型包括：

線型結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、層級(jí)結(jié)構(gòu)、分面結(jié)構(gòu)、逐漸顯露的結(jié)構(gòu)。

信息結(jié)構(gòu)的具體分析

1、線性結(jié)構(gòu)

如下圖，在此頁(yè)面可以限制淘寶買家按線性結(jié)構(gòu)完成購(gòu)買流程。上方的1,2,3,4的步驟很好的引導(dǎo)用戶一步一步完成任務(wù)，并告知用戶所在流程中的位置。

一般的面包屑導(dǎo)航，也是一個(gè)線性結(jié)構(gòu)：

2、網(wǎng)狀結(jié)構(gòu)

如下圖，這是可以由用戶設(shè)置產(chǎn)出的頁(yè)面。

網(wǎng)狀結(jié)構(gòu)的導(dǎo)航沒有起點(diǎn)也沒有終點(diǎn)，甚至是沒有層級(jí)或是序列。

3、層級(jí)結(jié)構(gòu)

大多數(shù)的網(wǎng)站可能都是采用這種結(jié)構(gòu)。以上下級(jí)關(guān)系排列節(jié)點(diǎn)，以展開其層級(jí)。

以下為網(wǎng)易數(shù)碼頻道的導(dǎo)航：

4、分面結(jié)構(gòu)

分面結(jié)構(gòu)中，一個(gè)項(xiàng)目的定位由它的屬性類別給出：項(xiàng)目1屬于類別a，b，c，但不屬于d、它有多個(gè)訪問點(diǎn)。

如下圖九天音樂，歌手林宥嘉同時(shí)可以在歌手或是排行榜中找到。人們可以從任何順序取值，從而支持了同一個(gè)目標(biāo)的多種完成方式：

5、逐漸顯露的結(jié)構(gòu)

它不是一個(gè)事先建立好的信息結(jié)構(gòu)，而是自發(fā)形成的，這就是逐漸顯露的結(jié)構(gòu)。例如維基百科，它是由每個(gè)貢獻(xiàn)者參與構(gòu)建了網(wǎng)站的內(nèi)容，規(guī)模，甚至是方向。

從上面的結(jié)構(gòu)類型可以看出，不同的網(wǎng)站類型需要不同的信息結(jié)構(gòu)，比如音樂類的網(wǎng)址，就是需要通過“音樂”、“歌手”等分面結(jié)構(gòu)來呈現(xiàn)。

理解和掌握這些結(jié)構(gòu)類型有助于我們更好的把握導(dǎo)航的設(shè)計(jì)。

確定了信息結(jié)構(gòu)以后，我們要考慮的就是如何組織信息。

比如汽車頻道按字母排序的例子：

卡片分類介紹

在進(jìn)行網(wǎng)站信息結(jié)構(gòu)和組織設(shè)計(jì)的時(shí)候，我們會(huì)用到卡片分類法，卡片分類需要：

• 制作一些我們事先預(yù)設(shè)好的分類，交給用戶進(jìn)行排列；
• 用戶可以說出自己的想法，也可以修改分類的名稱；
• 鼓勵(lì)用戶遇到難以理解的分類，大聲說出來。

在進(jìn)行卡片分類時(shí)，一般會(huì)有兩個(gè)階段：

• 開放階段，大概需要15個(gè)用戶，給用戶足夠的自由度來進(jìn)行信息分類。
• 封閉階段，大概需要8名用戶，對(duì)之前開發(fā)階段的結(jié)果進(jìn)行驗(yàn)證。

卡片分類在實(shí)際過程中的應(yīng)用

卡片分類定量結(jié)果

在進(jìn)行卡片分類時(shí)，會(huì)用到兩個(gè)軟件usort和ezsort，usort用于導(dǎo)入用戶卡片分類的結(jié)果，ezsort可以將所有結(jié)果都導(dǎo)進(jìn)去，并產(chǎn)出統(tǒng)計(jì)圖。

卡片分類統(tǒng)計(jì)結(jié)果

這次分享，主要是我對(duì)于“web導(dǎo)航設(shè)計(jì)”這本書部分內(nèi)容的總結(jié)和一些感悟，希望大家在今后的設(shè)計(jì)中，更加重視導(dǎo)航的設(shè)計(jì)，在導(dǎo)航設(shè)計(jì)中找到一些有效的方法。

當(dāng)然導(dǎo)航設(shè)計(jì)不光只是信息結(jié)構(gòu)或是組織方法，還與導(dǎo)航的交互方式，導(dǎo)航的視覺表現(xiàn)，導(dǎo)航的擴(kuò)展性，導(dǎo)航的平衡等有很多聯(lián)系。針對(duì)門戶類網(wǎng)站，也有它特殊的導(dǎo)航需求，這是我下面需要研究的內(nèi)容。

源地址：http://uedc.163.com/3546.html