作為網站與 APP 中最簡單、功能性最強、最令人難忘的組件，「漢堡圖標」——菜單圖標，近年出盡風頭，成現代 UI 設計必不可少、極具代表性的視覺元素與設計符號。

追溯歷史可至 30 年前。Norm Cox 為世界最早圖形界面電腦施樂之星設計圖標時創造此標識。漢堡圖標自然模仿菜單列表外觀，為適應屏幕顯示，列表形象微縮為我們熟知的漢堡圖標。至今仍符合小屏顯示，這種可行有效方案成最流行、最被認可的解決方案。

因不同 UI 設計需求差異，漢堡圖標應用會微調以應對需求、便於差異化。如 Dan Davies 曾提出用餐具構建漢堡圖標。今日合集含 20 個不同網站，用 20 個不同項目展示漢堡圖標強大延展性。

Hamburger Menu Icon

Dave Gamez 設計，絕對耳目一新，充滿趣味與情感，更好融入某些 UI 設計。

Wave Menu Icon

Matt Walker 設計，藍色海浪替代直線，隱喻更形象，大量留白使設計脫穎而出。

Hamburger Icon by Vanessa Grass

乾淨、充滿活力，延續經典外觀輪廓與映射「漢堡」豐富細節，簡單富藝術感。

Hamburger Buttons by Nick Meloy

Nick Meloy 腦洞大開設計 10 款不同樣式漢堡圖標，世界各地不同食物構成，若為餐廳做網站絕對派得上用場。

Burger To Fries by Ryan Doggendorf

基於漢堡形象設計，寫實又富質感的插畫式圖標符合當前設計風尚，關閉按鈕參考薯條設計。藝術與創意在此相遇。

Star Wars

星球大戰官網，獨特漢堡圖標，或參考經典光劍形象，三橫槓被不對稱打斷，造就獨特版本。

Burger Menu

Peeter Tvauri 模仿夾心餅乾設計。

MOARRRR Hamburgers! by Kylie Timpani

像真實漢堡包簡約抽象版，麵包、起司、沙拉、肉餅一個不少。需要別具一格漢堡圖標可參考。

Hamburger Menu Icons

出於搞笑目的設計三款：漢堡版、起司漢堡版、熱狗版漢堡圖標……

Hamburgers by Ragnar Vorel

Ragnar Vorel 微妙 GIF 動畫展示對日常圖標認知，含幾個漢堡圖標與 X 型關閉按鈕。

Minimalistic Hamburger Icon

極簡案例，中間一橫更細，或覺得這樣更好更到位。

Menu Icon Animation

Andrew Kovardakov 設計「忍者漢堡」，每一橫形象化為「忍者」，旋轉變幻間圖標擁有獨特萌感。

Burger Menu

Peeter Tvauri 另一方案，夾心餅乾加入起司沙拉，更像真實漢堡。

What is the Hamburger Icon?

好玩文章探討漢堡圖標設計趨勢，發現有趣爭論：漢堡圖標與漢堡關係？單色好還是多色好？挺開腦洞。

Open & Close Menu by Romain Passelande

漢堡圖標非一成不變，APP/網站不同狀態下圖標會變，用 GIF 展示過程。

Hamburger Menu by Liam Spradlin

明顯 Material Design 風格，像復古圖書，大膽略顯粗獷。

Burger Icon vs. Word "Menu" by Andrey

當「菜單」遭遇「菜單」，雖重疊看似多餘，但設計極優雅、毫無違和感。

Open / Close by Armantas Zvirgzdas

看到圖標想起「菜單」，漢堡圖標封裝入框後按鈕意象強化，點擊時在框中旋轉打開，菜單之意動畫展現。

Animated Menu Icon – The Process by Sebastiano Guerriero

同樣值得學習，分解動畫展現漢堡圖標與返回按鈕狀態變化。

結語

細小漢堡圖標真的不重要嗎？我能確定：當你為漢堡圖標注入想像力，它能變得如此生動，具有點睛之筆作用。