手機軟件用戶界面檢索綜述

張志翔，王慧亞，范佳琪

（四川大學(xué)計算機學(xué)院，成都610065）

0 引言

移動設(shè)備和應(yīng)用程序?qū)θ澜缛藗兊娜粘Ｉ町a(chǎn)生重要影響。這種影響源于這些應(yīng)用程序能夠執(zhí)行一系列的任務(wù)，從簡單的雜務(wù)，如設(shè)定鬧鐘提示到更復(fù)雜的活動。這些任務(wù)由移動設(shè)備上提供的豐富的“應(yīng)用程序”生態(tài)系統(tǒng)實現(xiàn)。但是，在開發(fā)者將應(yīng)用程序發(fā)布到Apple 的App Store 或Google Play 等市場之前，他們必須進行一系列的前提操作才能達到最終的效果。此過程從應(yīng)用程序的需求和用戶界面的構(gòu)思和概念開始。然后，繼續(xù)創(chuàng)建一組描繪圖形用戶界面（GUI）的屏幕模型。用戶界面和用戶體驗（UI/UX）設(shè)計人員通常會迭代這些模型，直到在GUI 中捕獲所有功能。一旦最終設(shè)計準(zhǔn)備就緒，程序員將模型（通常在像Sketch 這樣的軟件中創(chuàng)建）和設(shè)計者提供的資源轉(zhuǎn)換為可運行的應(yīng)用程序。在確認應(yīng)用程序成功通過一系列測試后，它將在市場上發(fā)布。

1 用戶界面檢索

1.1 界面檢索的發(fā)展歷程

應(yīng)用程序具有豐富的圖形化用戶界面，而具有良好GUI 設(shè)計的應(yīng)用程序在當(dāng)今手機軟件泛濫的年代更具有競爭力，這促使開發(fā)人員在GUI 開發(fā)上投入大量精力。由于市場上有大量成功的應(yīng)用程序，重用高質(zhì)量GUI 代碼的想法是自然和有吸引力的。就像在谷歌中搜索最近的商店一樣，搜索具有相似GUI 設(shè)計的應(yīng)用程序也應(yīng)該是一個簡單而快速的任務(wù)。要求用戶使用復(fù)雜的建模工具提供高保真圖像是不切實際的。搜索工具應(yīng)該支持輕量級和低保真原型。然而，現(xiàn)有的GUI 代碼搜索方法[2,3]并沒有為用戶提供方便地建模GUI 的直接方法，這限制了它們的可用性。后面提出了一種新穎的方法，使用草圖搜索視覺相似的應(yīng)用程序。在紙上繪制圖形用戶界面是一種直觀的方法，用戶可以使用鉛筆快速建模應(yīng)用程序圖形用戶界面。為了尋找實現(xiàn)草圖設(shè)計的代碼，有利用基于深度學(xué)習(xí)（DL）的框架將草圖轉(zhuǎn)換成GUI 結(jié)構(gòu)。然后，計算翻譯后的結(jié)構(gòu)性GUI 數(shù)據(jù)與應(yīng)用程序庫中的數(shù)據(jù)之間的相似度評分，并根據(jù)這些相似度評分對搜索結(jié)果進行排序，最后返回給用戶。

因此，開發(fā)任何基于圖形用戶界面的應(yīng)用程序的一個重要步驟是起草和原型設(shè)計模型。在擁有更大團隊的工業(yè)環(huán)境中，這一過程通常由專門的設(shè)計師執(zhí)行，他們擁有特定領(lǐng)域的專業(yè)知識，能夠使用圖像編輯軟件（如Photoshop 或Sketch）制作具有吸引力、直觀的圖形用戶界面。這些團隊通常負責(zé)在公司數(shù)字業(yè)務(wù)的多個方面表達連貫的設(shè)計語言，包括網(wǎng)站、軟件應(yīng)用程序和數(shù)字營銷材料。在創(chuàng)建了這些初始設(shè)計草稿之后，必須將它們忠實地轉(zhuǎn)換為代碼，以便最終用戶能夠以其預(yù)期的形式體驗設(shè)計和用戶界面。

