作為目前網(wǎng)站和APP中最簡單、最具功能性也最令人難忘的組件，“漢堡圖標(biāo)”——菜單圖標(biāo)，最近這幾年可謂出盡了風(fēng)頭，它逐漸成為現(xiàn)代UI設(shè)計中必不可少也極具代表性的視覺元素和設(shè)計符號。

如果向上追溯漢堡圖標(biāo)的歷史，可以到30多年之前。驚才絕艷的Norm Cox為世界上最早的圖形界面電腦施樂之星設(shè)計圖標(biāo)的時候，創(chuàng)造了這個標(biāo)識。漢堡圖標(biāo)自然而然地模仿了菜單列表的外觀，為了屏幕顯示，列表的形象被微縮成為了我們熟知的漢堡圖標(biāo)。直到現(xiàn)在，它依然是符合小屏顯示的視覺元素，這種可行、有效的設(shè)計方案也成了目前最流行也最被認(rèn)可的解決方案。

不過，由于不同的UI設(shè)計方案的需求差異，漢堡圖標(biāo)的運用也會稍加調(diào)整以應(yīng)對需求，也便于差異化。比如Dan Davies就曾經(jīng)提出過一種修改方案，就是用餐具來構(gòu)建漢堡圖標(biāo)。

今天的合集包含了20個不同的網(wǎng)站，用20個不同的項目展示了漢堡圖標(biāo)的強大延展性。

Hamburger Menu Icon

來自Dave Gamez的漢堡圖標(biāo)設(shè)計方案，絕對令人耳目一新，這些充滿趣味和富有情感的設(shè)計可以更好地融入某些UI設(shè)計。

Wave Menu Icon

這是設(shè)計師Matt Walker的設(shè)計方案，藍色的海浪替代了漢堡圖標(biāo)中的直線，海浪的隱喻更加形象，大量留白的使用使得整個設(shè)計脫穎而出。

Hamburger Icon by Vanessa Grass

這是一個干凈、充滿活力的設(shè)計方案，延續(xù)自經(jīng)典的外觀輪廓和映射“漢堡”的豐富細節(jié)都是這個設(shè)計的特色所在，簡單富有藝術(shù)感。

Hamburger Buttons by Nick Meloy

漢堡圖標(biāo)可以用什么組成？設(shè)計師Nick Meloy 腦洞大開設(shè)計出了10種不同樣式的的漢堡圖標(biāo)。來自世界各地不同的食物構(gòu)成了這10款有趣的漢堡圖標(biāo)，如果你要為一家餐廳做網(wǎng)站，這種有趣的漢堡圖標(biāo)絕對可以派上用場。

Burger To Fries by Ryan Doggendorf

這個漢堡圖標(biāo)真就是基于漢堡的形象來設(shè)計的，這種略顯寫實又富有質(zhì)感的插畫式的圖標(biāo)也非常符合現(xiàn)在的設(shè)計風(fēng)尚，此外設(shè)計師還設(shè)計了表示關(guān)閉的X按鈕，不同的是它的形象是參考薯條來設(shè)計的。藝術(shù)和創(chuàng)造性在這里相遇。

Star Wars

這是星球大戰(zhàn)的官方網(wǎng)站，在這里你會看到一個別具一格的漢堡圖標(biāo)?？赡苁菂⒖剂诵乔虼髴?zhàn)中經(jīng)典的光劍的形象，這里的漢堡圖標(biāo)的三個橫杠被不對稱地打斷，造就了這個獨特的版本。

Burger Menu

Peeter Tvauri的漢堡圖標(biāo)是模仿夾心餅干來進行設(shè)計的。

MOARRRR Hamburgers! by Kylie Timpani

Kylie Timpani 設(shè)計的這個漢堡圖標(biāo)看起來像是真實漢堡包的一個簡約抽象版，面包，奶酪，沙拉，肉餅一個都不少。如果你需要一個別具一格的漢堡圖標(biāo)，看看這款吧。

Hamburger Menu Icons

出于搞笑的目的，設(shè)計師設(shè)計出了這三款好玩的漢堡圖標(biāo)：漢堡版漢堡圖標(biāo)、起司漢堡版漢堡圖標(biāo)以及熱狗版漢堡圖標(biāo)……

Hamburgers by Ragnar Vorel

設(shè)計師Ragnar Vorel 的這個微妙的GIF動畫展示了他對于這些日常圖標(biāo)的認(rèn)知，其中有幾個漢堡圖標(biāo)和X型關(guān)閉按鈕。

Minimalistic Hamburger Icon

有的設(shè)計師喜歡增加細節(jié)，有的設(shè)計師則喜歡極簡化。這個簡約漢堡圖標(biāo)就是簡約的案例，不過不同于其他的許多漢堡圖標(biāo)，設(shè)計讓中間的一橫更細一點，可能是他覺得這么設(shè)計感覺更好更到位吧。

Menu Icon Animation

這是Andrew Kovardakov 所設(shè)計的“忍者漢堡”，圖標(biāo)中的每一橫都被形象化為“忍者”，似乎旋轉(zhuǎn)變幻間整個圖標(biāo)都擁有了一種獨特的萌感。

Burger Menu

這是設(shè)計師Peeter Tvauri 的另一個設(shè)計方案，夾心餅干設(shè)計方案中加入了起司和沙拉，看起來更像一個真實的漢堡了……

What is the Hamburger Icon?

這其實是一篇好玩的文章，探討漢堡圖標(biāo)設(shè)計趨勢，你可以在這里發(fā)現(xiàn)一些有趣的爭論。漢堡圖標(biāo)和漢堡的關(guān)系是怎樣的？單色好還是多色好？反正挺開腦洞的。

Open & Close Menu by Romain Passelande

漢堡圖標(biāo)并非一成不變的，在APP和網(wǎng)站中，不同狀態(tài)下圖標(biāo)狀態(tài)是會改變的，這個案例中，設(shè)計用GIF動畫展示了這一過程。

Hamburger Menu by Liam Spradlin

這個帶有明顯Material design 風(fēng)格的漢堡圖標(biāo)像是復(fù)古的圖書，大膽而略顯粗獷。

Burger Icon vs. Word “Menu” by Andrey

當(dāng)“菜單”遭遇“菜單”的時候，下面的設(shè)計就是答案。雖然兩者重疊看起來有點多余，但是你不能否認(rèn)這樣的設(shè)計非常優(yōu)雅，毫無違和感。

Open / Close by Armantas Zvirgzdas

當(dāng)你看到這個圖標(biāo)的時候會想起“菜單”，漢堡圖標(biāo)被封裝到框中之后，按鈕的意象得到了強化，當(dāng)你點擊按鈕的時候，漢堡圖標(biāo)會在框中旋轉(zhuǎn)打開，菜單之意通過動畫展現(xiàn)在你面前。

Animated Menu Icon – The Process by Sebastiano Guerriero

這個漢堡圖標(biāo)的設(shè)計同樣非常值得學(xué)習(xí)，設(shè)計師通過分解動畫展現(xiàn)了漢堡圖標(biāo)和返回按鈕之間的狀態(tài)變化。

結(jié)語

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

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

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

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

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

原文地址：designmodo
優(yōu)設(shè)譯者：@陳子木

「子木說」

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

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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