每個(gè)網(wǎng)站都有自己的鏈接結(jié)構(gòu)，也可以叫做信息架構(gòu)，比如首頁是一級(jí)頁面，列表是二級(jí)頁面，內(nèi)容是三級(jí)頁面等。這其實(shí)就是網(wǎng)站鏈接中的廣度與深度，當(dāng)訪問一個(gè)頁面需要點(diǎn)擊好幾個(gè)頁面的時(shí)候，那么這個(gè)頁面就屬于深層次的網(wǎng)頁，對(duì)于搜索引擎來說越難發(fā)現(xiàn)的頁面可以被收錄的概率也越低，因此大多數(shù)網(wǎng)站都會(huì)把網(wǎng)站鏈接結(jié)構(gòu)中的廣度做寬，而深度則保持一定比例就行。

不過如果網(wǎng)站數(shù)據(jù)量很大的情況下，深度與廣度的合理平衡就十分重要

1. 什么是深廣度？

其實(shí)“深廣度”本身并不是一個(gè)單一的概念。在網(wǎng)站的信息架構(gòu)中，有一種組織結(jié)構(gòu)叫做樹形結(jié)構(gòu)：網(wǎng)站首頁視為鏈接層級(jí)中第一級(jí)，與其有從屬關(guān)系的頁面視為鏈接層級(jí)中的第二級(jí)，一般稱其為二級(jí)頁面。通過二級(jí)頁面又可以繼續(xù)得到第三級(jí)頁面，依此類推可以得到一個(gè)完整的樹形鏈接結(jié)構(gòu)。這樣一個(gè)完整的鏈接結(jié)構(gòu)，我們稱它為樹形結(jié)構(gòu)。

在整個(gè)樹形結(jié)構(gòu)中，鏈接的層數(shù)被稱為網(wǎng)頁鏈接的【深度】（depth）。而在樹形結(jié)構(gòu)里，最底層頁面包含的頁面總數(shù)被稱為網(wǎng)頁鏈接的【廣度】（breadth）。

我們可以通過下面這張圖來理解深度和廣度的概念：

圖2

2. 為什么深廣度需要保持平衡？

我們回到開篇的小案例。左側(cè)那店鋪采用的是“只有內(nèi)容鏈接的模型”（它們之間沒有層級(jí)結(jié)構(gòu)；鏈接沒有模式可循；且沒有某種導(dǎo)航方案將他們分離開）（注1）在這里每一條房產(chǎn)信息都可以看成一個(gè)內(nèi)容鏈接，整個(gè)櫥窗就像一張錯(cuò)綜復(fù)雜的大網(wǎng)，讓人頭暈?zāi)垦！?/p>

而右側(cè)的店鋪采用的是“結(jié)構(gòu)化瀏覽模型”（只有一組鏈接，作為獲取網(wǎng)站信息的途徑；導(dǎo)航區(qū)域與布局中其他內(nèi)容有視覺上的分隔；要到達(dá)另一區(qū)域的某個(gè)頁面，必須沿著樹向上導(dǎo)航，再沿著另一個(gè)分支向下）（注2）店家將信息進(jìn)行了規(guī)整，在房產(chǎn)信息上增加了一個(gè)分類，并且對(duì)不同類型的信息使用了不同的顏色，高效的將租房信息和售房信息區(qū)分開來。

一個(gè)網(wǎng)站的鏈接深度和廣度最好有一個(gè)合適的均衡關(guān)系，深度過大的網(wǎng)站不利于用戶快速獲取信息，廣度過大的網(wǎng)站則容易讓用戶在無數(shù)并列的超鏈接面前不知所措。

圖3

圖3的上圖說明了又窄又深的層級(jí)系統(tǒng)，用戶必須點(diǎn)擊6次才能到達(dá)最底層的內(nèi)容。對(duì)又寬又淺的層級(jí)系統(tǒng)而言（相對(duì)而言），用戶必須從6個(gè)類別中選擇，才能找到6個(gè)條目。就像圖3的下圖所示，用戶會(huì)面臨主菜單上太多選項(xiàng)，而當(dāng)他們選了一個(gè)選項(xiàng)，卻沒看到什么內(nèi)容時(shí)，就會(huì)產(chǎn)生不良的觀感。（注3）

