AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

效率提升 50%,移动端 UI 自助验收在爱奇艺的探索与实践

  • 2020-12-28
  • 本文字数:1945 字

    阅读完需:约 6 分钟

效率提升50%,移动端UI自助验收在爱奇艺的探索与实践

移动互联网时代,如何快速抓住用户眼球,提升视觉舒适度,强调品牌认知成为 UI 设计的核心诉求。而在日趋精细化、复杂化多样化的 UI 设计面前,如何高效的把控还原度,让设计稿无损耗的落地到用户手机,成了设计和开发团队的焦点。


让机器学会设计语言,用机器解放双手,爱奇艺移动开发团队秉承创新提效的理念,研磨了一套覆盖 UI 设计、UI 标注、UI 开发、UI 调试、UI 验收全流程的产品,让整条流程规范化、自动化,提升了整体的 UI 还原度和 UI 设计开发效率



鉴于 UI 设计、UI 标注、UI 开发等维度业界存在较为成熟的方案,本文将着重在 UI 自动化验收维度,介绍爱奇艺移动开发团队在此方向上的探索与实践。



当我们的 UI 验收平台建设完成后,UI 验收整体走上了规范化和自动化的道路。对于设计师,提升了 50%的 UI 验收效率,省去了 UI 测量和 Bug 标注环节,设计师可以快速精准的完成像素级 UI 验收;另外降低了设计师和工程师的协作成本,让设计师和工程师不再反复验收修改;最终提高了移动端 App 的 UI 质量


接下来我们将按照页面测量、页面验收、验收报告的顺序给大家分享下爱奇艺移动端在 UI 验收自动化规范化的经验,供大家参考借鉴,有想法建议可以在评论区进行留言。


页面测量


如何精准的发现控件并识别相关控件的大小、宽高、背景色等各类属性?带着这个问题,爱奇艺移动客户端团队深入设计团队内部了解现有工作流程及核心关注点,结合现有的技术积淀探寻解决问题的最优方案。


对于设计团队,控件测量需要达到 100%的测量准确度,如果准确度达不到 100%,那么就会导致另一种形式的反复验收与修改。


所以,我们综合评估了两种控件测量的方案:


Sketch 插件+端验收 SDK:


开发页面:在 App 中嵌入验收 SDK,调用控件的 API 来测量。


设计页面:通过 Sketch 插件来获取每个控件的数据。


AI 图像控件识别:


使用图像识别算法从页面截图中识别和测量控件。



综上对比,尽管 AI 图像控件识别方案无需多端独立适配,但是其在控件精准识别和控件属性识别上暂时无法满足严苛的界面验收标准,所以我们最终在生产环境中采用了 Sketch 插件+端验收 SDK 的方案。


页面验收


页面验收部分负责对页面进行验收,在进行页面验收时,我们有两种模式:个性化验收模式自动验收模式


个性化验收模式:


点击开发页面和设计页面中匹配的控件,在右边栏中进行比对,勾选错误的地方,并上传保存。


自动验收模式:


自动验收模式是用户框选出开发页面和设计页面中匹配的区域,通过一系列算法来自动验收匹配区域中的所有 UI 控件。


页面验收有两个难题:


1.如何建立设计页面与开发页面中控件的一对一关系。如上图所示,图二(设计页面)中的控件 1 应该与图一(开发页面)中哪个控件比较?


2.如何确定控件之间的间距关系。如上图所示,在验收控件 B 的间距时,应该使用间距 B 还是间距 A?


如果这两个难题无法解决,那么我们的验收自动化也就无法进行。所以我们总结了移动端 UI 界面的规律,结合开发页面和设计页面的数据特点,把页面验收拆分为了预处理、关系建立、控件比对三个阶段。


预处理阶段:


清理、统一、合并设计页面和开发页面的数据,抹平因为屏幕、字体、视图结构不同等原因造成的一系列差异。比如屏幕尺寸统一、冗余视图清理等。


关系建立阶段:


通过专门设计的控件匹配算法和间距选择算法,建立开发页面与设计页面的控件之间的一对一关系和间距关系。


控件匹配算法核心原理:综合控件位置、类型、相邻控件等信息,计算设计页面与开发页面中的控件之间的匹配度,通过匹配度确定一对一关系。



间距选择算法核心原理:按照间距最小原则进行排序,依托排序结果计算当前控件与其他所有控件的间距,选取绝对值最小的间距,作为当前控件的间距。


上面是两个算法的核心原理,在实际应用过程中,我们还根据业务的实际情况,做了一些调整,这里不再详细列出。


