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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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