我們曾經(jīng)提到過，漢堡菜單將成為移動端設(shè)計的主流模式——然而根據(jù)數(shù)據(jù)研究表明，漢堡菜單的弊大于利

漢堡菜單到底好還是壞？這個話題非常微妙。

我將盡量在本文中保持客觀的態(tài)度，向各位展示漢堡菜單的問題所在，解決問題的方案，至于如何對待這種設(shè)計模式，我相信仁者見仁，智者見智。

一、問題所在

1. 難于發(fā)現(xiàn)
2. 效率低下
3. 在某些平臺下，和平臺固有的導(dǎo)航設(shè)計模式有所沖突
4. 無法一瞥既得

1.難于發(fā)現(xiàn)

“如果看不到，那么自然便想不到”

在默認(rèn)狀態(tài)下，側(cè)邊菜單（漢堡菜單）的內(nèi)容是隱藏的

傳統(tǒng)的經(jīng)驗(yàn)是：最重要、最常使用的功能放置在首屏。然而漢堡菜單打破了這一慣例。用戶首先要去了解漢堡菜單是可以激活/關(guān)閉的——盡管漢堡菜單現(xiàn)在極為流行，但是很多應(yīng)用都會在用戶初次使用時提示用戶，否則一些新手用戶很可能無法在主屏上找到主要功能。

2.效率低下

當(dāng)用戶知道在側(cè)邊可以開啟導(dǎo)航菜單后，新的問題出現(xiàn)了：這種設(shè)計模式會強(qiáng)迫，逼迫用戶打開應(yīng)用之后立馬開啟側(cè)邊菜單，否則無法進(jìn)行操作。

相對于下面?zhèn)鹘y(tǒng)的標(biāo)簽欄導(dǎo)航設(shè)計，我們可以看到，傳統(tǒng)的設(shè)計模式，所有功能/元素直接陳列在主屏幕中，用戶打開應(yīng)用后可以立即操作。

3.和平臺固有的導(dǎo)航模式有所沖突

在iOS平臺下，問題尤為突出，和iOS標(biāo)準(zhǔn)的導(dǎo)航設(shè)計模式有所沖突，iOS中，一般左上角是返回。而漢堡菜單的開啟圖標(biāo)，一般也位于右上角。

如果設(shè)計師執(zhí)意要采用漢堡菜單這種導(dǎo)航設(shè)計模式，那么在一些層級豐富的應(yīng)用設(shè)計中，麻煩便凸顯:既然左上角用來放置漢堡圖標(biāo)，那么便和返回按鈕沖突了。有時候便需要滑動手勢來進(jìn)行層級切換——然而，這種操作模式并不直觀。

4.無法一瞥既得

現(xiàn)在的主流設(shè)計觀念是：盡量讓用戶直接與信息進(jìn)行交互。然而漢堡菜單所代表的導(dǎo)航模式，信息無法一瞥既得，用戶需要打開側(cè)拉菜單，才能發(fā)現(xiàn)信息。

上圖是Jawbone UP的應(yīng)用:摒棄了底部標(biāo)簽欄導(dǎo)航模式，將通知放在右上角，和漢堡圖標(biāo)遙相對應(yīng)。

這種簡化好么？不見得，雖然視覺簡化了，但是功能沒有簡化多少，換言之。設(shè)計者簡化了視覺，卻提高了應(yīng)用的理解難度（以及操作復(fù)雜度）——好看的未必適用。

相反，看看Twitter的標(biāo)簽欄導(dǎo)航，一瞥既得，減少了用戶的理解難度，同時讓用戶可以直接導(dǎo)航。

5.認(rèn)知問題

當(dāng)提到側(cè)拉菜單和漢堡圖標(biāo)的時候，有一個理論被支持者反復(fù)提及：可以節(jié)省屏幕空間，提高閱讀區(qū)域，進(jìn)而提高可讀性。

但是又何必為了節(jié)省屏幕空間而違背一些最基本的人機(jī)交互定則？應(yīng)用需要有焦點(diǎn)區(qū)域，應(yīng)用需要有明確的導(dǎo)航，讓用戶知道自己身處層級的何處。

注意：或許是時候去重新理解人機(jī)交互理念了，這樣才能避免華而不實(shí)的設(shè)計錯誤出現(xiàn)。

