• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 20款展現漢堡圖標的新玩法設計方案—- 其他教程




    教學主題: 20款展現漢堡圖標的新玩法設計方案

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 20款展現漢堡圖標的新玩法設計方案

    這教學的重點為這幾點 [ 方案,設計,圖標,展現,這個,by,Menu,設計師,Ico ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    作為目前網站和APP中最簡單、最具功能性也最令人難忘的組件,“漢堡圖標”――菜單圖標,最近這幾年可謂出盡了風頭,它逐漸成為現代UI設計中必不可少也極具代表性的視覺元素和設計符號。

    作為目前網站和APP中最簡單、最具功能性也最令人難忘的組件,“漢堡圖標”——菜單圖標,最近這幾年可謂出盡了風頭,它逐漸成為現代UI設計中必不可少也極具代表性的視覺元素和設計符號。

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

    不過,由於不同的UI設計方案的需求差異,漢堡圖標的運用也會稍加調整以應對需求,也便於差異化。比如Dan Davies就曾經提出過一種修改方案,就是用餐具來構建漢堡圖標。

    今天的合集包含了20個不同的網站,用20個不同的項目展示了漢堡圖標的強大延展性。

    Hamburger Menu Icon

    20款展現漢堡圖標的新玩法設計方案

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

    Wave Menu Icon

    20款展現漢堡圖標的新玩法設計方案

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

    Hamburger Icon by Vanessa Grass

    20款展現漢堡圖標的新玩法設計方案

    這是一個乾淨、充滿活力的設計方案,延續自經典的外觀輪廓和映射“漢堡”的豐富細節都是這個設計的特色所在,簡單富有藝術感。

    Hamburger Buttons by Nick Meloy

    20款展現漢堡圖標的新玩法設計方案

    漢堡圖標可以用什麼組成?設計師Nick Meloy 腦洞大開設計出了10種不同樣式的的漢堡圖標。來自世界各地不同的食物構成了這10款有趣的漢堡圖標,如果你要為一家餐廳做網站,這種有趣的漢堡圖標絕對可以派上用場。

    Burger To Fries by Ryan Doggendorf

    20款展現漢堡圖標的新玩法設計方案

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

    Star Wars

    20款展現漢堡圖標的新玩法設計方案

    這是星球大戰的官方網站,在這裡你會看到一個別具一格的漢堡圖標。可能是參考了星球大戰中經典的光劍的形象,這裡的漢堡圖標的三個橫杠被不對稱地打斷,造就了這個獨特的版本。

    Burger Menu

    20款展現漢堡圖標的新玩法設計方案

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

    MOARRRR Hamburgers! by Kylie Timpani

    20款展現漢堡圖標的新玩法設計方案

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

    Hamburger Menu Icons

    20款展現漢堡圖標的新玩法設計方案

    出於搞笑的目的,設計師設計出了這三款好玩的漢堡圖標:漢堡版漢堡圖標、起司漢堡版漢堡圖標以及熱狗版漢堡圖標……

    Hamburgers by Ragnar Vorel

    20款展現漢堡圖標的新玩法設計方案

    設計師Ragnar Vorel 的這個微妙的GIF動畫展示了他對於這些日常圖標的認知,其中有幾個漢堡圖標和X型關閉按鈕。

    Minimalistic Hamburger Icon

    20款展現漢堡圖標的新玩法設計方案

    有的設計師喜歡增加細節,有的設計師則喜歡極簡化。這個簡約漢堡圖標就是簡約的案例,不過不同於其他的許多漢堡圖標,設計讓中間的一橫更細一點,可能是他覺得這麼設計感覺更好更到位吧。

    Menu Icon Animation

    20款展現漢堡圖標的新玩法設計方案
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    這是Andrew Kovardakov 所設計的“忍者漢堡”,圖標中的每一橫都被形象化為“忍者”,似乎旋轉變幻間整個圖標都擁有了一種獨特的萌感。

    Burger Menu

    20款展現漢堡圖標的新玩法設計方案
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

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

    What is the Hamburger Icon?

    20款展現漢堡圖標的新玩法設計方案

    這其實是一篇好玩的文章,探討漢堡圖標設計趨勢,你可以在這裡發現一些有趣的爭論。漢堡圖標和漢堡的關係是怎樣的?單色好還是多色好?反正挺開腦洞的。

    Open & Close Menu by Romain Passelande

    20款展現漢堡圖標的新玩法設計方案

    漢堡圖標並非一成不變的,在APP和網站中,不同狀態下圖標狀態是會改變的,這個案例中,設計用GIF動畫展示了這一過程。

    Hamburger Menu by Liam Spradlin

    20款展現漢堡圖標的新玩法設計方案

    這個帶有明顯Material design 風格的漢堡圖標像是復古的圖書,大膽而略顯粗獷。

    Burger Icon vs. Word “Menu” by Andrey

    20款展現漢堡圖標的新玩法設計方案

    當“菜單”遭遇“菜單”的時候,下面的設計就是答案。雖然兩者重疊看起來有點多餘,但是你不能否認這樣的設計非常優雅,毫無違和感。

    Open / Close by Armantas Zvirgzdas

    20款展現漢堡圖標的新玩法設計方案

    當你看到這個圖標的時候會想起“菜單”,漢堡圖標被封裝到框中之後,按鈕的意象得到了強化,當你點擊按鈕的時候,漢堡圖標會在框中旋轉打開,菜單之意通過動畫展現在你面前。

    Animated Menu Icon – The Process by Sebastiano Guerriero

    20款展現漢堡圖標的新玩法設計方案

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

    結語

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

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 20款展現漢堡圖標的新玩法設計方案 這教學會喜歡

    文章標題: 骨子愛創意- 20款展現漢堡圖標的新玩法設計方案–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 方案,設計,圖標,展現,這個,by,Menu,設計師,Ico

    本文永久連結 :20款展現漢堡圖標的新玩法設計方案

    本文轉載自 :VIA