效率提升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}}]}