數據與知識聯合驅動的移動應用交互界面設計

尹浩，姜澤勛，趙冰

（1.清華大學北京信息科學與技術研究中心，北京 100084；2.中國傳媒大學動畫學院，北京 100024）

1 引言

人類歷史與社會的變革和進步往往伴隨著新技術的發明與應用。20世紀以來，數字技術與數字媒介的迅速發展構建出了一個全新的數字時代，人們感知世界與相互交流的方法比之前任何時代都更加豐富，藝術、社會、政治、經濟、文化等諸多方面與數字世界不斷相互滲透與融合［1］。人與計算機的交互在這個時代變得尤為重要，其中，智能手機與移動互聯網的迅速發展極大拓展人機交互技術可觸及的用戶群體和市場規模。美國移動應用報告［2］中的數據顯示，目前移動應用已經以52%的比例牢牢占領著人們使用媒體設備的時間。根據統計［3］，每個智能手機用戶平均每天花費3小時在各個移動應用上，每月平均要使用40個移動應用。在2019年，消費者在全球各大應用商店上消費已經超過1540億美元［4］，并仍然在快速發展。用戶與市場的發展為人機交互技術的應用提供了更加豐富的場景，也推動了相關技術研究。

隨著移動應用市場的迅速發展，用戶和市場對于移動應用質量的要求也在不斷提高。因為智能手機受限的用戶交互途徑和屏幕尺寸，結合移動應用用戶快節奏的應用場景，移動應用的交互界面設計變得尤為重要［5］，其重要性甚至超過了移動應用的功能與內容，能很大程度上影響應用設計質量和用戶留存度，所以研究和理解交互界面設計與用戶反饋（feedback）之間的關系就顯得十分重要，能幫助設計師與開發者更有針對性的優化移動應用的交互界面，提高用戶體驗。許多相關研究嘗試總結出具有共性的移動應用交互界面設計方法與標準［6-10］。一方面，交互界面設計涉及主觀審美評判，有研究表明，文化背景和年齡等因素都會影響受眾的主觀審美傾向，不存在統一的美學度量衡。另一方面，移動應用是面向海量用戶的人機交互場景，需要具有共性的設計方法與標準來指導移動應用交互界面的設計，使得交互界面設計特征之間的關系復雜，影響用戶反饋的形式也更加多變，所以基于有限樣本的定性研究難以系統性的在交互界面設計與用戶反饋之間建立關系，同時經驗性研究時間上的滯后性也無法適應當前快速變化的大眾審美，因此定性研究難以支撐移動互聯網等實際應用場景的交互界面設計研究。

針對交互界面設計的復雜性，為了系統性的研究移動應用交互界面設計與用戶反饋之間的關系，本文嘗試回答以下理論問題：

①交互界面視覺特征是否會影響用戶的反饋和體驗？

②不同的視覺特征對用戶體驗的影響程度是否不同？

③如何利用數據與計算能力優化移動應用交互界面設計？

為了回答以上問題，本文提出了數據與知識聯合驅動的移動應用交互界面設計方法，通過數據和機器學習的方法厘清交互界面設計視覺特征與用戶反饋之間的關系，主要包含以下步驟：

①構建數據集：本文通過自動化移動應用交互界面獲取工具（AMACS，Automated Mobile Application Content Sensing）收集移動應用交互界面數據，并進一步結合應用市場數據與用戶評分，構建移動應用交互數據集，解決傳統理論研究樣本集小的問題；

②量化視覺特征：基于現有定性移動應用交互界面設計和數據集，定義移動應用交互界面設計視覺特征，包括界面對比度、一致性等；

③分析特征關系：利用決策樹和支持向量回歸等機器學習方法，分析交互界面設計視覺特征與用戶反饋之間關系；

④形成知識：利用決策樹模型反推特征范圍，產生定量移動應用交互界面設計原則。

通過以上步驟，本文充分利用現有的交互設計理論知識與海量移動應用交互數據來產生新的移動應用交互設計原則、方法與標準。全文結構如下，第2章綜述相關工作，第3章描述構建數據集的方法和過程，第4章描述了識別移動應用交互界面設計視覺特征的方法，第5章分析了視覺特征與用戶反饋之間的關系，第6章通過模型歸納交互界面設計原則，第7章對文章進行總結，并展望未來工作。