控件对比阶段


根据关系建立阶段得到的控件一对一关系和间距关系的数据,去比对每一个控件的样式和间距。


两种模式的比较:


验收报告


验收完成之后,我们会根据验收结果,自动生成多维度可追踪的验收报告供工程师查看。


验收报告包含以下信息:


问题优先级:通过优先级确定修复的先后顺序并根据提示进行修复


问题说明:UI 验收时的实际样式和期望样式对比。


修复状态:工程师可以查看修复状态,并把已修复的控件设置为已修复状态,便于多人协作。


总结与规划


平台上线后,UI 验收整体实现了规范化和自动化,在该平台加持下,UI 验收提效 50%


后续一方面我们计划结合设计师和工程师的工作方式,继续完善整个 UI 验收平台,提升效率;另一方面不仅仅局限于 UI 验收环节,从 UI 设计到上线的整条链路出发,深入挖掘改进其中的流程,做到更加高效的设计与开发、更高质量的交付,从而提升整条链路的质量与效率,让技术改变我们的工作方式。


本文转载自:爱奇艺技术产品团队(ID:iQIYI-TP)

原文链接:效率提升50%,移动端UI自助验收在爱奇艺的探索与实践


2020-12-28 13:003172

评论

发布
暂无评论
发现更多内容

性能优化:空调能耗节能的强化学习探索之路

鲸品堂

性能调优

思购趣拼APP系统开发内容

金九银十吃透这份redis笔记文档,让你超过90%的面试者

Java redis 架构 面试

三伏天口腔上火有口气?用这款牙膏降降火

Geek_50a546

帮你理清学习一个知识点的过程

加百利

大前端 7月日更 primise

CloudQuery 使用教程之 No.5 组织架构

BinTools图尔兹

sql dba 国产数据库 运维开发 数据库管控工具

CGPay Pro钱包APP系统开发需求

了不起的开发者 丨 有奖征文活动来啦!

百度开发者中心

百度 开发者 征文

2021世界人工智能大会召开,百度飞桨人工智能产业赋能中心于上海浦东启动运营

百度大脑

人工智能 大数据 百度 物联网

FIL币价走势如何?FIL币价格未来多少钱一枚?

优米心选软件系统开发资料

VGC挖矿APP系统开发内容

Vue进阶(幺玖肆):JavaScript解决浮点数精度丢失问题

No Silver Bullet

jquery Vue 浮点数 7月日更

保安小王分享:四面字节跳动,终拿Offer,只有努力,方能成功

Java架构师迁哥

完成GitHub个人主页设计,只需要这三步

百度开发者中心

GitHub 主页

云服务器、虚拟主机以及服务器如何定义的?三者有什么区别?

行云管家

云计算 服务器 云服务器 虚拟主机

从零开始学习3D可视化之摄像机自由飞行

ThingJS数字孪生引擎

大前端 可视化 3D 数字孪生

视频云的全景蓝图,想象力的允诺之地

阿里云CloudImagine

阿里云 计算机视觉 云视频 超视频化 图像增强

RAID 概念- RAID-0-1-5-10 的工作原理

学神来啦

Linux 运维自动化 linux运维 raid

网络攻防学习笔记 Day73

穿过生命散发芬芳

网络攻防 7月日更

容器安全最佳实践入门

百度开发者中心

容器

国内报价-APP时间加速

Qunar技术沙龙

优化逻辑 优化 优化技巧 优化业务 报价

双非本化学跨专业,投岗阿里/滴滴后端三面,最终拿下offer

Java 面试

手把手教你,从零开始实战搭建SpringCloud Alibaba!这份笔记太牛了!

Java 架构 面试 微服务

黔唐百宜软件系统开发内容

了解腾讯京东字节等面试风格,掌握财富钥匙,大厂前端面试稳啦!

前端依依

程序员 面试 大前端 经验分享

首个SSRF漏洞开篇学习

网络安全学海

网络安全 信息安全 渗透测试 漏洞分析 SSRF

等保二级与等保三级定级标准是怎样?哪个级别更高?

行云管家

网络安全 数据安全 等保 等级保护

加电软件系统开发详情

Axie Infinity区块链游戏系统开发技术

薇電13242772558

区块链

疫情下的在线教育行业未来发展

anyRTC开发者

音视频 WebRTC 在线教育 视频直播 双师课堂

效率提升50%,移动端UI自助验收在爱奇艺的探索与实践_移动_爱奇艺技术产品团队_InfoQ精选文章