編輯導讀：作為一個新用戶，進入一個網站或者產品的第一件事就是去看導航欄，根據導航欄的指引找到自己想要的信息。本文作者基于自己的工作經驗，將從五個方面復盤了B端的導航設計，希望對你有幫助。

公司想要對原有的運營管理平臺進行頁面改版升級，本文就關于如何設計導航做了如下調查和總結。

公司現有平臺頁面如下：

頁面有如下缺點：

1. 頂部利用率低；
2. 一級菜單過多；
3. 功能搜索距離菜單位置太遠；
4. 根據后臺數據，常用功能沒有多少用戶使用；

拿到任務，我的思路首先是探索導航的意義，其次查看其他產品的設計，而后總結導航的所有類型和可實現的方式，最后根據現有的菜單框架選定最適合的模型。

一、導航的意義

很多人是把導航和菜單聯系在一起，叫導航菜單，但我覺得狹隘了。

菜單原指餐館提供的列有各類菜肴的清單，它是大而全的；導航就是給客戶指引，讓用戶知道自己在哪，可以去哪。顯然導航的概念更豐富，而菜單是實現網站導航的一種。我們可以根據菜單點單，也可以按門店銷售排行榜點單，也可以根據點單員的推薦點單。

所以發現了嗎？這里就出現了三類導航：菜單導航（菜單點單）、標簽導航（排行榜點單）、推薦導航（服務員推薦點單）。

二、菜單導航

菜單可分為頂部菜單、側邊菜單、頂部+側邊菜單。

關于這三者的優缺點，這位作者的梳理給了我很大幫助，鏈接如下：B端設計：導航菜單的設計5步法

這類菜單是將全平臺所有可使用功能經過分類全部呈現出來，在重新討論劃分后，我們共有9個菜單，其中三個與平臺主業務不想關，當時處于技術原因想借用前端框架暫時掛在這里，可以不用過多考慮，將其收起來放在隱藏點的位置即可。

所以實際為6個菜單，二級菜單大概為15個，三級菜單為75-80個。不算太多，三種類型的菜單擺放位置我們皆可考慮。

1. 關于二三級菜單展開模式

頂部放一級菜單，側邊放二三級菜單的模式通常一級菜單會展現出來，二三級展現形式可能會有以下兩種：

1）二三級同時展示，如下圖

2）二三層級逐級展開，如下圖

同時展開的好處是可以將3級菜單一覽無余，進入到內容頁面只需要再點擊一步。阿里云、騰訊云他們的菜單較多，采用的都是這種模式；而老牌的工具平臺如PS、PR、Axure則喜歡逐級展開這種交互。

我沒有想明白這類層級展開的菜單為何一直在用？從導航的目的觸發，它使得找尋目標的路徑變得很長，看起來似乎沒有優勢。

在展開方式上我們選擇采用一級外露，二三級同時展開的模式。

2. 關于菜單位置

1. 頂部+側邊導航：頂部放一級菜單，側邊同時展開二級和三級，它的閱讀順序不是很友好，我要先看上面，選中了一個后再在左邊選擇。
2. 頂部導航：6個主菜單不多，且名字皆為兩個字，在選擇一級后，在下方同時展現二三級菜單，符合閱讀順序，是最佳選擇。
3. 側邊導航：側邊導航有三種展現形式：懸浮顯示+縱向排列，依然違背閱讀習慣；懸浮顯示+橫向排列，可??；固定顯示，表達清晰，但是占位過多，排除。

最后，我們暫且選定頂部導航和側邊導航里的“懸浮顯示+橫向排列”，看一下與其他部分結合哪個效果會更好。

3. 關于交互方式

交互有兩種，一種是懸停顯示二三級菜單，一種是點擊顯示二三級菜單。兩者的主要區別在于一個會隨著鼠標移動消失，一個不會消失。

我個人傾向于點擊，這樣我不會因為不小心滑動鼠標導致面板消失，點擊會讓我有更強的掌控感，而且我覺得點擊和懸停的操作成本是一樣的。我不太明白上文作者所說的懸?？梢允褂脩舨僮鞲奖愕慕Y論是怎么得來的。個人認為懸停只適用于出現的彈窗不需要進行二次點擊，只是進行釋義的場景。

鑒于團隊其它同事偏好懸停，所以我們采用懸停+點擊都支持的方式，但是菜單面板彈出后鼠標移出面板不會關閉面板，當再用戶點擊其它地方或點擊某個子級菜單時關閉面板。

4. 關于使用圖標

圖標有兩個作用：

1）簡化表達

當人們熟悉它時，旁邊即便沒有文字說明我們領會它的內涵，這是全行業對用戶的教育，潛移默化中形成了一套規范。如表達用戶，一定是類似這種的圖標。

表達更多則是：

當圖標能清晰表達其內涵，則可以將頁面的側邊導航收起，將空間讓給內容區。

2）美化頁面

如果菜單上全是文字，密密麻麻，沒有記憶點，不是很好看。加上圖標之后頁面的層次感會好一些，而且圖標可以比文字產生更好的記憶點，一二級菜單可以設計一個圖標。

最終我們決定給每一個菜單都設計圖標，這樣自定義菜單模塊上也可以用圖標加文字的表現形式。在圖標設計上，一級菜單的圖標會選用不同的顏色，使菜單更有記憶點，頁面也會更加年輕活潑。

三、標簽導航

標簽導航其實是菜單的一個二次分類，它不要求囊括所有功能，比如石墨文檔里的“我的收藏”“最近使用”就是一個二次標簽。系統支持自定義常見功能的導航就屬于標簽導航。

每個人按照自己的習慣定義導航可以極大地提高導航的速度，理應是非常好的一個功能。但是在我司原有的平臺里，它僅出現在首頁的右下角，實在太不突出。反觀用戶量極大的B端平臺金蝶，它將常用功能放在首頁的頂部，非常明顯。

顯然對于平臺的頻繁使用者而言，標簽導航比導航菜單更具有導航價值，我們決定把標簽導航固定在某一塊顯示，而不止是在首頁顯示，會給與它和菜單導航同樣的重視。

四、推薦導航

推薦導航是平臺給你推薦一些功能，最常出現在內容平臺，比如優酷、人人都是產品經理網站在分析了大量用戶的搜索后，將最有可能符合你目標的搜索項放在這里。

我們原有的平臺里已經有了搜索模塊，但使用者很少，一是因為他的位置與菜單相隔太遠，一個在最左側，一個在最右側，根據設計的相關性原則，位置布局十分不合理。

運營后臺的推薦不同于內容平臺有大量用戶的搜索數據可以進行分析出熱點，但是我們有用戶曾經的搜索記錄。曾經搜索過的菜單很有可能有再次搜索的需求，類似百度搜索的歷史搜索記錄。

五、總結

導航的意義是給客戶指引，幫助客戶快速找到目標功能。它分為菜單導航、標簽導航、推薦導航。菜單導航是合理分類，羅列全部套餐；標簽導航是按照另一套規則或用戶自定義常用功能菜單；推薦導航是根據大數據或歷史數據預測用戶可能想要尋找的目標功能。

最終一個產品的導航都需要結合三者共同作用。

作者：榮三歌 ；公眾號：奇怪的猩猩

本文由 @榮三歌 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議