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

当我们的 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 界面的规律，结合开发页面和设计页面的数据特点，把页面验收拆分为了预处理、关系建立、控件比对三个阶段。

预处理阶段：

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

关系建立阶段：

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

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

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

最后

上面这些公司都是时下最受欢迎的互联网大厂，他们的职级、薪资、福利也都讲的差不多了，相信大家都是有梦想和野心的人，心里多少应该都有些想法。

也相信很多人也都在为即将到来的金九银十做准备，也有不少人的目标都是这些公司。

我这边有不少朋友都在这些厂工作，其中也有很多人担任过面试官，上面的资料也差不多都是从朋友那边打探来的。除了上面的信息，我这边还有这些大厂近年来的面试真题及解析，以及一些朋友出于兴趣和热爱一起整理的Android时下热门知识点的学习资料。

部分文件：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！