拓展閱讀:
關(guān)于漢堡包圖標(biāo)的閑言碎語(yǔ)
如今，漢堡包圖標(biāo)已經(jīng)是很常見(jiàn)的移動(dòng)導(dǎo)航設(shè)計(jì)模式了；它的三道杠形式非常簡(jiǎn)單，包括迪士尼、星巴克、Facebook、Google等知名公司都在自己的移動(dòng)應(yīng)用及移動(dòng)版網(wǎng)站當(dāng)中使用了這一模式。
不過(guò)在UX設(shè)計(jì)圈子當(dāng)中，關(guān)于“漢堡包菜單圖標(biāo)屬于反直覺(jué)模式”的質(zhì)疑聲也此起彼伏。一些替代方式開(kāi)始出現(xiàn)，三道杠圖標(biāo)有逐漸被更符合直覺(jué)的設(shè)計(jì)方案所取代的趨勢(shì)。
本文中，我們將對(duì)漢堡包圖標(biāo)進(jìn)行簡(jiǎn)單的討論，看看UX圈子中的同行們對(duì)它有怎樣的看法，在使用時(shí)有哪些設(shè)計(jì)原則。
趨勢(shì)伊始
幾年前，漢堡包模式剛剛興起時(shí)，一些設(shè)計(jì)師做了相關(guān)研究，并發(fā)現(xiàn)這種模式可以在不破壞用戶(hù)體驗(yàn)的前提下有效提升轉(zhuǎn)化率。
他們認(rèn)為，漢堡包菜單圖標(biāo)的簡(jiǎn)單形式不會(huì)在用戶(hù)完成任務(wù)的流程當(dāng)中產(chǎn)生干擾；而且用戶(hù)在需要的時(shí)候仍可通過(guò)點(diǎn)擊該圖標(biāo)來(lái)訪(fǎng)問(wèn)菜單，進(jìn)而導(dǎo)航到其他界面。那些在平時(shí)過(guò)于搶眼的導(dǎo)航元素被隱藏在漢堡包菜單當(dāng)中，使用戶(hù)在真正需要的時(shí)候才會(huì)打開(kāi)，交互行為的情境感更強(qiáng)。
Linda Bustos曾經(jīng)在她的文章“避免這些移動(dòng)菜單設(shè)計(jì)上的錯(cuò)誤”當(dāng)中分析了漢堡包菜單的潛在問(wèn)題。她并沒(méi)否認(rèn)該模式作為導(dǎo)航菜單的優(yōu)點(diǎn)，不過(guò)她堅(jiān)持認(rèn)為在使用這種模式之前一定要考慮得當(dāng)，關(guān)鍵在于怎樣使用。
為了支持這個(gè)想法，Linda列舉了一些移動(dòng)應(yīng)用的設(shè)計(jì)案例，進(jìn)行比對(duì)后給出了一些設(shè)計(jì)原則：
正確的做法
-
嘗試在初次使用時(shí)為漢堡包圖標(biāo)提供視覺(jué)指引，讓用戶(hù)明確的知道在哪里進(jìn)行導(dǎo)航。
-
如果附近還有其他交互元素，那么要確定一個(gè)合理且統(tǒng)一的布局順序。例如將漢堡包菜單圖標(biāo)放在頂部最左側(cè)，其他元素例如搜索或購(gòu)物車(chē)等排列在右側(cè)。
-
如果空間允許，可以嘗試在圖標(biāo)旁邊直接標(biāo)注“菜單”標(biāo)題，使表意更清晰，更容易識(shí)別。
錯(cuò)誤的做法
-
在布局上，將漢堡包菜單圖標(biāo)放的與logo過(guò)近，以至于讓人誤以為它是logo的一部分。
-
漢堡包菜單圖標(biāo)周?chē)牧舭卓臻g過(guò)多。
與此同時(shí)，越來(lái)越多的大公司，例如迪士尼、星巴克、Facebook、Google等等都開(kāi)始逐漸在自己的應(yīng)用和網(wǎng)站當(dāng)中采用漢堡包菜單的設(shè)計(jì)模式。
幾個(gè)月前，Morten Rand在他的文章中說(shuō)了一些不好聽(tīng)的，在他看來(lái)，漢堡包菜單圖標(biāo)的樣式本是在邏輯和數(shù)學(xué)當(dāng)中用來(lái)表示“絕對(duì)相等”的；從效果上來(lái)說(shuō)，這個(gè)圖標(biāo)更加適用于表示某種內(nèi)容列表，而不是導(dǎo)航菜單的概念。
在我個(gè)人看來(lái)，他所講的是有道理的。漢堡包菜單圖標(biāo)本身看上去并不像“菜單”；除非用戶(hù)已經(jīng)明確的知道這個(gè)圖標(biāo)就是用來(lái)展開(kāi)菜單的，否則他們很難了解這兩者之間的關(guān)系。在漢堡包菜單的潮流開(kāi)始之后，我們作為設(shè)計(jì)師開(kāi)始越來(lái)越多的采用這種模式，并認(rèn)為它是符合常識(shí)和直覺(jué)的，實(shí)際上這只是我們自己的經(jīng)驗(yàn)而已。而實(shí)際的認(rèn)知效果則更多的取決于產(chǎn)品的用戶(hù)群體，以及他們是否得到了足夠明顯的指引去了解這個(gè)圖標(biāo)的用途。
Morten的話(huà)切中了要害，他認(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)航菜單本身的位置。
-
試著使用“畫(huà)布外菜單”，并通過(guò)帶有箭頭的tab來(lái)暗示操作方式。
新近的研究
2014年初，Luke Wroblewski推薦了一篇研究文章“移動(dòng)菜單AB測(cè)試：漢堡包不是最佳選擇？”，這篇文章帶來(lái)了3點(diǎn)研究結(jié)論：
-
35歲以上的用戶(hù)似乎不理解漢堡包菜單圖標(biāo)的含義。
-
用戶(hù)群體的人口結(jié)構(gòu)對(duì)測(cè)試結(jié)果的影響很大。
-
推薦在三道杠圖標(biāo)旁邊直接加注“菜單”一詞，明示含義。
這篇文章同時(shí)指出，漢堡包菜單及其圖標(biāo)的設(shè)計(jì)模式不適用于所有產(chǎn)品。Jeffrey Zeldman也在他的Twitter中支持這一觀(guān)點(diǎn)：
針對(duì)特定產(chǎn)品的設(shè)計(jì)決策要高于約定俗成的設(shè)計(jì)模式。要進(jìn)行測(cè)試，并根據(jù)結(jié)果選擇最恰當(dāng)?shù)姆桨?；不要盲目采用漢堡包一類(lèi)的模式。
結(jié)論
綜合各方面的看法，我們可以認(rèn)為，漢堡包圖標(biāo)并非在所有情況下都適用；測(cè)試是關(guān)鍵?？捎眯詼y(cè)試或AB測(cè)試可以幫助你更有效的了解它是否適用于你家的產(chǎn)品。
一種設(shè)計(jì)模式的普及，一種設(shè)計(jì)約定的形成，在很多時(shí)候可能只
