Web系統(tǒng)中的后臺(tái)系統(tǒng)是根據(jù)具體業(yè)務(wù)設(shè)計(jì)的，作為一個(gè)后臺(tái)系統(tǒng)設(shè)計(jì)師，知道如何在狹小的屏幕空間選擇合理的導(dǎo)航形式表達(dá)業(yè)務(wù)內(nèi)容是很重要的。本文目的在于分析后臺(tái)系統(tǒng)導(dǎo)航控件的組成與樣式，不涉及內(nèi)容頁導(dǎo)航。

回想一下：朋友約我們到一個(gè)以前沒去過的大型商場(chǎng)吃飯，當(dāng)我們到商場(chǎng)后，我們會(huì)通過什么找到約定的飯店？

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

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

而Web系統(tǒng)中的后臺(tái)系統(tǒng)是根據(jù)具體業(yè)務(wù)設(shè)計(jì)的，作為一個(gè)后臺(tái)系統(tǒng)設(shè)計(jì)師，知道如何在狹小的屏幕空間選擇合理的導(dǎo)航形式表達(dá)業(yè)務(wù)內(nèi)容是很重要的。

本文目的在于分析后臺(tái)系統(tǒng)導(dǎo)航控件的組成與樣式，不涉及內(nèi)容頁導(dǎo)航。

一、導(dǎo)航作用

1. 告訴用戶這里有些什么。導(dǎo)航通過讓層次結(jié)構(gòu)可視化，從而告訴用戶網(wǎng)站上有些什么，有效地體現(xiàn)站點(diǎn)內(nèi)容。
2. 告訴用戶如何使用網(wǎng)站。好的導(dǎo)航能夠幫助用戶規(guī)劃行程，含蓄地告訴用戶該從哪里開始，能進(jìn)行哪些選擇，幫用戶快速找到所需內(nèi)容。
3. 確定用戶的位置。當(dāng)用戶到達(dá)某一個(gè)地方，好的導(dǎo)航會(huì)告訴用戶“你在哪里”讓他們知道所在位置，避免迷路。

二、導(dǎo)航類型

先記住一件重要原則：讓導(dǎo)航在每一頁以一致的外觀出現(xiàn)在相同的位置，會(huì)讓用戶立即確認(rèn)自己仍然待在這個(gè)網(wǎng)站上。

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

1. 全局導(dǎo)航

全局導(dǎo)航就是在網(wǎng)站的每一頁都會(huì)顯示，且樣式一致的全域?qū)Ш?。全局?dǎo)航允許用戶直接訪問關(guān)鍵區(qū)域和功能，而不管他們處于網(wǎng)站的哪個(gè)層級(jí)。

如：

‘阿里云’控制臺(tái)-概覽頁 頂部與左側(cè)一級(jí)導(dǎo)航為全局導(dǎo)航，每個(gè)頁面都會(huì)顯示且樣式一致

‘日事清’全局導(dǎo)航，每個(gè)頁面都會(huì)顯示且樣式一致

2. 局部導(dǎo)航

局部導(dǎo)航可以補(bǔ)充全局導(dǎo)航，不是每個(gè)頁面都有的，能讓用戶可以立即探索他們所在的區(qū)域。

局部導(dǎo)航存在主要因?yàn)槿緦?dǎo)航不足以涵括整個(gè)網(wǎng)站架構(gòu)，且有的內(nèi)容和功能需要以獨(dú)特的導(dǎo)航方式呈現(xiàn)。其次，有的后臺(tái)系統(tǒng)量級(jí)較大，一個(gè)系統(tǒng)的不同模塊通常由不同部門負(fù)責(zé)，不同模塊可能以不同形式的處理方式。

如：

‘阿里云’控制臺(tái)-CDN概覽頁。只有CDN模塊下顯示CDN相關(guān)的導(dǎo)航，不同模塊的局部導(dǎo)航內(nèi)容不一樣

‘日事清’不同主欄目下的局部導(dǎo)航樣式與內(nèi)容都不一樣

三、導(dǎo)航組成內(nèi)容

一般場(chǎng)景下，后臺(tái)系統(tǒng)導(dǎo)航包含5個(gè)元素，需要根據(jù)系統(tǒng)特性保持這些元素的部分可見：

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

