虎嗅注：本文來自Medium，原文標(biāo)題為《Who moved my hamburger?》，作者Anas KA。虎嗅翻譯。

文 /實(shí)習(xí)生 郭旭東

這年頭，如果你連“≡”（又稱漢堡包菜單、抽屜式菜單）都沒討論過，那你根本不是個(gè)合格的用戶體驗(yàn)設(shè)計(jì)師。

譯注：所謂漢堡包菜單，即側(cè)邊抽屜式菜單，通過點(diǎn)擊應(yīng)用左上角或右上角的“≡”按鈕，可以查看隱藏的功能列表。比如，虎嗅手機(jī)端App中就運(yùn)用了這種設(shè)計(jì)。

最近Google更新了他們的Youtube安卓客戶端，這讓我情不自禁地想寫一寫我對(duì)漢堡包菜單及時(shí)下流行的UI設(shè)計(jì)趨勢(shì)的看法。

“≡”被稱為漢堡包菜單是因?yàn)樗L(zhǎng)得和漢堡包很像，頂部和底部的線條就像圓面包，而中間夾著的線條則像漢堡包內(nèi)的填充物——維基百科

Google開始轉(zhuǎn)向標(biāo)簽式設(shè)計(jì)了？

Google+和YouTube的安卓版App分別采用了下拉式菜單和標(biāo)簽式菜單

Google+和YouTube最初都采用漢堡包菜單。2014年5月，Google+用下拉式菜單取代了漢堡包式。而本月，Youtube最新版本中則采用了標(biāo)簽式菜單。

他們從漢堡包陣營(yíng)叛變了！

讓我們看看還有哪些應(yīng)用拋棄了早期使用的漢堡包菜單而改用其他導(dǎo)航設(shè)計(jì)吧。

Facebook

Facebook的安卓和iOS客戶端

Facebook還在使用漢堡包菜單，不過它的名字被改成了“More"，它被放在應(yīng)用的右上角（安卓版）或右下角（iOS版）。然而，事實(shí)上無(wú)論在安卓還是iOS系統(tǒng)上，F(xiàn)acebook都已經(jīng)全面采用了標(biāo)簽欄，區(qū)別僅僅在于安卓版把標(biāo)簽放在頂上，iOS版把標(biāo)簽放在下面。

Twitter

Twitter的安卓和iOS客戶端

安卓版Twitter的“提醒”、“來信”圖標(biāo)在iOS版里都被以底部標(biāo)簽欄的形式呈現(xiàn)，而安卓則將這一系列圖標(biāo)放在頂端右側(cè)。“主頁(yè)”、“發(fā)現(xiàn)”這兩個(gè)按鈕在安卓版被放到信息流頂部，在iOS版中則通過分頁(yè)形式呈現(xiàn)。

Flipboard

Flipboard的安卓和iOS客戶端

這是安卓版Flipboard中的“標(biāo)簽選項(xiàng)卡”。你發(fā)現(xiàn)iOS版頂部的“Following”字樣了嗎？沒錯(cuò)，安卓版中那個(gè)圖標(biāo)表示的就是“Following”功能。

Airbnb

Airbnb的安卓和iOS客戶端

安卓版的功能鍵主要被分為兩組，一組是功能鍵，以左對(duì)齊的方式置于左側(cè)，右側(cè)為個(gè)人賬戶信息。而iOS卻沒有進(jìn)行分組，各功能鍵被均勻地放置到底部。

9GAG

9GAG的安卓和iOS客戶端

這很有意思！這是我頭一次見到安卓App的標(biāo)簽欄竟然完全符合iOS的標(biāo)準(zhǔn)！這款A(yù)pp的右下角也出現(xiàn)了和Facebook相似的漢堡包“More”圖標(biāo)。

主頁(yè)上的“返回”鍵！

LinkedIn安卓版主頁(yè)左側(cè)有一個(gè)“返回”鍵。它替代了漢堡包圖標(biāo)，成為打開抽屜菜單（右側(cè)）的入口

由于各種未知原因，LinkedIn安卓版App輕描淡寫地用一個(gè)“返回”鍵取代了漢堡包圖標(biāo)。

對(duì)用戶來說，這種做法很討巧。我能感受到這種改進(jìn)確實(shí)能讓用戶查看到更多的內(nèi)容，因?yàn)樗麄円偪竦匕?ldquo;返回”鍵掠過無(wú)數(shù)頁(yè)面才能回到主頁(yè)。

正確的永遠(yuǎn)正確！

大多數(shù)App都把漢堡包圖標(biāo)擱在左上角。這其實(shí)很不方便，尤其當(dāng)你正訪問菜單很深處的時(shí)候。因?yàn)檫@時(shí)你總會(huì)看到左上角有個(gè)“返回”圖標(biāo)，而不是漢堡包圖標(biāo)，所以你沒辦法一下子回到首頁(yè)。

這該如何解決呢？

Reverb News

Reverb News的iPad版本把“主頁(yè)”圖標(biāo)放在了左上角，而它右邊緊挨著就是“返回”圖標(biāo)

Reverb News的iPad版本把“主頁(yè)”圖標(biāo)放在了左上角。如果你正在訪問菜單，“返回”鍵就會(huì)出現(xiàn)在緊挨著“主頁(yè)”圖標(biāo)的地方。這種設(shè)計(jì)在手機(jī)端很實(shí)用，因?yàn)橛脩舸蠖鄶?shù)時(shí)候其實(shí)不想一個(gè)勁兒按“返回”，而更想直接回到首頁(yè)。

Jamie Oliver’s Recipes

Jamie Oliver’s Recipes把漢堡包圖標(biāo)放在了右上角

設(shè)計(jì)者還可以把漢堡包圖標(biāo)放到右上角，這樣我們就能在一個(gè)屏幕里同時(shí)看到“返回”鍵和漢堡包圖標(biāo)。iOS版的Jamie Oliver’s Recipes和Epicurious就是這么做的。

Epicurious

Epicurious也把漢堡包圖標(biāo)放到了右上

有意思的是，Jamie Oliver’s Recipes和Epicurious都是教你做菜的應(yīng)用。

用還是不用，這是個(gè)問題！

漢堡包菜單為內(nèi)容預(yù)留出了更多的空間。如果用標(biāo)簽式菜單來取代漢堡包菜單，那可能會(huì)大大侵占內(nèi)容的顯示區(qū)域。再者，如果你標(biāo)簽欄標(biāo)簽太多，你終究還要加上一個(gè)長(zhǎng)得很像漢堡包的“More”圖標(biāo)。

最好的辦法，是將標(biāo)簽式菜單和漢堡包菜單（“More”圖標(biāo)）相結(jié)合，并把漢堡包圖標(biāo)放到應(yīng)用的右上角。

這能讓用戶知道，他們?cè)谀膫€(gè)位置，能去哪個(gè)位置，并通過“More”發(fā)現(xiàn)更多功能。

你對(duì)這篇文章中關(guān)于漢堡包菜單的看法有何見教？你在接下來設(shè)計(jì)的App中會(huì)使用到它嗎？說說你的看法吧。