Material design自Google于2014年創(chuàng)建并發(fā)布以來(lái)炮障，已經(jīng)逐漸形成了其鮮明的設(shè)計(jì)風(fēng)格茅糜，并漸漸成為統(tǒng)一 Android Mobile熟嫩、Android Tablet煮纵、Desktop Chrome 等全平臺(tái)設(shè)計(jì)語(yǔ)言規(guī)范垒棋。幾乎Google的所有移動(dòng)應(yīng)用程序卒煞，包括Gmail，Inbox叼架，YouTube 等畔裕，甚至在桌面網(wǎng)站也都可以看到Material Design的身影，簡(jiǎn)潔而美觀乖订。顯然扮饶，Material Design對(duì)當(dāng)前的網(wǎng)頁(yè)和移動(dòng)設(shè)計(jì)趨勢(shì)產(chǎn)生了巨大的影響。
正因?yàn)镸aterial design能給用戶帶來(lái)最貼近真實(shí)場(chǎng)景的使用體驗(yàn)乍构，實(shí)現(xiàn)簡(jiǎn)潔直觀的效果甜无，因而很多設(shè)計(jì)師都非常青睞其設(shè)計(jì)風(fēng)格。今天和大家分享11個(gè)優(yōu)秀的material design UI kits資源哥遮，它們絕大部分是免費(fèi)的岂丘，希望對(duì)您的設(shè)計(jì)有所幫助。
1. FREE MATERIAL DESIGN UI KIT
格式：PSD
價(jià)格：免費(fèi)
特點(diǎn)：適用于Photoshop CS6 +
? ? ? ? ? ?免費(fèi)字體使用
? ? ? ? ? ?分組圖層
? ? ? ? ? ?自定義的矢量圖標(biāo)
? ? ? ? ? ?Google Material Design UI風(fēng)格
此工具包專(zhuān)門(mén)為啟動(dòng)階段進(jìn)行快速簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目而創(chuàng)建眠饮，保留Google Material設(shè)計(jì)指南的結(jié)構(gòu)性和簡(jiǎn)單性奥帘，將為您節(jié)省大量的時(shí)間，可用于個(gè)人作品設(shè)計(jì)以及商業(yè)產(chǎn)品設(shè)計(jì)仪召。
點(diǎn)擊下載：http://www.designtory.net/free-psd/free-material-design-ui-kit/
2. Material Design Kit
格式：PSD翩概，Sketch
價(jià)格：99$
特點(diǎn)：適用于iOS系統(tǒng)和Android系統(tǒng)
? ? ? ? ? ?適用于Sketch 40+ 和Photoshop CC 15+
? ? ? ? ? ?包含250多個(gè)App模板
? ? ? ? ? ?Material design設(shè)計(jì)指南
此工具包包含最全面的material design?UI元素，你可以使用Mockplus等原型工具導(dǎo)入Sketch文件返咱，利用已有的UI元素钥庇，只需解決交互問(wèn)題，就可以快速進(jìn)行動(dòng)態(tài)原型設(shè)計(jì)咖摹，大大節(jié)省時(shí)間评姨。
點(diǎn)擊下載：https://materialdesignkit.com/
3.?Android Material Design UI Kit Sketch Resource
格式：Sketch
價(jià)格：免費(fèi)
特點(diǎn)：適用于Android系統(tǒng)
移動(dòng)端App界面元素
此工具包為設(shè)計(jì)師Ivan Bjelajac制作，包含了豐富的移動(dòng)端App界面設(shè)計(jì)元素。下載次數(shù)以已經(jīng)超過(guò)30000次吐句，Ivan Bjelajac還有很多其他的優(yōu)秀作品胁后，也值得學(xué)習(xí)。 ? ?
4.?Google Material Design UI Sketch Resource
格式：Sketch
價(jià)格：免費(fèi)
特點(diǎn)：Google Material Design布局模式
該工具包體現(xiàn)了Google Material Design布局特色嗦枢，包含狀態(tài)欄攀芯，應(yīng)用欄，底部工具欄文虏，卡片侣诺，下拉菜單，搜索欄氧秘，分隔線年鸳，側(cè)導(dǎo)航欄，對(duì)話框丸相，懸浮操作按鈕和其他組件的明暗符號(hào)搔确。
點(diǎn)擊下載：https://www.sketchappsources.com/free-source/597-google-material-design-ui-sketch-app.html
5.?Material Kit
格式：PSD element, HTML/CSS/JS implementation
價(jià)格：免費(fèi)
特點(diǎn)：終身更新，定期支持
60個(gè)定制組件
2個(gè)自定義插件
3個(gè)示例頁(yè)面
該工具包是一個(gè)免費(fèi)的Bootstrap UI套件灭忠，基于Fez的Github Repo創(chuàng)建膳算，可以為您的Android應(yīng)用程序快速創(chuàng)建Web頁(yè)面，且保持一致風(fēng)格弛作。
點(diǎn)擊下載：https://www.creative-tim.com/product/material-kit
6.?Material Kit Pro
格式：PSD, HTML/CSS/JS implementation
價(jià)格：79$
特點(diǎn)：Material Kit付費(fèi)版
1000個(gè)組件
7個(gè)自定義插件
11個(gè)示例頁(yè)面：文檔畦幢，SASS文件，Photoshop文件
此工具包為Material Kit的升級(jí)版缆蝉，包含更多的插件，組件瘦真，文件和頁(yè)面刊头。
點(diǎn)擊下載：https://www.creative-tim.com/product/material-kit-pro
7. Lora Material Design UI Kit
格式：PSD，Sketch
價(jià)格：30$
特點(diǎn)：適用于Sketch App $ Photoshop
適用于80多個(gè)不同的屏幕
Material design設(shè)計(jì)規(guī)范
免費(fèi)Google字體诸尽，圖片原杂，例子
12個(gè)熱門(mén)分類(lèi)
此工具包是一個(gè)巨大的用戶界面工具包，可快速進(jìn)行原型設(shè)計(jì)您机。適用于設(shè)計(jì)社交網(wǎng)絡(luò)應(yīng)用程序穿肄，儀表板, 統(tǒng)計(jì)應(yīng)用程序，媒體和新聞應(yīng)用程序（博客际看，視頻咸产，畫(huà)廊...），電子商務(wù)應(yīng)用程序（商店仲闽，商店）脑溢，預(yù)訂應(yīng)用程序，音樂(lè)App等等赖欣。 ?
點(diǎn)擊下載：https://ui8.net/products/lora-material-design-ui-kit
8.?Material Design UI Kit freebie
格式：PSD
價(jià)格：免費(fèi)
特點(diǎn)：適用于Photoshop
Material design設(shè)計(jì)指南
6個(gè)文件類(lèi)型
這個(gè)工具包是JakubKo?la設(shè)計(jì)制作的屑彻，他花費(fèi)了大量精力研究Google的Material Design验庙，因而制作了這個(gè)界面干凈的UI工具包。
點(diǎn)擊下載：https://dribbble.com/shots/2064912-Material-Design-UI-Kit-freebie
9. FREE Material UI Kit PSD
格式：PSD
價(jià)格：免費(fèi)
特點(diǎn)：Google material design設(shè)計(jì)風(fēng)格
全面可編輯PSD文件
結(jié)構(gòu)嚴(yán)謹(jǐn)?shù)膱D層
現(xiàn)代設(shè)計(jì)
此工具包包含許多可用的元素社牲，例如：配置文件粪薛，音樂(lè)播放器，統(tǒng)計(jì)信息搏恤，圖形违寿，按鈕，導(dǎo)航菜單等等挑社。適用于網(wǎng)站和移動(dòng)應(yīng)用程序的設(shè)計(jì)陨界。
點(diǎn)擊下載：http://psdboom.com/downloads/free-material-ui-kit-psd
10.?Android UI Design Kit 4.4
格式：PSD
價(jià)格:?免費(fèi)
特點(diǎn)：常更新
4.4新版增加：Action Bar - PullToRefresh & NotBoring；HoloGraphLibrary痛阻；Scroll Bar菌瘪；Search Action Bar；Contextual Action Bar
此工具包還包括以前版本的每個(gè)構(gòu)建模塊阱当，使其成為迄今為止最完整的UI設(shè)計(jì)工具包俏扩。需要注意的是，在使用Design Kit之前弊添，您必須先安裝Roboto和Roboto Slab字體录淡。設(shè)計(jì)時(shí)可以快速啟動(dòng)文件，然后從Building Block文件中拖拽選擇所需的UI元素油坝。
點(diǎn)擊下載：https://androiduiux.com/2014/01/10/android-ui-design-kit-for-photoshop-4-4-free-download/
11.?Vivid - Soft Material UI Kit
格式：PSD嫉戚，Sketch，JPG
價(jià)格：$48?（50% off now）
特點(diǎn)：包含了6個(gè)類(lèi)別的170多個(gè)矢量組件 ??
導(dǎo)航?- 43個(gè)組件
小工具?- 55個(gè)組件
表格?- 26個(gè)組件
風(fēng)格指南?-?包括調(diào)色板澈圈，排版指南彬檀， 圖標(biāo)和UI元素等
Vivid是一個(gè)軟件材料用戶界面工具包，它結(jié)合了干凈的版式和像素完美的圖形瞬女，為您創(chuàng)建任何類(lèi)型的網(wǎng)站或Web應(yīng)用程序提供了豐富的資源和素材窍帝。每個(gè)工具都進(jìn)行了命名和分組，以幫助您快速找到所需的元素诽偷，并在幾分鐘內(nèi)創(chuàng)建項(xiàng)目坤学。
點(diǎn)擊下載:?https://creativemarket.com/TheUIShop/414366-Vivid-Soft-Material-UI-Kit?u=dribbble
以上的11款Material design UI工具包皆是由各位優(yōu)秀設(shè)計(jì)師用心制作的，其中的元素都是設(shè)計(jì)的優(yōu)秀素材报慕，這些免費(fèi)UI模板都采用了Material Design的可視化語(yǔ)言深浮，仔細(xì)查看這些素材，就不難發(fā)現(xiàn)一些明顯的規(guī)律：
1. 設(shè)計(jì)理念
拋卻多余的雜質(zhì)和無(wú)序性眠冈，保留其最原始純凈的形態(tài)略号、空間關(guān)系、變化與過(guò)渡，配合虛擬世界的靈活特性玄柠，還原最貼近真實(shí)的體驗(yàn)突梦，達(dá)到簡(jiǎn)潔與直觀的效果。
2. 配色
顏色選取不求多而雜亂羽利，一般選取一種主色搭配襯托色宫患。更多的是在背景主色上進(jìn)行色彩的明暗變化，演變出更加豐富的配色这弧。
3. 圖標(biāo)
一般來(lái)講娃闲，桌面圖標(biāo)尺寸是48dp X 48dp，小圖標(biāo)尺寸是24dp X 24dp匾浪。圖形限制在中央20dp X 20dp區(qū)域內(nèi)皇帮。
4. 字體
英文字體使用Roboto，中文字體使用Noto蛋辈。
基于以上的優(yōu)秀的設(shè)計(jì)素材属拾，那么如何進(jìn)行有效運(yùn)用呢？一款快速簡(jiǎn)潔的原型工具必不可少冷溶。建議您使用國(guó)內(nèi)最好的原型設(shè)計(jì)工具M(jìn)ockplus通過(guò)可視化的鼠標(biāo)拖拽進(jìn)行快速原型制作渐白。Mockplus包含三種可視化交互設(shè)置：頁(yè)面交互，組件交互逞频，屬性交互纯衍。此外，Mockplus支持Sketch文件導(dǎo)入苗胀，你大可以在Sketch中使用以上模板編輯好UI元素襟诸，一鍵導(dǎo)入Mockplus，通過(guò)可視化交互快速完成原型制作基协，大大提升設(shè)計(jì)效率歌亲。
更多免費(fèi)material design?UI?工具包：
1.?Material UI Kit
適用于：Sketch App & Photoshop
https://psdrepo.com/free-psd/material-ui-kit-freebie/
?
2. Music App ui kit - Material
https://dribbble.com/shots/3374439-Music-App-ui-kit-Material
3. Material Design UI Kit PSD Free Download
適用于：Photoshop
https://dribbble.com/shots/1803843-Material-Design-UI-Kit-PSD-免費(fèi)-Download
4. Material UI Kit
適用于：Photoshop, Sketch and Adobe XD.
https://dribbble.com/shots/3363887-Material-UI-Kit-sketch-psd-xd
5. Material Design Widgets Ui Kit - PSD
適用于：Phototshop
https://dribbble.com/shots/2128765-Material-Design-Widgets-Ui-Kit-PSD
6. Material Design
適用于：Sketch
https://dribbble.com/shots/1629860-Material-Design-sketch
?7. Material Icons
適用于：web, Android, and iOS projects.
文末福利：
原型設(shè)計(jì)工具——摹客Mockplus；
摹客--- 從設(shè)計(jì)到開(kāi)發(fā)堡掏，只要一個(gè)文檔的協(xié)作工作平臺(tái)。
UI/UE/UX設(shè)計(jì)師：可將Sketch刨疼、PS泉唁、XD的設(shè)計(jì)原稿一鍵上傳，標(biāo)注切圖自動(dòng)生成揩慕；
產(chǎn)品經(jīng)理：多種批注樣式亭畜，快速制作交互；
前端開(kāi)發(fā)：輕松查看智能標(biāo)注迎卤、下載切圖拴鸵，自動(dòng)導(dǎo)出CSS代碼。
免費(fèi)體驗(yàn)地址：https://app.mockplus.cn/
