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