对中国开发者最具吸引力的科技企业有哪些?快来为你 pick 的企业投票! 了解详情
写点什么

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

2020 年 12 月 28 日

效率提升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:00882

评论

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

学习新语言步骤(有其他语言基础前提)

周周

区块链即时通讯系统开发方案,IM聊天社交软件开发

v16629866266

Spring中@Import的作用

张健

CSS11 - 浮动

桃夭十一里

html/css

初识 D3.js :打造专属可视化

vivo互联网技术

JavaScript 数据分析 可视化 图表 D3

前端代码书写规范

桃夭十一里

前端 html/css

anyRTC-语音连麦demo上线

anyRTC开发者

音视频 WebRTC 直播 实时语音 语音聊天室

Mobileye的创新科技与方案将助力自动驾驶汽车畅行世界、惠及大众

intel001

SpringCloud 从入门到精通 08--- Eureka集群

Felix

对于我们程序员来说,基本面是什么呢?

Java架构师迁哥

从根上理解高性能、高并发(四):深入操作系统,彻底理解同步与异步

JackJiang

网络编程 高并发 高性能 即时通讯

2020DevOps状态报告

禅道项目管理

DevOps 运维 开发 趋势 自动化测试

CodeDay#5 启动报名| 带你深入探索支付宝终端动态化实践

蚂蚁集团移动开发平台 mPaaS

小程序 活动专区 mPaaS 技术盘点

浪潮云防勒索一站式解决方案,让勒索病毒“上云”无门

浪潮云

产品推荐

关于2020 我有12个关键词

浪潮云

阅读

Python 使用SQLServer

Tango

七日更

云原生动态周报 |华为云主导抗疫药物筛选科研成果"神农项目"登上国际化学顶刊封面

华为云原生团队

GitHub 疫情 云原生 Prometheus 华为云

链上智能合约APP开发|链上智能合约系统软件开发

开發I852946OIIO

系统开发

致ClickHouse用户的一封信

DorisDB

数据库 大数据 数据分析 OLAP Clickhouse

智慧公安情报信息研判系统开发方案,重点人员管控平台搭建

WX13823153201

DevSecOps:把合规融入DevOps

啸天

DevOps 安全 法律 DevSecOps 应用安全

即构推出低延迟直播产品L3,可将直播延迟降到1s

ZEGO即构

2020DevOps状态报告——平台模型:扩展DevOps的新方法

禅道项目管理

DevOps 运维 开发 趋势 自动化测试

关于“存在”的一点思考

石君

28天写作 量子 世界为何存在

大数据知识专栏 - Zookeeper的Shell操作

小马哥

大数据 zookeeper 大数据技术 ZooKeeper原理 28天写作

CSS12 - 清除浮动

桃夭十一里

html/css

华为云张昆:支持全场景全业务,GaussDB加速企业数字化转型

华为云开发者社区

数据库

重学JS | 异步编程 Promise

梁龙先森

前端 编程语言 28天写作

再谈跨界 互联网+的建筑行业

张老蔫

28天写作

专科出身Java开发,2年进入苏宁,5年跳槽阿里,我晋升这么快的秘诀是什么?

Java架构追梦

Java 阿里巴巴 面试 架构师 成长路线

用技术的方式,在UI设计稿中设置随机码,保证高清

行者AI

Python

滴滴 Logi 日志管理与分析平台

滴滴 Logi 日志管理与分析平台

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