每個網站都有自己的鏈接結構，也可以叫做信息架構，比如首頁是一級頁面，列表是二級頁面，內容是三級頁面等。這其實就是網站鏈接中的廣度與深度，當訪問一個頁面需要點擊好幾個頁面的時候，那么這個頁面就屬于深層次的網頁，對于搜索引擎來說越難發(fā)現(xiàn)的頁面可以被收錄的概率也越低，因此大多數(shù)網站都會把網站鏈接結構中的廣度做寬，而深度則保持一定比例就行。
不過如果網站數(shù)據量很大的情況下，深度與廣度的合理平衡就十分重要
1. 什么是深廣度？
其實“深廣度”本身并不是一個單一的概念。在網站的信息架構中，有一種組織結構叫做樹形結構：網站首頁視為鏈接層級中第一級，與其有從屬關系的頁面視為鏈接層級中的第二級，一般稱其為二級頁面。通過二級頁面又可以繼續(xù)得到第三級頁面，依此類推可以得到一個完整的樹形鏈接結構。這樣一個完整的鏈接結構，我們稱它為樹形結構。
在整個樹形結構中，鏈接的層數(shù)被稱為網頁鏈接的【深度】（depth）。而在樹形結構里，最底層頁面包含的頁面總數(shù)被稱為網頁鏈接的【廣度】（breadth）。
我們可以通過下面這張圖來理解深度和廣度的概念：
圖2
2. 為什么深廣度需要保持平衡？
我們回到開篇的小案例。左側那店鋪采用的是“只有內容鏈接的模型”（它們之間沒有層級結構；鏈接沒有模式可循；且沒有某種導航方案將他們分離開）（注1）在這里每一條房產信息都可以看成一個內容鏈接，整個櫥窗就像一張錯綜復雜的大網，讓人頭暈目眩。
而右側的店鋪采用的是“結構化瀏覽模型”（只有一組鏈接，作為獲取網站信息的途徑；導航區(qū)域與布局中其他內容有視覺上的分隔；要到達另一區(qū)域的某個頁面，必須沿著樹向上導航，再沿著另一個分支向下）（注2）店家將信息進行了規(guī)整，在房產信息上增加了一個分類，并且對不同類型的信息使用了不同的顏色，高效的將租房信息和售房信息區(qū)分開來。
一個網站的鏈接深度和廣度最好有一個合適的均衡關系，深度過大的網站不利于用戶快速獲取信息，廣度過大的網站則容易讓用戶在無數(shù)并列的超鏈接面前不知所措。
圖3
圖3的上圖說明了又窄又深的層級系統(tǒng)，用戶必須點擊6次才能到達最底層的內容。對又寬又淺的層級系統(tǒng)而言（相對而言），用戶必須從6個類別中選擇，才能找到6個條目。就像圖3的下圖所示，用戶會面臨主菜單上太多選項，而當他們選了一個選項，卻沒看到什么內容時，就會產生不良的觀感。（注3）
我們再來看一張用戶對于不同層級結構所需反應時間的圖表（注4），圖4：
圖4
總共512項內容，組成了三種不同的分級方案，X軸是分級，Y軸是反應時間（秒）?？梢院芮逦闯?，在過深和過廣的分級方案上，用戶所需要的反應時間都比較長。因此我們在組織網站信息的時候，需要仔細平衡深度和廣度之間的關系。
3. 如何保持深廣度平衡？
我們在處理網站結構時，常常會使用按組分類的方法來組織信息。而信息的分類我們能使用時間序、主題或科目、地理、字母序、受眾群體以及任務等方案。現(xiàn)在我們再來看看深廣度平衡在web上的應用。
圖5
這是某電腦公司的官方網站，他們的導航本身就是一個站點地圖。他們將14項內容分級組成了一個兩層的結構樹，每個分支上都有3-4項內容。對于這樣一個信息量不是很龐雜的網站來說，使用主題或科目的方案，將信息組成一個兩層的結構樹，就是一種深廣度平衡的方式。
再來看個案例，圖6是某軟件官方網站的一個下載區(qū)塊，這個區(qū)塊里密密麻麻羅列了N個下載鏈接。有不同的版本、有不同的下載工具、有不同的外站下載。這些鏈接在沒有進行任何組織的情況下呈現(xiàn)給用戶，體驗是非常糟糕的。
圖6
對于那些信息量很大很雜的網站來說，單純的使用某一種按類分組的方案已經不太適用了。一般來說，廣度比深度的效果更好。在深結構的各級別間選擇，比起在廣導航的各選項間掃視，要付出更多精力。眼睛比起鼠標點擊（和頁面載入）要快得多。雖然用戶在深結構更容易迷失方向，甚至可能迷路，但也不要在廣度上走得太遠。任何時候都把所有鏈接展示出來會嚇倒用戶，讓他難以選擇。用戶會點擊看起來適合他們需要的第一個選項，或者干脆放棄，下圖清晰的闡述了用戶放棄率和深廣度之間的關系：
圖7
淘寶首頁類目地圖大概有300個類目，使用了三層結構將他們清晰得展示出來，每層類目都是4～12個之間，是一個深廣度保持平衡的典型案例，圖8：
圖8
小結
對于不同類型，不同信息量的網站，在深廣度平衡上應采用不同的策略和方式。本文僅以個人在工作中的經驗來對深廣度平衡的方法論進行一些實例化的分享。對這方面有興趣的同學歡迎留言探討。
原文鏈接：http://ued.taobao.com/blog/2010/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/