二、解決之道

盡管有很多論述指出了漢堡圖標(biāo)的問題所在，但是并沒有人提出解決方案。

1.首先要思考的是，這種設(shè)計模式在何種情況下有效？

我個人認(rèn)為，漢堡菜單設(shè)計模式不太實(shí)用，僅僅在個別案例中有效。

IRCCloud便是一個優(yōu)異的案例，它證明了漢堡菜單導(dǎo)航模式的價值所在——輔助用戶進(jìn)行頻道切換（左）和展示頻道成員（右）。

在這個案例中，漢堡菜單是可行的，因?yàn)橹鹘缑鏇]有子界面，沒有層級上的堆疊。（當(dāng)層級比較復(fù)雜時，便需要考慮一下是否要摒棄漢堡菜單了)

雖然這個案例很棒，但是很明顯，這款應(yīng)用的界面有些臃腫，信息過載，信息架構(gòu)需要重新設(shè)計一下了。

右側(cè)的側(cè)拉菜單展示了頻道成員，左側(cè)的側(cè)拉展示了頻道列表。用戶可以選擇切換頻道，選擇用戶。但是沒有太多地方去展示行為控件——因此設(shè)計者將操作按鈕放在了左下角。整體看起來非常的冗雜。

2.那該采用怎樣的導(dǎo)航模式？

側(cè)邊菜單會導(dǎo)致糟糕的信息架構(gòu)，尤其是在層級復(fù)雜的應(yīng)用設(shè)計中。

解決方案是重新審視信息架構(gòu)

上圖便是改動方案，左圖中的彩色小點(diǎn)轉(zhuǎn)換為右圖中標(biāo)簽欄中的標(biāo)簽。

謹(jǐn)記:

1.要在標(biāo)簽欄中清晰的展示用戶所處的功能界面。
2.要保證所有功能元素的可見性和可達(dá)性。
3.不要有導(dǎo)航手勢的沖突。

解決了側(cè)邊菜單所導(dǎo)致的交互問題之后，其實(shí)用標(biāo)簽欄導(dǎo)航同樣可以節(jié)省屏幕空間：根據(jù)滾動方向來選擇是否隱藏導(dǎo)航欄——請看Facebook應(yīng)用和Safari。固定的標(biāo)簽欄能夠清晰的暗示用戶當(dāng)前所處的位置。

[忍不住多說幾句]網(wǎng)站不要無腦抄襲iOS的導(dǎo)航模式，對于某些重形網(wǎng)站來說，重新審視一遍信息架構(gòu)，再進(jìn)行移動端設(shè)計，比完全照搬iOS導(dǎo)航模式的效果要好得多。

3.如何擴(kuò)展標(biāo)簽欄導(dǎo)航模式

下圖所給的案例全部基于iOS，可以解決標(biāo)簽欄擴(kuò)容問題。

某些情況下，應(yīng)用的功能點(diǎn)超過了5個（標(biāo)簽欄大致可以容納5個標(biāo)簽），可是如果需要擴(kuò)展怎么辦？目前主流的標(biāo)簽欄導(dǎo)航模式中，都采用下圖這種辦法，提供了一個“更多”圖標(biāo)，點(diǎn)擊后會進(jìn)入另外一個界面，這種效果并不理想，因?yàn)楦鷤?cè)拉菜單一樣——功能被隱藏了。如果要擴(kuò)展的內(nèi)容超多，可以考慮使用這種方法。

另外一種方法可以參考Rookie，可以滑動標(biāo)簽欄。但是也有缺點(diǎn)，容錯率較低，點(diǎn)擊手勢和滾動手勢可能會沖突，可能會出現(xiàn)誤操作。

還有一點(diǎn)，值得一提，那邊是第二種方法，更適合交互操作的選擇，導(dǎo)航功能上稍微弱一點(diǎn)。

三、結(jié)論

希望本文能夠明晰您對于側(cè)拉菜單和標(biāo)簽欄導(dǎo)航的認(rèn)識，能夠區(qū)分彼此的利弊，在設(shè)計中合理利用設(shè)計模式，向用戶展現(xiàn)清晰的信息架構(gòu)。

source:UI中國