前端開發者的福音：根據UI設計圖自動生成GUI骨架代碼

機器之心專欄

作者：Chunyang Chen、Ting Su、Guozhu Meng、Zhenchang Xing、Yang Liu

做過前端開發的人常有這樣的經歷，面對一張 UI 設計圖片，要把它轉換為相應 GUI 骨架代碼。首先開發者需要從視覺上理解圖片中的 UI 元素及其空間布局，然後將自己的理解轉換為合適的 UI 組件以及組件間的組合，如圖 1 所示。

圖 1 將 UI 設計圖轉換為 GUI 骨架元素（部分）

然而，UI 設計圖與 GUI 骨架之間存在概念上的差異，為了彌合這一差距，開發人員需要了解 GUI 骨架的所有組件及其支持的視覺效果，以及不同組件的交互和組合效果。這個差異可以理解為對 UI 設計的元素描述和代碼實現之間的知識鴻溝。實際上，更多的開發者正使用反覆試驗的方式來弄清楚 GUI 組件組合方式來實現給定的 UI 設計，這樣的跟蹤和不斷地嘗試非常麻煩，也浪費了寶貴的開發時間，不利於 UI 設計開發的快速迭代。

有沒有辦法通過 UI 設計圖直接生成 GUI 骨架代碼來簡化這個繁複的轉換過程，讓開發者解放更多精力投入到後續的應用功能開發中去？

某些工具聲稱可以在給定 UI 設計圖的情況下自動生成 GUI 骨架代碼，但這些工具由於是基於人工設計的視覺理解規則實現的，因此功能十分有限，不能處理真實複雜的 UI 設計（如圖 1）。

Chunyang Chen (Monash)、Ting Su (NTU)、Guozhu Meng (SKLOIS)、Zhenchang Xing (ANU)、Yang Liu (NTU) 提出了一種根據給定 UI 設計圖自動化生成 GUI 骨架代碼的神經網路翻譯模型 ui2code。從現有應用程序中提取 UI 設計和 GUI 實現的眾包知識，並開發一個 GUI 骨架生成工具（專家），在給定 UI 設計圖的情況下自動生成 GUI 骨架。這個專家知道各種各樣的 UI 設計和 GUI 骨架，它可以向開發人員建議 GUI 框架的組件應該如何組合布局以實現 UI 設計圖像。

論文：From UI Design Image to GUI Skeleton: A Neural Machine Translator to Bootstrap Mobile GUI Implementation in International Conference on Software Engineering 2018 (ICSE』18)

論文鏈接：https://chunyang-chen.github.io/publication/ui2code.pdf

一、與眾不同的神經網路翻譯器模型

和普通的源語言和目標語言都是文本數據的機器翻譯不同，從 UI 設計圖到 GUI 骨架代碼的機器翻譯任務需要聯合處理圖像和文本數據。另外，這個機器翻譯任務也和作為單詞序列的文本不同，系統的輸入 UI 設計圖包含 UI 元素的空間布局信息，並且系統輸出的 GUI 骨架是 GUI 組件的分層組合。考慮到上述任務特徵，研究者們設計了一個神經網路翻譯器，它由一個卷積神經網路（CNN）、一個遞歸神經網路（RNN）編碼器和一個 RNN 解碼器組成，如圖 2 所示。

給定輸入 UI 設計圖，CNN 通過一系列卷積和池化操作提取多種圖像特徵，然後，RNN 編碼器將這些圖像特徵的空間布局信息編碼為矢量 C，最後由 RNN 解碼器使用該矢量 C 以令牌序列的方式表示生成 GUI 骨架。

圖 2 神經網路翻譯器模型

二、模型設計完成，訓練數據從何而來？

為了訓練前文提到的神經網路翻譯器，需要一組來自移動應用程序的大量 UI 圖像和對應的 GUI 骨架。受自動化 GUI 測試技術的啟發，研究者開發了一種自動化技術來探索 GUI 組件及布局，如圖 3 所示。在探索階段，程序將自動儲存與運行時 GUI 組件層次結構配對的屏幕 UI 截圖，存儲內容類似圖 4 所示。

