關(guān)于漢堡包圖標(biāo)的閑言碎語(yǔ)

如今，漢堡包圖標(biāo)已經(jīng)是很常見的移動(dòng)導(dǎo)航設(shè)計(jì)模式了；它的三道杠形式非常簡(jiǎn)單，包括迪士尼、星巴克、Facebook、Google等知名公司都在自己的移動(dòng)應(yīng)用及移動(dòng)版網(wǎng)站當(dāng)中使用了這一模式。

不過在UX設(shè)計(jì)圈子當(dāng)中，關(guān)于“漢堡包菜單圖標(biāo)屬于反直覺模式”的質(zhì)疑聲也此起彼伏。一些替代方式開始出現(xiàn)，三道杠圖標(biāo)有逐漸被更符合直覺的設(shè)計(jì)方案所取代的趨勢(shì)。

本文中，我們將對(duì)漢堡包圖標(biāo)進(jìn)行簡(jiǎn)單的討論，看看UX圈子中的同行們對(duì)它有怎樣的看法，在使用時(shí)有哪些設(shè)計(jì)原則。

趨勢(shì)伊始

幾年前，漢堡包模式剛剛興起時(shí)，一些設(shè)計(jì)師做了相關(guān)研究，并發(fā)現(xiàn)這種模式可以在不破壞用戶體驗(yàn)的前提下有效提升轉(zhuǎn)化率。

他們認(rèn)為，漢堡包菜單圖標(biāo)的簡(jiǎn)單形式不會(huì)在用戶完成任務(wù)的流程當(dāng)中產(chǎn)生干擾；而且用戶在需要的時(shí)候仍可通過點(diǎn)擊該圖標(biāo)來(lái)訪問菜單，進(jìn)而導(dǎo)航到其他界面。那些在平時(shí)過于搶眼的導(dǎo)航元素被隱藏在漢堡包菜單當(dāng)中，使用戶在真正需要的時(shí)候才會(huì)打開，交互行為的情境感更強(qiáng)。

Linda Bustos曾經(jīng)在她的文章“避免這些移動(dòng)菜單設(shè)計(jì)上的錯(cuò)誤”當(dāng)中分析了漢堡包菜單的潛在問題。她并沒否認(rèn)該模式作為導(dǎo)航菜單的優(yōu)點(diǎn)，不過她堅(jiān)持認(rèn)為在使用這種模式之前一定要考慮得當(dāng)，關(guān)鍵在于怎樣使用。

為了支持這個(gè)想法，Linda列舉了一些移動(dòng)應(yīng)用的設(shè)計(jì)案例，進(jìn)行比對(duì)后給出了一些設(shè)計(jì)原則：

正確的做法

• 嘗試在初次使用時(shí)為漢堡包圖標(biāo)提供視覺指引，讓用戶明確的知道在哪里進(jìn)行導(dǎo)航。

• 如果附近還有其他交互元素，那么要確定一個(gè)合理且統(tǒng)一的布局順序。例如將漢堡包菜單圖標(biāo)放在頂部最左側(cè)，其他元素例如搜索或購(gòu)物車等排列在右側(cè)。

• 如果空間允許，可以嘗試在圖標(biāo)旁邊直接標(biāo)注“菜單”標(biāo)題，使表意更清晰，更容易識(shí)別。

錯(cuò)誤的做法

• 在布局上，將漢堡包菜單圖標(biāo)放的與logo過近，以至于讓人誤以為它是logo的一部分。

• 漢堡包菜單圖標(biāo)周圍的留白空間過多。

與此同時(shí)，越來(lái)越多的大公司，例如迪士尼、星巴克、Facebook、Google等等都開始逐漸在自己的應(yīng)用和網(wǎng)站當(dāng)中采用漢堡包菜單的設(shè)計(jì)模式。

幾個(gè)月前，Morten Rand在他的文章中說了一些不好聽的，在他看來(lái)，漢堡包菜單圖標(biāo)的樣式本是在邏輯和數(shù)學(xué)當(dāng)中用來(lái)表示“絕對(duì)相等”的；從效果上來(lái)說，這個(gè)圖標(biāo)更加適用于表示某種內(nèi)容列表，而不是導(dǎo)航菜單的概念。

在我個(gè)人看來(lái)，他所講的是有道理的。漢堡包菜單圖標(biāo)本身看上去并不像“菜單”；除非用戶已經(jīng)明確的知道這個(gè)圖標(biāo)就是用來(lái)展開菜單的，否則他們很難了解這兩者之間的關(guān)系。在漢堡包菜單的潮流開始之后，我們作為設(shè)計(jì)師開始越來(lái)越多的采用這種模式，并認(rèn)為它是符合常識(shí)和直覺的，實(shí)際上這只是我們自己的經(jīng)驗(yàn)而已。而實(shí)際的認(rèn)知效果則更多的取決于產(chǎn)品的用戶群體，以及他們是否得到了足夠明顯的指引去了解這個(gè)圖標(biāo)的用途。

Morten的話切中了要害，他認(rèn)為這個(gè)圖標(biāo)本身是反模式的，它不該與導(dǎo)航菜單建立起關(guān)聯(lián)，因?yàn)樗臉邮綗o(wú)法代表導(dǎo)航菜單，它只是三道杠，僅此而已。

根據(jù)Morten的建議：

• 試著直接使用“菜單”一詞代替三道杠圖標(biāo)。

• 試著使用箭頭或其他能夠表達(dá)出內(nèi)容元素增減的圖標(biāo)來(lái)代替。

• 重新考慮導(dǎo)航菜單本身的位置。

• 試著使用“畫布外菜單”，并通過帶有箭頭的tab來(lái)暗示操作方式。

新近的研究

2014年初，Luke Wroblewski推薦了一篇研究文章“移動(dòng)菜單AB測(cè)試：漢堡包不是最佳選擇？”，這篇文章帶來(lái)了3點(diǎn)研究結(jié)論：

1. 35歲以上的用戶似乎不理解漢堡包菜單圖標(biāo)的含義。

2. 用戶群體的人口結(jié)構(gòu)對(duì)測(cè)試結(jié)果的影響很大。

3. 推薦在三道杠圖標(biāo)旁邊直接加注“菜單”一詞，明示含義。

這篇文章同時(shí)指出，漢堡包菜單及其圖標(biāo)的設(shè)計(jì)模式不適用于所有產(chǎn)品。Jeffrey Zeldman也在他的Twitter中支持這一觀點(diǎn)：

針對(duì)特定產(chǎn)品的設(shè)計(jì)決策要高于約定俗成的設(shè)計(jì)模式。要進(jìn)行測(cè)試，并根據(jù)結(jié)果選擇最恰當(dāng)?shù)姆桨?；不要盲目采用漢堡包一類的模式。

結(jié)論

綜合各方面的看法，我們可以認(rèn)為，漢堡包圖標(biāo)并非在所有情況下都適用；測(cè)試是關(guān)鍵?？捎眯詼y(cè)試或AB測(cè)試可以幫助你更有效的了解它是否適用于你家的產(chǎn)品。

一種設(shè)計(jì)模式的普及，一種設(shè)計(jì)約定的形成，在很多時(shí)候可能只