菜單作為產品的功能布局和功能入口，是產品功能交互的主要設計之一。

1.移動端產品menu的展現形式

1.1底部固定導航菜單如（如微信、每日開眼、YouTube）

優勢：

底部固定導航菜單系統是移動端產品傳統的菜單形式，適用范圍很廣，其固定的Tab欄可以讓用戶清晰的了解到每個模塊當中的功能并能隨時進入相關界面，外加底部標簽是采用圖標+文字的方式，很容易被用戶看到、用到，入口始終一目了然，不需要花附加的時間去尋找。同時，隨著微信、微博、支付寶等主流產品采用了這種設計模式，用戶在使用習慣上對這種底部固定菜單模式已經非常熟悉，而且隨著手機屏幕的增大，用戶在使用手機時基本是屬于手握手機下半部分的姿勢，點擊底部標簽欄在使用上也是非常便捷和舒適的操作。

劣勢：

底部固定導航欄一般劃分為3-5個模塊，過多或過少在設計上都會不符合美學，因此功能類別或功能細分較多的情況下，需要借助于頂部選項卡等其他菜單模式。

1.2頂部選項卡菜單（如：豆瓣、微信讀書、YOUKU、今日頭條、C CHANNEL）

優勢：

當某一功能需要類別劃分，而剛好類別在2-5個之間時，選項卡子菜單是個很好的選擇，用戶一目了然。如果導航數量較大時，一是采用“更多”項圖標方案，這種方案與抽屜導航異曲同工，但不同的是選項卡菜單有可見項，而抽屜導航是隱藏式菜單，只要可見項優先級足夠高，有四至五個可見的高頻功能會極大的降低學習成本，改善用戶體驗。二是采用滾動式菜單，這種方案的缺點是用戶只能看到可見范圍內的幾個選項，其余的選項用戶不可預知。盡管如此，當用戶探索購物或新聞類選項時，這依然是可接受的解決方案。

劣勢：

采用“更多”項的解決方案時，如果導航項優先級別不符合用戶心理預期，此設計仍然會成為產品的累贅，使得用戶體驗差。

而另一種解決方案是顯示更多的導航項，導航項之間的交互是手指滑動式，如下圖：

1.3側抽屜菜單（如：果殼精選、知乎日報）

果殼精選

知乎日報

側抽屜菜單也叫做側滑菜單、漢堡式菜單。

優勢：

圖上兩款產品均采用了漢堡式圖標，點擊圖標即可呼喚出菜單，實質是將底部Tab欄或者選項卡里的內容放置在側邊欄菜單里，從而使產品看起來更加整潔、簡單和優美。而且可以輕易的在里面添加項目，尤其是對于不良的信息架構，不會對產品產生直接的后果。

劣勢：

漢堡式菜單的導航圖標有3種表現形式：圖標、圖標+文字、文字；這3種形式對產品的轉化率來說存在一些差異，但都不夠一目了然。

默認狀態下，側抽屜菜單中的內容對用戶是不可見的，隱藏式的。因此要讓用戶真正使用到菜單背后隱藏的功能需要的步驟是：用戶了解到觸發側邊欄展開的圖標是可點擊的按鈕；了解按鈕背后的功能；花很長一段時間使它成為一種常識。第一步比較容易掌握，但第二步、第三步對于不可見的功能來說大大增加了用戶的使用成本，而且功能之間的互相切換也不如底部固定Tab欄那么自如順暢。

從用戶使用習慣上來說，80%-90%的用戶習慣使用默認項，如：默認的頁面信息，而對于一些在頁面上找不到的功能或信息只有在“我想要進入XXXX”的時候才會去找對應的按鈕和圖標。

但是該菜單模式仍有其可用之處，尤其在功能單一的工具型產品的應用上（如：摩拜單車、思維導圖）。摩拜單車中屏幕的一切都是為了尋找附件車輛并開鎖，在頁面增加一個設置、錢包等二級選項時沒有比漢堡式菜單更為突出的菜單設計了。而思維導圖整個頁面都是為了畫圖，其余任何操作均設置在漢堡式菜單中。

1.4頂部固定菜單（如：QQ音樂、酷狗音樂）

