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）