2 相關工作

近年來，人與計算機的關系正在從“人機交互”向“人機共生”發展［11］，研究者在不斷探索人機自然融合、深度協作的技術發展方向，新型信息技術的不斷涌現和消費電子市場的快速發展都為人機交互技術的發展帶了全新的機遇。

現有的移動應用交互界面設計研究主要基于定性設計經驗總結，比如文章［6］總結了5個被討論和引用最多的交互界面設計原則，包括一致性、層級關系、對比度、平衡感與和諧感。研究工作［7］通過比較不同的購物應用的界面設計，分析用戶對不同設計特性的偏愛程度。文章［8］分析了老齡用戶使用移動醫療應用的行為，提出了針對老齡用戶的應用界面設計要充分考慮用戶的文化背景。這類定性研究能為相關的交互設計工作提供思路與依據，但樣本數有限的定性研究難以充分客觀的感知用戶的交互審美傾向，用戶的審美主觀性和交互行為本身的復雜性使得基于經驗總結和定性分析難以在交互界面設計的復雜要素之間建立因果關系，所以現有方法無法解決當前交互設計中面臨的挑戰。

為了解決以上挑戰，基于人工智能的人機交互界面設計是重要發展方向之一，目標是通過人工智能研究具有基礎指導意義的人機交互與界面設計規則。Swire［12］通過深度學習的方法提取交互界面特征，并支持通過草圖進行快速搜索和輔助設計。文章［13］在［14］收集的數據集的基礎上通過神經網絡研究移動應用界面設計模型和交互模式，并把相關成果和研究思路成果推廣到服裝設計［15］等相關領域。

基于數據的移動應用交互界面設計分析需要數據集的支撐，但移動應用交互界面數據獲取是具有挑戰性的。交互數據獲取的方式主要分為兩種：白盒測量和用戶側黑盒采集。白盒測量的方式簡單直接，能獲取到相對準確的交互數據，但需要交互目標和用戶的配合，適用的應用場景較少，大部分場景還是需要使用黑盒的方式進行數據獲取，如［16-17］采用類似自動化測試的方式實現自動化的交互數據獲取，但無法很好的保證效率與隱私。文章［14］采用眾籌的方式采集移動應用交互數據，這類方法依賴于人工，成本高，可拓展性差。

3 構建數據集

海量的數據是在用戶主觀審美與大眾公共審美要素之間建立關聯的“橋梁”，但目前缺乏大規模移動應用交互界面數據集和獲取工具，面臨的主要技術挑戰包括：1）移動應用大部分是閉源程序，無法獲得到源代碼并進行分析，在不使用源碼分析的情況下，能獲取到的應用內容和系統信息都十分有限；2）受限跳轉和動態內容也使得探索移動應用變得具有挑戰性，移動內容經常是與相關移動應用強耦合的，在不安裝和使用相關移動應用的情況下無法直接獲取移動應用內容。

為了應對移動應用交互界面難獲取的挑戰，作者提出了一種自動移動應用交互界面獲取工具AMACS（Automated MobileApplication Content Sensing）［18］，其主要工作原理如圖1所示，AMACS主要由4個部分構成：1）Android設備，由于成本和隱私保護的考慮，AMACS使用了Android虛擬設備（AVD），以虛擬機的形式運行在服務器上，能像正常智能手機一樣安裝和運行移動應用；2）設備控制器，AMACS利用開源的移動應用測試工具Appium［19］控制Android設備和移動應用。設備控制器作為遠程調試工具與Android設備通過網絡連接，能將邏輯單元的指令翻譯成交互命令，發送給Android設備，實現驅動設備探索和提取內容的目的；3）邏輯單元，通過運行動態內容兼容的探索算法來為設備控制器生成指令，實現對移動應用的探索和內容獲取；4）數據存儲單元，負責存儲所有從移動應用獲取的交互界面內容和所有的中間結果，比如應用狀態標識符等。

圖1 移動應用交互界面獲取工具

AMACS基于交互界面布局樹（如圖2）對交互界面進行建模識別，設計應用狀態標識符模型，AMACS基于應用狀態標識符，確定移動應用的狀態，并追蹤探索路徑，檢索已經獲取到的內容，支持高效的移動應用探索和交互界面獲取。

