小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

愛原型愛設計發表於2019-03-01

Material design至釋出以來,已然形成了其鮮明的設計風格,並漸漸成為統一 Android Mobile、Android Tablet、Desktop Chrome 等全平臺設計語言規範。基於這樣的趨勢,設計師們對 Material Design 的青睞程度以及運用熟練度也越來越明顯了。

Material design能給使用者帶來最貼近真實場景的使用體驗,實現簡潔直觀的效果,這一切都和設計師對介面的把控和資訊層次的掌握息息相關。而圖示正是material介面設計一個必不可少的元素,對於設計師而言,豐富的圖示資源意味著更快捷的設計和更多樣的選擇,所以本文中,我將和大家分享10個優秀的material design 圖示資源,希望對您的設計有所幫助。

1. Google Material Deisgn Icons

格式:PNG, SVG

價格:免費

使用場景:Web, Android, and iOS專案

特點:900多個多種型別的圖示,可供單個下載

全瀏覽器支援

向量圖示,適應所有螢幕和專案

支援色彩,位置,大小自定義操作

Google Material Design UI風格

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該資源包含900多個material design設計系統所用的全部圖示,多種尺寸選擇,還包含可實際運用的網頁字型。全部圖示資源製作精美,完全可以在網頁、Android和iOS專案中使用。 該圖示資源完全免費,允許再設計並分享,提供者拒絕他人進項售賣。

點選下載:https://material.io/icons/

2. Material Icons form Icons8

格式:PNG, SVG

價格:免費

使用場景:Mac和Windows的所有專案

特點:支援打包下載

提供色彩選擇器,可自定義多種色彩

向量圖示,適應所有螢幕專案

提供material圖示風格解析,與其他風格進行對比分析

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示資源包含Facebook,Twitter,Youtube等各種社交媒體所用圖示和各種箭頭。也包括各種設計專案中所用的圖示,包括設定圖示,手機電話,首頁圖示等等。最大的特點是,該圖示資源在傳統的material design圖示風格上加以改進,具有幾分“非正統”的氣息。

點選下載:http://icons8.com/material-icons/

3. Material Design Icons

格式:PNGs, SVG, XAML

價格:免費

使用場景:全平臺和全系統

特點:支援單個下載,且可自定義下載格式和下載尺寸

可作網頁字型

向量圖示,適應所有螢幕專案

免費更新

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示資源庫非常豐富,種類多樣,包含近4000個免費圖示資源。這個巨大的免費資源平臺是無數的設計師分享自己的設計成果匯聚而成的,你可以在滑鼠懸停的時候看到該圖示的名稱和其設計師。

點選下載:https://materialdesignicons.com

4. Materialpalette

格式:PNG, SVG

價格:免費

使用場景:iOS和Android

特點:16個圖示種類

支援壓縮包下載

向量圖示,適應所有螢幕專案

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示資源庫是典型的material design設計風格,頁面提供搜尋框可快速搜尋你想要的圖示,方便查詢。該網站還提供調色盤和色彩選擇器。

點選下載:https://www.materialpalette.com/icons

5. Materializecss

格式:PNG, SVG

價格:免費

使用場景:全系統

特點:使用場景規則解析

圖示資源大小設定講解

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該網站提供了Google的932個Material Design圖示,提供免費下載。可用於設計師原型,也可直接用於開發人員開發APP。

點選下載:http://materializecss.com/icons.html

6. Material Icons Design from Flaticon

格式:Vector icon (SVG & EPS), PNG, PSD and Iconfont

價格:免費

使用場景:全系統

特點:提供直接使用圖示設計模板

支援免費分享

支援批量下載

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該網站提供了全面的Google Material Design圖示,共分為9個頁面。圖示和設計風格適應於Google Material Design和Monochrome。滑鼠選中任意圖示,可以檢視該圖示更多資訊,以及進行編輯、分享、新增至收藏夾等操作。

點選下載:https://www.flaticon.com/packs/material-design

7. Webalys

格式:.Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files.

價格:免費 - 350個圖示下載

$87 - 1650個圖示下載

$127 - 4000個圖示下載

使用場景:全系統

特點:提供免費和收費兩種型別的下載

Google material design設計規範

面性和線性風格

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該網站是我見過的最為齊全的Material Design圖示。其自身也號稱是世界最大material design圖示包。每個圖示都可選擇面性和線性風格,可用於應用程式和網站設計。

點選下載:http://www.webalys.com/nova/

8. Material UI

格式:SVGs, PNG

價格:免費

使用場景:全系統

特點:搜尋框快速搜尋

面性風格和線性風格具有

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示資源庫支援單個圖示下載,並且每個圖示有四種模式可選:Black, grey, white, SVG,且可選擇多種尺寸。預覽圖示時可以詳細檢視圖示資訊,並且可以複製SVG程式碼。

點選下載:https://www.materialui.co/icons

9. Material Design Icon Template PSD

格式:PSD

價格:免費

使用場景:全系統

特點:適合設計師個人設計使用

提供配套的UI工具包

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示資源庫是設計師Anton Kosolapov上傳至設計網站Uplabs進行分享的。該圖示資源是一個以Material風格設計為導向的全面的圖示模板。它包括指南網格,material設計形式,Android螢幕等。

點選下載:https://www.uplabs.com/posts/material-design-icon-template-psd

10. Material Design Icons By Brad Williams

格式:SVGs, PNG

價格:免費

使用場景:wordpress頁面

特點:支援wordpress頁面和其部落格頁面使用

可用於短程式碼

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

該圖示是設計師Brad Williams提供,包含1000多個可以在WordPress頁面和部落格中使用的Material Design圖示,此外, 可以使用簡碼或HTML標記插入圖示。該圖示資源可以3種不同的方式使用:簡碼,HTML和TinyMCE。

點選下載:https://cn.wordpress.org/plugins/material-design-icons/

以上就是本文整理出的10個material design圖示資源,絕大部分是免費提供,希望您能下載使用。但擁有優秀的圖示資源並不意味著完成了優秀的設計,如何對這些圖示資源進行有效運用呢?如何保證圖示設計和APP的整體Material Design介面風格無縫融合呢?

最有效的方法就是實踐設計,只有不斷的實踐,才能一步一步錘鍊設計技能。快速運用圖示資源進行設計,你需要一款高效簡潔的原型工具。您可以使用國內最好的原型設計工具Mockplus進行設計。

Mockplus自身帶有300多個元件,還包含2000多個向量圖示,只需簡單拖拽進行介面設計。在其屬性皮膚上,你可以對圖示進行可見性、色彩、透明度等設定,還可一鍵將其轉化為圖片進行更多操作。

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

此外,你還可以將以上所有的圖示資源匯入Mockplus元件庫加以利用。匯入元件庫後,你還可以共享給你的團隊成員,提高元件複用性,來規範專案、減少工作量。

那麼,如何在Mockplus中利用以上圖示資源呢?我們一步一步來。

步驟一:開啟Mockplus,新建一個專案。在左側皮膚選中元件庫圖示,點選“+”新建一個元件庫,並命名為material design icons,你還可以新增描述,或者更換縮圖。

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

步驟二: 選中新建元件庫“material design icons”,點選“+”在下拉框中點選匯入圖片,或者右鍵新建元件庫也可以找到匯入圖片選項。找到下載的material design圖示資源,選中想要匯入的圖示資源,即可匯入圖示至該元件庫。Mockplus目前支援PNG和JPE格式的圖示資源,你可以批量選中,一次性匯入100個圖示資源。

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

步驟三:此刻,你可以看到圖示資源已經在你的元件庫裡了,你可以隨時隨地使用它們。如何分享這些圖示資源呢?點選“+”旁邊的管理按鈕,進入元件庫管理介面,你可以進行同步、編輯、匯出、刪除等操作。同步後,點選分享按鈕,輸想要入共享的人的Mockplus賬號,即可分享該元件庫給他人。他人登入自己的Mockplus賬號,更新元件庫,就可以看到你分享的這些圖示資源了。

小小圖示功能大,10個最佳Material Design 圖示資源你不可錯過

使用Mockplus,進行更快更簡單的設計。Mockplus中有更多優秀的元件和設計可以讓您快速進項原型設計,只需簡單拖拽,快速呈現介面設計。此外,互動設計也只需拖拽滑鼠即可完成,你可以快速完成動態原型。

更多免費material design 圖示資源:

1. https://github.com/Templarian/MaterialDesign

2. https://dribbble.com/shots/1938275-Icons-Free-PSD

3. http://materialdesignblog.com/free-master-set-of-material-design-icons/

4. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons

5. https://www.producthunt.com/posts/material-design-icons

6. https://cdnjs.com/libraries/material-design-icons

7. https://www.iconfinder.com/iconsets/google-material-design-icons

8. dribbble.com/shots/19320…

以上資源由Mockplus團隊整理,瞭解和獲得更多優質設計資源,訪問Mockplus官網


相關文章