从视觉到App：网易有钱iOS项目主题自动化方案

引言

有钱项目组很早就开始基于 sketch 和视觉设计师制定一套自己的规范和流程：从视觉到App：网易有钱iOS项目切图与适配实践。在有钱主题版本开发过程中，不可避免地需要频繁地和视觉同学进行视觉文件更新，为了不进行重复繁琐的劳动，保质保量，我们充分地利用了 sketch 的扩展性，进行一次自动化主题发布方案实践。

定义主题规范

首先由视觉设计师设计并定义整体的视觉方案。

再由开发和视觉一起抽象出主题的具体定义：

• 颜色：首页文字，底部栏文字，顶栏文字 等位置
• 图片：首页，键盘，tabbar 等位置
• 位置：底部栏 icon 偏移，底栏小红点偏移等
• 其他：如 tabbar 的分割线，navigationBarStyle 的样式等。

为了方便处理 sketch 文件，所有定义好的颜色图片等都有唯一的名称，方便开发在开发自动化方案中识别。

iOS 在处理主题版本中，参考了之前的适配实践，分别定义了主题的颜色和图片 code，与视觉规范一一对应，方便主题版本修改。在图片适配方面，主要输出四种图片格式。并且考虑到主题包大小将 iPad 和 iPhone 主题包分开，iPad 图片并不需要做适配。

• a.png 保留适配 scale 为 1 的机型
• a@2x.png 适配 iPhone5 等 scale 为 2 的机型
• a-ip6@2x.png 适配 iPhone6、iPhone7 等
• a@3x.png 适配 iPhone6 Plus，iPhone7 Plus 等

所以视觉和开发一共会产生三种一一对应的定义

Sketch File	Export Config	Theme Code
首页背景色	color-asset-background	MKThemeColorAssetBackground
...	...	...

Sketch 可以做什么

插件

Sketch 拥有自由的插件系统，广大爱好者也为 sketch 写了丰富的插件，从这里入手是最为简单，有丰富的实践文章可以参考。通过插件可以遍历整个 sketch 文件结构，如 page，artboard，layer 等，可以读取修改颜色，位置，图层等各种属性。插件的整体控制非常方便，编写方式有前人大量文章，就不累述。我们一开始也写了一个有钱主题 sketch 插件，供前期开发导出主题，设计师进行图层检查等。

sketchtool

不错，sketch 插件还是很难做到自动化流程，所以我们需要另辟蹊径。经过一段时间探索，我们在 sketch 的官方博客发现了一个叫 sketchtool 命令行工具，在 GitHub 上还有一个非官方 sketchtool 的 npm 扩展。sketchtool 本身内置于 sketch app 内部 Sketch.app/Contents/Resources/sketchtool，直接运行 install.sh 就能全局使用。也可以整体拷贝出来到别的机器安装，sketchtool 本身并不依赖于 sketch。

sketchtool 最主要的几个命令是 dump、list 和 export。

dump

dump 是将整个 sketch 文件以 JSON 格式输出，整体结构如下图。主要是由 layerStypes 和 pages 两个数组组成。

• layerStypes 主要存放 sketch 的 TextStyle 和 LayerStype，有钱项目用于约定自定字号规范（见前文）
• pages 描述视觉所有的图层，以 layers 数组的形式组织，class 说明当前 layer 是属于什么形式 (page, group, slice...) 。

读取配置信息的基本思路是遍历 pages 的所有 layer，通过名字匹配，再解析 style 里的内容，就能得到 frame、color 等信息，最后组织成有钱主题配置。但是 dump 出来的 frame 结构比较复杂，并不是所有 layer 的 frame 都是 absolute，所以要计算两个 layer 的相对位置，还需要计算出两者基于 page 的绝对位置，然后再做比较。通过 list 和 export 可以直接拿到绝对位置。

list & export

这两个命令比较相似，都是对几种不同的 layer 进行数据解析。

• export 将 layer 导出图片，解决图片导出问题。支持多种参数，下面介绍几个常用参数：

  • --item 需要导出的 layer 名称
  • --scales 图片缩放，格式以逗号分隔 "1, 2, 3"
  • --output 输出路径
  • --outputJSON 输出导出图层的绝对位置，简化了获取图层相对位置的操作。

sketchtool export slices $sketchfile --item=${images[$index]} --scales="0.5, 1, 1.5" --overwriting=YES --output=$exportPath

有钱视觉是基于 iPhone6 设计的，所以基准 scale 是 0.5。这里有个注意点是 group 图层导出的图片往往会有 trim 的效果，最好用切片图层定义导出图层，或者尝试手动导出确认效果（export 和手动导出的效果一致）。

• list 输出 layer 的位置信息，这里可以拿到 layer 的绝对位置和相对位置，可用于解析特定图层偏移 。但是不支持对单个 layer 操作。因为有了 export 的 --outputJSON 大杀器，list 命令在有钱主题打包中并没有使用到。

文件本身

既然 dump 出的内容是以 JSON 为格式，很可能 sketch 本身也是以 JSON 作为基准格式。很简单只要解压出来，就能看到 sketch 的文件组织形式，大概是下面那样：

Pages 目录下面是一个个 page 的描述文件，格式和 dump 出来的 pages 数组一致，考虑到 dump 出来的内容混杂着大量 layerStypes， 有钱主题插件使用了纯粹一点的解析 page 文件的方式。所有的 JSON 解析都是通过 gulp 来编写。

自动化流程

关于主题相关的配置获取问题都一一解决了，就能通过脚本构建自动化主题发布方案。程序猿终于可以去喝咖啡偷懒啦。

1. 产出主题：视觉产出规范主题，提交到主题仓库
2. 打包：QA 打包（输出到包仓库）并测试验证
3. 上线：产品配置上线

视觉检查

为了保证主题输出的质量，减少重复工作等。开发做了主题前后期的一系列工具。

如前文所说，开发贴心地为设计师提供了前期检查插件，能够对主题进行图层和颜色的重复和缺失的检查，保证设计师能够输出规范的视觉稿。会对缺失的内容进行输出，方便校对。

主题配置成功后，还基于 fastlane 进行了自动截图，方便后期设计师快速地进行主题的视觉回归确认，不需要在 app 中一个个下载-> 使用 -> 确认。

后面的话

Sketch 的灵活性为从视觉到 app 提供了很多贡献。希望能看到越来越多的自动化的视觉到 app 的方案，解放我们的双手。如果存在谬误或者有更好的方法，欢迎读者朋友和我们交流。

本文来自网易实践者社区，经作者麦琳授权发布。