Material Theme Editor插件

Material Theme Editor插件是谷歌于今年的I/O 大會上公布的一款sketch插件，這款插件可以說是一款制作Material Design風(fēng)格應(yīng)用的神器。Material Theme Editor插件可以在 Sketch 上快速生成基于 Material Design 設(shè)計規(guī)范的控件庫，并且讓用戶能夠最大程度的自定義組件樣式。

插件介紹：

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

設(shè)置顏色

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

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

可讀性校正

添加字體

每個主題允許添加三套字體，同時可以針對標(biāo)題、內(nèi)容等不同板塊設(shè)定不同的字體和字重，在 Material Theme Editor 中設(shè)定一套字體后，便會自動應(yīng)用至全局。

改變形狀

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

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

下載多種風(fēng)格的圖標(biāo)

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

Baseline介紹：

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

打開后會進(jìn)入 Sketch 界面，看右上角，內(nèi)置了五個頁面，分別是：

Cover 封面

Getting Started 入門介紹

Material Theme 主題庫（主要控件、字體、顏色以及示例界面展示）

Material Components 組件（全部的組件展示）

Symbols（Sketch 默認(rèn)生成的組件庫）

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

功能一：顏色 Color

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

在顏色控制的面板左下角有三個色塊，分別對應(yīng)主色、次及色、背景色的調(diào)整。

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

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

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

可以看出：

主色 — 應(yīng)用程序欄、按鈕、選中樣式；

次級色 — FAB、底部導(dǎo)航、滑塊、單選／復(fù)選框；

背景色 — 頁面背景色。

功能二：字體 Typography

通過該插件，能夠設(shè)置默認(rèn) Font Family，并且能夠?qū)γ總�字體層級設(shè)置字重，不過暫時不能修改字體大小，并且字體層級名稱不能修改。

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

功能三：圖形 Shape

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

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

功能四：圖標(biāo) Iconography

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

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

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

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

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