優勢：頂部菜單與底部Tab標簽欄在頁面上的位置是一上一下，意義差不多。遵從了用戶從上到下的瀏覽習慣，但需要在UI設計上對頂部標簽區域做顏色的區分。如QQ音樂的綠色模塊設計，標簽采用了白色字體，使用戶能迅速識別并習慣該菜單模式。

劣勢：點擊頂部標簽時不能單手操作，采用了手指右滑的交互可提升用戶體驗。

1.5下拉菜單（如微博）

優勢：

下拉菜單可用性很強，與web網頁端產品標題的下拉菜單雷同，把用戶習慣從網頁端遷移到移動端，也是明智的選擇。它可以用在頁面標題和選項卡菜單下，雖然選項隱藏其下，但向下的箭頭很明顯的表示了可迅速切換其他類別。用戶的接受程度比側抽屜菜單要強，從頁面優美和整潔度來說不亞于漢堡式菜單，而且對于無優先級別的情況下也可適用。

劣勢：無

1.6矩陣式菜單（如美顏相機、美圖秀秀、MIX）

優勢：從產品的用戶角度出發，此類菜單設計偏女性化，女生更喜歡偏文藝、可愛、色彩更明亮的設計風格，其中圓形和方框式設計更切合女生的喜好。

劣勢：女性色彩濃重，對于男性來說較難接受。

2.網頁端產品menu的展現形式

2.1側邊欄菜單（如今日頭條、Michael NGO）

優勢：

側邊欄菜單是由傳統的頂部導航欄引申而來，風格有點類似于目錄，用戶可以迅速找到自己想要的功能入口。它也分為2種類型：1）浮動固定式，側邊菜單不隨主頁面的滑動而滑動，如上圖1-2；2）自動跳轉式，隨著主頁面的滑動，導航項跳轉到對應的菜單模塊。而且側邊菜單欄不受導航項的高度影響，可以根據自己網站的情況設定，因此它除了適合小眾小資網站外，一般的平臺也比較適用，如資訊平臺等。

劣勢：

中國人習慣的審美模式是有頭有尾，采用側邊欄菜單后，那頁面頂部的缺失部分應該怎么處理也是難點之處。因此，目前絕大多數大型網站采用了側邊欄+頂部導航欄結合的方案來規劃整個網站。

2.2頂部導航菜單+側邊欄菜單（如美食天下、當當網）

優勢：側邊欄+頂部菜單導航能滿足大型網站平臺的龐大功能類別需求，用戶體驗也較好，給人感覺種類豐富齊全。

劣勢：頂部菜單和側邊欄菜單的分類比重、優先級都是對用戶體驗造成影響的因素。

2.3頂部固定導航菜單（如果殼網、芒果TV）

優勢：

傳統的頂部導航菜單，中規中矩，適合用戶使用習慣。點擊導航項可以進入對應子頁面，在子頁面上又有對應的頂部導航欄進入下一級頁面。也可以在導航菜單下加入下拉菜單如下圖，下拉菜單可選擇圖標和文字，對于用戶的體驗效果根據網站總體定位有關。

劣勢：

版式基本固定，適合大眾化的產品，對于個性、風格與眾不同、藝術氣息類網站不太適合，如畫展等等；

2.4頂部浮動固定導航菜單（如人人都是產品經理、中國國家地理、百家）

優勢：

隨著頁面不斷的向下滑動，頂部導航菜單一直可見。用戶可以在任何時候、頁面的任何區域跳轉到其他導航項的頁面，不需要返回至頂部區域即可操作，優化了用戶體驗。

劣勢：

版本和傳統的頂部固定模式雷同；

2.5樓層導航菜單（如唯品會、京東）

優勢：

頁面瀏覽量較大時，采用樓層導航可以快速跳轉至用戶想要的區域。

劣勢：

只適用于單級頁面內容之間的跳轉。

2.6側抽屜式菜單（如Create）

優勢：

又稱隱藏式菜單、漢堡式菜單，和移動端側抽屜式菜單一樣，使得頁面整潔完美，結合恰當的UI設計可使網站風格獨樹一幟。

劣勢：

web網頁端的菜單隱藏的缺點不會像移動端的那么明顯。

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