限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

评论

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

O-Star | 矩阵起源2023届校招生入职啦~

MatrixOrigin

数据库 云原生 HTAP MatrixOrigin MatrixOne

企业数智化底座赋能国资国企数智监管

用友BIP

数智底座 国资国企

倒计时 1 天!21 位大咖 11个议题,龙蜥社区走进 Intel MeetUp 即将在上海召开

OpenAnolis小助手

操作系统 芯片 intel Meetup 龙蜥社区

一文了解电商大促系统的高可用保障思路 | 京东云技术团队

京东科技开发者

产品 高可用 研发 电商大促 企业号 7 月 PK 榜

实时社群技术专题(三):百万级成员实时社群技术实现(关系系统篇)

JackJiang

网络编程 即时通讯 IM

装备制造行业数智人力应从何入手?超实用干货来了!

用友BIP

人力资源

关于互联网产业的一些思考

用友BIP

产业互联网

全面解析JMeter环境变量配置步骤

Liam

程序员 软件测试 测试 Jmeter 测试工具

绘出「星辰大海」:华为云Astro轻应用新手指南-第一章

云计算 华为 开发者 华为云

绘出「星辰大海」:华为云Astro轻应用新手指南-第二章

云计算 开发者 软件开发 华为云

矩阵起源通过ISO 三大体系认证!

MatrixOrigin

数据库 超融合 HTAP MatrixOrigin MatrixOne

零基础能学习Java吗,看了这篇文章你就知道!

java易二三

Spring高手之路6——Bean生命周期的扩展点:BeanPostProcessor

砖业洋__

spring ioc BeanPostProcessor Bean生命周期扩展点 后置处理器

日增320TB数据,从ClickHouse迁移至ByConity后,查询性能十分稳定!

字节跳动开源

大数据 开源 云原生 Clickhouse 数仓

Ui2Code+ChatGPT助力低代码搭建 | 京东云技术团队

京东科技开发者

低代码 ChatGPT 企业号 7 月 PK 榜 Ui2Code

Spring高手之路8——Spring Bean模块装配的艺术:@Import详解

砖业洋__

@Import 模块装配 Import注解 ImportSelector Spring动态装配

低代码技术分享官丨浅谈DevOps实践过程

inBuilder低代码平台

DevOps

MQTT 与 Kafka|物联网消息与流数据集成实践

EMQ映云科技

kafka 物联网 mqtt 流数据

Nautilus Chain 主网上线,创世 ZBC 质押即将开启

西柚子

标准化,企业财务共享中心的灵魂内核(下)——领先实践分享

用友BIP

财务共享

7.25齐聚西安!助推国资国企建设一流司库管理体系

用友BIP

全球司库 国资国企

Spring高手之路7——事件机制与监听器的全面探索

砖业洋__

spring 观察者模式 事件机制 Spring生命周期 Spring 监听

Spring高手之路9——掌握Spring条件装配的秘密武器

砖业洋__

spring Spring配置 @Profile @Conditional 条件装配

DataArts Studio实践丨通过Rest Client 接口读取RESTful接口数据的能力

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

Spring高手之路4——深度解析Spring内置作用域及其在实践中的应用

砖业洋__

spring Singleton prototype Spring作用域 Spring原型作用域

抽象语法树AST必知必会 | 京东物流技术团队

京东科技开发者

前端 AST 抽象语法树 企业号 7 月 PK 榜

免费又好用的MES系统——万界星空MES系统重磅来袭

万界星空科技

开源

Spring高手之路5——彻底掌握Bean的生命周期

砖业洋__

Spring Bean Spring Bean生命周期 @PostConstruct InitializingBean DisposableBean

LigaAI:从效率、度量和价值维度,成为研发团队的智能医生

LigaAI

研发管理 SaaS 研发协作平台 TO B 企业号 7 月 PK 榜

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