UI稿快速去色的方法
发现问题
在刚加入的团队中，发现交互同学并没有使用常用的交互工具，而是在UI规范源文件的基础上进行布局和展示，但是为了不给视觉同学干扰会把设计稿中的色彩都进行去色处理，发现交互同学会在去色的步骤上花费很多时间，比如下面这张示意图当中的icon部分的处理：
交互同学的流程是
- 选择icon当中带有颜色的部分
- 将色彩调至灰色
这样做的缺点是比较耗费时间，色彩也无法做到统一
解决方案一
所以本着坚决不浪费时间在重复无意义的工作上的原则，一定要找个办法进行优化，最终还是在伟大的medium上找到了一位设计师朋友的解决方案，完美解决了问题！
演示Gif：
具体操作步骤：
- 在需要变为灰度图的画板上画一个覆盖着的矩形
- 更改矩形的混合模式为颜色
- 将矩形的的颜色更改为白色，并且去掉边框
解决方案二
在GitHub中发现了一款插件能将矢量图形中的色彩转换为灰度，具体的实现方式是通过一组算法来实现：
Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)
- 相比方案一的做法此款插件灵活性更高，但缺点是色彩一旦转为灰度便不可还原为原色值
- 字体的颜色不可转换为灰度
演示Gif：
使用方法
选中一个或多个需转为灰度颜色的图层 / 组
执行 Plugins > Convert To Grayscale > Convert To Grayscale 或使用快捷键 command ⌘ + option ⌥ + control ⌃ + G 完成操作
适合需要去掉色彩的徽标墙、多种填充的边框和渐变
安装方法
下载并解压 Convert To Grayscale.zip
双击 Convert To Grayscale.sketchplugin 完成安装
下载链接
结论
使用矩形遮罩改变混合模式的方法能快速的解决去色的问题，在现有的流程下是优化了，但是作为交互稿的输出利用UI稿的方式还是有一些其他的问题，比如如果要输出高保真可交互的原型，这个方案的灵活性就会有很大的问题，方案二的方式对字体的灰度转换还是不支持，可以根据自己的需求自由选择。