App設計到底該不該使用抽屜菜單？
- 發布時間: 2015-09-02 11:59:03
- 浏覽次數: 967
先把這位朋(péng)友的(de)事兒放一(yī)放，我們先來聊聊tab菜單和(hé)抽屜菜單。
常規情況下應用的(de)導航菜單分為(wèi)Android的(de)左側滑出的(de)抽屜菜單（Hamburger menu 或 Navigation drawer）和(hé) iOS的(de)Tab标簽菜單。
其實抽屜菜單曾經也一(yī)度大量出現在 iOS 的(de)應用中，Path 在 iOS 上推出了像素級設計的(de)抽屜菜單，Airbnb 将抽屜菜單配合上轉場動效給大家一(yī)種很酷炫的(de)感覺。其實不僅僅是 iOS，即使在 Android上這種菜單導航剛開始會讓人覺得很新鮮，但使用一(yī)段時間後大家開始有來不同的(de)看法，覺得這種抽屜菜單其實挺麻煩的(de)。
抽屜菜單到底好不好？
抽屜菜單真的(de)效率很低(dī)嗎？這還是得依靠數據來說明。早些時候視(shì)頻應用Zeebox就在他們Android客戶端上做(zuò)了一(yī)次AB測試，希望來驗證到底哪種菜單形式才是用戶願意使用的(de)。
他們設計了兩種不同導航形式，一(yī)種為(wèi)抽屜菜單、一(yī)種是Tab菜單（Android的(de)tab菜單形式在上方）。
他們将新版發布上線，經過48小時的(de)數據觀察終于有了結論。使用抽屜菜單導緻日活躍和(hé)周活躍均都有所降低(dī)，抽屜菜單對月活躍的(de)影響更大。tab菜單比抽屜菜單提升來56%的(de)月活躍度，這種數據的(de)變化對于一(yī)款應用來說是非常恐怖的(de)，好在Zeebox一(yī)開始就做(zuò)好了開關，接下來他們隻需要将菜單的(de)開關撥動到tab菜單就好。
抽屜菜單的(de)問題在哪裏？
1.容易被用戶忽略
Android的(de)App bar上（action bar）有很多的(de)元素，這個被大家戲稱為(wèi) hamburger 的(de) icon 就藏在裏面。每個app的(de)菜單功能都不一(yī)樣，在不點開它之前我們不知道(dào)這裏面有哪些功能模塊。至于這個icon，很多人甚至都不知道(dào)它到底是什麽意思。
2.操作效率低(dī)
與Tab菜單的(de)形式相比，抽屜菜單每一(yī)次操作都需要展開、點擊兩次操作。如(rú)果遇到需要單手操作的(de)時候這個操作成功率會比較讓人崩潰。如(rú)果你仔細觀察instagram之類的(de)社交應用，它底部的(de)每一(yī)個tab都是用戶主動高(gāo)頻操作的(de)功能，把他們藏在側邊欄勢必會大幅降低(dī)用戶的(de)使用頻率。
3.iOS 系統中的(de)濫用
其實 Google 也考慮到抽屜菜單的(de)弊端，所以它允許用戶在應用中任意界面右滑屏幕來喚出抽屜菜單。有些應用将抽屜菜單的(de)形式引入到iOS，但由于無法右滑手勢與iOS返回手勢的(de)沖突不得不重新改造頂部導航欄，并将其搞得異常難用。無論是 iOS 還是 Android，它們的(de)每一(yī)個交互形式都是和(hé)其系統設計原則是相互映襯的(de)，單獨拆出某一(yī)個設計相互套用都會有問題。
這裏最好的(de)例子(zǐ)莫過于 Amazon，我曾經很長(cháng)一(yī)段時間跟蹤 Amazon 在 iOS 端的(de)用戶反饋，去(qù)年(nián)的(de)某個版本 Amazon 把客戶端改成來如(rú)下樣子(zǐ)，擁擠的(de)頂部導航欄出現了返回箭頭和(hé)菜單的(de)集合。帶來的(de)就是整整一(yī)個多月用戶的(de)差評、吐槽。它确實很難用，因為(wèi)你一(yī)不小心就會點到菜單圖标上。
其實近年(nián)來大家都開始"收斂"了不少，盡量去(qù)遵循 iOS、Android 平台各自(zì)規範來進行設計。對于在 Android 上是否使用抽屜菜單，幾家互聯網大佬也都在不斷的(de)嘗試後給出來答案。
Twitter，Facebook、Airbnb還有instagram都逐漸使用Tab菜單替代了抽屜菜單。
Material Design的(de)tab樣式：
Twitter客戶端（Android&iOS）
Facebook客戶端（Android&iOS）
Airbnb客戶端（Android&iOS）
如(rú)果不得已必須使用抽屜菜單怎麽辦？
如(rú)果确定需要使用抽屜菜單，那就先把Tab菜單忘記放到一(yī)邊，盡力優化來提升它的(de)效果。你有想到過對抽屜菜單的(de)圖标進行優化嗎？海外有位設計師針對抽屜菜單的(de)圖标進行了一(yī)系列的(de)測試，結果表明即使是使用抽屜菜單對于這個icon的(de)設計也大有講究。
他對抽屜菜單設計了四種不同的(de)圖标形式，用時5天時間針對5萬訪問用戶（64% iOS、Android 34%、BlackBerry&Winphone 2%）進行了測試。
結果很明顯：
-
文字描述顯然傳遞比圖标更為(wèi)清晰；
-
加邊框使其看上去(qù)更像一(yī)個可(kě)以點擊的(de)區域。
關于這個試驗的(de)更多細節，可(kě)以查看下面鏈接中的(de)這篇文章(zhāng)：
http://exisweb.net/mobile-menu-abtest
寫在最後
其實抽屜菜單的(de)好處很明顯，它可(kě)以讓頁面更加的(de)簡潔、通透；而 iOS 底部 tab 的(de)問題就是一(yī)頭一(yī)尾占據了屏幕不少高(gāo)度，應用界面因此變得很壓迫、小家子(zǐ)氣。如(rú)果你的(de)一(yī)級功能像 instagram 一(yī)樣用戶會高(gāo)頻操作，建議還是選擇 tab 菜單的(de)形式。如(rú)果你的(de)應用隻是簡單的(de)單頁應用，其他的(de)隻是一(yī)些設置、反饋之類的(de)非常用功能，使用抽屜菜單應該不會有太大的(de)問題。
回到前面那位朋(péng)友的(de)問題，我将我對抽屜菜單的(de)理(lǐ)解告訴來他但并沒有給他答案。其實我也沒有答案，每一(yī)個app的(de)功能需求、訴求點都并不一(yī)樣，不能一(yī)概而論的(de)拍死，真正的(de)決定還是需要依靠他自(zì)己來判斷。
設計師其實是一(yī)個即感性又理(lǐ)性的(de)工作，我們既要考慮設計的(de)美感還要考慮設計對數據帶來的(de)影響。但不能否認在企業中，設計最核心的(de)目的(de)是服務于用戶和(hé)業務，如(rú)何平衡企業利益和(hé)用戶體驗是件很有講究的(de)事兒。
另外提一(yī)點，Google 正在大力推廣 Material Design（包括中國），希望能有更多的(de)應用加入到對 Material Design 的(de)支持中。如(rú)果你的(de)産品面向的(de)是海外市場，去(qù)适配 Material Design 應該可(kě)以幫你的(de)産品獲得更好的(de)排名甚至推薦的(de)機會。
