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成本。

相关文章

车载导航应用中基于Sketch UI主题定制方案的实现

车联网服务non-RESTful架构改造实践

IoT时代：Wi-Fi“配网”技术剖析总结

云控平台的双向音频解决方案

原文始发于微信公众号（高德技术）：UI自动化技术在高德的实践