張志翔，王慧亞，范佳琪

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

0 引言

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

1 用戶界面檢索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)語(yǔ)

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