本篇文章主要是詳細介紹 Material Theme Editor 這款工具如何使用，讓大家快速熟悉和了解 Google 的這款工具，希望對大家能夠有所幫助！

△ Google 官方 Material Theme Editor 的操作視頻

一、Material Theme Editor —「一款強大的主題編輯器」

在2018年5月份的 Google I/O 大會上，Google 設計團隊一款叫做 Material Theme Editor 工具，可以幫助開發(fā)者更輕松地制作既符合自身品牌又符合 Material Design 風格的應用。這款全新的工具可以簡化工作流程并提升團隊工作效率！

本篇文章主要是詳細介紹這款工具如何使用，讓大家快速熟悉和了解 Google 的這款工具，或許在工作中能夠用的上。

二、簡介

簡單來說，這是一款能夠在 Sketch 上快速生成：基于 Material Design 設計規(guī)范的控件庫，并且讓用戶能夠最大程度的自定義組件樣式的插件！（Tips：只能進行符合 Material Design 規(guī)則的更改）

三、下載

下載鏈接：https://material.io/tools/theme-editor

安裝插件后，在 Plugins — Material — Open Theme Editor 中打開。

四、Material Theme Editor操作面板

這就是主題編輯器的操作面板了：

這款主題編輯器有內置四套不同產品類別的主題，其中，Baseline 是 Material Design 基礎設計組件主題，另外三個主題是 Google 基于 Material Design 設計語言創(chuàng)造出的不同產品類別的主題。

五、Material Studies

其實 Google 這次有基于 Material Design 語言設計創(chuàng)建了餐飲、旅行、新聞、購物、教育、金融等7款不同產品類別的主題，Google 稱之為「 Material Studies 」，鏈接：https://material.io/design/material-studies/about-our-material-studies.html

在這個網站中，Google 有向你呈現(xiàn)每個主題整體設計思路，從產品架構、布局、色彩、字體排版、圖標、組件、動效、設計與品牌的結合度等維度，非常詳細，大家可以去看一下，相信會有很多的收獲！

Material Studies 是為了向大家展示 Material Design 設計語言的靈活性，證明 Material Design 是可以創(chuàng)建出獨特的以及富有表現(xiàn)力的產品的！讓你了解 Material Design 并不是一個刻板不變的設計規(guī)范，而是能夠基于其中的設計理念做非常多創(chuàng)造的設計體系！建議去看一下。

六、Baseline——Material Design基礎設計組件庫

好，我們打開第一個 Baseline （也就是 Material Design 基礎設計組件主題），這個是最常用到的！

打開后會進入 Sketch 界面，看右上角，內置了五個頁面，分別是：

• Cover 封面
• Getting Started 入門介紹
• Material Theme 主題庫（主要控件、字體、顏色以及示例界面展示）
• Material Components 組件（全部的組件展示）
• Symbols（Sketch 默認生成的組件庫）

現(xiàn)在，讓我們來具體了解 Material Theme Editor 的四個功能。

功能一：顏色 Color

通過該插件我們能夠快速對組件中的主色、次級色以及背景色進行全局替換，它還會根據（WCAG）2.0 的規(guī)范對你選取的顏色做可視性校準（WCAG是指：Web無障礙指南，能夠幫助殘疾人士「學習障礙、認知障礙、光過敏等患者」更方便地使用。）

在顏色控制的面板左下角有三個色塊，分別對應主色、次及色、背景色的調整。

任意點開一個色塊，會彈出另外一個操作面板，在這里可以選取顏色，「Custom」和「Material」 ，可以進行自定義，也可以在 Material 色板庫里選取顏色。

這里我有錄制一段視頻，可以幫助大家更了解具體每一個色塊對應調整的組件：

△ 視頻鏈接：https://www.bilibili.com/video/av23926642

可以看出：

• 主色 — 應用程序欄、按鈕、選中樣式；
• 次級色 — FAB、底部導航、滑塊、單選／復選框；
• 背景色 — 頁面背景色。

功能二：字體 Typography

通過該插件，能夠設置默認 Font Family，并且能夠對每個字體層級設置字重，不過暫時不能修改字體大小，并且字體層級名稱不能修改。

△ 視頻鏈接：https://www.bilibili.com/video/av23926503

功能三：圖形 Shape

有「Curved」 、「Angied」兩個選項，通過這個插件可以全局設置卡片、按鈕等的四個角形式，可以自定義直角、圓角或「折角」的形狀。

△ 視頻鏈接：https://www.bilibili.com/video/av23926276

功能四：圖標 Iconography

Material Design 新推出了多種圖標風格（填充，圓角，銳利，描邊和雙色），能夠通過該插件快速下載不同圖標風格的 Icons Symbol 以供使用。

這里的功能和官方宣傳介紹的不一樣，并不是直接點擊就可以進行切換，而是會自動為你下載 icon 的 sketch 文件。

那難道不可以快捷更換 icon了嗎？不，還是有辦法的！

△ 視頻鏈接：https://www.bilibili.com/video/av23926183

這是我在 sketch 中新建了一個頁面，用組件設計了三個頁面，當你點擊任何一個組件的時候，右側會出現(xiàn)快捷操作欄讓你更改組件，分類很詳細，點開「icon」可以看到五種風格的 icon 都在里面，選擇就可以快捷替換了，而且還可以更改 icon 的顏色，還是很方便的。

總結

Material Theme Editor 這款主題編輯器的功能我已經介紹完了。

總的來說，Material Theme Editor 還是一款讓人比較驚喜的工具，會簡化我們的工作流程并提升團隊工作效率。它也表明 Material Design UE 設計工具已經全面轉向 Sketch 了！

歡迎關注作者的微信公眾號：「野驢少女」

「提升效率的Sketch技巧與插件」

• 《新版搶先看！Material Design 的7個重大更新》
• 《簡單實用！七步學會用 Sketch 搭建復雜表格》
• 《學會這4大Sketch 高階技巧，讓你的效率猛翻10倍！》
• 《6個能大幅度提升 UI 設計效率的 Sketch 插件》
• 《用了這9個最強大的Sketch插件，工作效率提高了一倍！》

================明星欄目推薦================

優(yōu)優(yōu)教程網： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com