近年來 UI / UX 設計盛行，許多企業在開職缺需求都有特別備註需要了解 Material Design 及 Human Interface Guidelines，顯然這兩款開發指南已經成為 UI / UX 設計師必點技能了，在開發 Android、iOS、web、Flutter 都會運用到其中原理，此次主題我們將一起研讀 Material Design，讓我們一起把這些設計指南都內化成大腦海馬迴皺褶吧。
Material Design 是 Google 創建的設計系統，內含元件和工具系統，清楚的定義出許多元件的規範，減少了設計人員與開發人員的溝通時間，幫助團隊可以快速的建構出精美的產品，讓使用者在操作介面時能有高品質的使用體驗。
Material 分別由原則(Principles)、元件(Components)、主題化(Theming)三個方向延伸的基礎與準則。
原則包含質感、排版、網格、空間、比例、顏色、圖片、動畫、元件元素...等等，一切的設計基礎原型。
世界上所有物體都有自己的材質、紋理、反射光和投射陰影，將材質加入設計能引起觸覺感官的共鳴，設計的媒介不再如同過去的紙張創作，也重新建構了紙張跟墨水的媒介。
印刷設計中常見的排版、網格、空間、比例、顏色和圖片，這些設計元素建立起有層次結構、含義和重點，使用戶沉浸在體驗中。
簡單來說一個好看的排版，將物件擺放於黃金比例的網格位子中，使畫面具有空間感讓比例維持，配合色彩及圖片的搭配，創造讓使用者身歷其境的畫面。
當元素出現在螢幕上時，它們通過互動操作來變換和重組環境，從而產生新的變換。常搭配各種動畫反饋(例如：開始動畫和過度動畫)，強調主要功能來吸引使用者注意力並保持操作的連續性。
元件是介面設計的互動元素，並且包括一個或多個系統操作中的狀態，用於傳達焦點、選擇、啟動、錯誤、懸停、按下、拖動和禁用或關閉的狀態。好的互動設計能讓元件在進行轉換間更流暢，在操作介面流程時能有更好的連續性體驗。
元件滿足一系列介面需求，包括：
涵蓋使用，行為和規格的元件準則
Android、iOS、web、Flutter 的開發人員文檔和代碼
在 "Resources" 頁面上可下載的 Figma 設計文件
使用 Material 主題，可以輕鬆定義品牌的外觀和感受，並具有內建的支持和指導，可自定義顏色、字體樣式和邊角形狀。
使用Glitch或Android Studio 建立 Material 主題
Material 主題總覽
Material 示例應用
顏色系統是通過有組織的定義規範，將顏色應用於介面的方法。整體顏色樣式具有語義名稱和元件中定義的用法，可以分為主要色（商標顏色）、次要色、輔助色、區塊、背景和錯誤狀態。每種顏色都有一種互補色，在元件中使用互補色，可以增強一致性和對比度。
提供 13 種字體比例及樣式，適用於從標題到內文的所有內容。每種樣式在介面內都有明確的含義和建議的應用方式。
可以修改重要屬性，例如: 字體、字體粗細和字母大小寫，搭配您的品牌和設計。
運用形狀樣式可以幫助吸引注意力或識別元件，傳達其狀態並表達您的品牌。所有形狀元件均根據大小（小、中、大）分為形狀類別。這些形狀樣式元件提供了一種快速更改大小相似的元件的形狀的方法。您可以使用自定形狀工具設計出專屬於品牌的形狀樣式。
形狀類別允許根據元件大小以各種大小應用單個樣式（例如: 切角）。
Material studies 展示了主題和元件的靈活性，可以創建富有表現力的獨特應用程式。參考素材主題可以激發您對主題和組件的設計構想。
這些主題研究通過虛擬的應用程式探索真實世界的設計和產品限制，每個應用程式都具有獨特的屬性和範例。每項研究都說明瞭如何做出多個設計決策，以及不同品牌如何在各種產品類別（包括零售、音樂、生產、財務、即時業務和教育）中表達自己的意見。
下列主題範例解釋了設計背後的原理、元件的選擇以及每個研究如何使用 Material 主題。
今天先做了一些簡單的介紹，有些單字看完覺得不好理解的話，還是建議多了解原文的意思，最後，歡迎大家一起找出那些細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
感覺可以學到很多 UI 的知識，期待更多文章！已追蹤！
希望這系列的文章可以幫助更多人，也謝謝你的鼓勵，讓我在啃指南之路更有動力。
iThome鐵人賽
看影片追技術