嚴(yán)治

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

0 引言

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

為了設(shè)計(jì)出既吸引用戶又具有高可用性的應(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)在主流的用戶界面檢索研究大致可以分為以下三類：①基于metadata的用戶界面檢索；②基于界面樹的用戶界面檢索；③基于示例的用戶界面檢索。下面就每類分別進(jìn)行闡述。

1.1 基于metadata的用戶界面檢索

基于metadata的方法一般需要設(shè)計(jì)一些屬性標(biāo)簽，然后從界面中提取出相應(yīng)的屬性特征，用來(lái)描述這個(gè)界面。檢索的時(shí)候一般基于關(guān)鍵詞進(jìn)行檢索，就能找到數(shù)據(jù)庫(kù)中對(duì)應(yīng)標(biāo)簽的界面。這類方法的代表就是傳統(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例如組件類別、App名稱、組件上展示的文本提取出來(lái)，作為界面的屬性標(biāo)簽。除此之外，他還提取了界面中占比最多的6種顏色作為界面顏色這一屬性上的標(biāo)簽。在查詢階段，用戶輸入一段描述文本，查詢解析器會(huì)將用戶描述的關(guān)鍵詞提取出來(lái)作為查詢真正的輸入，像是color:red AND ui:edittext一類的描述，最后便可以找到用戶想要的界面。

Kumar等人[10]開發(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爬蟲、代理服務(wù)器、數(shù)據(jù)存儲(chǔ)、后處理和API。其中爬蟲通過(guò)代理加載網(wǎng)頁(yè)，然后將網(wǎng)頁(yè)存入數(shù)據(jù)庫(kù)中。這之后在存儲(chǔ)的網(wǎng)頁(yè)上運(yùn)行后處理程序來(lái)計(jì)算界面元素的語(yǔ)義特征和計(jì)算機(jī)視覺(jué)特征，最后客戶端應(yīng)用程序可以通過(guò)API查詢想要的界面。為了支持更復(fù)雜的訪問(wèn)模式，API提供了基于JSON的自定義設(shè)計(jì)查詢語(yǔ)言（DQL）。這種查詢語(yǔ)言允許基于DOM屬性和計(jì)算視覺(jué)特征的組合進(jìn)行查詢結(jié)果的篩選，并且能將DQL轉(zhuǎn)換成數(shù)據(jù)庫(kù)的查詢語(yǔ)言，很大程度上方便了用戶。

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

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

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

Behrang等人[12]開發(fā)了一個(gè)名為GUIFetch的工具，使用關(guān)鍵詞和應(yīng)用程序線框圖從公共代碼倉(cāng)庫(kù)中找到與線框圖相似的應(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)樹。對(duì)于線框圖這一方面，文中使用Pencil原型工具進(jìn)行線框圖的繪制，該軟件里有73種Android組件類型，并且可以導(dǎo)出繪制的線框圖的層次結(jié)構(gòu)文件。在得到了線框圖和界面的層次結(jié)構(gòu)樹之后，該工具對(duì)樹中葉子節(jié)點(diǎn)即組件進(jìn)行了比較，其中包括四個(gè)擬定標(biāo)準(zhǔn)，分別是類型、涉及文本（如果有的話）、大小（高度和寬度）和位置。這四個(gè)標(biāo)準(zhǔn)有各自的權(quán)重，通過(guò)比較線框圖和界面中所有的組件，該工具對(duì)線框圖中每個(gè)組件選擇了相似度得分最高的界面組件作為匹配項(xiàng)，最后進(jìn)行一個(gè)累加的運(yùn)算便得到了最后的界面相似性得分。在后面的評(píng)估中，結(jié)果表明GUIFetch能基本完全找到與線框圖最相似的應(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)站和專業(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è)檢索到的模板推薦不同的樣式組合。這樣開發(fā)人員可以選擇一個(gè)所需的樣式組合，就能獲得一個(gè)設(shè)計(jì)良好的網(wǎng)頁(yè)。需要注意的是，為了更好地切合界面內(nèi)容，界面可能還需要開發(fā)人員做一些小的改動(dòng)。其中對(duì)模板的檢索就用到了界面樹的信息，因?yàn)榫W(wǎng)頁(yè)界面本身就是一顆DOM樹，樹的提取相對(duì)容易，文中使用一種樹的編輯距離的變體算法來(lái)計(jì)算兩顆樹之間的相似性。

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

基于示例的方法是現(xiàn)在較為常用的方法，且被證明是一種有效的檢索方式，例如百度和谷歌的以圖搜圖，就是這類方法具有實(shí)用性的很好例子。這類方法一般是利用深度學(xué)習(xí)技術(shù)，先通過(guò)度量學(xué)習(xí)或者自編碼器得到一個(gè)統(tǒng)一的嵌入空間，然后將草圖或者高保真界面圖作為查詢條件，從而在這個(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à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)該聚在一起。這樣用戶將一張界面圖作為查詢條件輸入編碼器便可以得到該界面的向量表示，之后就能在這個(gè)空間中使用K近鄰的方法找到最相近的其他界面，這樣就實(shí)現(xiàn)了界面的檢索。與之類似的，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種組件的類別，在此基礎(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)編碼器，能得到更好的界面表示向量。與之類似，Chen等人[17]使用的方法與Liu相似，不過(guò)他使用線框圖來(lái)對(duì)界面進(jìn)行檢索。

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

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

第一類基于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ì)少了容易覆蓋不全面，很可能用戶想要的某個(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)合。

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

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

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

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

3 結(jié)語(yǔ)

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