為什麼需要 Material Design 素材庫？

Google 於 2014 年發布 Material Design，以「紙張隱喻」、「大胆配色」、「有意識的動畫」三大原則重新定義跨平台設計語言。雖然官方提供基礎組件，但實戰中設計師常需要：現成的 UI Kit、動畫原型、圖標模板、代碼片段 以加速落地。本文精選 15 組高質量第三方資源，涵蓋 AE 動畫、CSS 按鈕、圖標系統、PSD Kit、CodePen Demo 等，助你快速構建符合規範的介面。

精選資源清單

資源名稱	類型	亮點	獲取方式
Free After Effect Project File	AE 動畫源文件	Jelio Dimitrov 製作，流體轉場極具 Material 動感，Dribbble 免費下載	Dribbble 搜尋作者名
Material Design UI Buttons	CSS 按鈕庫	輕量、即用即學，含 Ripple、Raised、FAB 等完整狀態	GitHub / CodePen
Material Design Playground	GitHub Repo	Eric Bidelman 維護，包含 Card、Dialog、Slider 等基礎控件互動原型	github.com/ebidel/material-design-playground
Material Design Buttons	CSS/JS 組件	點擊時背景色動態變化，展示狀態回饋細節	CodePen
Hierarchical Timing	動畫時間曲線庫	非官方實現，但完美還原 Material 交錯延遲動畫邏輯	GitHub
Google Design Icon Template	Sketch/PSD/Figma 模板	Graham Macphee 製作，含 24dp/48dp 網格、關鍵形狀、色板，開箱即用	Dribbble 免費下載
Android L Icon Grid System	AI/PSD 網格系統	專為 Android 5.0 設計，含關鍵形狀構建規則、光影標準	GitHub
New Android L Interface	PSD UI Kit	完整系統介面拆解，圖層命名規範，適合研究官方規範落地	Dribbble/Behance
Material Design Checkboxes	HTML/CSS/JS 片段	動態勾選動畫，期待後續擴充更多表單組件	CodePen
Material Design Slideshow	說明文檔/簡報	VentureBeat 編輯 Harrison Weber 製作，比官方文檔更易讀、更視覺化	Slideshare/官網
Material Design Animation	AE/GIF 動畫	學生 Jovie Brett 作品，精準拿捏「物理質感+有意識動畫」精髓	Dribbble
Material Design Icon Templates (v2)	Sketch/PSD 模板	配色與字體運用更優雅，適合品牌化圖標設計	Dribbble
Google's Material Design Dashboard	真實專案案例	Sam Mearns 內部專案展示，Data Visualization + Material 風格實戰參考	Behance
WhatsApp Material Redesign	概念設計案例	經典 App 重設計，展示如何在既有 IA 下套用 Material 視覺語言	Dribbble/Behance
System Icons – Material Design	官方圖標庫 (SVG/PNG)	Google 官方出品，實心風格，含 750+ 圖標，CDN 直連可直接引用	material.io/resources/icons
Action Button (FAB Menu)	CodePen Demo	浮動按鈕展開菜單動畫，含 Ripple、縮放、旋轉完整交互	CodePen
Android L PSD Kit	PSD 組件庫	Rasmus Nielsen 製作，乾淨圖層結構，含導航欄、卡片、對話框等	Dribbble 免費下載
Prayers Times App	完整 App 概念設計	齋月報時應用，配色細節極致貼合 Material 規範，實戰參考價值極高	Behance

資源使用建議

1. 建立個人素材庫：將下載資源按「組件/動畫/圖標/模板」分類存放，命名規範 MD_類型_名稱_來源_日期。
2. 驗證授權：多為 MIT/CC0/個人免費授權，商業專案前務必確認 License 文件。
3. 二次開發而非直接套用：根據品牌色、圓角半徑、動畫時長調整，避免「千篇一律的 Material 風」。
4. 關注官方更新：Material Design 3 (Material You) 已推出，動態配色、圓角變化等新規範需同步學習。

結語

Material Design 仍處快速演變期，素材生態豐富但良莠不齊。與其被動收集，不如主動建立「規範理解 → 素材篩選 → 組件庫建設 → 專案落地」的閉環體系。願這份清單成為你設計系統建設的加速器。