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

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

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

Material Web Icons [freebie] by Adrian Goia

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

Web Analytics Material Icon by Khuram Jameel

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

Google Maps & Streetview icon by Jovie Brett

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

TaxPro Docs Icons by Qaaim Goodwin

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

Flat Services Icons by Khuram Jameel

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

Set Of Material Design Hosting/Server Icons by Oxygenna

Oxygenna 這套網(wǎng)絡服務器相關(guān)的圖標設計相比于之前的圖標設計更冰冷一些，色調(diào)以灰色為主，整體風格也貼合Material Design的要求，給人以務實的感覺。

Icons by Diego Barrionuevo

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

Angular Material Icons by Merissa Acosta

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

Icons Responsive Material Design Palette by Ramy Wafaa

Wafaa的這套響應式圖標模板設計整體充滿了積極的情緒，協(xié)調(diào)的配色給人以奇妙的吸引力，統(tǒng)一的樣式避免了雜亂無章的外觀的出現(xiàn)。

Material Design Icon Template – Freebie PSD

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

Alcatel Launcher App Icons by Denys Nevozhai

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

Isometric Material Icons vol 3 – Charts by Oxygenna

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

1,000 Flat And Material Design Avatars

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

Material Inspired Icons Master Set by Jurre Houtkamp

這位藝術(shù)家擅長于管理鮮艷、復雜的配色，偽陰影和大量的留白能體現(xiàn)出他的專業(yè)之處。更重要的是，他的設計手法賦予了經(jīng)典的、傳統(tǒng)的圖標以新的感覺。

Vegetables and Fruit Set Collection by Samira

Material Design同樣可以優(yōu)雅而復古。Samira 的這組用蔬菜和水果設計出來的圖標就是這樣的典型。色調(diào)柔和，形象鮮明，這樣還不夠么？

Material Facebook by Giulio “bart172” Smedile

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

Icons by Drawithpixels

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

Periodic Table Product Icon by Michael Cook

Material Design 風格的元素周期表長什么樣？Michael Cook 的這套設計就是答案。鮮艷而細致的配色是它的特色，略顯復雜的結(jié)構(gòu)則給人以專業(yè)的感覺。

Material Design Harry by Hannah Atkin

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

Material Design Icon Templates by Zlatko Najdenovski

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

結(jié)語

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

【那些充滿異域風情的網(wǎng)頁設計】

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

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

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

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

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