一、背景
汽車導航作為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平台目前所有的布局，支援搭建任意界面。
布局識别算法
布局識别算法是在設計稿上基于位置關系推算布局限制關系的一種算法。
布局識别的難點：
- 主觀性太強，容易出現誤識别，沒有絕對的規律。
- 互動動态性如何識别。
- 識别出的布局需要能支援多分辨率适配（橫屏、豎屏、寬屏、方屏）。
UI自動化技術在高德的實踐
3、主題定制
由于車載導航面向的對象是車廠客戶，不同的客戶對于應用的UI或者主題是有不同需求的，也就是說針對不同客戶，不同管道的版本，需要有不同的應用主題。随着項目的增多，如果沒有一個靈活，易管理，低成本的主題定制方案，那麼這将是一個噩夢的開始。
傳統的實作方案
DHMI主題定制方案
具體實作如下
- 設計師在界面設計時，通過主題控件庫拖拽的方式搭建界面。
- UI自動化生成環節生成主題相關資源內建到用戶端。
- DHMI平台部署主要界面的關鍵場景。
- 設計師通過點哪改哪，實時預覽的方式定制界面主題。
- 設計師自主出包還原度驗收，全程無需研發參與。
五、小結
能力建設完成後，設計師和開發人員效率都得到極大提升。對于設計師，整體成本降低50%以上，有助于設計規範更好的落地，省去标注和切圖環節，精準的還原度驗收，快速的主題定制。對于開發人員，UI開發成本降低80%以上，不用再操心如何開發UI，隻需關注資源如何對接，完善的資源管理工具鍊，低成本的版本疊代，主題定制0成本。