菜單作為產(chǎn)品的功能布局和功能入口，是產(chǎn)品功能交互的主要設(shè)計(jì)之一。

1.移動(dòng)端產(chǎn)品menu的展現(xiàn)形式

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

優(yōu)勢(shì)：

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

劣勢(shì)：

底部固定導(dǎo)航欄一般劃分為3-5個(gè)模塊，過(guò)多或過(guò)少在設(shè)計(jì)上都會(huì)不符合美學(xué)，因此功能類別或功能細(xì)分較多的情況下，需要借助于頂部選項(xiàng)卡等其他菜單模式。

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

優(yōu)勢(shì)：

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

劣勢(shì)：

采用“更多”項(xiàng)的解決方案時(shí)，如果導(dǎo)航項(xiàng)優(yōu)先級(jí)別不符合用戶心理預(yù)期，此設(shè)計(jì)仍然會(huì)成為產(chǎn)品的累贅，使得用戶體驗(yàn)差。

而另一種解決方案是顯示更多的導(dǎo)航項(xiàng)，導(dǎo)航項(xiàng)之間的交互是手指滑動(dòng)式，如下圖：

1.3側(cè)抽屜菜單（如：果殼精選、知乎日?qǐng)?bào)）

果殼精選

知乎日?qǐng)?bào)

側(cè)抽屜菜單也叫做側(cè)滑菜單、漢堡式菜單。

優(yōu)勢(shì)：

圖上兩款產(chǎn)品均采用了漢堡式圖標(biāo)，點(diǎn)擊圖標(biāo)即可呼喚出菜單，實(shí)質(zhì)是將底部Tab欄或者選項(xiàng)卡里的內(nèi)容放置在側(cè)邊欄菜單里，從而使產(chǎn)品看起來(lái)更加整潔、簡(jiǎn)單和優(yōu)美。而且可以輕易的在里面添加項(xiàng)目，尤其是對(duì)于不良的信息架構(gòu)，不會(huì)對(duì)產(chǎn)品產(chǎn)生直接的后果。

劣勢(shì)：

漢堡式菜單的導(dǎo)航圖標(biāo)有3種表現(xiàn)形式：圖標(biāo)、圖標(biāo)+文字、文字；這3種形式對(duì)產(chǎn)品的轉(zhuǎn)化率來(lái)說(shuō)存在一些差異，但都不夠一目了然。

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

從用戶使用習(xí)慣上來(lái)說(shuō)，80%-90%的用戶習(xí)慣使用默認(rèn)項(xiàng)，如：默認(rèn)的頁(yè)面信息，而對(duì)于一些在頁(yè)面上找不到的功能或信息只有在“我想要進(jìn)入XXXX”的時(shí)候才會(huì)去找對(duì)應(yīng)的按鈕和圖標(biāo)。

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

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

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

劣勢(shì)：點(diǎn)擊頂部標(biāo)簽時(shí)不能單手操作，采用了手指右滑的交互可提升用戶體驗(yàn)。

1.5下拉菜單（如微博）

優(yōu)勢(shì)：

下拉菜單可用性很強(qiáng)，與web網(wǎng)頁(yè)端產(chǎn)品標(biāo)題的下拉菜單雷同，把用戶習(xí)慣從網(wǎng)頁(yè)端遷移到移動(dòng)端，也是明智的選擇。它可以用在頁(yè)面標(biāo)題和選項(xiàng)卡菜單下，雖然選項(xiàng)隱藏其下，但向下的箭頭很明顯的表示了可迅速切換其他類別。用戶的接受程度比側(cè)抽屜菜單要強(qiáng)，從頁(yè)面優(yōu)美和整潔度來(lái)說(shuō)不亞于漢堡式菜單，而且對(duì)于無(wú)優(yōu)先級(jí)別的情況下也可適用。

劣勢(shì)：無(wú)

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

優(yōu)勢(shì)：從產(chǎn)品的用戶角度出發(fā)，此類菜單設(shè)計(jì)偏女性化，女生更喜歡偏文藝、可愛、色彩更明亮的設(shè)計(jì)風(fēng)格，其中圓形和方框式設(shè)計(jì)更切合女生的喜好。

劣勢(shì)：女性色彩濃重，對(duì)于男性來(lái)說(shuō)較難接受。

2.網(wǎng)頁(yè)端產(chǎn)品menu的展現(xiàn)形式

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

優(yōu)勢(shì)：

