還可以這么玩兒！展現漢堡圖標的新玩法的20個設計方案

作為目前網站和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種不同樣式的的漢堡圖標。來自世界各地不同的食物構成了這10款有趣的漢堡圖標，如果你要為一家餐廳做網站，這種有趣的漢堡圖標絕對可以派上用場。

Burger To Fries by Ryan Doggendorf

這個漢堡圖標真就是基于漢堡的形象來設計的，這種略顯寫實又富有質感的插畫式的圖標也非常符合現在的設計風尚，此外設計師還設計了表示關閉的X按鈕，不同的是它的形象是參考薯條來設計的。藝術和創造性在這里相遇。

Star Wars

這是星球大戰的官方網站，在這里你會看到一個別具一格的漢堡圖標?？赡苁菂⒖剂诵乔虼髴鹬薪浀涞墓鈩Φ男蜗?，這里的漢堡圖標的三個橫杠被不對稱地打斷，造就了這個獨特的版本。

Burger Menu

Peeter Tvauri的漢堡圖標是模仿夾心餅干來進行設計的。

MOARRRR Hamburgers! by Kylie Timpani

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

這個漢堡圖標的設計同樣非常值得學習，設計師通過分解動畫展現了漢堡圖標和返回按鈕之間的狀態變化。

結語

細小的漢堡圖標真的不重要么？我能確定的是，當你為漢堡圖標注入想象力的時候，它可以變得如此的生動，有著點睛之筆的作用。

?【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能，附上簡單教程！
《Sketch神助攻！無代碼做動效神器Hype3入門教程》

中國臺灣設計師叫你用Hype做原型過場！
《無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）》

美丫姐手把手教你用Hype做Path菜單動畫！
《比AE還方便！教你用HYPE無代碼制作PATH扇形菜單動畫》

原文地址：designmodo
優設譯者：@陳子木

「子木說」

設計圖標需要許多靈感，除了網上各類靈感搜集類的網站，還有一些比較不錯的書，比如《Symbol》和《1,000 Icons, Symbols, and Pictograms》。前面那本據說很不錯，可惜我還沒找到電子版，后面這本電子版戳這里。

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量99萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：