UI自動化技術在高德的實踐

一、背景 汽車導航作為ToB業務，需要滿足不同汽車廠商在功能和風格上體現各自特色的需求。針對這種情況，傳統的UI開發方式，基本上是一對一的特別定製。但是這種方式動輒就要500~600人日的工作量投入，成為業務發展的重要瓶頸。因此，能夠對導航UI進行快速定製開發，成為汽車導航業務UI開發的必解課題。

高德地圖技術團隊希望打造一套快速精準的UI解決方案，通過自動化的方式生產UI程式碼，解放研發生產力的同時滿足客戶需求。

二、方案調研 為了避免重複造輪子，我們調研了行業上現有的UI自動化生成方案。主要分為兩種：

Sketch外掛方案：

該方案是基於Sketch開發外掛，利用SketchAPI讀取出圖層資訊轉換DSL，主要代表作有imgcook、Dapollo等。

優勢：從SketchAPI可以讀取到非常詳細的資訊，足以生成高質量的介面程式碼。

劣勢：要求效果圖必須使用Sketch製作，並且對效果圖會有一定的製圖要求。

圖片轉程式碼方案：

該方案是通過經訓練的深度神經網路，從截圖或手稿直接生成UI程式碼，主要代表作有pix2code、Sketch2Code等。

優勢：簡單粗暴，通過截圖或手繪就可以生成介面資原始碼。

劣勢：圖層細節丟失，識別準確率欠佳、自適應不好。

調研總結：

• Sketch外掛方案更加適合工程化使用，圖片轉程式碼方案更加適合用於快速生產原型。

• 目前行業上並沒有能完全滿足車載導航業務使用的UI自動化解決方案。

基於以上調研結果，我們決定基於Sketch外掛方案，自研適合高德汽車業務需求的UI自動化方案。

三、技術方案與實踐 結合Sketch外掛方案的工作流以及高德內部的人員體制，我們將UI自動化解決方案在高德內部的使用過程拆分成4大環節，如下圖所示：

製作環節

• 提供效果圖編輯的能力：

• 製作帶有主題資訊的控制元件庫供設計師拖拽使用。

對生成環節需要的資訊進行輸入（比如佈局、控制元件、動畫等）。

生成環節 提供資源的生成能力：

• 生成xml、drawable、png、asvg等資源，同時打包成可執行程式，用於驗證環節。

• 對生成資源進行效能優化（如控制元件智慧合併、png圖片無失真壓縮，asvg生成）。

驗證環節 提供多裝置、多解析度的還原度精準驗證能力：

• 效果圖質量檢測能力，提前發現效果影像素偏差，不符合設計規範等問題，降低後期成本。

• 佈局意圖示註能力，通過簡單的佈局意圖示註後，能實現把效果圖拉伸成任意解析度，解決設計師和開發人員溝通不流暢問題，降低溝通成本。

• 對比驗證能力，通過座標對比、截圖和效果圖差分對比等方式，實現還原度的畫素級驗證，保障資源質量。

應用環節 客戶端工程資源管理能力：

• 通過一系列工具鏈，簡化資源對接成本（如資源匯入工具、重複資源清理工具等）。

• 開發DHMI主題定製平臺，提供給設計師或客戶，實現視覺化的快速修改客戶端主題，自主驗證的能力。滿足客戶不斷增長的主題定製需求，實現千人千面。

四、技術難點

1、控制元件體系

Sketch的圖層只有text、shape兩種型別，分別可以對應上Android的TextView和ImageView，但是隻有這兩種控制元件無法滿足業務需求。參考Android控制元件體系中基礎控制元件+自定義控制元件的方式，我們對這兩種型別圖層進行組合+繼承，得到兩種新的控制元件型別。

基礎控制元件：Android原生控制元件集合，如TextView、EditText、ProgressBar等，能滿足介面搭建的基本需求。

擴充套件控制元件: Android自定義控制元件，又分為以下兩類：

業務控制元件：用於解決Sketch靜態設計無法滿足的部分，如需要canvas paint的控制元件。設計師只需畫出靜態部分，讓開發人員自由發揮，能滿足介面設計上動態元素、複雜元素的需求；同時也能形成控制元件庫積累。

主題控制元件：大多數情況作為底色色塊，實現App換膚的能力，支援在DHMI主題平臺上做主題樣式編輯。控制元件之間也支援互相組合，如多個主題控制元件和基礎控制元件可以組合成一個新的業務控制元件。

通過基礎控制元件和擴充套件控制元件的搭配使用，在實際生產中證實，這套控制元件體系可以無限擴充套件，做到全覆蓋，滿足任意介面的搭建需求。

示例

基礎控制元件：

業務控制元件：

2、佈局體系

佈局的選擇

佈局採用的是約束佈局ConstraintLayout。

優勢：

• 扁平化，理論上一個層級可以完成複雜介面的設計，相比傳統佈局，效能會有很大的提升。

• 簡單易懂，貼近UED介面設計思路。

• 通過正向推導與反向逆推，證明該佈局可以替代Android平臺目前所有的佈局，支援搭建任意介面。

佈局識別演算法

佈局識別演算法是在設計稿上基於位置關係推算佈局約束關係的一種演算法。

佈局識別的難點：

• 主觀性太強，容易出現誤識別，沒有絕對的規律。

• 互動動態性如何識別。

• 識別出的佈局需要能支援多解析度適配（橫屏、豎屏、寬屏、方屏）。

  

3、主題定製

由於車載導航面向的物件是車廠客戶，不同的客戶對於應用的UI或者主題是有不同需求的，也就是說針對不同客戶，不同渠道的版本，需要有不同的應用主題。隨著專案的增多，如果沒有一個靈活，易管理，低成本的主題定製方案，那麼這將是一個噩夢的開始。

傳統的實現方案

DHMI主題定製方案

具體實現如下

• 設計師在介面設計時，通過主題控制元件庫拖拽的方式搭建介面。

• UI自動化生成環節生成主題相關資源整合到客戶端。

• DHMI平臺部署主要介面的關鍵場景。

• 設計師通過點哪改哪，實時預覽的方式定製介面主題。

• 設計師自主出包還原度驗收，全程無需研發參與。

五、小結 能力建設完成後，設計師和開發人員效率都得到極大提升。對於設計師，整體成本降低50%以上，有助於設計規範更好的落地，省去標註和切圖環節，精準的還原度驗收，快速的主題定製。對於開發人員，UI開發成本降低80%以上，不用再操心如何開發UI，只需關注資源如何對接，完善的資源管理工具鏈，低成本的版本迭代，主題定製0成本。