高德地圖技術團隊希望打造一套快速精準的UI解決方案，通過自動化的方式生產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成本。