‘日事情’頂部導(dǎo)航

1. 站點(diǎn)ID

站點(diǎn)ID就像一個(gè)建筑名稱，告訴用戶目前所在的地方。站點(diǎn)ID一般存在于網(wǎng)站的左上角，代表整個(gè)網(wǎng)站，是站點(diǎn)結(jié)構(gòu)上層次最高的元素。

站點(diǎn)ID跟全站導(dǎo)航一樣，應(yīng)該存在于網(wǎng)站的每一頁，時(shí)刻提醒用戶，用戶目前是在A網(wǎng)站而不是B網(wǎng)站。一般站點(diǎn)ID也會(huì)承載‘回到首頁’的功能，無論用戶迷失到何種地步，點(diǎn)擊‘站點(diǎn)ID’能回到首頁。就像點(diǎn)擊‘重啟’一樣，從頭開始。

站點(diǎn)ID一般存在于全局導(dǎo)航中。

‘站點(diǎn)ID’可以提示我們始終在該站點(diǎn)上

2. 欄目

欄目可以理解為導(dǎo)航上到達(dá)站點(diǎn)的不同層級(jí)欄目的鏈接，欄目可能有多個(gè)層級(jí)，一般在第1~2個(gè)層級(jí)欄目存在于全站導(dǎo)航中，往后欄目存在于局部導(dǎo)航。

3. 搜索（可選）

搜索為一種輔助型導(dǎo)航，可以幫助用戶在站點(diǎn)快速找到所需的內(nèi)容。近幾年，因?yàn)樗阉鞯谋憷?，搜索深受廣大用戶喜愛。除非站點(diǎn)非常小且組織得很好，否則每個(gè)頁面都應(yīng)該有一個(gè)搜索框。

對(duì)于后臺(tái)系統(tǒng)而言，搜索功能常用于查詢某一模塊下的數(shù)據(jù)，所以后臺(tái)系統(tǒng)搜索一般存在與頁面中。面向用戶/客戶的搜索功能常為全站搜索，存在于全局導(dǎo)航中。

4. 實(shí)用工具

實(shí)用工具是到達(dá)網(wǎng)站中不屬于內(nèi)容層次的重要元素鏈接，比如：登錄、注冊(cè)、用戶中心、消息中心等。對(duì)于不同網(wǎng)站，實(shí)用工具也會(huì)有所不同。

5. ‘你在這里’指示器

欄目可以讓我們知道，這個(gè)網(wǎng)站有什么，但是不能知道‘我的位置’。因?yàn)橛脩粲洃浟τ邢?，如果不知道‘我的位置’，用戶?huì)很容易迷路，雖然能看到當(dāng)前頁面內(nèi)容，卻很容易忘了自己從哪兒來。

為了消除這種迷失感，我們可以通過‘你在這里’指示器告知用戶，用戶當(dāng)前位置。‘你在這里’指示器一般通過突出路徑欄目樣式做到。

PS：以上5個(gè)元素是一般場(chǎng)景下的導(dǎo)航要素，還有一種特殊場(chǎng)景下的導(dǎo)航。

特殊場(chǎng)景，比如：登錄、注冊(cè)、查看購物車、支付等，這些場(chǎng)景會(huì)做一些重要且不希望被干擾的操作。這時(shí)候，持久導(dǎo)航可能會(huì)成為不必要的干擾。

對(duì)這些頁面來說， 只需要站點(diǎn)ID，一個(gè)回到主頁的鏈接，以及任何可能有助于完成任務(wù)的實(shí)用工具作為做小規(guī)模的全站導(dǎo)航就足夠了。

如：

左圖為阿里云登錄頁，右圖為阿里云注冊(cè)頁

四、導(dǎo)航呈現(xiàn)

導(dǎo)航存在三種呈現(xiàn)方式：

• 一種是水平方式；
• 一種是垂直方式；
• 一種是混合方式。

這三種呈現(xiàn)方式能充分展示全站與局部導(dǎo)航。

1. 水平方式

即欄目是水平的，一般排列形式如下：

優(yōu)點(diǎn)：

