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