Web系統中的后臺系統是根據具體業務設計的，作為一個后臺系統設計師，知道如何在狹小的屏幕空間選擇合理的導航形式表達業務內容是很重要的。本文目的在于分析后臺系統導航控件的組成與樣式，不涉及內容頁導航。

回想一下：朋友約我們到一個以前沒去過的大型商場吃飯，當我們到商場后，我們會通過什么找到約定的飯店？

一般情況，我們都會通過商場樓層索引找到飯店所在樓層和區域吧。如果商場樓層索引指示清楚的話，我們就能快速找到約定的飯店，不然，我們會感到困惑，自己瞎找，走了很多冤枉路還不一定找到，最后只能尋求朋友或商場人員幫助，難免會有深深的挫敗感。

其實商場樓層索引與Web導航作用很像，都是為了告訴我們，這里有什么、我可以做什么、我在什么位置？

而Web系統中的后臺系統是根據具體業務設計的，作為一個后臺系統設計師，知道如何在狹小的屏幕空間選擇合理的導航形式表達業務內容是很重要的。

本文目的在于分析后臺系統導航控件的組成與樣式，不涉及內容頁導航。

一、導航作用

1. 告訴用戶這里有些什么。導航通過讓層次結構可視化，從而告訴用戶網站上有些什么，有效地體現站點內容。
2. 告訴用戶如何使用網站。好的導航能夠幫助用戶規劃行程，含蓄地告訴用戶該從哪里開始，能進行哪些選擇，幫用戶快速找到所需內容。
3. 確定用戶的位置。當用戶到達某一個地方，好的導航會告訴用戶“你在哪里”讓他們知道所在位置，避免迷路。

二、導航類型

先記住一件重要原則：讓導航在每一頁以一致的外觀出現在相同的位置，會讓用戶立即確認自己仍然待在這個網站上。

導航分類兩種類型：一種是全局導航，一種是局部導航。它們的目標是類似的：提供情景和活動，幫助用戶了解他們的位置和告訴他們可以去哪里。

1. 全局導航

全局導航就是在網站的每一頁都會顯示，且樣式一致的全域導航。全局導航允許用戶直接訪問關鍵區域和功能，而不管他們處于網站的哪個層級。

如：

‘阿里云’控制臺-概覽頁 頂部與左側一級導航為全局導航，每個頁面都會顯示且樣式一致

‘日事清’全局導航，每個頁面都會顯示且樣式一致

2. 局部導航

局部導航可以補充全局導航，不是每個頁面都有的，能讓用戶可以立即探索他們所在的區域。

局部導航存在主要因為全站導航不足以涵括整個網站架構，且有的內容和功能需要以獨特的導航方式呈現。其次，有的后臺系統量級較大，一個系統的不同模塊通常由不同部門負責，不同模塊可能以不同形式的處理方式。

如：

‘阿里云’控制臺-CDN概覽頁。只有CDN模塊下顯示CDN相關的導航，不同模塊的局部導航內容不一樣

‘日事清’不同主欄目下的局部導航樣式與內容都不一樣

三、導航組成內容

一般場景下，后臺系統導航包含5個元素，需要根據系統特性保持這些元素的部分可見：

1. 站點ID；
2. 欄目；
3. 搜索；
4. 實用工具；
5. ‘你在這里’指示器。

‘日事情’頂部導航

1. 站點ID

站點ID就像一個建筑名稱，告訴用戶目前所在的地方。站點ID一般存在于網站的左上角，代表整個網站，是站點結構上層次最高的元素。

站點ID跟全站導航一樣，應該存在于網站的每一頁，時刻提醒用戶，用戶目前是在A網站而不是B網站。一般站點ID也會承載‘回到首頁’的功能，無論用戶迷失到何種地步，點擊‘站點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. 導航占屏幕面積大，內容頁寬高展示受限。

使用范圍：

混合方式是目前后臺系統最為常見的呈現方式，會存在多種排列方式。適用于量級大，模塊多且復雜度較高的后臺系統。

實例如下：

阿里云控制臺-概覽頁

阿里云控制臺-CDN概覽頁

關于后臺導航配色，后臺設計老司機得出一個結論：一般層級深且量級大的后臺系統，建議從主欄目到下級欄目配色從深到淺。因為相對于導航，頁面內容會更重要。如果導航用淺色系去表達，會壓不住整個界面，容易讓整個界面看上去沒有突出的重點。

通過上述內容，大家應該知道導航有什么元素，怎么呈現了。該文章重于術，至于道方面，如：導航要如何組織，如何命名，請看下回分解。

參考資料：

ant design-導航

ToB web后臺產品設計：導航設計

《WEB信息架構》第四版 -Louis Rosenfeld,Peter Morville,jorge Arango著；樊旺斌，師蓉譯

《Don’t make me think 》第三版 – Steve Krug著；蔣芳譯

作者：四口，網宿交互設計師。馬甲線萌妹，喜歡設計、跑馬、健身。

原文鏈接：http://ued.chinanetcenter.com/?p=2378

本文由 @四口 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議