嚴治

（四川大學計算機學院，成都610065）

0 引言

用戶界面（UI）在現(xiàn)代桌面軟件、移動應用程序和Web應用程序中無處不在，它定義了用戶如何與應用程序交互，并使他們能夠操作應用程序的功能。一個設計良好的UI讓應用程序使用起來更加簡單和高效，這對應用程序的成功和用戶的忠誠度將產(chǎn)生極大影響[1-2]。

為了設計出既吸引用戶又具有高可用性的應用程序，設計人員必須盡可能考慮多種UI設計方案，從中找出最優(yōu)的方案，并評估其效果。為了支持這一過程的順利進行，設計人員往往需要大量相關(guān)的UI設計樣例的支持。得益于近年來數(shù)據(jù)驅(qū)動設計的提出和大規(guī)模UI數(shù)據(jù)集的涌現(xiàn)，例如ERICA[3]、Rico[4]和Gallery D.C.[5]等，這為設計人員提供了大量真實可用的UI設計樣例。這些樣例通常包含優(yōu)秀的設計樣式和當前流行的設計趨勢[6-7]，設計人員可以從這些設計樣例中獲得靈感，并從不同設計樣例中通過對比來評估每種設計樣例的優(yōu)缺點，然后對好的設計點進行整合來探索更好的設計方案[8]。

1 研究現(xiàn)狀

現(xiàn)在主流的用戶界面檢索研究大致可以分為以下三類：①基于metadata的用戶界面檢索；②基于界面樹的用戶界面檢索；③基于示例的用戶界面檢索。下面就每類分別進行闡述。

1.1 基于metadata的用戶界面檢索

基于metadata的方法一般需要設計一些屬性標簽，然后從界面中提取出相應的屬性特征，用來描述這個界面。檢索的時候一般基于關(guān)鍵詞進行檢索，就能找到數(shù)據(jù)庫中對應標簽的界面。這類方法的代表就是傳統(tǒng)基于文字的搜索方法，一般通過給數(shù)據(jù)庫中的圖像數(shù)據(jù)進行標注之后，便可以通過關(guān)鍵詞找到想要的圖像。

Bernal-Cardenas等人[9]收集了應用程序的metadata和界面截圖，然后對低質(zhì)量的應用進行了一個過濾操作，最后將每個界面的metadata例如組件類別、App名稱、組件上展示的文本提取出來，作為界面的屬性標簽。除此之外，他還提取了界面中占比最多的6種顏色作為界面顏色這一屬性上的標簽。在查詢階段，用戶輸入一段描述文本，查詢解析器會將用戶描述的關(guān)鍵詞提取出來作為查詢真正的輸入，像是color:red AND ui:edittext一類的描述，最后便可以找到用戶想要的界面。

Kumar等人[10]開發(fā)了一個大規(guī)模設計挖掘平臺，包括一個擁有10萬多個網(wǎng)頁和1億個設計元素的存儲庫，用于支持界面的檢索。這個平臺的體系架構(gòu)包括五部分：Web爬蟲、代理服務器、數(shù)據(jù)存儲、后處理和API。其中爬蟲通過代理加載網(wǎng)頁，然后將網(wǎng)頁存入數(shù)據(jù)庫中。這之后在存儲的網(wǎng)頁上運行后處理程序來計算界面元素的語義特征和計算機視覺特征，最后客戶端應用程序可以通過API查詢想要的界面。為了支持更復雜的訪問模式，API提供了基于JSON的自定義設計查詢語言（DQL）。這種查詢語言允許基于DOM屬性和計算視覺特征的組合進行查詢結(jié)果的篩選，并且能將DQL轉(zhuǎn)換成數(shù)據(jù)庫的查詢語言，很大程度上方便了用戶。

與之類似，Ritchie等人[11]也設計了一個系統(tǒng)，允許用戶交互式地基于風格查找相關(guān)網(wǎng)頁界面。他們收集了多家網(wǎng)站的300多個熱門界面作為初始數(shù)據(jù)集，由于系統(tǒng)能自動提取新加入的網(wǎng)頁的特征，因此數(shù)據(jù)集的拓展也很容易。該系統(tǒng)能支持用戶基于界面中文字、界面顏色和界面風格進行檢索，或者使用以上三個特性的組合。選擇這些功能是通過采訪設計師和設計文獻中的準則綜合考量的。

1.2 基于界面樹的用戶界面檢索

基于界面樹的方法一般是通過將界面提取成樹的形式，然后比較樹的相似度來得到相似界面，不同的研究在樹的比較方法上選擇不同。

