material theme 自定义_Material Theme Editor最佳打开方式：实际使用过程中的爱与泪

阅读时间：5分钟

本文为鹿也原创，首发于知乎 UX设计每一天专栏，转发请私信

今年五月Material .io 推出了一些重大更新。其中就包括一款sketch 插件-- Theme Editor。一款基于Material Design Guideline 的设计模版编辑器。

Theme Editor的主要功能界面很简单，包括四大组成部分：颜色

文字

圆角

icon

这款插件的基本功能介绍直接贴官方视频在这儿，对这个插件完全不了解的同学建议花几分钟看一下视频，主播小哥还是一本正经白白净净的。本文将重点介绍作者在使用Theme Editor设计过程中的实际操作和经验总结。

一. 配色

优点：Theme Editor中最令人“WOW”的部分就是它强大的配色预览功能，Theme Editor支持一种主色和一种辅色，当你设定好主辅色(注意无法吸色，只能用输入具体色号的方式来选取主辅色)后，库中所有自带的部件都会同步更新，这样设计师可以对自己所选的配色完全铺开应用后是是什么效果有迅速，简单，直观的感受。

限制：只支持通过色号设定主色色号，深浅色配色是自动生成的无法手动更改，因此有自己产品色板的小伙伴们没办法直接通过这种方式直接搞定所有部件的配色。

二. 文字

作者得惭愧的说，完全没有弄明白怎么在library中设置或添加文字样式，因此还是使用sketch基本的文字样式管理编辑方法。

三. 圆角

优点：这个功能非常好用，填补了之前sketch无法就圆角进行统一调整的空白。比如我想把原来圆角是4的卡片统一改成圆角为30，就不用再一个个调整了。

限制：好用的前提是你的设计都要使用统一的圆角，如果卡片圆角是4，那么button圆角也得是4，Theme Editor没办法对不同的组件进行不同圆角设置的。圆角为4 card & button圆角为30 card & button

四. Icon

优点：虽然不用去material icon website下载了，但还是要在Theme Editor中下载打好包的icon library的。下载好后就可以选择插入icon，并可以选择icon的不同风格和状态，相对还是很方便的。目前作者没有尝试过制作自定义icon set并添加到库，目测material原生的icon都是没问题的。

限制：icon从material gallery下载后层级较深。在组件层级的下一级library里。且不支持按名称搜索，更换icon需逐一查找，这不是一件愉快的工作。添加/更换一个icon大概是这种调性，可以提前感受下

爱与泪重磅：关于部件 - 以button为例

不得不说Theme Editor提供了非常多且状态全面的部件库，比如提供不同重要程度/主辅色/各种状态的button样式

并且可以根据不同的场景需求更改部件支持的各种参数：更改button文字内容/颜色等等

很贴心有没有？直接选择就好了不用自己手动更改文字样式。但是！但是！也只能选择已有的这些样式，完全不支持自定义样式，这个设定真的是让部件功能处处受限变得十分鸡肋。

比如作者想将button上默认的文字样式为Roboto 14 Regular。想改为Roboto 14 medium。结果发现不支持，哪怕已经进入button字符层级去更改，并且在这一层级已经看到更改后的效果，返回button符号层级后无语的发现并没有sync过来。作者试图在button符号的上一层级去更改文字样式在文字样式层级将Roboto 14 Regular 改为 Roboto 14 medium返回编辑界面发现文字样式根本没有变化

要命的是这一问题存在于所有部件：即只能顺从命运的安排，不能自己更改没提供的参数选项。而且这个问题在官方介绍中并没有被提及，笔者抓心挠肝的穷举了各种方法都不能自定义某些样式之后才最终意识到：不能就是不能，这用户体验真是差的一笔。(如果电视机前的你发现其实可以更改，是笔者弱爆了没找对方式，欢迎来光速打脸)因此这些华丽而全面的组件库几乎不能直接使用，然而作为参考对照自己设计组件各种状态的查缺补漏还是极好的。

总结：

1.使用颜色编辑功能对所选颜色的大致效果有快速直观的了解，想要细化准确的产品色板还是要手动设置。

2.Icon全状态/种类替换功能蛮好用，只是找目标icon费点儿劲。

3.部件还是自定义符号比较靠谱，库里自带的符号可以作为参考查缺补漏使用。