網(wǎng)頁(yè)設計中漢堡式菜單的利與弊發(fā)布者：本站     時(shí)間：2022-03-18 10:03:49

現在很多時(shí)候，你可能都會(huì )在移動(dòng)界面的右上角看到“漢堡式菜單”，它們通常是三行堆積在一起，形狀類(lèi)似于一個(gè)漢堡，因為占用空間少，所以常被作為一個(gè)網(wǎng)站設計功能納入網(wǎng)站菜單。

雖然漢堡式菜單在提供簡(jiǎn)練的信息和簡(jiǎn)約設計上有著(zhù)巨大的優(yōu)勢，而且能使網(wǎng)站本身看起來(lái)十分簡(jiǎn)潔，但是也存在著(zhù)巨大的缺點(diǎn)。

網(wǎng)頁(yè)設計中漢堡式菜單的利與弊

無(wú)論你怎么稱(chēng)呼它，側邊欄，抽屜式導航還是漢堡式菜單，隨著(zhù)時(shí)間的推移，總會(huì )有一個(gè)新的事物來(lái)代替它來(lái)提高用戶(hù)參與度。許多人在網(wǎng)頁(yè)設計中的漢堡式菜單上抱有爭議，以“眼不見(jiàn)，心不煩”這種思路來(lái)設計會(huì )降低用戶(hù)的參與度和網(wǎng)站的功能性。并且會(huì )降低轉化率。

使用目標菜單來(lái)保護寶貴的界面空間的設計思維像野火一樣蔓延了整個(gè)網(wǎng)頁(yè)設計界，漢堡式菜單這種設計方法幾乎在全線(xiàn)每一個(gè)網(wǎng)站都迅速被采用?，F在改變這種方式可能為時(shí)已晚，但是討論漢堡式菜單的利與弊仍然具有價(jià)值，因為用戶(hù)的需求發(fā)生了改變。

漢堡式菜單缺乏效率
一個(gè)漢堡式菜單最基本的缺陷就是位于移動(dòng)應用上突出的位置 – 左上角。對于習慣用右手操作的用戶(hù)而言，這個(gè)位置顯然并不完美，并且不適合訂閱。

在用戶(hù)能看到他們選擇的內容之前，他們必須輕點(diǎn)菜單，當確定這是要找的正確信息時(shí)，還得再點(diǎn)擊一次。如果想要回到菜單導航，他們還必須在多屏幕中進(jìn)行多次點(diǎn)擊，選擇“是”或者“返回”等多次操作才能退回。單次看起來(lái)這可能不會(huì )有什么，但這使一個(gè)用戶(hù)找到正確界面的時(shí)間成本大大的增加了，用戶(hù)對這種操作越熟悉越覺(jué)得不妥，于是越來(lái)越多的用戶(hù)會(huì )抱怨這個(gè)模式。

在當今這個(gè)競爭異常激烈的市場(chǎng)，是什么讓你的網(wǎng)站脫穎而？是用戶(hù)，所以你所有的出發(fā)點(diǎn)和圍繞中心都必須是用戶(hù)。當你用漢堡式菜單簡(jiǎn)練的概括了你網(wǎng)站的所有功能或者內容的時(shí)候，你就必須了解，可能存在這樣的風(fēng)險，你的用戶(hù)將不會(huì )看到你的品牌到底哪里與眾不同。這傷害了整體品牌的知名度和轉換率，對于推廣你的產(chǎn)品也毫無(wú)益處。

網(wǎng)頁(yè)設計中漢堡式菜單的利與弊

用戶(hù)可能偏向“熱狗式”菜單
雖然設計師們很快完成了漢堡式菜單設計的革命，這種設計清新，美觀(guān)并且十分簡(jiǎn)約大方，但是他們忽視了一個(gè)重要的因素——用戶(hù)需求。很多用戶(hù)并不知道這種菜單提供了什么，或者不愿意去點(diǎn)擊它。他們依然面無(wú)目的的在你的網(wǎng)站中搜索著(zhù)他們需要的信息，當時(shí)這是徒勞的。

與此同時(shí)，還有這樣一批網(wǎng)站，它們將用戶(hù)尋求的信息設置在用戶(hù)一眼就能看到的地方，用戶(hù)不必一個(gè)個(gè)的翻找隱藏的選項，而且不用擔心自己會(huì )漏掉信息。許多網(wǎng)站都選擇了概括式途徑和恢復上一級菜單的設計方式（比如將其水平排列在頂部菜單），并且看起來(lái)效果很不錯。

漢堡式菜單的簡(jiǎn)練使文本信息不易被發(fā)覺(jué)，而現在的情況是，一個(gè)普通用戶(hù)如果查看頁(yè)面十秒鐘不能發(fā)現或者理解他想要的信息，他會(huì )馬上離開(kāi)，漢堡式菜單要求用戶(hù)有快速的發(fā)現能力，但這點(diǎn)很難實(shí)現。雖然漢堡式菜單相當吸引人，但卻忽視了用戶(hù)的實(shí)際水平。

