回想一下，朋友約我們到一個以前沒去過的大型商場喫飯，當我們到商場後，我們會通過什麼找到約定的飯店？一般情況，我們都會通過商場樓層索引找到飯店所在樓層和區域吧。如果商場樓層索引指示清楚的話，我們就能快速找到約定的飯店，不然，我們會感到困惑，自己瞎找，走了很多冤枉路還不一定找到，最後只能尋求朋友或商場人員幫助，難免會有深深的挫敗感。
其實商場樓層索引與Web導航作用很像，都是爲了告訴我們，這裏有什麼，我可以做什麼，我在什麼位置。而Web系統中的後臺系統是根據具體業務設計的，作爲一個後臺系統設計師，知道如何在狹小的屏幕空間選擇合理的導航形式表達業務內容是很重要的。
本文目的在於分析後臺系統導航控件的組成與樣式，不涉及內容頁導航。
一、導航作用
1、告訴用戶這裏有些什麼。導航通過讓層次結構可視化，從而告訴用戶網站上有些什麼，有效地體現站點內容。
2、告訴用戶如何使用網站。好的導航能夠幫助用戶規劃行程，含蓄地告訴用戶該從哪裏開始，能進行哪些選擇，幫用戶快速找到所需內容。
3、確定用戶的位置。當用戶到達某一個地方，好的導航會告訴用戶“你在哪裏”讓他們知道所在位置，避免迷路。
二、導航類型
先記住一件重要原則：讓導航在每一頁以一致的外觀出現在相同的位置，會讓用戶立即確認自己仍然待在這個網站上。
導航分類兩種類型，一種是全局導航，一種是局部導航。它們的目標是類似的：提供情景和活動，幫助用戶瞭解他們的位置和告訴他們可以去哪裏。
1、全局導航
全局導航就是在網站的每一頁都會顯示，且樣式一致的全域導航。全局導航允許用戶直接訪問關鍵區域和功能，而不管他們處於網站的哪個層級。
如：
2、局部導航
局部導航可以補充全局導航，不是每個頁面都有的，能讓用戶可以立即探索他們所在的區域。
局部導航存在主要因爲全站導航不足以涵括整個網站架構，且有的內容和功能需要以獨特的導航方式呈現。其次，有的後臺系統量級較大，一個系統的不同模塊通常由不同部門負責，不同模塊可能以不同形式的處理方式。
如：
三、導航組成內容
一般場景下，後臺系統導航包含5個元素，需要根據系統特性保持這些元素的部分可見：
站點ID
欄目
搜索
實用工具
‘你在這裏’指示器
1、站點ID
站點ID就像一個建築名稱，告訴用戶目前所在的地方。站點ID一般存在於網站的左上角，代表整個網站，是站點結構上層次最高的元素。
站點ID跟全站導航一樣，應該存在於網站的每一頁，時刻提醒用戶，用戶目前是在A網站而不是B網站。一般站點ID也會承載‘回到首頁’的功能，無論用戶迷失到何種地步，點擊‘站點ID’能回到首頁。就像點擊‘重啓’一樣，從頭開始。
站點ID一般存在於全局導航中。
2、欄目
欄目可以理解爲導航上到達站點的不同層級欄目的鏈接。欄目可能有多個層級，一般在第1~2個層級欄目存在於全站導航中，往後欄目存在於局部導航。
3、搜索（可選）
搜索爲一種輔助型導航，可以幫助用戶在站點快速找到所需的內容。近幾年，因爲搜索的便利性，搜索深受廣大用戶喜愛。除非站點非常小且組織得很好，否則每個頁面都應該有一個搜索框。
對於後臺系統而言，搜索功能常用於查詢某一模塊下的數據，所以後臺系統搜索一般存在與頁面中。面向用戶/客戶的搜索功能常爲全站搜索，存在於全局導航中。
4、實用工具
實用工具是到達網站中不屬於內容層次的重要元素鏈接，比如登錄、註冊、用戶中心、消息中心等。對於不同網站，實用工具也會有所不同。
5、‘你在這裏’指示器
欄目可以讓我們知道，這個網站有什麼，但是不能知道‘我的位置’。因爲用戶記憶力有限，如果不知道‘我的位置’，用戶會很容易迷路，雖然能看到當前頁面內容，卻很容易忘了自己從哪兒來。爲了消除這種迷失感，我們可以通過‘你在這裏’指示器告知用戶，用戶當前位置。‘你在這裏’指示器一般通過突出路徑欄目樣式做到。
PS：以上5個元素是一般場景下的導航要素，還有一種特殊場景下的導航。
特殊場景，比如登錄、註冊、查看購物車、支付等，這些場景會做一些重要且不希望被幹擾的操作。這時候，持久導航可能會成爲不必要的干擾。對這些頁面來說， 只需要站點ID，一個回到主頁的鏈接，以及任何可能有助於完成任務的實用工具作爲做小規模的全站導航就足夠了。
如：
四、導航呈現
導航存在三種呈現方式，一種是水平方式，一種是垂直方式，一種是混合方式。這三種呈現方式能充分展示全站與局部導航。
1、水平方式
即欄目是水平的。一般排列形式如下：
優點：
1）人的瀏覽習慣是自上而下，從左到右的，水平方式符合用戶的瀏覽習慣。
2）整個頁面排版穩定，不受用戶終端顯示器影響。
3）無左側垂直導航干擾，沉浸感強。
缺點：
可拓展性較差。
一方面受瀏覽器寬度限制，水平方式欄目長度受限，欄目數量不宜過多。欄目命名中文字數2~5個，欄目數目不超過7個比較合適。
另外一方面，如果是有中英文切換功能的話，英文欄目長度很可能比中文的長，而屏幕寬度有限，容易出現內容密集或排不下的情況。
使用範圍：
適用於業務簡單，欄目較少，追求沉浸式，輕操作的系統。
實例如下：
2、垂直方式
即欄目是垂直的。一般排列形式如下：
優點：
1）層級拓展性強，可支持多個欄目。
2）導航可固定，使用戶在操作和瀏覽時可以快速定位和切換當前位置，操作效率高。
3）左側導航可處理成可收縮樣式，可擴大頁面寬度。
缺點：
1）內容放在左側，排版受客戶端顯示器影響大。
2）固定佔據左側區域，內容展示區寬度受限，不利於沉浸式體驗。
使用範圍：
適用於有一定複雜度，需要頻繁切換，重操作的系統。
實例如下：
3、混合方式
即主欄目和下一級欄目是水平與垂直結合的。一般排列形式如下：
優點：
層級與欄目擴展性強，最深可支持4級結構。
缺點：
1）部分欄目與不同層級欄目間距離可能較遠，切換效率受限。
2）導航佔屏幕面積大，內容頁寬高展示受限。
使用範圍：
混合方式是目前後臺系統最爲常見的呈現方式，會存在多種排列方式。適用於量級大，模塊多且複雜度較高的後臺系統。
實例如下：
關於後臺導航配色，後臺設計老司機得出一個結論：一般層級深且量級大的後臺系統，建議從主欄目到下級欄目配色從深到淺。因爲相對於導航，頁面內容會更重要。如果導航用淺色系去表達，會壓不住整個界面，容易讓整個界面看上去沒有突出的重點。
通過上述內容，大家應該知道導航有什麼元素，怎麼呈現了。該文章重於術，至於道方面，如，導航要如何組織，如何命名，請看下回分解。
參考資料：
《WEB信息架構》第四版 -Louis Rosenfeld,Peter Morville,jorge Arango著；樊旺斌，師蓉譯
《Don’t make me think 》第三版 – Steve Krug著；蔣芳譯
本人簡介：四口，網宿交互設計師。馬甲線萌妹，喜歡設計、跑馬、健身。
文章原鏈接：http://ued.chinanetcenter.com/?p=2378