11款美觀實用的Material Design UI工具包

最新 03-01

Material design自Google於2014年創建並發布以來，已經逐漸形成了其鮮明的設計風格，並漸漸成為統一 Android Mobile、Android Tablet、Desktop Chrome 等全平台設計語言規範。幾乎Google的所有移動應用程序，包括Gmail，Inbox，YouTube 等，甚至在桌面網站也都可以看到Material Design的身影，簡潔而美觀。顯然，Material Design對當前的網頁和移動設計趨勢產生了巨大的影響。

正因為Material design能給用戶帶來最貼近真實場景的使用體驗，實現簡潔直觀的效果，因而很多設計師都非常青睞其設計風格。今天和大家分享11個優秀的material design UI kits資源，它們絕大部分是免費的，希望對您的設計有所幫助。

1. FREE MATERIAL DESIGN UI KIT

格式：PSD

價格：免費

特點：適用於Photoshop CS6 +

免費字體使用

分組圖層

自定義的矢量圖標

Google Material Design UI風格

此工具包專門為啟動階段進行快速簡單的網頁設計項目而創建，保留Google Material設計指南的結構性和簡單性，將為您節省大量的時間，可用於個人作品設計以及商業產品設計。

點擊下載：http://www.designtory.net/free-psd/free-material-d...

2. Material Design Kit

格式：PSD，Sketch

價格：99$

特點：適用於iOS系統和Android系統

適用於Sketch 40+ 和Photoshop CC 15+

包含250多個App模板

Material design設計指南

此工具包包含最全面的material design UI元素，你可以使用Mockplus等原型工具導入Sketch文件，利用已有的UI元素，只需解決交互問題，就可以快速進行動態原型設計，大大節省時間。

點擊下載：https://materialdesignkit.com/

3. Android Material Design UI Kit Sketch Resource

格式：Sketch

價格：免費

特點：適用於Android系統

移動端App界面元素

此工具包為設計師Ivan Bjelajac製作，包含了豐富的移動端App界面設計元素。下載次數以已經超過30000次，Ivan Bjelajac還有很多其他的優秀作品，也值得學習。

點擊下載：https://www.sketchappsources.com/free-source/852-android-material-design-ui-kit-sketch-freebie-rsource.html

4. Google Material Design UI Sketch Resource

格式：Sketch

價格：免費

特點：Google Material Design布局模式

該工具包體現了Google Material Design布局特色，包含狀態欄，應用欄，底部工具欄，卡片，下拉菜單，搜索欄，分隔線，側導航欄，對話框，懸浮操作按鈕和其他組件的明暗符號。

點擊下載：https://www.sketchappsources.com/free-source/597-g...

5. Material Kit

格式：PSD element, HTML/CSS/JS implementation

價格：免費

特點：終身更新，定期支持

60個定製組件

2個自定義插件

3個示例頁面

該工具包是一個免費的Bootstrap UI套件，基於Fez的Github Repo創建，可以為您的Android應用程序快速創建Web頁面，且保持一致風格。

點擊下載：https://www.creative-tim.com/product/material-kit

6. Material Kit Pro

格式：PSD, HTML/CSS/JS implementation

價格：79$

特點：Material Kit付費版

1000個組件

7個自定義插件

11個示例頁面：文檔，SASS文件，Photoshop文件

此工具包為Material Kit的升級版，包含更多的插件，組件，文件和頁面。

點擊下載：https://www.creative-tim.com/product/material-kit-pro

7. Lora Material Design UI Kit

格式：PSD，Sketch

價格：30$

特點：適用於Sketch App $ Photoshop

適用於80多個不同的屏幕

Material design設計規範

免費Google字體，圖片，例子

12個熱門分類

此工具包是一個巨大的用戶界面工具包，可快速進行原型設計。適用於設計社交網路應用程序，儀錶板, 統計應用程序，媒體和新聞應用程序（博客，視頻，畫廊...），電子商務應用程序（商店，商店），預訂應用程序，音樂App等等。

點擊下載：https://ui8.net/products/lora-material-design-ui-k...

8. Material Design UI Kit freebie

格式：PSD

價格：免費

特點：適用於Photoshop

Material design設計指南

6個文件類型

這個工具包是JakubKo?la設計製作的，他花費了大量精力研究Google的Material Design，因而製作了這個界面乾淨的UI工具包。

點擊下載：https://dribbble.com/shots/2064912-Material-Design...

9. FREE Material UI Kit PSD

格式：PSD

價格：免費

特點：Google material design設計風格

全面可編輯PSD文件

結構嚴謹的圖層

現代設計

此工具包包含許多可用的元素，例如：配置文件，音樂播放器，統計信息，圖形，按鈕，導航菜單等等。適用於網站和移動應用程序的設計。

點擊下載：http://psdboom.com/downloads/free-material-ui-kit-...

10. Android UI Design Kit 4.4

格式：PSD

價格: 免費

特點：常更新

4.4新版增加：Action Bar - PullToRefresh & NotBoring；HoloGraphLibrary；Scroll Bar；Search Action Bar；Contextual Action Bar

此工具包還包括以前版本的每個構建模塊，使其成為迄今為止最完整的UI設計工具包。需要注意的是，在使用Design Kit之前，您必須先安裝Roboto和Roboto Slab字體。設計時可以快速啟動文件，然後從Building Block文件中拖拽選擇所需的UI元素。

點擊下載：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

價格：$48 （50% off now）

特點：包含了6個類別的170多個矢量組件

導航 - 43個組件

小工具 - 55個組件

表格 - 26個組件

風格指南 - 包括調色板，排版指南，圖標和UI元素等

Vivid是一個軟體材料用戶界面工具包，它結合了乾淨的版式和像素完美的圖形，為您創建任何類型的網站或Web應用程序提供了豐富的資源和素材。每個工具都進行了命名和分組，以幫助您快速找到所需的元素，並在幾分鐘內創建項目。

點擊下載: https://creativemarket.com/TheUIShop/414366-Vivid-...

以上的11款Material design UI工具包皆是由各位優秀設計師用心製作的，其中的元素都是設計的優秀素材，這些免費UI模板都採用了Material Design的可視化語言，仔細查看這些素材，就不難發現一些明顯的規律：

1. 設計理念

拋卻多餘的雜質和無序性，保留其最原始純凈的形態、空間關係、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。

2. 配色

顏色選取不求多而雜亂，一般選取一種主色搭配襯托色。更多的是在背景主色上進行色彩的明暗變化，演變出更加豐富的配色。

3. 圖標

一般來講，桌面圖標尺寸是48dp X 48dp，小圖標尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區域內。

4. 字體

英文字體使用Roboto，中文字體使用Noto。

基於以上的優秀的設計素材，那麼如何進行有效運用呢？一款快速簡潔的原型工具必不可少。建議您使用國內最好的原型設計工具Mockplus通過可視化的滑鼠拖拽進行快速原型製作。Mockplus包含三種可視化交互設置：頁面交互，組件交互，屬性交互。此外，Mockplus支持Sketch文件導入，你大可以在Sketch中使用以上模板編輯好UI元素，一鍵導入Mockplus，通過可視化交互快速完成原型製作，大大提升設計效率。