MATERIAL DESIGN 圖標設計有哪些不同的玩法?

作爲目前最有影響力的設計規範之一,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 – FreebiePSD

如果你也想制作均勻漂亮的扁平風圖標,不妨下載這個免費的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 規範下的圖標設計不僅僅在配色上可以說道,在角度、風格、細節、功能上同樣可以不同凡響。發揮你的想象力吧。

深聊MATERIAL DESIGN複雜響應式設計
2011年,Gmail郵箱的按鈕變得更加扁平化。2012年,Google引入分層的卡片設計,使用更多的空白和精心設計的層次排版結構。經曆了幾年的叠代和提煉,Google尋找到了一種可以貫通的理論體系,即把系統內的各種設計都規範...查看完整版>>深聊MATERIAL DESIGN複雜響應式設計
 
AVIARY設計師的MATERIAL DESIGN改版實戰
AVIARY設計師的MATERIAL DESIGN改版實戰
在過去的三年裏面,我一直帶領著 Aviary 的Android設計師團隊。非常榮幸我能爲大家設計這款攝影APP,讓大家能釋放創造力,通過這款APP來拍攝出如此之多優質的照片。隨著Google 推出Material Design 這種全新的設計...查看完整版>>AVIARY設計師的MATERIAL DESIGN改版實戰
 
谷歌設計師的MATERIAL DESIGN實踐心得
谷歌設計師的MATERIAL DESIGN實踐心得
前不久,我們發布了Google I/O 2014 APP,源代碼已經發布,諸位感興趣的話,可以去Github看看我們是怎樣在這個App中實現Material Design的功能和設計細節。在這篇文章中,我將分享一些我們對于Material Design的一...查看完整版>>谷歌設計師的MATERIAL DESIGN實踐心得
 
扁平化設計和MATERIAL DESIGN有什麽不一樣?
扁平化設計和MATERIAL DESIGN有什麽不一樣?
兩種相似的設計風格,一個基于另一個。一個是新熱事物,另一個,有人猜測,已經以自己的方式成爲一種時尚。一個是自發的——適應設計的趨勢,另一個卻是有目標——專用的設計指導規範。你可能明...查看完整版>>扁平化設計和MATERIAL DESIGN有什麽不一樣?
 
MATERIAL DESIGN設計規範學習心得
自學筆記就該這麽做!今天分享@東門王三 同學關于Material Design的自學成果,他的學習筆記嚴謹有序,觸類旁通,從Material Design到其他系統的設計規範都有所研究,還認真地做了思維導圖,同學們可以邊學習邊借鑒他...查看完整版>>MATERIAL DESIGN設計規範學習心得
 
深聊MATERIAL DESIGN引領的設計趨勢
輝達:兩個月前,Google I/O大會發布了Android L並推出Material Design,重新統一了Google的設計語言,確立了未來Google的設計方向。那麽,什麽是Material Design?我簡單地將它翻譯成“本質設計”。顧名...查看完整版>>深聊MATERIAL DESIGN引領的設計趨勢
 
15個優秀的 Material Design(材料設計)案例
15個優秀的 Material Design(材料設計)案例
15個優秀的 Material Design(材料設計)案例  Material Design (材料設計)是由谷歌創建和設計的一種設計語言,結合成功的設計的經典原則以及創新科技。谷歌的目標是開發一個設計系統,讓所有的産品在任何平台上...查看完整版>>15個優秀的 Material Design(材料設計)案例
 
幫你全面徹底搞定MATERIAL DESIGN的學習筆記
這一年就快完了,你還沒搞懂Material design嗎?是嫌文檔太長,還是覺得自己英文不好?都沒關系,我們善良熱情的@十萬個為什麽 幫同學們通讀了一遍官方的設計指南,去糙取精,整理出這篇幹貨超多的學習筆記,打包票學...查看完整版>>幫你全面徹底搞定MATERIAL DESIGN的學習筆記
 
MATERIAL DESIGN:構建軟件的物質世界
編者按:Google推行的Material Design已經遠遠超出之前Android Design的格局,視覺標准化的背後,隱藏著Matias Durate和他的谷歌戰隊背後改變世界的心。如果你還在和隔壁桌的同事爭論Material Design到底是不是扁平...查看完整版>>MATERIAL DESIGN:構建軟件的物質世界
 
 
回到王朝網路首頁