Google 推出了一款 Sketch 插件，幫你更好地設計 Material Design 風格應用

來自專欄少數派

Material Design 已經推出四年，很多不那麼順手的 Android 應用因為擁抱 Material Design 而變的好看好用。Material Design 給 Android 帶來了統一的體驗，但是有些 Android 應用也因為盲目套用 Material 設計規範而變得非常相似，千篇一律的卡片、FAB、側邊欄……Material Design 是否也在消除 App 的自身特色？

Google 的 Material Design 團隊負責人 Matias Duarte 說他們花了兩年時間告訴人們如何創造自己的 Material Design，但是沒有成效。不過他不怨開發者，他認為問題在於 Google 沒有提供正確的工具。

在剛結束不久的 Google I/O 大會上，Google 公布了一系列 Material Design 的更新，其中包含一款名為 Material Theme Editor 的 Sketch 插件，Matias Duarte 將其形容為「a design system for making design systems.」它會是那個「正確」的工具嗎？

Material Theme Editor 內置了四套主題，可以將它們看作是四個案例 App 的設計規範文檔，我們可以通過 Material Theme Editor 全局修改這些規範文檔中的顏色、字體、形狀等元素，創建符合自身需求的 Symbol 庫，從而生成自己的 Material App 設計規範。

設置顏色

用戶可以自定義 Material Theme 的主色、次色、背景色和字體顏色，輸入特定的色值或者直接從 Material 色板里選擇都行，每選定一種顏色就會全局改變所有相關 Symbols 的顏色。

從上圖可以看到當顏色變化時，色塊上的文字和圖標顏色也會跟著變化來保證可讀性。當設置文字顏色時會有一個背景與文字的對比卡片，直觀地展示不同字型大小下的可讀性，出現嘆號則意味著需要校準，點最下面的「Fix contrast」便會自動推薦一個文本顏色。

添加字體

每個主題允許添加三套字體，同時可以針對標題、內容等不同板塊設定不同的字體和字重，在 Material Theme Editor 中設定一套字體後，便會自動應用至全局。

改變形狀

默認的材料設計形狀是一個圓角為 4dp 的圓角矩形，最新的 Material Guidelines 允許形狀有多種變化，可以將形狀設計為圓角、直角和斜角，同時可以調整邊角的大小和數量。

在 Material Theme Editor 里可以輕鬆把相關 Symbols 全局設置為圓角或者斜角，也可以選擇四個角的控制點來單獨控制其中某幾個角，拖動控制桿可隨意改變邊角的大小。它的合理性在於並不是所有卡片或者按鈕都會隨之改變，比如 Backdrop 的表層只有上面兩個角是可變的。

下載多種風格的圖標

Google 基於 Material Guidelines 繪製了 5 種不同風格的系統圖標，包括填充、尖角、圓角、線性和雙色五種，不同的 App 可以應用不同的圖標以突出其自身的風格。在 Material Theme Editor 中可以直接下載這五套圖標的 Sketch 源文件，方便直接拿到原稿里使用。

上傳至 Gallery 可直接查看標註

Gallery 是 Google 開發的一款設計協作工具，適合設計開發團隊使用，目前有 Android、iOS 和 Web 版本。

要在 Gallery 里查看標註需要先把作品上傳至 Gallery, 在 Sketch 中打開任意文件，選擇 Plugins - Material - Upload to Gallery 彈出上傳窗口，設置好各類名稱後選擇上傳即可。

上傳好以後，便可以在 Gallery 網站上看到剛剛上傳的作品，進入某個作品頁面，選擇頂欄的 INSPECT 就可以快速查看各種屬性標註。點擊某個元素右邊欄會顯示它的所有屬性，點擊某個元素後把滑鼠移動到另一個元素上，則可查看二者之間的間距。

這和著名插件 Sketch Measure 導出標註 html 的功能很相似，只不過 Google 讓這些功能都在線上完成，好處就是當別人需要我的標註信息時，我直接通過 Gallery 分享給他一個鏈接就行了。

多種使用情景

Material Theme Editor 內置的主題就是個巨大的 Symbol 庫，打開這些主題便會將其添加至 Sketch 的 Libraries 里，方便我們從任何 Sketch 文件里調用和同步主題內的 UI 組件。得益於 Sketch Libraries 加持，我們可以從以下方面使用 Material Theme Editor ：

• 利用 Material Theme Editor 創建自己的 Material App 設計規範
• 利用 Material Theme Editor 快速修改設計規範，並通過 Library Symbols 將修改應用到所有設計文件中
• 把 Material Theme Editor 的各種 UI 組件和 Icons 當成一個素材庫，通過 Library Symbols 隨用隨取
• 對 Material Design 完全不感興趣也可以從 Material Theme Editor 自帶的主題學到一個完善的設計規範文檔或者說是設計體系應該是怎樣的

自帶的主題幾乎包含了 Material Guidelines 里提到的所有 UI 組件，Google 為每個 UI 組件都繪製了明確完善的樣式。這可以幫助開發者快速為自己的 App 部署可靠的 Material Design, 利用這些 UI 組件做出來的 App 至少可以保證一個不錯的下限。

有一點疑惑是當人們直接調用這些 UI 組件來設計 App 時，僅僅通過 Material Theme Editor 自定義顏色、字體、形狀能為功能相似的 App 帶來足夠的差異性嗎？當然它才發布十幾天，現在下定論還為時尚早。

最後

Material Design 正在發生很多變化，用 Material Theme Editor 來創建基於 Material Design 的設計規範可以確保你跟上最新的變化，同時它的全局自定義功能和 Sketch Libraries 搭配起來可以讓你的設計工作流事半功倍。Material Theme Editor 能否解決 Material Apps 同質化的問題暫且還是個問號，目前來看它至少是個實用性很強的設計輔助工具。

如果你對 Material Theme Editor 感興趣，可以直接到 官網 下載使用。

（本文部分圖片來自 Google）