用戶(hù)界面檢索研究綜述

嚴(yán)治

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

0 引言

用戶(hù)界面（UI）在現(xiàn)代桌面軟件、移動(dòng)應(yīng)用程序和Web應(yīng)用程序中無(wú)處不在，它定義了用戶(hù)如何與應(yīng)用程序交互，并使他們能夠操作應(yīng)用程序的功能。一個(gè)設(shè)計(jì)良好的UI讓?xiě)?yīng)用程序使用起來(lái)更加簡(jiǎn)單和高效，這對(duì)應(yīng)用程序的成功和用戶(hù)的忠誠(chéng)度將產(chǎn)生極大影響[1-2]。

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

1 研究現(xiàn)狀

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

1.1 基于metadata的用戶(hù)界面檢索

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

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

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

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

1.2 基于界面樹(shù)的用戶(hù)界面檢索

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

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

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

1.3 基于示例的用戶(hù)界面檢索

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

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

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

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

2 存在問(wèn)題及討論

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

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

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

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

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

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

3 結(jié)語(yǔ)

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