此過程中最困難的部分之一是從“草圖”到用戶界面原型化，也就是從設(shè)計到原型代碼，從UI 設(shè)計師到前端程序員。為了改善此項設(shè)計任務(wù)和編程任務(wù)，現(xiàn)有的用戶界面重用的索引方式有基于草圖（手繪）、UI模型（Sketch、PS 等）、屏幕截圖、關(guān)鍵詞、條件篩選（如按鈕、下拉框、顏色等）或組合搜索?，F(xiàn)有的軟件倉庫有Rico（2017）[13]、ERICA（2016）[14]、GitHub、谷 歌 商店等。

1.2 界面檢索的相關(guān)技術(shù)

目前的檢索技術(shù)有基于計算機視覺技術(shù)和索引元數(shù)據(jù)，如Google Image Search[1]，但是，這是一種更通用的搜索工具，不允許詳細搜索大型Android 應(yīng)用程序屏幕索引，并且缺乏按屏幕或GUI 組件類型過濾搜索的功能。還有使用設(shè)計模型和關(guān)鍵字搜索的，如GUIFetch[2]。雖然GUIFetch 方法代表了一種有前途的技術(shù)，可幫助開發(fā)人員通過檢索實現(xiàn)示例將現(xiàn)有模型轉(zhuǎn)換為代碼，但在應(yīng)用GUI 概念化的早期階段，它幾乎不支持設(shè)計人員和開發(fā)人員，因為它需要模型作為輸入。

之后又出現(xiàn)了GUIGLE[3]，它是一種實現(xiàn)輕量級方法的補充方法，可快速搜索大量應(yīng)用程序GUI 并直觀地檢查結(jié)果，從而促進基于檢索到的屏幕的集合設(shè)計模式概念化GUI 的過程。此外，GUIGLE 支持一組簡單但功能強大的搜索查詢公式，允許用戶快速發(fā)現(xiàn)與GUIFetch 不支持的高度特定概念（即通過屏幕和GUI組件類型過濾）相關(guān)的應(yīng)用程序屏幕。最后，GUIGLE能夠索引大量Google Play 應(yīng)用而無需訪問源代碼，而GUIFetch 需要訪問源代碼，因此僅限于較小的開源應(yīng)用程序集。但是GUIGLE 的局限性也很明顯，只能采用條件組合查詢，無法進行更為復(fù)雜的查詢檢索。

之后又有通過草圖的方式來進行檢索，草圖在設(shè)計過程中很常見，并且通常只需要設(shè)計師手稿畫出來。這表明草圖可能是一種很好的方法，設(shè)計師可以在搜索UI 語料庫時指定查詢標(biāo)準(zhǔn)，這激發(fā)了基于草圖的UI 檢索技術(shù)的研究。Swire[4]一種基于草圖的神經(jīng)網(wǎng)絡(luò)驅(qū)動技術(shù)，用于檢索用戶界面?；诓輬D的圖像檢索是計算機視覺社區(qū)中經(jīng)常研究的問題。標(biāo)準(zhǔn)的基于草圖的圖像檢索任務(wù)涉及用戶使用二進制筆劃創(chuàng)建簡化草圖，描繪目標(biāo)自然圖像的最小用戶定義特征。例如，當(dāng)用戶希望以特定姿勢檢索鳥的圖像時，用戶將僅繪制鳥的目標(biāo)身體的輪廓和描繪鳥的翅膀的線。由于用戶在嘗試檢索這些圖像時經(jīng)常關(guān)注圖像內(nèi)的目標(biāo)對象，因此先前工作中的典型方法是首先獲得原始圖像的邊緣圖，其描繪（前景）對象與背景場景之間的邊界。邊緣檢測技術(shù)，如Canny 邊緣檢測器[5]。然后，這些方法使用圖像相似性技術(shù)將邊緣圖與用戶創(chuàng)建的草圖相匹配。研究人員開發(fā)了各種圖像相似度，以提高檢索性能，從基本的峰值信噪比（PSNR）[6]到更高級的袋狀（BOW）方向梯度直方圖（HOG）filters[7]。