Behrang等人[12]開發(fā)了一個名為GUIFetch的工具，使用關(guān)鍵詞和應用程序線框圖從公共代碼倉庫中找到與線框圖相似的應用程序，并按照相似度以應用截圖形式進行排序展示，同時附有源程序代碼。該工具首先通過關(guān)鍵字檢索的方法在現(xiàn)有代碼倉庫中找到相關(guān)的應用程序代碼，并刪除了一些相同的應用程序，然后通過結(jié)合靜態(tài)分析和動態(tài)分析的方法來得到界面的層次結(jié)構(gòu)樹。對于線框圖這一方面，文中使用Pencil原型工具進行線框圖的繪制，該軟件里有73種Android組件類型，并且可以導出繪制的線框圖的層次結(jié)構(gòu)文件。在得到了線框圖和界面的層次結(jié)構(gòu)樹之后，該工具對樹中葉子節(jié)點即組件進行了比較，其中包括四個擬定標準，分別是類型、涉及文本（如果有的話）、大小（高度和寬度）和位置。這四個標準有各自的權(quán)重，通過比較線框圖和界面中所有的組件，該工具對線框圖中每個組件選擇了相似度得分最高的界面組件作為匹配項，最后進行一個累加的運算便得到了最后的界面相似性得分。在后面的評估中，結(jié)果表明GUIFetch能基本完全找到與線框圖最相似的應用程序界面，并且在推薦相關(guān)性的研究中，有54%被認為是完全相關(guān)，40%被認為是60%到100%相關(guān)。

Zheng等人[13]設計了一個名為FaceOff的系統(tǒng)，用于協(xié)助Web UI設計。該系統(tǒng)首先從流行的網(wǎng)站和專業(yè)的設計樣例中構(gòu)建了一個基于15491個網(wǎng)頁的Web UI存儲庫。接下來，在這個存儲庫中提取不同頁面之間的公共模板。然后，建立了一個樣式嵌入模型，它使用卷積神經(jīng)網(wǎng)絡（CNN）對每個GUI模板對應的圖像進行編碼。這樣對于給定的正在設計的頁面，F(xiàn)aceOff將其分割成多個塊，并檢索匹配每個塊的GUI模板。然后FaceOff根據(jù)樣式嵌入模型為每個檢索到的模板推薦不同的樣式組合。這樣開發(fā)人員可以選擇一個所需的樣式組合，就能獲得一個設計良好的網(wǎng)頁。需要注意的是，為了更好地切合界面內(nèi)容，界面可能還需要開發(fā)人員做一些小的改動。其中對模板的檢索就用到了界面樹的信息，因為網(wǎng)頁界面本身就是一顆DOM樹，樹的提取相對容易，文中使用一種樹的編輯距離的變體算法來計算兩顆樹之間的相似性。

1.3 基于示例的用戶界面檢索

基于示例的方法是現(xiàn)在較為常用的方法，且被證明是一種有效的檢索方式，例如百度和谷歌的以圖搜圖，就是這類方法具有實用性的很好例子。這類方法一般是利用深度學習技術(shù)，先通過度量學習或者自編碼器得到一個統(tǒng)一的嵌入空間，然后將草圖或者高保真界面圖作為查詢條件，從而在這個空間中找到與之相似的界面。

Huang等人[14]采用了度量學習的思想，使用偽孿生神經(jīng)網(wǎng)絡架構(gòu)，利用三重損失函數(shù)對草圖和UI樣例進行訓練，從而得到草圖和UI樣例的統(tǒng)一嵌入空間，這樣便能在這個統(tǒng)一空間中使用草圖找到相似的UI樣例。在后續(xù)評估中，該方法在top1上達到了15.9%，在top10上達到了60.9%，均高于文中基線方法，并且在基于列表的界面、有彈出框的界面和菜單項的界面等比較有代表性的界面上均有較好的檢索結(jié)果。

Deka等人[4]采用自動編碼器的思想，將所有界面通過編碼器編碼成統(tǒng)一維度的向量表示，由此組成一個向量空間，之后的檢索就在這個空間中進行。他首先區(qū)分界面圖中的文本和非文本元素，然后將界面圖轉(zhuǎn)換成語義圖的形式，之后采用一個簡單自動編碼器模型將語義圖編碼成64維向量，作為這個界面的特征向量表示。在將數(shù)據(jù)庫中所有界面轉(zhuǎn)換成向量表示之后，便可以得到一個統(tǒng)一的向量空間，在這個空間中相似的界面應該聚在一起。這樣用戶將一張界面圖作為查詢條件輸入編碼器便可以得到該界面的向量表示，之后就能在這個空間中使用K近鄰的方法找到最相近的其他界面，這樣就實現(xiàn)了界面的檢索。與之類似的，Lee等人[15]使用的方法與Deka相似，只不過自動編碼器的設計有所不同。