側(cè)邊欄菜單是由傳統(tǒng)的頂部導(dǎo)航欄引申而來(lái)，風(fēng)格有點(diǎn)類似于目錄，用戶可以迅速找到自己想要的功能入口。它也分為2種類型：1）浮動(dòng)固定式，側(cè)邊菜單不隨主頁(yè)面的滑動(dòng)而滑動(dòng)，如上圖1-2；2）自動(dòng)跳轉(zhuǎn)式，隨著主頁(yè)面的滑動(dòng)，導(dǎo)航項(xiàng)跳轉(zhuǎn)到對(duì)應(yīng)的菜單模塊。而且側(cè)邊菜單欄不受導(dǎo)航項(xiàng)的高度影響，可以根據(jù)自己網(wǎng)站的情況設(shè)定，因此它除了適合小眾小資網(wǎng)站外，一般的平臺(tái)也比較適用，如資訊平臺(tái)等。

劣勢(shì)：

中國(guó)人習(xí)慣的審美模式是有頭有尾，采用側(cè)邊欄菜單后，那頁(yè)面頂部的缺失部分應(yīng)該怎么處理也是難點(diǎn)之處。因此，目前絕大多數(shù)大型網(wǎng)站采用了側(cè)邊欄+頂部導(dǎo)航欄結(jié)合的方案來(lái)規(guī)劃整個(gè)網(wǎng)站。

2.2頂部導(dǎo)航菜單+側(cè)邊欄菜單（如美食天下、當(dāng)當(dāng)網(wǎng)）

優(yōu)勢(shì)：側(cè)邊欄+頂部菜單導(dǎo)航能滿足大型網(wǎng)站平臺(tái)的龐大功能類別需求，用戶體驗(yàn)也較好，給人感覺種類豐富齊全。

劣勢(shì)：頂部菜單和側(cè)邊欄菜單的分類比重、優(yōu)先級(jí)都是對(duì)用戶體驗(yàn)造成影響的因素。

2.3頂部固定導(dǎo)航菜單（如果殼網(wǎng)、芒果TV）

優(yōu)勢(shì)：

傳統(tǒng)的頂部導(dǎo)航菜單，中規(guī)中矩，適合用戶使用習(xí)慣。點(diǎn)擊導(dǎo)航項(xiàng)可以進(jìn)入對(duì)應(yīng)子頁(yè)面，在子頁(yè)面上又有對(duì)應(yīng)的頂部導(dǎo)航欄進(jìn)入下一級(jí)頁(yè)面。也可以在導(dǎo)航菜單下加入下拉菜單如下圖，下拉菜單可選擇圖標(biāo)和文字，對(duì)于用戶的體驗(yàn)效果根據(jù)網(wǎng)站總體定位有關(guān)。

劣勢(shì)：

版式基本固定，適合大眾化的產(chǎn)品，對(duì)于個(gè)性、風(fēng)格與眾不同、藝術(shù)氣息類網(wǎng)站不太適合，如畫展等等；

2.4頂部浮動(dòng)固定導(dǎo)航菜單（如人人都是產(chǎn)品經(jīng)理、中國(guó)國(guó)家地理、百家）

優(yōu)勢(shì)：

隨著頁(yè)面不斷的向下滑動(dòng)，頂部導(dǎo)航菜單一直可見。用戶可以在任何時(shí)候、頁(yè)面的任何區(qū)域跳轉(zhuǎn)到其他導(dǎo)航項(xiàng)的頁(yè)面，不需要返回至頂部區(qū)域即可操作，優(yōu)化了用戶體驗(yàn)。

劣勢(shì)：

版本和傳統(tǒng)的頂部固定模式雷同；

2.5樓層導(dǎo)航菜單（如唯品會(huì)、京東）

優(yōu)勢(shì)：

頁(yè)面瀏覽量較大時(shí)，采用樓層導(dǎo)航可以快速跳轉(zhuǎn)至用戶想要的區(qū)域。

劣勢(shì)：

只適用于單級(jí)頁(yè)面內(nèi)容之間的跳轉(zhuǎn)。

2.6側(cè)抽屜式菜單（如Create）

優(yōu)勢(shì)：

又稱隱藏式菜單、漢堡式菜單，和移動(dòng)端側(cè)抽屜式菜單一樣，使得頁(yè)面整潔完美，結(jié)合恰當(dāng)?shù)腢I設(shè)計(jì)可使網(wǎng)站風(fēng)格獨(dú)樹一幟。

劣勢(shì)：

web網(wǎng)頁(yè)端的菜單隱藏的缺點(diǎn)不會(huì)像移動(dòng)端的那么明顯。

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