隨著最近神經(jīng)網(wǎng)絡(luò)和眾包的日益普及，研究人員開發(fā)了大規(guī)模的草圖數(shù)據(jù)集，這些數(shù)據(jù)集與自然圖像數(shù)據(jù)集相對應(yīng)，為神經(jīng)網(wǎng)絡(luò)驅(qū)動的圖像檢索任務(wù)提供動力。TU-Berlin[8]和Sketchy[9]草圖數(shù)據(jù)集由眾包草圖組成，這些草圖是通過向群眾工作者提供原始相應(yīng)的自然圖像而收集的。使用這些相應(yīng)的草圖、圖像對，訓(xùn)練神經(jīng)網(wǎng)絡(luò)以將匹配的草圖和圖像直接編碼成類似的低維輸出。當(dāng)使用草圖查詢檢索圖像時，自然圖像按其神經(jīng)網(wǎng)絡(luò)輸出與草圖查詢的輸出之間的距離（例如歐幾里德距離）進行排序。Swire 受到上述基于神經(jīng)網(wǎng)絡(luò)的圖像檢索方法的極大影響。此外，太古使用BoWHOG flters 作為基線方法來演示和對比基于神經(jīng)網(wǎng)絡(luò)的Swire 使用草圖檢索UI 的高效率。

2 界面檢索的應(yīng)用

現(xiàn)有的界面檢索的系統(tǒng)有GUIFetch、Swire、GUIGLE。

GUIFetch，該技術(shù)將應(yīng)用程序的草圖作為輸入，并利用公共存儲庫中越來越多的開源應(yīng)用程序來識別具有類似于提供的草圖中的GUI 和轉(zhuǎn)換的應(yīng)用程序。GUIFetch 首先搜索公共存儲庫，使用關(guān)鍵字匹配找到有可能的應(yīng)用程序。然后，它使用靜態(tài)和動態(tài)分析相結(jié)合的方法，來構(gòu)建識別出的應(yīng)用程序界面和界面轉(zhuǎn)換的模型，并計算模型和提供的草圖之間的相似性度量。最后，GUIFetch 根據(jù)其計算的相似值對識別出的應(yīng)用程序（或其部分）進行排序，并生成結(jié)果的可視化排序以及相應(yīng)應(yīng)用程序的代碼。在實驗中為Android應(yīng)用程序?qū)崿F(xiàn)了GUIFetch，并通過涉及不同類型應(yīng)用程序的用戶研究對其進行了評估。

GUIGLE 是一種實現(xiàn)輕量級方法的補充方法，可快速搜索大量應(yīng)用程序GUI 并直觀地檢查結(jié)果，從而促進基于檢索到的屏幕的集合設(shè)計模式概念化GUI 的過程。此外，GUIGLE 支持一組簡單但功能強大的搜索查詢公式，允許用戶快速發(fā)現(xiàn)與GUIFetch 不支持的高度特定概念（即通過屏幕和GUI 組件類型過濾）相關(guān)的應(yīng)用程序屏幕。最后，GUIGLE 能夠索引大量Google Play應(yīng)用而無需訪問源代碼。

Swire，一種基于草圖的UI 檢索技術(shù)，使設(shè)計人員能夠使用草圖與大型UI 數(shù)據(jù)集進行交互。在Swire 的開發(fā)過程中，收集了與UI 相對應(yīng)的草圖數(shù)據(jù)集，這些草圖能夠支持研究人員開發(fā)更多基于草圖的數(shù)據(jù)驅(qū)動應(yīng)用程序。通過對該數(shù)據(jù)集的培訓(xùn)，Swire 的靈活深度學(xué)習(xí)模型在檢索UI 方面實現(xiàn)了高性能，并支持多種實用設(shè)計應(yīng)用。通過太古的發(fā)展，作者希望為設(shè)計師提供相關(guān)的材料和計算資源，以專注于設(shè)計過程中的創(chuàng)造性和創(chuàng)新性任務(wù)。

3 討論尚未解決的問題和成功的領(lǐng)域