Liu等人[16]改進了Deka的方法，進一步改善了檢索效果。在Deka的方法中，只提取了界面的文本和非文本語義，這樣訓練得到的界面表示向量蘊含的信息并不豐富，而Liu對界面組件進行了細致的劃分，給定了25種組件的類別，在此基礎上使用更精細的組件元素級語義訓練自動編碼器。同時他采用的是深度自動編碼器模型，將簡單自動編碼器中的全連接層使用卷積層和反卷積層、上采樣和下采樣替代，能更好的對界面特征進行提取。在給出的比較結(jié)果中，Liu的檢索效果要優(yōu)于Deka，說明使用更精細的組件元素級語義訓練深度自動編碼器，能得到更好的界面表示向量。與之類似，Chen等人[17]使用的方法與Liu相似，不過他使用線框圖來對界面進行檢索。

2 存在問題及討論

上述研究雖然都實現(xiàn)了用戶界面檢索，但是都存在一些或多或少的問題，下面就每類方法存在的問題進行分析討論。

第一類基于metadata的界面檢索主要存在以下幾個問題：①屬性標簽設計困難，因為需要在每個特征層面上進行特征提取或者特征標注，在數(shù)據(jù)集建立上需要耗費較多精力，并且有些時候缺乏一個設計指導；②屬性標簽設計無法兼顧所有使用者的需求，設計少了容易覆蓋不全面，很可能用戶想要的某個屬性沒有提供；③無法從界面整體角度進行檢索，因為這都是基于局部單方面特征進行簡單拼湊進行的檢索，對離散的數(shù)據(jù)或許還行，但是對連續(xù)的數(shù)據(jù)分布則難以進行描述，同時很難進行特征的聯(lián)合。

第二類基于界面樹的界面檢索依賴樹相似度算法的支持，要得到好的效果這類算法的設計并不容易，并且這類方法只考慮了樹結(jié)構(gòu)上的相似性，檢索因素單一。同時有些方法也沒有很好運用起樹的層次結(jié)構(gòu)特征，例如上文中的GUIFetch，只比較了樹節(jié)點的組件相似性，檢索的覆蓋率不高。

第三類基于示例的界面檢索受啟發(fā)于現(xiàn)有的圖像相似性方法，而沒有考慮界面圖像和自然圖像的不同之處，即界面具有的非常明顯的結(jié)構(gòu)性特征，因此最后檢索結(jié)果的查全率并不高。

由此可以看出，第一類方法較難表述清楚用戶的需求，并且屬性標簽設計麻煩，并不太適用于數(shù)據(jù)量大的界面素材庫的檢索。第二和第三類方法都沒有充分利用界面的全部特征，因此這里考慮使用一種方法融合界面的結(jié)構(gòu)特征和像素特征，通過將這兩種特征結(jié)合，會對檢索結(jié)果進行一定的改善，提升查全率。例如采用遞歸神經(jīng)網(wǎng)絡的思想，在位于界面樹節(jié)點的組件上提取像素特征，然后使用遞歸網(wǎng)絡得到整棵界面樹的一個向量表示，這也即是整個界面的表示，這樣提取到的界面表示向量就在一定程度上包含了上面提到的兩類特征。

雖然基于示例的檢索方法并不完美，但它仍是現(xiàn)在使用最廣泛的檢索方式，因為用戶通過這種方式能輕松直觀地表達他們的設計想法，只需要提供草圖或線框圖或高保真界面圖就能進行檢索。而在這三種圖中，草圖對比其他兩種有著以下的優(yōu)勢：①草圖是早期設計階段的主要交流工具與產(chǎn)物，并且廣泛存在于整個設計階段；②草圖能很好切合早期設計需求的頻繁變動，易于修改；③線框圖或者高保真界面圖都是在草圖的基礎上得到的，直接跳過草圖繪制費時費力，且效果也不一定好。因此基于草圖的界面檢索將可能會是未來界面檢索的主流，如何更好地對草圖和界面之間進行匹配將是研究的重點。

3 結(jié)語

本文總結(jié)了現(xiàn)在主流的三類用戶界面檢索方法的研究，并對其存在的問題進行了分析，然后提出了一種改進現(xiàn)有方法的設想，最后對未來界面檢索的方向進行了猜想。由于深度學習的迅速發(fā)展，基于草圖的界面檢索將更加受到未來研究者的重視。