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

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

公司現(xiàn)有平臺頁面如下：

頁面有如下缺點：

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

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

一、導航的意義

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

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

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

二、菜單導航

菜單可分為頂部菜單、側(cè)邊菜單、頂部+側(cè)邊菜單。

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

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

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

1. 關(guān)于二三級菜單展開模式

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

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

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

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

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

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

2. 關(guān)于菜單位置

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

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

3. 關(guān)于交互方式

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

我個人傾向于點擊，這樣我不會因為不小心滑動鼠標導致面板消失，點擊會讓我有更強的掌控感，而且我覺得點擊和懸停的操作成本是一樣的。我不太明白上文作者所說的懸停可以使用戶操作更方便的結(jié)論是怎么得來的。個人認為懸停只適用于出現(xiàn)的彈窗不需要進行二次點擊，只是進行釋義的場景。

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

4. 關(guān)于使用圖標

圖標有兩個作用：

1）簡化表達

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

表達更多則是：

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

2）美化頁面

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

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

三、標簽導航

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

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

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

四、推薦導航

推薦導航是平臺給你推薦一些功能，最常出現(xiàn)在內(nèi)容平臺，比如優(yōu)酷、人人都是產(chǎn)品經(jīng)理網(wǎng)站在分析了大量用戶的搜索后，將最有可能符合你目標的搜索項放在這里。

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

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

五、總結(jié)

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

最終一個產(chǎn)品的導航都需要結(jié)合三者共同作用。

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

本文由 @榮三歌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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