用戶(hù)通常很難理解一個(gè)漢堡包的菜單，而傳統的菜單不能不立即被理解 。于是很多人會(huì )產(chǎn)生抱怨，網(wǎng)站試圖通過(guò)改變菜單包括后退按鈕或其他選項，如在漢堡式菜單圖標的旁邊添加文字，使之更加人性化，以減輕用戶(hù)的不滿(mǎn)。

網(wǎng)頁(yè)設計中漢堡式菜單的利與弊

但是許多改變只會(huì )使用戶(hù)對于菜單欄更加困惑，現在許多漢堡式菜單樣式和用戶(hù)在使用菜單之前，都必須先搞清楚那些選項可以使用才能使用正確的導航功能。你應該多想想其他選擇，而不僅僅只是假設漢堡式菜單包含和作用于所有網(wǎng)址導航。

如何打破禁錮
在許多情況下，你可以?xún)?yōu)化漢堡式菜單使其具有更高的可用性，或將其替換成別的導航選項。但是有時(shí)，你只需將漢堡式菜單移動(dòng)到屏幕的右側，就足以使你的網(wǎng)站看起來(lái)獨特并提高用戶(hù)的參與，因為右側更容易挖掘習慣右手的用戶(hù)。

同樣，你可以?xún)?yōu)化菜單的點(diǎn)擊方式。在頂部菜單中，用戶(hù)通常都會(huì )將他們的注意力集中在第一個(gè)和最后一個(gè)元素，這兩個(gè)地方同樣是你放置重要信息的地方。如果你將菜單設置在側邊欄中，你需要從高到低排列不同重要程度的信息，以符合用戶(hù)垂直掃描的視圖習慣。

你同樣可以恢復到漢堡式菜單最初的模式，創(chuàng )造一個(gè)經(jīng)典的用戶(hù)友好的頂部菜單，比如下面這個(gè)例子：

網(wǎng)頁(yè)設計中漢堡式菜單的利與弊

GameStop使用動(dòng)畫(huà)圖標，以提高可用性，同時(shí)也完全避免了漢堡式菜單。他們已經(jīng)優(yōu)先調查了用戶(hù)最需要從他們的應用程序中獲得什么，在其頂部菜單中只包括這些。這樣在不需要一個(gè)抽屜式的菜單隱藏信息的情況下，該網(wǎng)站仍然達到一個(gè)干凈，清新的外觀(guān)。

網(wǎng)頁(yè)設計中漢堡式菜單的利與弊

這些圖標和文本結構會(huì )使你一眼就注意到文本內容，但是又同時(shí)保證不會(huì )搶了下方界面內容的風(fēng)頭。但是事實(shí)上你并不能時(shí)時(shí)刻刻根據下文內容來(lái)調節圖標及文字的大小，這個(gè)時(shí)候，我們建議你使用純文本的菜單或者網(wǎng)站，這樣菜單就不需要了。無(wú)論哪種方法，首先考慮用戶(hù)，根據用戶(hù)特性進(jìn)行設計。

對于那些希望能減少浪費時(shí)間的用戶(hù)來(lái)講，你的菜單應該是一目了然的，同時(shí)也必須是易理解的。實(shí)現這點(diǎn)功能，你需要在其他地方妥協(xié)很多。如果你想要最大程度上調動(dòng)用戶(hù)的參與性，簡(jiǎn)單和易解這兩點(diǎn)是必需達到的。當你困擾與菜單選項的優(yōu)先次序時(shí)，記住把自己當作用戶(hù)，從用戶(hù)的角度出發(fā)。舉個(gè)例子，你的文筆可能很好，很會(huì )寫(xiě)生活感悟，但是用戶(hù)到你的網(wǎng)站來(lái)想看的是你的產(chǎn)品，那么文筆再好也是次要的，只能為了突出產(chǎn)品做陪襯。

跟著(zhù)你的直覺(jué)走
如果你在作品中已經(jīng)采用了漢堡式菜單或者它的一些變形，別急著(zhù)馬上用其他設計模式改變替代它，仍然有許多用戶(hù)傾心于漢堡式菜單的易用性和獨特魅力。特別是當開(kāi)發(fā)一個(gè)移動(dòng)應用時(shí)，在有限的空間中，漢堡式菜單就相當實(shí)用了。

盡管漢堡式菜單目前飽受爭議，但是如果你的網(wǎng)頁(yè)特別適合采用漢堡式菜單，那就繼續使用，只要保證你菜單中的所有部件都達到標準，能達到最佳的用戶(hù)參與度。但是如果你僅僅是出于懶惰就直接選擇了漢堡式菜單，那我認為你該重新思考一下自己的選擇了。