現(xiàn)目前因為對草圖的研究的加深，基于邊緣檢測技術(shù)的提高，以及神經(jīng)網(wǎng)絡(luò)和眾包的日益普及和實際使用的加強，對草圖內(nèi)容層次的識別提供了各種不同的方法。GUIGLE，一個用于Android 應(yīng)用程序截圖的GUI 搜索引擎，用戶可以檢查每個檢索到的屏幕并獲取詳細信息，例如GUI 組件列表，所屬應(yīng)用程序的Google Play 商店的名稱和鏈接，同一應(yīng)用程序的其他屏幕，按比例排序的前6 種顏色屏幕中的顏色和其他類似的屏幕。但是沒有復(fù)雜的查詢來實現(xiàn)更為強大的搜索，這包括創(chuàng)建考慮組件層次結(jié)構(gòu)的查詢的可能性，并考慮顏色的比例以更好地對屏幕截圖進行排名。此外，GUIGLE 可以設(shè)想為開發(fā)人員提供封閉源應(yīng)用程序的app 骨架的起點。這可以通過利用基于屏幕截圖生成GUI 代碼的方法來完成。

GUIFetch，一種代碼搜索技術(shù)，它利用公共存儲庫中越來越多的開放源代碼應(yīng)用程序，為用戶提供可用作他們想要創(chuàng)建的應(yīng)用程序的起點的代碼。給出一個應(yīng)用程序的草圖（即應(yīng)用程序的界面和它們之間的轉(zhuǎn)換），GUIFetch 在公共存儲庫中搜索盡可能類似于所提供的草圖的應(yīng)用程序。然后向用戶報告匹配的應(yīng)用程序，按照草圖的相似程度對其進行排序。GUIFetch 可以為開發(fā)人員提供構(gòu)建基于GUI 的應(yīng)用程序的起點，支持早期原型開發(fā)，并幫助設(shè)計師評估是否有類似于他們想要開發(fā)的現(xiàn)有應(yīng)用程序。但是在文中應(yīng)用程序類型過少，應(yīng)用程序的數(shù)量也很少。接下來需要進行更多涉及更多用戶和應(yīng)用程序類型的研究。

盡管Swire 在檢索相關(guān)UI 示例方面取得了成功，但發(fā)現(xiàn)它無法獲得對某些草圖的細粒度語義理解。文章中展示了在Swire 評估期間觀察到的失敗案例的幾種模式。第一種模式發(fā)生在Swire 處理罕見的自定義UI 元素時。太古未能理解復(fù)雜的天氣圖，并檢索了另一個具有類似布局的界面，作為與查詢最相關(guān)的結(jié)果。第二種模式是太古未能理解具有不同顏色的UI，例如具有圖像背景的UI。Swire 將登錄屏幕與背景圖像混淆，盡管最相關(guān)的UI 仍位于第二位。由于太古主要關(guān)注草圖的高級布局信息，未來可以通過在草圖中理解和控制個別元素來改善它。一個可行的解決方案是訓(xùn)練元素級草圖識別模型，以識別用戶在某些區(qū)域中描繪的特定類型的元素。目前，太古的神經(jīng)網(wǎng)絡(luò)只采用屏幕截圖和草圖作為輸入。雖然可視內(nèi)容提供了關(guān)于UI 的一些結(jié)構(gòu)和語義信息，但相信Swire 可以通過包括結(jié)構(gòu)化UI 層次結(jié)構(gòu)樹來改進，其中每個元素的屬性作為網(wǎng)絡(luò)的附加輸入。包含UI 結(jié)構(gòu)層次將添加豐富的結(jié)構(gòu)和語義信息，這些信息可能會提高Swire 對UI 的理解。這個查詢模型工作的一個自然擴展是探索從基于草圖的輸入生成具有高層UI 特征模型的生成模型。雖然過去已經(jīng)開發(fā)了多種自動化方法，但由于其不可預(yù)測性和生成的界面的最低限制，它們未能獲得較大成就。雖然Swire 展示了在支持設(shè)計應(yīng)用程序方面的能力和潛力，但這些應(yīng)用程序目前是粗糙的原型，尚不適合設(shè)計人員日常使用。

4 結(jié)語

本文介紹了現(xiàn)有的手機應(yīng)用程序的必要性和開發(fā)流程，從而發(fā)現(xiàn)對用戶界面檢索的需求，并從不同的檢索技術(shù)引出了相應(yīng)實現(xiàn)的應(yīng)用?；诓輬D的UI 檢索因為深度學(xué)習(xí)的發(fā)展逐漸成為主流，將來的發(fā)展方向主要是構(gòu)建草圖的模型以及相似度匹配算法的研究。