material-design-icon-design-1

作為目前最有影響力的設計規范之一,Material Design呈現出蓬勃而持久的生命力,不論是移動端UI設計還是網頁設計,設計師們對 Material Design 的運用越來越熟練了。在圖標和小型插畫的運用上,要匹配Material Design的整體風格還是需要一定技巧的,在保證直觀簡約的同時,確保色調的協調而不會產生喧賓奪主的效果,在排版設計上控制好留白和細節的優雅。

Material Design 需要兼容不同的屏幕不同的平臺,需要設計師為用戶提供舒適一致的用戶體驗。這也是為什么設計師需要強化對于信息層次的把控,直觀的結構、大膽而圖形化的界面是每一個力圖掌控Material Design精髓的設計師應該做到的事情。

今天,我們來從圖標的層面來聊一下如何實現真正意義上的Material Design,如何在五彩繽紛的扁平化界面中用對圖標,用好圖標。案例總是最鮮明最有說服力的,下面的案例中,許多圖標設計都是設計師原創的概念設計,它們大多都很清晰地詮釋了Material Design。

Material Web Icons [freebie] by Adrian Goia

這組六個小圖標雖然尺寸不大,但是在尺寸和信息量上做到了平衡,色調搭配上符合Material Design 的特征,更重要的是,它延續了它“擬物”的特質,增加了偽3D的質感。

Web Analytics Material Icon by Khuram Jameel

Khuram Jameel 用簡單的幾何圖形來勾勒自己的想法,雖然并不復雜,但是看起來依然很精致,配色和留白的使用在整個設計中起到了重要的作用。

Google Maps & Streetview icon by Jovie Brett

Jovie Brett 基于流行的谷歌圖標風格,制作出了兩個獨特的修改版。整套設計使用了六種不同的色調,這些色調都是典型的谷歌品牌色,并且加入了些許陰影提升了整體的層次感和立體感。

TaxPro Docs Icons by Qaaim Goodwin

Goodwin 在選取這組圖標的主色調上非常用心,整個配色方案上選取了6種扁平化的色彩來搭配,配合小幅度的陰影構造立體感。白色背景的使用讓整個設計擁有了開放的感覺。

Flat Services Icons by Khuram Jameel

Jamell 的這套扁平化圖標設計走的是非常規路線,深色的背景并不多見,圖標本體的色調雖然使用的是飽和度不高的扁平色,但是在這套設計中看起來頗有活力。充滿棱角的圖標邊緣給人非常深刻的印象,讓人過目難忘。

Set Of Material Design Hosting/Server Icons by Oxygenna

Oxygenna 這套網絡服務器相關的圖標設計相比于之前的圖標設計更冰冷一些,色調以灰色為主,整體風格也貼合Material Design的要求,給人以務實的感覺。

Icons by Diego Barrionuevo

Material Design 對于擬物化的態度更加曖昧,貼合扁平化2.0的理念,而 Barrionueyo 的這套圖標設計也延續了這一點,雖然沒有漸變,但是陰影的回歸讓扁平化的各色物品擁有了更加真實的立體感。極簡的線條和令人眼前一亮的色彩,都讓這套圖標從諸多設計作品中脫穎而出。

Angular Material Icons by Merissa Acosta

Acosta 的這套圖標也使用了少見的暗色調來設計,不過獨特的折紙風還是非常有趣的。這種別具一格的配色方案雖然看起來略顯沉悶,但是對于習慣了色彩鮮艷的配色的用戶而言,還是挺有意思的。

Icons Responsive Material Design Palette by Ramy Wafaa

Wafaa的這套響應式圖標模板設計整體充滿了積極的情緒,協調的配色給人以奇妙的吸引力,統一的樣式避免了雜亂無章的外觀的出現。

Material Design Icon Template – Freebie PSD

如果你也想制作均勻漂亮的扁平風圖標,不妨下載這個免費的PSD圖標模板,它提供了類似線框圖一樣的功能,輔助你快速完成設計。

Alcatel Launcher App Icons by Denys Nevozhai

八種基本的色彩就可以創造出一套漂亮的扁平風圖標了,而Nevozhai 的這套應用圖標合集就是這么來的。這套圖標走的極簡的風格,沒有使用陰影,組成圖標細節的幾何圖形精準而到位。

Isometric Material Icons vol 3 – Charts by Oxygenna

Material Design 中是否只能使用2D的圖標呢?并非如此,Oxygenna 的這套圖標設計就采用了3D的圖標設計,中性的灰色和熱情的橙色賦予了圖標獨特的性格。

1,000 Flat And Material Design Avatars

iconshock 提供的這組扁平風頭像合集營造了非常獨特的氛圍,長陰影在此處并不顯得過時,每個不一樣的頭像都擁有區別于其他的獨特個性。

Material Inspired Icons Master Set by Jurre Houtkamp

這位藝術家擅長于管理鮮艷、復雜的配色,偽陰影和大量的留白能體現出他的專業之處。更重要的是,他的設計手法賦予了經典的、傳統的圖標以新的感覺。

Vegetables and Fruit Set Collection by Samira

Material Design同樣可以優雅而復古。Samira 的這組用蔬菜和水果設計出來的圖標就是這樣的典型。色調柔和,形象鮮明,這樣還不夠么?

Material Facebook by Giulio “bart172” Smedile

經典的Facebook 圖標被這位設計師重新設計出了不一樣的感覺,更富有活力也更干脆了。

Icons by Drawithpixels

Drawithpixels 所提供的這組圖標已經接近于插畫的水平了,它們成為了網頁用戶體驗設計的一部分,它們不僅賞心悅目,而且在頁面中起到了重要的內容引導的作用。

Periodic Table Product Icon by Michael Cook

Material Design 風格的元素周期表長什么樣?Michael Cook 的這套設計就是答案。鮮艷而細致的配色是它的特色,略顯復雜的結構則給人以專業的感覺。

Material Design Harry by Hannah Atkin

Atkin 的這個圖標設計擁有類似傳統iOS圖標一樣的圓角矩形的輪廓,突出的呆毛則讓整個圖標充滿了活力于個性。

Material Design Icon Templates by Zlatko Najdenovski

這是一份AI格式的Material Design 圖標設計模板,其中專業的線框可以引導你的設計,獨特的視角則能夠讓你的圖標擁有全新的角度。

結語

Material Design 規范下的圖標設計不僅僅在配色上可以說道,在角度、風格、細節、功能上同樣可以不同凡響。發揮你的想象力吧。

【那些充滿異域風情的網頁設計】

《兼容并蓄!20個來自澳大利亞最優秀的網頁設計》
《狂拽酷炫!20個來自美國最優秀的網頁設計》
《KEEP CALM & DESIGN!26個來自英國最優秀的網頁設計》
《嚴謹而浪漫!20個來自德國最優秀的網頁設計》
《情迷西班牙!20個來自西班牙最優秀的網頁設計》
《時尚雅致!25個來自法國最優秀的網頁設計》
《請多關照!20個來自日本最優秀的網頁設計》

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

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

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

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