UI 自动化技术在高德的实践

一、背景

汽车导航作为 ToB 业务，需要满足不同汽车厂商在功能和风格上体现各自特色的需求。针对这种情况，传统的 UI 开发方式，基本上是一对一的特别定制。但是这种方式动辄就要 500~600 人日的工作量投入，成为业务发展的重要瓶颈。因此，能够对导航 UI 进行快速定制开发，成为汽车导航业务 UI 开发的必解课题。

高德地图技术团队希望打造一套快速精准的 UI 解决方案，通过自动化的方式生产 UI 代码，解放研发生产力的同时满足客户需求。

二、方案调研

为了避免重复造轮子，我们调研了行业上现有的 UI 自动化生成方案。主要分为两种：

Sketch 插件方案：

该方案是基于 Sketch 开发插件，利用 SketchAPI 读取出图层信息转换 DSL，主要代表作有 imgcook、Dapollo 等。

优势：从 SketchAPI 可以读取到非常详细的信息，足以生成高质量的界面代码。

劣势：要求效果图必须使用 Sketch 制作，并且对效果图会有一定的制图要求。

图片转代码方案：

该方案是通过经训练的深度神经网络，从截图或手稿直接生成 UI 代码，主要代表作有 pix2code、Sketch2Code 等。

优势：简单粗暴，通过截图或手绘就可以生成界面资源代码。

劣势：图层细节丢失，识别准确率欠佳、自适应不好。

调研总结：

• Sketch 插件方案更加适合工程化使用，图片转代码方案更加适合用于快速生产原型。

• 目前行业上并没有能完全满足车载导航业务使用的 UI 自动化解决方案。

基于以上调研结果，我们决定基于 Sketch 插件方案，自研适合高德汽车业务需求的 UI 自动化方案。

三、技术方案与实践

结合 Sketch 插件方案的工作流以及高德内部的人员体制，我们将 UI 自动化解决方案在高德内部的使用过程拆分成 4 大环节，如下图所示：

制作环节

提供效果图编辑的能力：

• 制作带有主题信息的控件库供设计师拖拽使用。

• 对生成环节需要的信息进行输入（比如布局、控件、动画等）。

生成环节

提供资源的生成能力：

• 生成 xml、drawable、png、asvg 等资源，同时打包成可执行程序，用于验证环节。

• 对生成资源进行性能优化（如控件智能合并、png 图片无损压缩，asvg 生成）。

验证环节

提供多设备、多分辨率的还原度精准验证能力：

• 效果图质量检测能力，提前发现效果图像素偏差，不符合设计规范等问题，降低后期成本。

• 布局意图标注能力，通过简单的布局意图标注后，能实现把效果图拉伸成任意分辨率，解决设计师和开发人员沟通不流畅问题，降低沟通成本。

• 对比验证能力，通过坐标对比、截图和效果图差分对比等方式，实现还原度的像素级验证，保障资源质量。

应用环节

客户端工程资源管理能力：

• 通过一系列工具链，简化资源对接成本（如资源导入工具、重复资源清理工具等）。

• 开发 DHMI 主题定制平台，提供给设计师或客户，实现可视化的快速修改客户端主题，自主验证的能力。满足客户不断增长的主题定制需求，实现千人千面。

四、技术难点

1、控件体系

Sketch 的图层只有 text、shape 两种类型，分别可以对应上 Android 的 TextView 和 ImageView，但是只有这两种控件无法满足业务需求。参考 Android 控件体系中基础控件+自定义控件的方式，我们对这两种类型图层进行组合+继承，得到两种新的控件类型。

基础控件：Android 原生控件集合，如 TextView、EditText、ProgressBar 等，能满足界面搭建的基本需求。

扩展控件: Android 自定义控件，又分为以下两类：

业务控件：用于解决 Sketch 静态设计无法满足的部分，如需要 canvas paint 的控件。设计师只需画出静态部分，让开发人员自由发挥，能满足界面设计上动态元素、复杂元素的需求；同时也能形成控件库积累。

主题控件：大多数情况作为底色色块，实现 App 换肤的能力，支持在 DHMI 主题平台上做主题样式编辑。控件之间也支持互相组合，如多个主题控件和基础控件可以组合成一个新的业务控件。

通过基础控件和扩展控件的搭配使用，在实际生产中证实，这套控件体系可以无限扩展，做到全覆盖，满足任意界面的搭建需求。

示例

基础控件：

业务控件：

2、布局体系

布局的选择

布局采用的是约束布局 ConstraintLayout。

优势：

• 扁平化，理论上一个层级可以完成复杂界面的设计，相比传统布局，性能会有很大的提升。

• 简单易懂，贴近 UED 界面设计思路。

• 通过正向推导与反向逆推，证明该布局可以替代 Android 平台目前所有的布局，支持搭建任意界面。

布局识别算法

布局识别算法是在设计稿上基于位置关系推算布局约束关系的一种算法。

布局识别的难点：

• 主观性太强，容易出现误识别，没有绝对的规律。

• 交互动态性如何识别。

• 识别出的布局需要能支持多分辨率适配（横屏、竖屏、宽屏、方屏）。

3、主题定制

由于车载导航面向的对象是车厂客户，不同的客户对于应用的 UI 或者主题是有不同需求的，也就是说针对不同客户，不同渠道的版本，需要有不同的应用主题。随着项目的增多，如果没有一个灵活，易管理，低成本的主题定制方案，那么这将是一个噩梦的开始。

传统的实现方案

DHMI 主题定制方案

具体实现如下

• 设计师在界面设计时，通过主题控件库拖拽的方式搭建界面。

• UI 自动化生成环节生成主题相关资源集成到客户端。

• DHMI 平台部署主要界面的关键场景。

• 设计师通过点哪改哪，实时预览的方式定制界面主题。

• 设计师自主出包还原度验收，全程无需研发参与。

五、小结

能力建设完成后，设计师和开发人员效率都得到极大提升。对于设计师，整体成本降低 50%以上，有助于设计规范更好的落地，省去标注和切图环节，精准的还原度验收，快速的主题定制。对于开发人员，UI 开发成本降低 80%以上，不用再操心如何开发 UI，只需关注资源如何对接，完善的资源管理工具链，低成本的版本迭代，主题定制 0 成本。