宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

导读：高德地图科技团队希望打造一套快速、精准的UI解决方案，自动化生产UI代码，解放研发；在满足客户需求的同时提高生产力。

1.背景作为一家ToB企业，汽车导航需要在功能和风格上满足不同汽车厂商的需求。针对这种情况，传统的UI开发方式基本上都是一对一的特殊定制。但这种方式往往需要500~600个人工日的工作投入，成为业务发展的重要瓶颈。因此，导航用户界面的快速定制化发展成为汽车导航业务用户界面发展的必然问题。

高德地图科技团队希望打造一个快速准确的UI解决方案，能够自动生成UI代码，解放研发；生产效率，同时满足客户需求。

二.方案研究为了避免重复造轮，我们调研了行业内现有的UI自动生成方案。主要有两种类型：

绘制插件方案：

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

优点：可以从SketchAPI中读取非常详细的信息，足以生成高质量的接口代码。

缺点：要求渲染必须由Sketch制作，对渲染会有一定的绘图要求。

图片转码方案：

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

优点：简单粗暴，界面资源代码可以截图或者手绘生成。

缺点：图层细节丢失，识别准确率不好，自适应不好。

调查摘要：

草图插件方案更适合工程使用，图片转代码方案更适合快速生产原型。目前行业内还没有一个UI自动化解决方案能够完全满足车载导航服务的需求。基于以上研究成果，我们决定基于Sketch插件解决方案，自主研究适合高德汽车业务需求的UI自动化解决方案。

三.技术解决方案与实践结合Sketch插件解决方案的工作流程和高德内部人事系统，我们将高德UI自动化解决方案的使用流程拆分为四个环节，如下图所示：

生产环节

提供渲染编辑的能力：制作一个带有主题信息的控件库，供设计人员拖动使用。输入生成过程中所需的信息(如布局、控件、动画等)。).

生成链接提供资源的生成能力：

生成xml、drawable、png、asvg等资源，并打包成可执行程序进行验证。优化生成资源的性能(如控件的智能组合、png图片的无损压缩、asvg生成)。验证环节提供多设备、多分辨率、精确的还原度验证能力：

效果图的质检能力，早期发现效果图像素偏差、不符合设计规范等问题，降低后期成本。布局意图标注能力，简单的布局意图标注后，可以将渲染拉伸到任意分辨率，解决设计者和开发者沟通不畅的问题，降低沟通成本。验证能力，通过坐标对比、截图、效果图差异对比等方式。实现还原度的像素级验证，保证资源质量。应用链接客户端工程资源管理能力：

通过一系列工具链(如资源导入工具、重复资源清理工具等)简化资源对接成本。).开发DHMI主题定制平台，提供给设计师或客户，实现快速修改客户端主题和自我验证的可视化能力。满足客户日益增长的主题定制需求，实现千人千面。四.技术困难

1.控制系统

2.布局系统

3.主题定制

点击“了解更多”技术难点。

关键词：机器学习/深度学习、编解码、算法、前端开发、数据可视化、定位技术