導覽在Web中扮演一個回答用戶”我是誰？””我從哪裡來?””我到哪裡去”的角色。好的導覽是一個網站的主要基石。而在開始設計一個網站或者改版一個網頁時，它往往是設計師第一個面臨的挑戰。
01 導覽設計之訊息架構
訊息架構決定了導覽的定性，在設計之前整理清楚內容的訊息架構，才能最大程度發揮導覽的梳理網站結構、有效傳遞訊息功能。網頁結構一共有多少層級關係？是否存在上下層關係？各類別標籤之間的關係是並列關係還是相關聯的？各子級項中是否存在可合併項？等等。要避免單純地按照簡單的邏輯關係，甚至按照業務關係把頁面導覽細分到3級甚至4級或者產生出一些和用戶認知不相符的訊息類別。每增加一級導覽就增加一個認知維度，每增加一級使得整個導覽系統複雜度增加數倍，不僅用戶的操作將成倍的增加，給網頁後期維護的帶來極大的成本。以下兩種圖示，就能清楚地看到相同數量頁面的不同放置方式給用戶帶來不同的體驗。
在web交互設計中存在”3次點擊”的原則，用戶在3次點擊後無法找到想要的訊息或完成某個功能時，便會選擇放棄。所以對於導覽來說，最基本的應該是讓用戶知道當前的頁面有哪些內容，並且知道自己的目標內容在哪裡。導覽設計的廣度和深度的區別展示，一般來說，廣度比深度的效果要好。在深結構的各級別間選擇更容易迷失方向，甚至可能迷路。但也不要在廣度上鋪的過廣，任何時候把太多內容show出來都會嚇退用戶，讓他們被迫患上了”選擇綜合症”。
為了更明確用戶的認知或者甚至說在設計師面對改版等需求時，有助導覽的創建和完善，常用的一個方法是卡片分類法。卡片分類法的進行方式很簡單，首先準備一些大小相同的空白卡片，將訊息寫在不同的卡片上，讓參與人員自行分類，也可有適當的解釋性引導。每次測試的人數最好在2到4個之間，人數過少的話使用者之間不易產生討論，人數過多則會讓討論變得混亂，場面不易控制。這是一種在在網站或其他規劃初期常用的一個測試方法，能從中瞭解真正符合用戶習慣的訊息分類，找到之間的認知差異，作為調整架構的依據。
02 導覽設計之交互樣式
Web導覽的最重要的作用就是將網站的內容訊息友好地展示給用戶。在確定好網站的訊息架構後，應當按需所取適當的導覽樣式。而不是不管三七二十一，都來個tab式導覽，覺得沒有個橫樑式的導覽都不好意思說自己在做網頁。首先我們瞭解一些常用的導覽形式：
1. 分步導覽 （Step navigation）通常由文字標籤和箭頭組成，也要伴隨著向後退的連結。適用於環環相扣的頁面流程，如嚮導，支付，線上閱讀等，為一個接一個的頁面提供訪問。
（圖示出自：Google.com 註冊頁面）
2.分頁導覽 （Paging navigation）經常出現在搜尋頁中，一次可展現的結果數目通常有限制，超出限制的結果將在新頁面展現。最簡單的分頁導覽就是帶頁碼的分佈導覽。
（圖示出自：中國阿里巴巴 我的阿里）
3.麵包屑 （Breadcrumb trail）展示了用戶訪問網站的路線，由一大串的元素和節點組成。每個節點都與指向先前訪問過的頁面或父級主題相連，節點間以符號分隔，通常是大於號（>）,冒號（：）或者豎線（|）
4.樹狀導覽 （Tree navigation）允許針對層級結構的瀏覽。往往包含加號和減號或小箭頭的小圖標來展開和收起下級節點。
5.網站地圖 （Site Map）為網站提供了自頂向下的迅速總覽。適用於有大量內容和廣泛用戶群體的網站。因而應該比較簡單易於掃視。其中的標籤要與頁面中的標題相符。在搭建網站地圖時需要考慮其顆粒度，一般來說只需展現網站結構中的兩到三級，提供到頁面的連結。頁腳網站地圖，是現今大中型網站採用的方式，把網站地圖一部分顯示在頁面底部，同時包含一個指向完整地圖的連結。
6.Tab式導覽（Tabbed Navigation）相當於導覽條+Tab。導覽條最簡單的形式就是把超連結連成一行，有時用豎線分隔開來。而Tab式導覽將tab控件結合到導覽條上，使得網站內容結構化，多重化。
Amazon.com可能是第一個運用tab式導覽的大型電子商務網站，Amazon目前線上運用的是垂直選單+動態選單的形式。
7.垂直選單 （Vertical Menu）通常置於網站的左邊或者右邊的一列連結。垂直選單較橫向的導覽更靈活，易於向下擴充，且允許的標籤長度較長。
8.動態選單 （Dynamic menus）也叫浮出選單，下拉選單或者彈出選單。用戶須與其產生交互行為，選單才能顯示。常用的交互是鼠標懸停或點擊。
9.下拉框導覽 （Drop-down menus）利用下拉選單的特性，當選定某一項或多個選項，即將用戶帶到新的頁面。
10.標籤雲 （Tag clouds）所列連結按字母排序，按照標籤熱門程度確定字體的大小和顏色。標籤雲的設計者是交互設計師Stewart Butterfield。首先使用標籤雲的是Flickr。
來源:阿里UED （圖示出自：Apple.com）