圖 3 自動化探索一個應用程序的不同界面

圖 4 UI 設計圖對應的 GUI 骨架

自動化 UI 探索工具使用 Android 模擬器來運行 Android 應用程序，存儲成對的 UI 截圖和相應的運行時 GUI 組件層次結構。此工具在有 32 個 Intel Xeon CPU 和 189G 內存的 64 位 Ubuntu 16.04 伺服器上運行，其並行控制 16 個模擬器收集數據（每個應用程序運行 45 分鐘）。

論文抓取了 Google Play 中的 6000 個 Android 應用，UI 探索工具成功運行了其中 5043 個屬於 25 個不同類別的應用程序，圖 5（a）展示了每個類別中的應用程序數量。其餘 957 個應用程序需要額外的硬體支持或需要模擬器中沒有的第三方庫。最終 UI 探索工具收集了 185,277 對 UI 圖像和 GUI 代碼骨架，並將數據用於神經機器翻譯器的訓練和測試。圖 5（b）中的方框圖顯示了收集的 GUI 骨架的複雜性，從圖中可以看出這些數據具有豐富的多樣性。

圖 5 UI 數據集統計

三、訓練好的神經網路翻譯器有多給力？

1、正確率&實用性

在 10804 個測試 UI 圖像中，生成的 6513（60.28％）個 UI 圖像對應的 GUI 骨架與實際 GUI 骨架完全匹配，證明了模型成功捕獲了 UI 圖像包含的組件及其布局信息。

另外，論文隨機選擇了 20 個不在上述 UI 數據集中且安裝量在一百萬以上的應用程序（熱門應用程序通常具有豐富的 GUI 內容），共收集了 1208 個 UI 圖像，並為其生成了 GUI 骨架。實驗結果顯示，平均正確率為 59.47％，證明了神經網路翻譯器具有較強泛化能力。

最後，論文進行了一項試驗性用戶研究，在此研究中包括使用神經網路翻譯器指導的實驗組和全程自行實現的對照組。實驗組比對照組實現 GUI 時間分別為平均 6.14 分鐘和 15.19 分鐘。實際上，對照組的平均時間比結果體現的更長，因為其中四分之三的參與者在 20 分鐘內未能完成至少一個 UI 圖像，而實驗組的所有參與者在 15 分鐘內完成所有任務。實驗表明，神經網路翻譯器具有較強實用性，可以輔助開發者生成 GUI 骨架，縮短設計流程。

2、論文選取了一些有代表性的例子來展示神經網路翻譯器的轉換效果。

1）具有挑戰性的 UI 設計圖

圖 6（a）和圖 6（b）展示了兩個具有挑戰性的案例。圖 6（a）是一個益智遊戲的設置 UI，其中進入遊戲的圖標（紅色框處）包含字元表。神經網路翻譯器可以正確地將紅色框中的區域識別為圖像，並為其生成 ImageView 而不是 TextView。圖 6（b）中的 UI 包含背景圖像，前景中有一些 UI 元素（紅色框處）。神經網路翻譯器也可以正確地將前景元素和背景圖像分開，而不是將 UI 元素視為背景圖像的一部分。從上述兩個例子可以看出，神經網路翻譯器可以可靠地區分不同類型的視覺元素並生成正確的 GUI 組件。

2）複雜的 UI 元素布局

圖 6（c）展示了包含一個 6 層嵌套組合的組件結構的 UI 設計圖，圖 6（d）展示了一個有 60 個 GUI 組件的 UI 設計，這些 GUI 組件的形狀，大小和對齊方式各不相同。對於這兩種在深度和廣度上複雜度較高的情況，神經網路翻譯器生成的 GUI 骨架與 UI 設計圖對應的 GUI 骨架完全匹配。由此看出，神經網路翻譯器可以克服複雜的 UI 元素空間布局並生成正確的 GUI 骨架代碼。

圖 6 神經網路翻譯器對 UI 設計圖的視覺理解例子

本文為機器之心專欄，轉載請聯繫本公眾號獲得授權。

------------------------------------------------

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！