Material Theme Editor插件

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

插件介紹：

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

設(shè)置顏色

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

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

可讀性校正

添加字體

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

改變形狀

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

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

下載多種風(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介紹：

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

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

Cover 封面

Getting Started 入門介紹

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

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

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

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

功能一：顏色 Color

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

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

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

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

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

可以看出：

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

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

背景色 — 頁(yè)面背景色。

功能二：字體 Typography

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

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

功能三：圖形 Shape

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

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

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

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

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

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

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

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