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

1、背景

汽車導航做爲ToB業務，須要知足不一樣汽車廠商在功能和風格上體現各自特點的需求。針對這種狀況，傳統的UI開發方式，基本上是一對一的特別定製。可是這種方式動輒就要500~600人日的工做量投入，成爲業務發展的重要瓶頸。所以，可以對導航UI進行快速定製開發，成爲汽車導航業務UI開發的必解課題。

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

2、方案調研

爲了不重複造輪子，咱們調研了行業上現有的UI自動化生成方案。主要分爲兩種：

Sketch插件方案：

該方案是基於Sketch開發插件，利用SketchAPI讀取出圖層信息轉換DSL，主要表明做有imgcook、Dapollo等。

優點：從SketchAPI能夠讀取到很是詳細的信息，足以生成高質量的界面代碼。

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

圖片轉代碼方案：

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

優點：簡單粗暴，經過截圖或手繪就能夠生成界面資源代碼。

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

調研總結：

• Sketch插件方案更加適合工程化使用，圖片轉代碼方案更加適合用於快速生產原型。
• 目前行業上並無能徹底知足車載導航業務使用的UI自動化解決方案。

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

3、技術方案與實踐

結合Sketch插件方案的工做流以及高德內部的人員體制，咱們將UI自動化解決方案在高德內部的使用過程拆分紅4大環節，以下圖所示：

製做環節

• 提供效果圖編輯的能力：
• 製做帶有主題信息的控件庫供設計師拖拽使用。

對生成環節須要的信息進行輸入（好比佈局、控件、動畫等）。

生成環節

提供資源的生成能力：

• 生成xml、drawable、png、asvg等資源，同時打包成可執行程序，用於驗證環節。
• 對生成資源進行性能優化（如控件智能合併、png圖片無損壓縮，asvg生成）。

驗證環節

提供多設備、多分辨率的還原度精準驗證能力：

• 效果圖質量檢測能力，提早發現效果圖像素誤差，不符合設計規範等問題，下降後期成本。
• 佈局意圖標註能力，經過簡單的佈局意圖標註後，能實現把效果圖拉伸成任意分辨率，解決設計師和開發人員溝通不流暢問題，下降溝通成本。
• 對比驗證能力，經過座標對比、截圖和效果圖差分對比等方式，實現還原度的像素級驗證，保障資源質量。

應用環節

客戶端工程資源管理能力：

• 經過一系列工具鏈，簡化資源對接成本（如資源導入工具、重複資源清理工具等）。
• 開發DHMI主題定製平臺，提供給設計師或客戶，實現可視化的快速修改客戶端主題，自主驗證的能力。知足客戶不斷增加的主題定製需求，實現千人千面。

4、技術難點

一、控件體系

Sketch的圖層只有text、shape兩種類型，分別能夠對應上Android的TextView和ImageView，可是隻有這兩種控件沒法知足業務需求。參考Android控件體系中基礎控件+自定義控件的方式，咱們對這兩種類型圖層進行組合+繼承，獲得兩種新的控件類型。

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

擴展控件: Android自定義控件，又分爲如下兩類：

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

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

經過基礎控件和擴展控件的搭配使用，在實際生產中證明，這套控件體系能夠無限擴展，作到全覆蓋，知足任意界面的搭建需求。

示例

基礎控件：

業務控件：

二、佈局體系

佈局的選擇

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

優點：

• 扁平化，理論上一個層級能夠完成複雜界面的設計，相比傳統佈局，性能會有很大的提高。
• 簡單易懂，貼近UED界面設計思路。
• 經過正向推導與反向逆推，證實該佈局能夠替代Android平臺目前全部的佈局，支持搭建任意界面。

佈局識別算法

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

佈局識別的難點：

• 主觀性太強，容易出現誤識別，沒有絕對的規律。
• 交互動態性如何識別。
• 識別出的佈局須要能支持多分辨率適配（橫屏、豎屏、寬屏、方屏）。

三、主題定製

因爲車載導航面向的對象是車廠客戶，不一樣的客戶對於應用的UI或者主題是有不一樣需求的，也就是說針對不一樣客戶，不一樣渠道的版本，須要有不一樣的應用主題。隨着項目的增多，若是沒有一個靈活，易管理，低成本的主題定製方案，那麼這將是一個噩夢的開始。

傳統的實現方案

DHMI主題定製方案

具體實現以下

• 設計師在界面設計時，經過主題控件庫拖拽的方式搭建界面。
• UI自動化生成環節生成主題相關資源集成到客戶端。
• DHMI平臺部署主要界面的關鍵場景。
• 設計師經過點哪改哪，實時預覽的方式定製界面主題。
• 設計師自主出包還原度驗收，全程無需研發參與。

5、小結

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

---

本文做者：高德技術小哥

閱讀原文

本文爲阿里雲內容，未經容許不得轉載。