圖2 移動應用交互界面布局樹

在應用標識狀態標識符模型的基礎上，如圖3所示，AMACS進一步利用有限狀態自動機模型對移動應用進行建模。

圖3 移動應用有限狀態自動機模型

定義1（移動應用模型）:

其中∑是輸入集合，包括系統事件和用戶交互。S是由所有應用狀態標識符組成的狀態集合，S0是應用初始狀態，一般為應用主頁或者歡迎頁面。S0為狀態轉移方程，δ為結束狀態，應用退出。

在移動應用模型的基礎上，本文設計了動態內容魯棒的移動應用交互界面探索算法，能夠在沒有任何先驗知識的情況下自動探索移動應用，并自動提取相關交互數據。AMACS 能夠自動安裝移動應用、自動生成用戶交互、提取交互界面和保存截圖，具體采集的交互數據包括：

1）交互界面截圖，AMACS 通過自動探索移動應用，并同時對移動應用交互界面進行截圖；

2）原始內容布局文件，與交互界面截圖一一對應，以XML 文件的形式輸出，與網頁源代碼HTML類似，包含所有顯示的元素和相關的屬性，如圖2 所示，能解析成樹狀結構，從中可以獲得所有元素的位置和大小。

新聞咨詢類的移動應用具有界面內容豐富和交互操作相對簡單的特點，適合AMACS 提取豐富的交互界面內容，能很好的支撐移動應用交互界面視覺特征的分析。本文通過AMACS 對109個該類別的移動應用進行了數據收集（如表1），主要分為三類：國內新聞、國際新聞和旅游咨詢。

表1 數據集

圖4 是數據集中交互界面截圖的示例圖片，紅框標記的部分是工具識別出的頁面上的關鍵控件與內容，以原始內容布局文件的形式輸出。圖4 顯示AMACS 能有效的獲取移動應用交互界面的截圖，識別交互界面布局與元素，支撐面向移動應用的交互界面設計定量分析。

圖4 移動應用交互界面截圖

為了評估移動應用的交互界面設計質量，本文利用網頁爬蟲和被試實驗收集了兩方面的移動應用用戶反饋質量指標：

①移動應用下載量，來自移動應用榜單網站App Annies［20］的移動應用的下載量數據，可以從一定程度上代表用戶市場對應用質量的評價；

②人工評分，通過被試人員對移動應用交互界面進行主觀比較打分，整理后形成移動應用交互界面設計的人工評分

4 量化視覺特征

通過相關文獻調研［6］，本文總結了5個被討論和引用最多的交互界面設計原則，如表2 所示。結合AMACS 構建的數據集和定性原則，進一步構建了相應的量化視覺特征［21-22］。

表2 交互界面設計原則

4.1 一致性

一致性是被討論最多的界面設計原則之一，文字、顏色、圖片、動畫和導航等設計元素應該在移動應用中保持相對一致［23］，類似的屬性和布局能幫助用戶更快的適應和上手［24］。基于以上定性的描述，一致性定義為移動應用所包含的不同的交互界面布局或模式的數量。頁面一致性的計算過程可以分為以下兩步：

步驟1：計算界面之間的相似度。本文使用離散余弦變換函數作為感知哈希函數［25-26］，計算交互界面截圖之間相似度，這種方法經常用于圖片檢索，感知哈希函數能針對每張截圖生成一個數字指紋，并基于指紋計算圖片之間的相似程度。

步驟2：聚類。在相似度的基礎上，本文對圖片進行DBSCAN［27］聚類，該聚類方法的好處是不需要提前設置聚類的類別數量，并且對噪音具有較強的魯棒性。聚類結果中的類別代表移動應用中存在的不同交互界面模式，類別的數量代表移動應用的頁面一致性。

4.2 層級關系

層級關系用于衡量頁面或屏幕上的內容組織形式是否滿足用戶的閱讀習慣。用戶傾向于通過層級關系判斷內容之間的重要程度和關系［6］，“相似內容、相近排列”的原則經常用于良好的層級關系設計，能減少界面的復雜程度。

本文根據用戶使用移動設備的習慣將層級關系分類為：

①橫貫模式：如圖5(a)所示，移動設備屏幕被橫向貫穿的線條分割成多塊，主要的元素沿著屏幕自上而下分布；

