圖1從右側這家店的櫥窗裡，我們能迅速分清哪些是租房資訊哪些是售房資訊。因為店家很貼心的將房產資訊進行歸類，並且在視覺上做了一些劃分，讓我們對資訊能一目了然。借這個小案例引出我們今天要分享的話題：深廣度平衡。
其實「深廣度」本身並不是乙個單一的概念。在**的資訊架構中，有一種組織結構叫做樹形結構：**首頁視為鏈結層級中第一級，與其有從屬關係的頁面視為鏈結層級中的第二級，一般稱其為二級頁面。通過二級頁面又可以繼續得到第**頁面，依此類推可以得到乙個完整的樹形鏈結結構。這樣乙個完整的鏈結結構，我們稱它為樹形結構。
在整個樹形結構中，鏈結的層數被稱為網頁鏈結的【深度】（depth）。而在樹形結構裡，最底層頁面包含的頁面總數被稱為網頁鏈結的【廣度】（breadth）。
我們可以通過下面這張圖來理解深度和廣度的概念：
圖2我們回到開篇的小案例。左側那店鋪採用的是「只有內容鏈結的模型」（它們之間沒有層級結構；鏈結沒有模式可循；且沒有某種導航方案將他們分離開）（注1）
在這裡每一條房產資訊都可以看成乙個內容鏈結，整個櫥窗就像一張錯綜複雜的大網，讓人頭暈目眩。
而右側的店鋪採用的是「結構化瀏覽模型」（只有一組鏈結，作為獲取**資訊的途徑；導航區域與布局中其他內容有視覺上的分隔；要到達另一區域的某個頁面，必須沿著樹向上導航，再沿著另乙個分支向下）（注2）
店家將資訊進行了規整，在房產資訊上增加了乙個分類，並且對不同型別的資訊使用了不同的顏色，高效的將租房資訊和售房資訊區分開來。
圖3圖3的上圖說明了又窄又深的層級系統，使用者必須點選6次才能到達最底層的內容。對又寬又淺的層級系統而言（相對而言），使用者必須從6個類別中選擇，才能找到6個條目。就像圖3的下圖所示，使用者會面臨主選單上太多選項，而當他們選了乙個選項，卻沒看到什麼內容時，就會產生不良的觀感。（注3）
我們再來看一張使用者對於不同層級結構所需反應時間的圖表（注4）
，圖4：
圖4總共512項內容，組成了三種不同的分級方案，x軸是分級，y軸是反應時間（秒）。可以很清晰看出，在過深和過廣的分級方案上，使用者所需要的反應時間都比較長。因此我們在組織**資訊的時候，需要仔細平衡深度和廣度之間的關係。
我們在處理**結構時，常常會使用按組分類的方法來組織資訊。而資訊的分類我們能使用時間序、主題或科目、地理、字母序、受眾群體以及任務等方案。現在我們再來看看深廣度平衡在web上的應用。
圖5這是某電腦公司的官方**，他們的導航本身就是乙個站點地圖。他們將14項內容分級組成了乙個兩層的結構樹，每個分支上都有3-4項內容。對於這樣乙個資訊量不是很龐雜的**來說，使用主題或科目的方案，將資訊組成乙個兩層的結構樹，就是一種深廣度平衡的方式。
圖6對於那些資訊量很大很雜的**來說，單純的使用某一種按類分組的方案已經不太適用了。一般來說，廣度比深度的效果更好。在深結構的各級別間選擇，比起在廣導航的各選項間掃視，要付出更多精力。眼睛比起滑鼠點選（和頁面載入）要快得多。雖然使用者在深結構更容易迷失方向，甚至可能迷路，但也不要在廣度上走得太遠。任何時候都把所有鏈結展示出來會嚇倒使用者，讓他難以選擇。使用者會點選看起來適合他們需要的第乙個選項，或者乾脆放棄，下圖清晰的闡述了使用者放棄率和深廣度之間的關係：
圖7**首頁類目地圖大概有300個類目，使用了三層結構將他們清晰得展示出來，每層類目都是4～12個之間，是乙個深廣度保持平衡的典型案例，圖8：
圖8注1：摘錄《web導航設計》第1章 第一節 導航的需要（p6）
注2：摘錄《web導航設計》第1章 第一節 導航的需要（p9）
注3：摘錄《web資訊架構》第5章 第四節 組織結構（p70）
注4：摘錄微軟**《web page design: implications of memory, structure and scent for information retrieval》
《web
導航設計》
《web
資訊架構》
互動設計實用指南系列 0 我們眼中的互動設計
互動設計 interaction design,縮寫 ixd 或者 iad 是定義 設計人造系統的行為的設計領域。人造物，即人工製成物品，例如，軟體 移動裝置 人造環境 服務 可佩帶裝置以及系統的組織結構。互動設計在於定義人造物的行為方式 the interaction 即人工製品在特定場景下的反應...
互動設計實用指南系列 12 避免出錯
乙個 簡單 和 複雜 的例子 在我和開發人員溝通乙個專案需求的時候，他們頻頻慨嘆mockup的設計所考慮情況之細緻，很多程式要實現的預判和 非基礎功能點 讓開發人員望而卻步不情願去實現。相比較設計師為了讓使用者避免出錯而絞盡腦汁去設想和考慮，開發人員更傾向於直接給到乙個只能容許的操作行為，其他非法請...
互動設計實用指南系列 6 標籤明晰 有效
說簡單一點，我們就是要為 的資訊做分類，並為它們起乙個通俗易懂的名字。這其實是任何人都可以做的一件事情，所以在導航設計流程中，它的重要性也常常被忽略。在設計產品時，常會聽到這樣的話 這個欄目該叫什麼名字？恩。先別管吧，把更重要的工作做了再說。然而，站在使用者的角度，導航標籤代表的是整個 的內容 產品...