把一個(gè)漢堡圖標(biāo)作為整個(gè)網(wǎng)站設(shè)計(jì)中唯一的導(dǎo)航源是很糟糕的體驗(yàn)，它會(huì)令訪問(wèn)的用戶感到不方便、不直觀，并且違反了導(dǎo)航和用戶流程最佳實(shí)踐的不成文規(guī)則。你為什么要這么設(shè)計(jì)網(wǎng)站菜單呢？除了維持或建立某種美學(xué)，很難找到一個(gè)有意義的答案。

這個(gè)經(jīng)常被爭(zhēng)論的漢堡包圖標(biāo)對(duì)于網(wǎng)站設(shè)計(jì)中的導(dǎo)航甚至小屏幕來(lái)說(shuō)都是一個(gè)很好的補(bǔ)充，但它不應(yīng)該是臺(tái)式電腦的唯一選擇。如果這是你唯一的菜單選項(xiàng)，那么你是在為自己和網(wǎng)站設(shè)計(jì)做著極大的損害。

注意這篇文章中不同的桌面菜單樣式，漢堡圖標(biāo)的一些最佳用途與其他菜單項(xiàng)將會(huì)一起提供。

1、溝通錯(cuò)誤和誤解

導(dǎo)航菜單是你網(wǎng)站的門戶，它告訴訪問(wèn)者期望什么，如何互動(dòng)，以及網(wǎng)站是關(guān)于什么的。

漢堡圖標(biāo)的外觀千差萬(wàn)別，從線條數(shù)到顏色，大小，形狀或位置，都沒(méi)有足夠的直接建立的用戶模式來(lái)使它完全有效。

菜單項(xiàng)應(yīng)該包含網(wǎng)站上最重要信息的鏈接。在提供有價(jià)值的信息和過(guò)載之間有一條微妙的界限。堅(jiān)持使用4到6個(gè)菜單項(xiàng)，超過(guò)這個(gè)數(shù)量將會(huì)使空間擁擠，并且可能無(wú)法幫助用戶決定選擇哪個(gè)鏈接。

在菜單中鏈接的頁(yè)面被視為網(wǎng)站上最重要的內(nèi)容，沒(méi)有這些鏈接，頁(yè)面可能會(huì)感覺(jué)與用戶不那么相關(guān)。

另一方面，巨型菜單也會(huì)像沒(méi)有菜單一樣讓人困惑。

以下是導(dǎo)航菜單在桌面網(wǎng)站上對(duì)整體用戶體驗(yàn)的貢獻(xiàn)：

交流一個(gè)網(wǎng)站是關(guān)于什么的

提供對(duì)頂級(jí)內(nèi)容或產(chǎn)品的方便訪問(wèn)

為你希望用戶看到或參與的內(nèi)容提供方便的訪問(wèn)

提升邏輯上面使用了多層導(dǎo)航，其中包括一個(gè)漢堡圖標(biāo)以獲取信息。

2、你會(huì)錯(cuò)過(guò)有用的數(shù)據(jù)

當(dāng)用戶登陸你的網(wǎng)站時(shí)，你知道他們?cè)趯ふ沂裁磫?？他們接下?lái)想看什么信息？

跟蹤——使用點(diǎn)擊或熱圖——可以幫助你更好地了解用戶是如何在網(wǎng)站設(shè)計(jì)中使用菜單的。即使沒(méi)有點(diǎn)擊導(dǎo)航元素的用戶也可能會(huì)在決定下一步如何設(shè)計(jì)之前查看選項(xiàng)。

對(duì)于很多網(wǎng)站來(lái)說(shuō)，Contact和About頁(yè)面是整個(gè)網(wǎng)站中訪問(wèn)量最大的頁(yè)面。對(duì)于大多數(shù)設(shè)計(jì)來(lái)說(shuō)，這些頁(yè)面并不是通過(guò)號(hào)召行動(dòng)鏈接起來(lái)的。用戶從菜單導(dǎo)航到它們。你想錯(cuò)過(guò)那些點(diǎn)擊來(lái)自那些可能打電話，電子郵件，聯(lián)系，或訪問(wèn)你的業(yè)務(wù)的人嗎？

Aim Architecture（上圖）通過(guò)一個(gè)簡(jiǎn)單易用的頂部菜單直接發(fā)揮作用。

3、用戶失望

根據(jù)網(wǎng)站的類型，菜單選項(xiàng)是用戶所期望的，可能會(huì)導(dǎo)致嚴(yán)重的挫折，包括離開(kāi)網(wǎng)站。

這種挫折感在那些在網(wǎng)站上四處走動(dòng)的用戶身上表現(xiàn)得最為明顯，他們經(jīng)常會(huì)返回到主導(dǎo)航菜單，以返回特定的內(nèi)容、查找博客或特定信息，或者幫助搜索某些東西。

