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

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"移动互联网时代，如何快速抓住用户眼球，提升视觉舒适度，强调品牌认知成为UI设计的核心诉求。而在日趋"},{"type":"text","marks":[{"type":"strong"}],"text":"精细化、复杂化"},{"type":"text","text":"及"},{"type":"text","marks":[{"type":"strong"}],"text":"多样化"},{"type":"text","text":"的UI设计面前，如何高效的把控还原度，让设计稿无损耗的落地到用户手机，成了设计和开发团队的焦点。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"让机器学会设计语言，用机器解放双手，爱奇艺移动开发团队秉承创新提效的理念，研磨了一套覆盖UI设计、UI标注、UI开发、UI调试、UI验收"},{"type":"text","marks":[{"type":"strong"}],"text":"全流程"},{"type":"text","text":"的产品，让整条流程规范化、自动化，提升了整体的"},{"type":"text","marks":[{"type":"strong"}],"text":"UI还原度和UI设计开发效率"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/56\/7c\/564dcb1e4b1aeac9dd3d76c63be4387c.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"鉴于UI设计、UI标注、UI开发等维度业界存在较为成熟的方案，本文将着重在"},{"type":"text","marks":[{"type":"strong"}],"text":"UI自动化验收维度"},{"type":"text","text":"，介绍爱奇艺移动开发团队在此方向上的探索与实践。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/26\/ce\/2644c998b1eac83c8d429bd35bfff7ce.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当我们的UI验收平台建设完成后，UI验收整体走上了规范化和自动化的道路。对于设计师，"},{"type":"text","marks":[{"type":"strong"}],"text":"提升了50%"},{"type":"text","marks":[{"type":"strong"},{"type":"strong"}],"text":"的UI验收效率，省去了UI测量和Bug标注环节，设计师可以快速精准的完成像素级UI验收；另外降低了设计师和工程师的"},{"type":"text","marks":[{"type":"strong"}],"text":"协作成本"},{"type":"text","text":"，让设计师和工程师不再反复验收修改；最终提高了移动端App的"},{"type":"text","marks":[{"type":"strong"}],"text":"UI质量"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们将按照"},{"type":"text","marks":[{"type":"strong"}],"text":"页面测量、页面验收、验收报告"},{"type":"text","text":"的顺序给大家分享下爱奇艺移动端在UI验收自动化规范化的经验，供大家参考借鉴，有想法建议可以在评论区进行留言。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/59\/c9\/5974cde4b5a58753d0dc48d968e577c9.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"页面测量"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何精准的发现控件并识别相关控件的"},{"type":"text","marks":[{"type":"strong"}],"text":"大小、宽高、背景色"},{"type":"text","text":"等各类属性？带着这个问题，爱奇艺移动客户端团队深入设计团队内部了解现有工作流程及核心关注点，结合现有的技术积淀探寻解决问题的最优方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于设计团队，控件测量需要达到100%的测量准确度，如果准确度达不到100%，那么就会导致另一种形式的反复验收与修改。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，我们综合评估了两种控件测量的方案："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Sketch插件+端验收SDK："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●"},{"type":"text","marks":[{"type":"strong"}],"text":"开发页面"},{"type":"text","text":"：在App中嵌入验收SDK，调用控件的API来测量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●"},{"type":"text","marks":[{"type":"strong"}],"text":"设计页面"},{"type":"text","text":"：通过Sketch插件来获取每个控件的数据。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"AI图像控件识别："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用图像识别算法从页面截图中识别和测量控件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/88\/27\/8845ede6741e7cdf2904880732681627.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"综上对比，尽管AI图像控件识别方案无需多端独立适配，但是其在控件精准识别和控件属性识别上暂时无法满足严苛的界面验收标准，所以我们最终在生产环境中采用了Sketch插件+端验收SDK的方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"页面验收"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"页面验收部分负责对页面进行验收，在进行页面验收时，我们有两种模式："},{"type":"text","marks":[{"type":"strong"}],"text":"个性化验收模式"},{"type":"text","text":"和"},{"type":"text","marks":[{"type":"strong"}],"text":"自动验收模式"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"个性化验收模式："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"点击开发页面和设计页面中匹配的控件，在右边栏中进行比对，勾选错误的地方，并上传保存。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/a9\/83\/a9e054778377f5547a7d0444157b2283.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"自动验收模式："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自动验收模式是用户框选出开发页面和设计页面中匹配的区域，通过一系列算法来自动验收匹配区域中的所有UI控件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/f1\/ed\/f1e0b784bf44fba215bc58bc350428ed.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"页面验收有两个难题："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.如何建立设计页面与开发页面中控件的"},{"type":"text","marks":[{"type":"strong"}],"text":"一对一关系"},{"type":"text","text":"。如上图所示，图二（设计页面）中的控件1应该与图一（开发页面）中哪个控件比较？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.如何确定控件之间的"},{"type":"text","marks":[{"type":"strong"}],"text":"间距关系"},{"type":"text","text":"。如上图所示，在验收控件B的间距时，应该使用间距B还是间距A？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果这两个难题无法解决，那么我们的验收自动化也就无法进行。所以我们总结了移动端UI界面的规律，结合开发页面和设计页面的数据特点，把页面验收拆分为了"},{"type":"text","marks":[{"type":"strong"}],"text":"预处理、关系建立、控件比对"},{"type":"text","text":"三个阶段。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/b6\/ea\/b601fb470a58b6a0a9636349605b1eea.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"预处理阶段："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"清理、统一、合并设计页面和开发页面的数据，抹平因为屏幕、字体、视图结构不同等原因造成的一系列差异。比如屏幕尺寸统一、冗余视图清理等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"关系建立阶段："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过专门设计的控件匹配算法和间距选择算法，建立开发页面与设计页面的控件之间的一对一关系和间距关系。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"控件匹配算法核心原理：综合控件位置、类型、相邻控件等信息，计算设计页面与开发页面中的控件之间的匹配度，通过匹配度确定一对一关系。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/df\/1e\/df8170b086cf9c1fa52e10d664ffc01e.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"间距选择算法核心原理：按照间距最小原则进行排序，依托排序结果计算当前控件与其他所有控件的间距，选取绝对值最小的间距，作为当前控件的间距。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面是两个算法的核心原理，在实际应用过程中，我们还根据业务的实际情况，做了一些调整，这里不再详细列出。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"控件对比阶段"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根据关系建立阶段得到的控件一对一关系和间距关系的数据，去比对每一个控件的样式和间距。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"两种模式的比较："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/f2\/e8\/f24a475d3ff6b5d358d5103829aec2e8.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"验收报告"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"验收完成之后，我们会根据验收结果，自动生成多维度可追踪的验收报告供工程师查看。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"验收报告包含以下信息："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●"},{"type":"text","marks":[{"type":"strong"}],"text":"问题优先级"},{"type":"text","text":"：通过优先级确定修复的先后顺序并根据提示进行修复"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●"},{"type":"text","marks":[{"type":"strong"}],"text":"问题说明"},{"type":"text","text":"：UI 验收时的实际样式和期望样式对比。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●"},{"type":"text","marks":[{"type":"strong"}],"text":"修复状态"},{"type":"text","text":"：工程师可以查看修复状态，并把已修复的控件设置为已修复状态，便于多人协作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"总结与规划"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"平台上线后，UI验收整体实现了规范化和自动化，在该平台加持下，UI验收提效"},{"type":"text","marks":[{"type":"strong"}],"text":"50%"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"后续一方面我们计划结合设计师和工程师的工作方式，继续完善整个UI验收平台，提升效率；另一方面不仅仅局限于UI验收环节，从UI设计到上线的整条链路出发，深入挖掘改进其中的流程，做到更加高效的设计与开发、更高质量的交付，从而提升整条链路的质量与效率，让技术改变我们的工作方式。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文转载自：爱奇艺技术产品团队（ID：iQIYI-TP）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文链接："},{"type":"link","attrs":{"href":"https:\/\/mp.weixin.qq.com\/s\/K9p8986Gq1DoQ1fUYivPrg","title":"xxx","type":null},"content":[{"type":"text","text":"效率提升50%，移动端UI自助验收在爱奇艺的探索与实践"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}