②非橫貫模式：如圖5(b)所示，屏幕上有縱向的線條對功能區域進行切分。

圖5 層級關系

移動應用交互界面的原始內容布局XML 文件中包含界面顯示的所有元素和相應的元素屬性，比如位置和包含文字等。因為XML 文件通常可以轉化成樹狀數據結構，其中的點代表頁面元素，文章［21］中提出了一種自底向上的啟發式算法通過界面的樹狀結構來判斷頁面的層級關系類型，如算法1 所示。

算法1 確定層級關系輸入：界面元素樹T，層級閾值l，屏幕大小(W,H)1. 目標節點集合：Atar ←{}2. 橫貫節點數量：numk ←0 3. 總節點數：tot ←0 4. for T 上的每個葉子節點n do 5. tot ←tot + 1 6. 找到n之上l的節點n'7. n'元素的大小為(w',h')8. if w' ≈W then 9. numk ←numk + 1 10. end if 11. end for 12. if numk ≈tot then 13. 界面為橫貫模式14. else 15. 界面為非橫貫模式16. end if

基于數據集的分析表明，76%的移動應用主要的交互界面是橫貫模式，說明了移動應用更傾向于這種層級關系模式，這樣也許更加符合用戶的閱讀習慣。

4.3 對比度

對比度是影響交互界面可讀性和層級關系的重要指標之一，交互界面通過顏色、大小和形狀等要素建立對比度，改善界面的可視度和可讀性［28］。移動應用中的交互界面不僅要傳遞視覺信息，還要支持方便高效的交互行為，界面的對比度能有效影響界面的可用性。因為缺少移動應用對比度的具體標準與計算方法，所以本文參考了網頁設計規范［29］中的相關定義。

定義2（移動應用交互界面對比度）

其中Lwhite是交互界面上亮色的相對明度，因為大部分界面的默認背景顏色是白色的，所以就選取白色為默認的亮色；Ld是界面上主導顏色的相對明度，文章［21］中提出了一個啟發式算法來確定界面的主導顏色。相對明度定義如下。

定義3（相對明度）對于sRGB 顏色，

L= 0.2126R + 0.7152G + 0.0722B

因為移動應用界面在某種程度上與網頁的用處是類似的，所以使用以上公式來確定移動應用界面的對比度也是在合理范圍之內的。

4.4 平衡感

交互界面設計中的平衡感指的是合理布置元素與空間，使頁面上的任何一部分都不壓過其他部分。由于文字是大部分移動應用的用戶關注點，本文提出了通過計算應用界面文字密度分布的方式來評價界面的平衡感。

定義4（文字密度）界面上特定點pos 的密度可以定義為

其中e為交互界面元素集合E 中的元素，Te為元素e中的字符數量，we,he為元素e的長和寬。

圖6 是移動應用界面文字密度分布的熱力圖例子，從圖上可以顯著看出屏幕上的文字密度的頂點在屏幕的右上角，并且向四周以遞減的趨勢分布。為了方便表示，本文使用文字密度最大處在交互界面上的位置來代表交互界面的平衡感特征，本文將交互界面按照4x4 分成16 份，并按照1-16 進行編號，文字密度頂點所在的區域即為平衡感特征。

圖6 平衡感分布

4.5 和諧感

和諧感指的是通過交互界面設計為用戶提供一個舒服和具有美感的交互環境，來幫助用戶學習和適應［30］。其中，顏色和諧指的是在設計中通過顏色的布置來提升用戶感受。顏色和諧［31］包含兩種基本模式：互補和諧，指相反的色調之間的互補關系；同色和諧，指類似的色調之間的和諧。

在HSV 顏色模型（色調、飽和度和明度）中，色調通常是以角度（［0°,360°］）的方式來表示的。本方法中將色調盤等分成6 等份，每個部分為60°代表一組相似的顏色。根據［31］，對于兩個不同顏色，如果它們的色相屬于同一部分或相鄰部分，被認為是同色和諧；如果兩個顏色所屬的色相部分相差180°，則認為是互補和諧。

定義5（交互界面和諧度）對于交互界面p，