隱藏在漢堡圖標(biāo)中的菜單比那些公開(kāi)的菜單的整體參與度要低。這可能表明你很沮喪，或者根本找不到菜單。(根據(jù)你的目標(biāo)受眾的人口統(tǒng)計(jì)數(shù)據(jù)，他們可能甚至不知道如何或?yàn)槭裁词褂闷聊豁敳康倪@三行代碼。)

這種沮喪也得到了研究的支持，尼爾森諾曼集團(tuán)發(fā)現(xiàn)，漢堡圖標(biāo)使內(nèi)容發(fā)現(xiàn)量減少了一半，而且"任務(wù)時(shí)間更長(zhǎng)，任務(wù)難度增加。"

謝謝它，你知道下一步做什么與上述網(wǎng)站的例子？

4、錯(cuò)過(guò)了轉(zhuǎn)換的機(jī)會(huì)

如果沒(méi)有明確的用戶路徑，就會(huì)有很多機(jī)會(huì)錯(cuò)失和轉(zhuǎn)換。

電子商務(wù)網(wǎng)站是菜單重要的一個(gè)很好的例子；即方便訪問(wèn)購(gòu)物車或結(jié)帳按鈕。如果導(dǎo)航被隱藏，或者用戶無(wú)法快速直觀地訪問(wèn)這些鏈接，就會(huì)導(dǎo)致錯(cuò)過(guò)銷售。

保持購(gòu)物車可見(jiàn)是一個(gè)關(guān)鍵的策略，當(dāng)它涉及到減少放棄和從網(wǎng)上購(gòu)物者到網(wǎng)上買家。還有什么地方比桌面上總能看到的主菜單更好呢？(這在移動(dòng)設(shè)備上有點(diǎn)棘手。但大多數(shù)移動(dòng)用戶仍在進(jìn)行快速?zèng)_動(dòng)購(gòu)物，而臺(tái)式機(jī)用戶則在購(gòu)買更多商品，并在選項(xiàng)卡之間進(jìn)行比較。)

其他類型的網(wǎng)站也是如此，假設(shè)你是賣保險(xiǎn)的。有不同類型的代理人個(gè)人或商業(yè)保險(xiǎn)，家庭或汽車保險(xiǎn)，事件或責(zé)任。菜單可以幫助用戶確保他們?cè)谡_的位置，并找到為他們提供的信息。

5、額外的點(diǎn)擊是低效的

用戶是很懶的(這是真的，你可以承認(rèn)自己在訪問(wèn)網(wǎng)站的時(shí)候很懶)，如果你不得不點(diǎn)擊很多次才能到達(dá)某個(gè)地方，你很有可能會(huì)放棄。將菜單項(xiàng)放在圖標(biāo)后面，可以在涉及導(dǎo)航的任何用戶旅程中再單擊一次。

如果用戶只點(diǎn)擊三次就離開(kāi)了網(wǎng)站，你希望通過(guò)點(diǎn)擊來(lái)訪問(wèn)菜單嗎？

這聽(tīng)起來(lái)可能過(guò)于簡(jiǎn)單，但實(shí)際上就是那么簡(jiǎn)單。

CrISP(上圖)做了一些有趣的事情。導(dǎo)航開(kāi)始時(shí)沒(méi)有漢堡包，然后在滾動(dòng)條上折成一個(gè)漢堡包。

但是，漢堡包在手機(jī)上是可以的

但問(wèn)題是：對(duì)于移動(dòng)響應(yīng)版本，你可能想要那個(gè)漢堡圖標(biāo)。這本身并不是一個(gè)糟糕的設(shè)計(jì)選擇。

它高效且可在屏幕上節(jié)省空間。

移動(dòng)用戶更習(xí)慣它的工作方式。

可以輕松點(diǎn)擊此菜單樣式，而無(wú)需點(diǎn)擊無(wú)意按鈕。

關(guān)于漢堡包圖標(biāo)殺死搜索引擎優(yōu)化的神話已死。在將網(wǎng)站編入索引時(shí)，Google實(shí)際上在移動(dòng)設(shè)備方面排名第一，并將閱讀這些菜單。

結(jié)論

漢堡圖標(biāo)和菜單在網(wǎng)站設(shè)計(jì)中確實(shí)有一席之地，一般來(lái)說(shuō)，設(shè)計(jì)師已經(jīng)開(kāi)始接受它們，許多用戶也理解它們的用途和目的。

但這并不意味著在導(dǎo)航方面它們是萬(wàn)能的，雖然有些元素可以藏在菜單后面，但這可能不適用于某些網(wǎng)站、行業(yè)或用戶組，尤其是在桌面設(shè)備上。如果您打算在桌面上使用一個(gè)漢堡包圖標(biāo)，請(qǐng)考慮將其作為二級(jí)菜單或帶有標(biāo)簽，以確保用戶確切地知道這三行是用于什么目的。