我們?cè)賮砜匆粡堄脩魧?duì)于不同層級(jí)結(jié)構(gòu)所需反應(yīng)時(shí)間的圖表（注4），圖4：

圖4

總共512項(xiàng)內(nèi)容，組成了三種不同的分級(jí)方案，X軸是分級(jí)，Y軸是反應(yīng)時(shí)間（秒）。可以很清晰看出，在過深和過廣的分級(jí)方案上，用戶所需要的反應(yīng)時(shí)間都比較長(zhǎng)。因此我們?cè)诮M織網(wǎng)站信息的時(shí)候，需要仔細(xì)平衡深度和廣度之間的關(guān)系。

3. 如何保持深廣度平衡？

我們?cè)谔幚砭W(wǎng)站結(jié)構(gòu)時(shí)，常常會(huì)使用按組分類的方法來組織信息。而信息的分類我們能使用時(shí)間序、主題或科目、地理、字母序、受眾群體以及任務(wù)等方案。現(xiàn)在我們?cè)賮砜纯瓷顝V度平衡在web上的應(yīng)用。

圖5

這是某電腦公司的官方網(wǎng)站，他們的導(dǎo)航本身就是一個(gè)站點(diǎn)地圖。他們將14項(xiàng)內(nèi)容分級(jí)組成了一個(gè)兩層的結(jié)構(gòu)樹，每個(gè)分支上都有3-4項(xiàng)內(nèi)容。對(duì)于這樣一個(gè)信息量不是很龐雜的網(wǎng)站來說，使用主題或科目的方案，將信息組成一個(gè)兩層的結(jié)構(gòu)樹，就是一種深廣度平衡的方式。

再來看個(gè)案例，圖6是某軟件官方網(wǎng)站的一個(gè)下載區(qū)塊，這個(gè)區(qū)塊里密密麻麻羅列了N個(gè)下載鏈接。有不同的版本、有不同的下載工具、有不同的外站下載。這些鏈接在沒有進(jìn)行任何組織的情況下呈現(xiàn)給用戶，體驗(yàn)是非常糟糕的。

圖6

對(duì)于那些信息量很大很雜的網(wǎng)站來說，單純的使用某一種按類分組的方案已經(jīng)不太適用了。一般來說，廣度比深度的效果更好。在深結(jié)構(gòu)的各級(jí)別間選擇，比起在廣導(dǎo)航的各選項(xiàng)間掃視，要付出更多精力。眼睛比起鼠標(biāo)點(diǎn)擊（和頁面載入）要快得多。雖然用戶在深結(jié)構(gòu)更容易迷失方向，甚至可能迷路，但也不要在廣度上走得太遠(yuǎn)。任何時(shí)候都把所有鏈接展示出來會(huì)嚇倒用戶，讓他難以選擇。用戶會(huì)點(diǎn)擊看起來適合他們需要的第一個(gè)選項(xiàng)，或者干脆放棄，下圖清晰的闡述了用戶放棄率和深廣度之間的關(guān)系：

圖7

淘寶首頁類目地圖大概有300個(gè)類目，使用了三層結(jié)構(gòu)將他們清晰得展示出來，每層類目都是4～12個(gè)之間，是一個(gè)深廣度保持平衡的典型案例，圖8：

圖8

小結(jié)

對(duì)于不同類型，不同信息量的網(wǎng)站，在深廣度平衡上應(yīng)采用不同的策略和方式。本文僅以個(gè)人在工作中的經(jīng)驗(yàn)來對(duì)深廣度平衡的方法論進(jìn)行一些實(shí)例化的分享。對(duì)這方面有興趣的同學(xué)歡迎留言探討。

原文鏈接：http://ued.taobao.com/blog/2010/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/