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成本。
UI自动化技术在高德的实践的更多相关文章
- 高德SD地图数据生产自动化技术的路线与实践(道路篇)
一.背景及现状 近些年,国内道路交通及相关设施的基础建设日新月异.广大用户日常出行需求旺盛,对所使用到的电子地图产品的数据质量和现势性提出了更高的要求.传统的地图数据采集和生产过程,即通过采集设备实地 ...
- Android手机QQ的UI自动化实践
本文首发于果的博客园,原文链接:https://www.cnblogs.com/yuxiuyan/p/14992682.html, 转载请注明出处. UI自动化 我们为什么要搞UI自动化 可能很多同学 ...
- 微信小程序UI自动化:实践之后的记录01-选择工具/框架
目录 1. 前言 2. 工具/框架/库选择 2.1 miniprogram-automator官方介绍(摘自官方哈) 小程序自动化 特性 2.2 minium官方介绍 特性 3. 如何选择 4. 对应 ...
- 【Android测试】UI自动化代码优化之路(临时发布, 随时删除)
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5993622.html 关于UI自动化的抱怨 听过不少人这样 ...
- 【Android测试】UI自动化代码优化之路
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5993622.html 关于UI自动化的抱怨 听过不少人这样 ...
- 阿里CI/CD、DevOps、分层自动化技术
原文地址:http://www.infoq.com/cn/news/2017/01/alibaba-yunxiao-cicd-devops 在互联网时代,产品快速迭代的重要性不言而喻.不管是传统企业还 ...
- UI自动化,你值得拥有
去年春节联欢晚会,为了那张“敬业福”,全家都卯足了劲儿“咻一咻”,连节目都顾不上看了.当时我就想,要是能自动化该多好,不停点击屏幕,屏幕不疼手还疼呢,何况还不好分心,生怕错过了“敬业福”.玩“咻一咻” ...
- Appium UI自动化的那些梗
@作者 彭海波 转载请注明出处 前言 由于需求的快速迭代和敏捷测试的要求,在测试过程中引入自动化成为必不可少的手段.作为一个互联网测试团队,我们自然也引入了自动化测试这个环节.在众多的测试框架中,我们 ...
- 洗清UI自动化鸡肋说的不白之冤
人类文明发展的一个重要标识是工具的诞生,当人类开始制作工具来提高生产力时,就逐渐拉开了与其他生物的距离.曾在2013年,<Google如何测试软件>中提到的分层自动化金字塔,轰动业界.而在 ...
随机推荐
- vijos 小胖守皇宫
点击打开题目 树形DP 显然会想到某个点放或不放守卫来定义状态,但在不放的情况下,需要分类讨论是父亲放还是一个儿子放,于是定义以下状态: f[root][0]表示自己不放,父亲也不放 f[root][ ...
- AMD R5 2400G插帧教程
最近买的小主机带的是AMD R5 2400G显卡,支持AMD的插帧技术,Sandeepin肯定要体验一把效果. BlueskyFRC 按照网上的教程配置,似乎2400G显卡驱动里没有AMD Fluid ...
- python读取json文件
比如下图json数据,场景需要读取出wxid这项数据,然后传给后面的函数去使用 具体的脚本为 import json f =open('d:\\1024.json',encoding='utf-8') ...
- Dubbo入门到实战
前沿:在当下流行的分布式架构中Dubbo是非常流行的一门技术,借着这几天有空学习学习,并在后面的项目中进行实战,为后面的分布式项目做铺垫. Dubbox简介 Dubbox 是一个分布式服务框架,其前身 ...
- java 编程小知识点
--------------------------------- 时间不多了,抓紧做自己喜欢的事情 1. 使用位运算 & 来判断一个数是否是奇数.偶数的速度很快 (a & 1 ) = ...
- Tomcat异常:UnsupportedClassVersionError unsupported major.minor version 51.0 unable to load class [dup
案例 今天把项目换成了jdk1.8,启动tomcat报如下异常: UnsupportedClassVersionError unsupported major.minor version 51.0 u ...
- 批量解析域名为IP地址的python脚本
脚本如下: #!/usr/bin/env python #coding:utf- import os,sys from socket import gethostbyname DOMAIN= &quo ...
- django登录页面优化
环境准备 1.python3.6 2.django2.0+ 3.bootstrap3 后台代码 #创建login_check视图函数,用来处理登录 def login_action(request): ...
- GetModuleFileNameEx遍历获取64bit程序路径失败的一种解决方法(Win7-64-bit)
问题: 32位程序在64位系统上调用GetModuleFileNameEx()遍历获取64位进程的全路径失败,得到的路径都为空. 根据官方的说法: For the best results use t ...
- 20194653 面向对象基础3——static、this、包总结
题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参数 ...