其中，Ni是屬于(i°,(i+60)°］和((i+180)°,(i+240)°］的像素數量，Ntot是像素總量。

5 分析特征關系

分析和理解交互界面設計視覺特征與用戶反饋之間的關系，能幫助設計師與開發者更有針對性的優化移動應用的交互界面，提高用戶體驗。但視覺特征之間的關系相對復雜，比如交互界面的層級關系、平衡感和和諧感都會影響交互界面的一致性；另一方面，視覺特征影響用戶反饋的方式也比較復雜，比如相對簡單的交互界面設計會提高交互界面的一致性和簡化層級關系，也許能提高用戶對移動應用的審美評價，但簡化的界面也可能會使得應用無法快速滿足部分用戶的交互需求，降低移動應用的易用性。

為了厘清視覺特征和用戶反饋之間的關系，本章節定義了兩個不同用戶反饋指標［21］，如下所示：定義6（下載量指標）：對于移動應用a，

其中Down(a)為移動應用a的下載量，d的取值范圍為2到10。

定義7（人工評分指標）：對于移動應用a，

其中t(p)為頁面p的人工評分，P(a)為移動應用a的頁面集合，Norm為歸一化函數。

下載量指標相對綜合，表示用戶對于移動應用質量的總體評價，而人工評分指標代表用戶對于交互界面設計的評價。

基于以上用戶反饋指標，本文首先計算了特征與指標之間的相關系數，結果展示在表格3 中。從結果中可以看出，下載量和人工評分之間的相關度比較低，只有0.078，說明影響下載量的不只是交互界面設計，可能還有其他的因素發生作用。單個視覺特征和用戶反饋指標之間并沒有特別強的直接線性相關性，說明特征與指標之間的關系更加復雜。

表3 相關系數

為了進一步挖掘多個視覺特征與用戶反饋之間的深層次關系，本文使用的是相對簡單和直接的支持向量回歸（SVR）［32］的方法。支持向量回歸與支持向量機（SVM）［33］的分類方法類似，使用的核函數是徑向基函數［34］，主要思路是在變化過的特種空間內調整超平面來最大化間距和最小化誤差，從而發現特征和質量指標之間的關系。利用第4 章中提出的5個量化特征對數據集進行訓練與交叉驗證，在實驗過程中，隨機的將數據集分成70%的訓練集和30%的測試集，并經過20次的重復交叉驗證來獲得更加穩定的結果。

圖7(a)展示了針對下載量指標的預測誤差分布，圖7(b)是針對人工評分指標的預測誤差分布。對于下載量指標而言，結果顯示平均預測誤差1.40，80%的測試點誤差小于2.0。對于人工評分指標而言，平均預測誤差是0.217，80%的測試點誤差小于0.3。總體而言，只使用簡單的機器學習方法和默認參數的情況下，SVR就能有效的感知移動應用界面視覺特征和用戶反饋指標之間的關系。實驗結果也證明了提出的定量特征和非線性的估計方法能用于進行用戶反饋的估計。

圖7 誤差累計分布圖

在此基礎上，本文進一步拓展分析模型，基于以下三種機器學習模型來分析界面視覺特征與下載量質量指標之間的非線性關系：

①樸素貝葉斯是應用最為廣泛的機器學習分類算法之一，使用概率統計的方法對數據集進行學習和分類；

②支持向量機是一類監督學習分類方法，其原理是在樣本空間內求解滿足條件的超平面；

③決策樹能夠表示分類結果與參數概率之間的樹狀映射關系，樹中每個分叉路徑則代表的某個參數判斷條件，而每個葉結點代表分類結果，對應從根節點到該葉節點的路徑即特征分類標準。

模型訓練與驗證的結果展示在圖8和表4中。

表4 模型估計準確度

從圖8 和表4 可以看出決策樹在分類準確度上在三種方法中表現最好，能達到83.5%的準確度，平均誤差只有0.362，表示決策樹模型能相對準確的表示視覺特征與下載量指標之間的關系。

圖8 下載量估計誤差

在決策樹模型的基礎上，可以計算出不同特征之間的不同權重，表5 表示決策樹模型中的特征權重，可以看出一致性、對比度和和諧感與下載量之間的關系更加密切，在交互界面設計中應該更加關注。

表5 決策樹模型特征權重

6 形成知識

第5 章通過非線性的支持向量回歸模型在交互設計視覺特征與用戶反饋指標之間建立了關系，但設計師與開發者無法直接通過抽象的機器學習模型指導和優化移動應用的交互界面設計。為了產生具有可讀性和可操作性的交互界面設計原則，本文通過對支持向量回歸模型離散化，設置質量指標的特征閾值點，將支持向量回歸模型轉化為決策樹，從而分析出關鍵的視覺設計特征邊界［21］。

優質移動應用的質量指標閾值特征點設置為：

1）移動應用下載量指標da> 8；

2）移動應用交互設計人工評分Sa處于數據集整體前10%。

通過對支持向量回歸模型離散化，結合以上特征點，對模型結果進行可視化，可以得到圖9 為滿足下載量指標閾值的樣本點決策樹，圖10 為滿足人工評分指標閾值的樣本點決策樹。

圖10 人工評分指標決策樹

進一步，對圖9 中的下載量指標決策樹進行分析，存在4種滿足閾值的情況如表6。

圖9 下載量指標決策樹

表6 下載量指標閾值條件

對所有情況的條件取交集后，可以得出在滿足下載量指標閾值的情況下，交互界面設計應該滿足以下條件：

①一致性為9，即移動應用內部有9種交互界面模式；

②層級關系為橫貫模式；

③平衡感為13 或14，交互界面的元素和文字應該圍繞著屏幕左下角進行布局；

④和諧感在0.7～0.8之間。

對圖10 的人工評分指標決策樹模型進行分析，存在3種滿足閾值的情況如表7。

表7 人工評分指標閾值條件

條件取交集后對應的交互界面設計應該滿足以下條件：

①層次關系為橫貫模式；

②一致性為2或3；

③和諧感至少要超過0.7。

通過分析發現，在兩種用戶反饋指標下，優質移動應用具有的共性交互界面視覺特征為1）層級關系為橫貫模式；2）和諧感在0.7 以上。以上分析結果說明這兩點可以作為移動應用交互界面設計的共性原則。

兩種用戶反饋指標對應的一致性的范圍不同，因為下載量大的移動應用通常需要提供更豐富的內容，界面設計也就需要相對復雜，而使用更加簡潔與和諧的設計語言能提升用戶對交互界面本身的評價。根據移動應用的設計目的的不同，設計者可以相對應的調整交互界面的一致性，使得設計更加貼合用戶需求。

以上的移動應用交互界面設計原則由設計理論知識和數據挖掘兩方面驅動產生，既包含了現有工作的經驗，又包含了海量用戶的共性審美傾向。通過數據與知識聯合驅動的方法產生的交互界面設計建議是量化且具體的，更適應于指導實際場景下移動應用人機交互界面設計工作。

7 結論與未來工作

本文總結了面向移動應用人機交互面臨的機遇與挑戰，說明了交叉領域研究的必要性。在數據層面，本文提出的AMACS 解決了移動應用交互數據獲取難的挑戰，高效建立了交互界面數據集；在模型層面，基于5個相關文獻中提及最多的定性設計原則，本文提出了對應的交互界面設計視覺特征，并通過決策樹等模型在將用戶反饋和交互設計之間建立量化關系；在知識層面，本文基于量化模型，針對不同的交互設計評價標準，產生了實際可操作的交互界面設計原則。數據與知識驅動的移動應用交互界面設計能夠有效解決交互設計理論研究復雜性的挑戰，完善交互設計理論，提高設計標準的可操作性，充分融合了理論與技術兩方面的研究成果。

基于現有的工作基礎，下一步的研究工作可以分為以下幾個方向：

①在構建數據集上面，進一步完善AMACS 工具，提高移動應用內容獲取能力，拓展和豐富現有數據集，細化移動應用類別和應用場景；

②在量化視覺特征方面，基于現有的數據與知識聯合驅動的方法，拓展量化視覺特征的范圍，進一步完善移動應用交互界面設計知識體系；

③在分析特征關系方面，拓展交互界面設計相關的機器學習模型，基于用戶反饋和交互設計之間的關系，研究和設計交互界面設計輔助工具，比如自動化界面布局與配色等；

④在形成知識方面，研究人工智能輔助的移動應用交互界面設計，將交互設計理論與人工智能進行融合，優化和探索全新的交互設計流程。