1. 人的瀏覽習(xí)慣是自上而下，從左到右的，水平方式符合用戶的瀏覽習(xí)慣。
2. 整個(gè)頁面排版穩(wěn)定，不受用戶終端顯示器影響。
3. 無左側(cè)垂直導(dǎo)航干擾，沉浸感強(qiáng)。

缺點(diǎn)：

可拓展性較差。

• 一方面受瀏覽器寬度限制，水平方式欄目長(zhǎng)度受限，欄目數(shù)量不宜過多。欄目命名中文字?jǐn)?shù)2~5個(gè)，欄目數(shù)目不超過7個(gè)比較合適。
• 另外一方面，如果是有中英文切換功能的話，英文欄目長(zhǎng)度很可能比中文的長(zhǎng)，而屏幕寬度有限，容易出現(xiàn)內(nèi)容密集或排不下的情況。

使用范圍：

適用于業(yè)務(wù)簡(jiǎn)單，欄目較少，追求沉浸式，輕操作的系統(tǒng)。

實(shí)例如下：

微吼控制臺(tái)

2. 垂直方式

即欄目是垂直的，一般排列形式如下：

優(yōu)點(diǎn)：

1. 層級(jí)拓展性強(qiáng)，可支持多個(gè)欄目。
2. 導(dǎo)航可固定，使用戶在操作和瀏覽時(shí)可以快速定位和切換當(dāng)前位置，操作效率高。
3. 左側(cè)導(dǎo)航可處理成可收縮樣式，可擴(kuò)大頁面寬度。

缺點(diǎn)：

1. 內(nèi)容放在左側(cè)，排版受客戶端顯示器影響大。
2. 固定占據(jù)左側(cè)區(qū)域，內(nèi)容展示區(qū)寬度受限，不利于沉浸式體驗(yàn)。

使用范圍：

適用于有一定復(fù)雜度，需要頻繁切換，重操作的系統(tǒng)。

實(shí)例如下：

微信公眾平臺(tái)后臺(tái)

有贊微商城

3. 混合方式

即主欄目和下一級(jí)欄目是水平與垂直結(jié)合的，一般排列形式如下：

優(yōu)點(diǎn)：層級(jí)與欄目擴(kuò)展性強(qiáng)，最深可支持4級(jí)結(jié)構(gòu)。

缺點(diǎn)：

1. 部分欄目與不同層級(jí)欄目間距離可能較遠(yuǎn)，切換效率受限。
2. 導(dǎo)航占屏幕面積大，內(nèi)容頁寬高展示受限。

使用范圍：

混合方式是目前后臺(tái)系統(tǒng)最為常見的呈現(xiàn)方式，會(huì)存在多種排列方式。適用于量級(jí)大，模塊多且復(fù)雜度較高的后臺(tái)系統(tǒng)。

實(shí)例如下：

阿里云控制臺(tái)-概覽頁

阿里云控制臺(tái)-CDN概覽頁

關(guān)于后臺(tái)導(dǎo)航配色，后臺(tái)設(shè)計(jì)老司機(jī)得出一個(gè)結(jié)論：一般層級(jí)深且量級(jí)大的后臺(tái)系統(tǒng)，建議從主欄目到下級(jí)欄目配色從深到淺。因?yàn)橄鄬?duì)于導(dǎo)航，頁面內(nèi)容會(huì)更重要。如果導(dǎo)航用淺色系去表達(dá)，會(huì)壓不住整個(gè)界面，容易讓整個(gè)界面看上去沒有突出的重點(diǎn)。

通過上述內(nèi)容，大家應(yīng)該知道導(dǎo)航有什么元素，怎么呈現(xiàn)了。該文章重于術(shù)，至于道方面，如：導(dǎo)航要如何組織，如何命名，請(qǐng)看下回分解。

參考資料：

ant design-導(dǎo)航

ToB web后臺(tái)產(chǎn)品設(shè)計(jì)：導(dǎo)航設(shè)計(jì)

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

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

作者：四口，網(wǎng)宿交互設(shè)計(jì)師。馬甲線萌妹，喜歡設(shè)計(jì)、跑馬、健身。

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

本文由 @四口 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議