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

物聯網新資訊 發佈 2020-01-02T09:29:33+00:00

簡介: 高德地圖技術團隊希望打造一套快速精準的UI解決方案,通過自動化的方式生產UI代碼,解放研發生產力的同時滿足客戶需求。一、背景汽車導航作為ToB業務,需要滿足不同汽車廠商在功能和風格上體現各自特色的需求。針對這種情況,傳統的UI開發方式,基本上是一對一的特別定製。

簡介: 高德地圖技術團隊希望打造一套快速精準的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、控制項體系

2、布局體系

3、主題定製

點擊「了解更多」技術難點

關鍵詞:機器學習/深度學習、編解碼、算法、前端開發、數據可視化、定位技術

關鍵字: