一、背景
汽車導航作為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成本，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/29305.html
標籤：架構設計
下一篇：理解vue資料驅動