写点什么

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

评论

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

Tiktok短视频搬运运营干货技巧

Geek_2d6073

数字化安全生产平台 DPS 重磅发布

阿里巴巴云原生

阿里云 云原生 数字化

刷了三个月 leetcode 算法,顺利拿下百度、阿里等大厂的 offer

钟奕礼

Java 程序员 java面试 java编程

MySQL的存储引擎及常用数据类型详解

C++后台开发

MySQL 数据库 中间件 后端开发 C++开发

AI赋能音乐创作,人人都是音视频创作者

HarmonyOS SDK

HMS Core

「案例分享」研发效能提升之第一性原理

京东科技开发者

redis flink 研发管理 研发效能 软件开发技术的第一性原理

新发现,新挑战,技术出海的机遇与挑战丨PingCAP DevCon 2022 出海专场

PingCAP

出海

AirServer2023个人免费版本下载

茶色酒

AirServer2023

开源大数据热力报告:StarRocks摘得数据查询与分析方向增速第一

StarRocks

数据库

听说,清华毕业大牛分享出Redis实战视频及文档,共2.3G

小二,上酒上酒

Java redis 学习路线

最佳实践|用腾讯云AI文字识别对混贴票据识别

牵着蜗牛去散步

人工智能 腾讯云 腾讯 文字识别 OCR

既快又稳还方便,火山引擎VeDI的这款产品解了分析师的愁

字节跳动数据平台

大数据 数据分析

我说用count(*)统计行数,面试官让我回去等消息...

小小怪下士

Java sql 程序员

有位大牛终于把珍藏多年的算法视频给分享出来了,总共3.81G

小二,上酒上酒

算法 数据结构与算法 左程云

前端培训学习的前景怎么样

小谷哥

业务畅行海外,如何做到安全第一

火线安全

上班干,下班学!这份 Java 面试八股文涵盖 20 多个技术点

钟奕礼

Java 程序员 java面试 java编程

想要做好代码质量,如何破局?

京东科技开发者

代码质量 系统 代码优化

Camtasia2023全新版下载及功能介绍讲解

茶色酒

Camtasia2023

大数据培训后找不到工作的原因有哪些?

小谷哥

膜拜!华为18级工程师用349页构建高可用Linux服务器,其实并不难

小二,上酒上酒

Java Linux 学习 华为 运维

前端培训程序员失业后就业方向有哪些

小谷哥

Java 八股文能不背吗?Java 面试都只是背答案吗?

钟奕礼

Java 程序员 java面试 java 编程

阿里云易立:以增效促降本,容器服务全面进入智能化时代

阿里巴巴云原生

阿里云 云原生 容器服务

小令观点 | 需要留存用户的身份证照片?想清楚这三点了再做……

令牌云数字身份

数字身份 身份认证 加密技术 可信

技术分享| 快对讲视频调度功能说明

anyRTC开发者

监控 快对讲 语音对讲 视频对讲 视频回传

异常检测算法分类总结(含常用开源数据集)

云智慧AIOps社区

人工智能 机器学习 深度学习 异常检测 算法模型

融云全球社交泛娱乐洞察,互联网社交换挡期的「社区产品」机遇

融云 RongCloud

社交 社区

云原生加速器企业维格表创始人陈霈霖:提供人人可用的数字化转型全新方案,真正驱动组织创新

阿里巴巴云原生

阿里云 云原生 维格表

高级Java面试经验总结:多家大厂简历优化+面试题目+面经+薪酬等

钟奕礼

Java 程序员 java面试 java编程

2023最新FL Studio中文版64位安装包下载教程

茶色酒

FL Studio FL Studio 21

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