網站設計中的漢堡菜單

任何使用互聯網的人都可能在互聯網上看到過數十個漢堡菜單示例。 這個簡單的三行圖標是當今最知名的按鈕之一。 許多網站正在使用它來隱藏通常強大的導航元素並節省空間。 然而，儘管它們很有用，網站設計中的漢堡菜單仍然是最有爭議的網頁設計選項之一。 對於某些人來說，這是一個真正的解決方案，應該完全融入所有響應式設計。 對於其他人來說，這是一個不幸的副作用，來自對實際結構設計的誤解。

網站設計中的漢堡菜單介紹

不僅如此，當它們適應小屏幕顯示時，通常會在響應式網站和應用程序上找到漢堡菜單。 無論是在左側還是右側，專業的設計師和開發人員都使用漢堡包手工來節省寶貴的空間。 這是一種流行的解決方案，因為它們隱藏了主導航以為其餘內容留出更多空間。 但是，並不是每個人都認為這是一個合適的解決方案。 許多人聲稱恰恰相反。

為了幫助您更好地理解漢堡菜單，我們將在這裡討論：

• 什麼是漢堡菜單
• 網站設計中漢堡菜單的概念
• 背後的爭議
• 替代實施
• 網站設計中漢堡菜單的一般優點和缺點

什麼是漢堡菜單？

簡而言之，漢堡菜單是大型導航欄的簡單且較小的替代品。 它基本上用作抽屜，您可以在其中放置所有使您的網站混亂的導航。 漢堡菜單通常看起來像三行重疊。 這個名字來自它與漢堡包的明顯相似之處。

一切都始於 1981 年。在 Xerox Star 工作站。 當時的圖形用戶界面設計師 Norm Cox 製作了一個圖標來打開隱藏元素的列表。 其目的是為長長的選項列表提供另一種節省空間的解決方案。 類似於桌面計算機上的右鍵單擊概念菜單。 但是，直到 2009 年，漢堡菜單並沒有獲得太多榮耀。 只有當 Facebook 和其他一些網站再次推出它時，漢堡菜單才開始了它的旅程。 在當時新興的移動設備上節省寶貴的屏幕空間幾乎是完美的解決方案。

但是，是嗎？

關於漢堡菜單的永恆爭論

最初的創造者的意圖是創造一些簡單而有效的東西。 一個小按鈕，通過遵循右鍵菜單背後的相同原理來減少混亂。 它應該是相似的、令人難忘的、易於使用的。 它是，即使是它最初不打算用於的當前形式。

然而，並不是每個人都對漢堡菜單有同樣的熱情。 許多設計師批評它，因為它隱藏了網站導航最重要的部分。 因此，遊客將很難找到它。 他們建議僅在菜單中有四個以上導航元素時才使用漢堡菜單。 另一方面，這些說法在未來可能會改變，因為大多數人已經習慣了漢堡菜單的外觀和功能。

替代使用和實施

除了“四要素”規則外，還有其他關於如何提高漢堡菜單可用性的建議。

• 將漢堡菜單與其他功能相結合。 例如，您可以將搜索功能和漢堡菜單並排放置。
• 使用不同形狀、邊框和顏色的佔位符，讓“漢堡​​包”更有辨識度。
• 找到不一定是角落之一的替代定位。
• 訪問者開始滾動頁面後，創建一個具有固定位置的浮動漢堡菜單。

這個想法是為移動用戶提供一個乾淨但可區分的設計，無論他們的設備屏幕大小如何。

網站設計中漢堡菜單的一般優缺點

從 UX（用戶體驗）的角度來看，漢堡菜單可以是一把雙刃劍。 雖然它可以在大多數情況下工作，但在其他情況下會造成混亂。 要了解何時使用它，最好檢查一下漢堡菜單的所有優點和缺點。

優點：

• 漢堡菜單減少了混亂——它在最重要的時候起作用。 正確使用空間有時可能意味著移動網站和應用程序的一切。 考慮到您可以使用的屏幕尺寸，任何能給您更多空間的東西都是好的。 此外，屏幕上過多的元素只會分散訪問者對正確內容的注意力。
• 保持導航易於理解——今天幾乎每個人在看到漢堡菜單時都明白它的用途。 我們是視覺動物，很容易注意到一個看起來像一列中三條水平線的圖標。 特別是如果它讓我們想起最喜歡的快餐之一。 想想你知道多少個不同的圖標和品牌標誌。
• 可以是一個很好的選擇，讓輔助導航元素不礙事——沒有規則說你需要將整個導航放在漢堡菜單中。 通常，最好的解決方案之一是將主要導航元素留在網站上，並將所有其他次要選項放在漢堡菜單中。 這基本上從兩個世界中汲取了最好的東西，並且仍然達到了它的目的。

缺點：

• 重要的導航是不可見的——當您將導航轉換為漢堡菜單時，您將使其幾乎不可見。 一些研究證實，由於這個原因，網站參與度可能會大大下降。 換句話說，有些人不會進一步點擊，因為它沒有立即引起他們的注意。
• 不是每個人都能理解——不太可能，但仍有遊客第一次接觸漢堡菜單。 它可能看起來很熟悉，但不夠激勵或不言自明，無法讓他們採取行動。 他們會保持原樣，因為沒有其他跡象表明它的用途。 這種情況正在發生變化，但有時可能是不直觀的。 特別是當設計師使用過多的自由並使其完全抽象時。 或者“漢堡包”本身在視覺上的區分度不夠。
• 漢堡菜單需要額外的“努力”才能使用——雖然聽起來很傻，但從技術上講，漢堡菜單確實比典型的導航多幾步。 更不用說不是每個人都可以在一隻手拿著手機時用拇指夠到它。

無論您的主觀意見是什麼，永遠不要忘記考慮對您的用戶來說什麼是最佳選擇。 您可能喜歡漢堡菜單，但如果情況看起來不對，最終還是不會使用它們。 或者，您可以完全討厭它，但它可能是您的網站或應用程序的最佳解決方案。 請記住，漢堡包手冊在網站設計中的正確應用可能因情況而異，並且因情況而異。 要查看它是否適合您，請運行一些 A/B 測試，看看您的受眾對此有何看法。