面向知識重用和智能創新的交互界面進化設計研究

景春暉，支錦亦

面向知識重用和智能創新的交互界面進化設計研究

景春暉，支錦亦

(西南交通大學建筑與設計學院，四川 成都 611756)

為了讓交互界面脫離依賴設計師個人經驗和主觀認知的傳統設計方式，將設計知識加以重用，并為人工設計提供自動智能的創新啟發。基于交互產品中常見的交互界面構建重用知識規則和邊界，構建了交互界面進化基因模型，并利用遺傳算法，通過構建針對交互界面編碼的遺傳算子、重用知識約束規則庫和交互式評價等進化模塊，形成了面向知識重用和自動化智能創新的交互界面進化設計方法。最后，在方法基礎上，以目前常見的5個交互登錄界面作為初始種群，進化生成了45個有效的子代個體。并通過設計實踐驗證了方法的有效性。結果表明，設計知識通過設計規則的方式被總結重用，并通過約束進化的方式進行了自動智能化式的輔助設計，提升了設計知識重用及計算機輔助智能創新水平。

知識重用；智能創新；進化；交互界面；遺傳算法

當前，交互界面設計主要依賴設計師個人的經驗和主觀認知，設計知識難以有效的傳承和重用，這對設計經驗不足的新手設計師具有不良影響[1]，也不利于設計水平的穩定控制。針對這種現象，業界開展了計算機輔助界面設計的探索，如阿里巴巴公司的“魯班”系統，可自動對banner界面進行設計。但這種設計更多采用視覺元素排列組合的方式進行創新，在本體創新上比較薄弱。目前關于計算機輔助界面設計本體創新的研究主要包括：

(1) 通過進化生成突破性的“創新點”，觸發和引導設計師的創新能力[2]。如CHAN等[3]利用進化算法獲取家族化磨具設計的創新結構；趙海英等[4]利用遺傳進化思想對地毯圖案進行了創新設計；YUAN等[5]基于進化方法對蠟染的圖形進行了創新設計等。

(2) 以繼承設計知識為前提啟發設計師的創作靈感，使設計過程和結果同時兼具創新性和合理性。如鄧海靜和鄧丁奇[6]借用TRIZ需求進化定律對微耕機進行了創新設計；景春暉和趙江洪[7]基于現有產品設計知識進行汽車造型進化設計；以及基于用戶知識的進化設計和在建筑設計中的應用[8-9]等。

可見，交互界面設計機理尚不明確，進化驅動的交互界面設計方法研究還比較薄弱，亟待開展相關研究。因此，本文基于進化思想，將交互界面設計問題映射為視覺單元的組合變異問題，將客觀設計知識轉化為約束算法，形成設計知識庫。將主觀設計知識通過參與式評價的方式對設計知識加以重用，并在此基礎上，基于進化算法形成完整的交互界面智能設計輔助方法，且進行了設計實踐驗證。該方法在繼承設計知識，啟發設計師創新、提高設計效率等方面具有重要意義。

1 交互界面進化基因模型

原型(prototpe)的概念來源于希臘語“prototypos”，是一個由“protos(初始)”和“typos(模式、模式、印象)”組成的復合詞[10]。對于交互界面來說，界面原型是交互界面的幾何布局基礎，包含了界面的基礎構型信息，也被稱為“低保真”(圖1)。因為界面原型可以幫助設計師采用較少的時間、專業技能和資源實現快速的產品推想與測試[11]，因此常被用于描繪設想、設計方案以及界面布局。設計師在進行界面設計時，為了降低修改成本，會將界面架構的形式創新放在線框層面的低保真設計階段。其中關鍵的視覺單元(form，如登陸按鈕等)，及單元之間的布局與關系的組合，決定了交互界面的表現形式[1]。因此，本文以界面原型作為進化設計的操作對象。

界面基因是構成界面的基本元素，也是構建進化方法的前提。構建界面進化基因表達模型，可以將交互界面設計的主觀感性求解問題轉化為理性求解問題，即完成問題域到編碼域的知識映射。以典型交互界面-登陸界面為例(圖1)，登陸界面原型是由賬號登錄框、密碼框、登陸按鈕等幾何單元構成。若將整個交互界面視作產品基因的表現型，這些幾何單元即為產品基因的局部表現型，基因片段的組合即構成產品基因組。

圖1 登錄界面及界面原型

交互界面的產品基因組是由代表局部幾何單元的子基因組構成的。將每個子基因組的幾何形態與所處位置加以參數化描述，即可將子基因組映射為最底層的數據形式，即基因。將基因編碼進行組合即構成了交互界面基因組。基因組編碼采用定長的二進制編碼。以登陸界面為例，界面基因組主要由賬號登錄框、密碼框、登陸按鈕、幫助按鈕、注冊按鈕、以及快捷登陸選項子基因組構成，將其分別進行編碼，則有：1為快捷方式、2為賬戶名、3為密碼、4為幫助、5為登陸、6為注冊等6組子基因組。

以界面左上端為原點構建參數坐標，矩形單元基因由矩形中心位置參數和矩形長寬參數構成，即

以某移動端交互產品登錄界面為例(圖2)，其基因構成主要為

將1~6加以組合，即構成了該交互界面的產品基因組

圖2 登錄界面產品基因組構成

Fig. 2 Login page product genome

2 進化策略

將每個交互界面視為一個個體，多個個體即可組成種群。在種群繁衍過程中，生成的新個體需要在基因變異(創新)的同時，受到規則(設計經驗知識)的約束。因此，在進化策略方面，主要采用模擬生物進化的選擇、交叉、變異等進化算子進行計算機模擬，進化生成的個體受到審美體驗、可用性和易用性等知識約束框架的篩選，并受到人因評價因素的影響。

2.1 進化算子

進化算子決定了個體基因的交叉和變異形式。包括選擇、交叉、變異算子。

(1) 選擇算子。根據優劣度決定個體基因的保留概率，本文選用適應度比例選擇方法，采用輪盤賭的方式來實現。對于給定規模為的群體={1,2,···,a}，個體a?的適應度值為(a)，其選擇概率為

(2) 交叉算子。可決定個體間交換基因串的概率。在一般的進化算法中，交叉概率P通常取值0.25~0.75，通過多次試運行，本文取值為0.49，交叉方式為多點交叉。

(3) 變異算子。決定個體基因發生突變的概率。首先對個體進行基本變異概率的判斷，然后根據基本變異概率進行實際的基因變異操作。對于基本變異概率P，為了保證性狀的穩定性，通常取較小的0.01~0.20。然而由于本文采用小樣本種群(5個個體)，并且在設計情境中需要較大的變異激發設計靈感，因此增大了變異概率P。通過試運行發現P值位于0.20~0.40間較為合理，本文取值為0.34。

2.2 設計知識重用約束框架

交互界面設計的知識重用與計算機算法的結合有2種途徑：①將客觀性較強的設計知識轉化為計算機約束算法的邏輯形式；②將主觀性較強的設計知識通過人的參與(如打分評價)進行收斂化和參數化。構建約束算法形式，設計重用知識的目的在于，總結現有的設計知識，形成可用于約束的設計知識，并持續補充“可成長”的設計知識庫。

具有豐富經驗的設計師，在發散概念的同時會考慮產品的可用性和可實現性。設計知識此時就體現為邏輯和規則的約束。如果將這些約束機制進行參數化定義，即形成一系列參數化約束框架，可用于規范后續設計個體的生成，從而引導進化。界面設計的約束知識有多種類型，對于設計知識的總結是持續性的，相應的知識庫也是具有成長性的。

2.2.1 設計邏輯約束知識

設計師的經驗知識經常以邏輯規則的形式體現。本文主要采用：①訪談法結合問卷調查[12]來收集抽象信息，并在此基礎上加以總結，得到幾何邏輯的經驗知識；②基于“形狀文法(shape grammar，SG)”的圖形化比例分析等方式對界面幾何特征進行分析分解[13]，得到造型表征的幾何邏輯規則。邏輯約束知識案例如下：

名稱：賬號輸入與密碼輸入單元幾何關系(圖3)。

表達：賬號輸入與密碼輸入單元在橫向長度上等距，平行且起始位置相同。

邏輯表征為

,(5)

圖3 賬號輸入與密碼輸入單元幾何關系

2.2.2 邊界閾值約束知識

邊界閾值約束知識用來保證進化結果中不會出現脫離界面尺寸約束的個體。根據國家標準GB 8567等技術法規，利用時間序列分析法，以5.8寸移動屏幕為縮放標準，以左上角點為縮放基點，提取39個典型登陸界面設計中的原型輪廓線(圖4)。對攜帶關鍵幾何信息的輪廓線控制點進行疊加提取，然后進行極值篩選，即可得到每個視覺單元的關鍵幾何信息的最大和最小值。為了寬松設計空間，將極值各擴展mm (為變量，可依擴展需求而定，值越大，設計空間越寬松，生成個體的創新性就越高，但隨之可行性風險也越高)，最終可以得到界面設計邊界演變閾值空間向量min，max。新生成的個體知識參數必須在閾值范圍內，否則就會被降低適應度甚至直接被淘汰，即

圖4 賬號單元邊界閾值抽取

Fig. 4 Boundary threshold extraction of account unit

2.2.3 認知極限約束知識

界面設計需符合人的認知規則，如較小的字體在有的設計情境中可以營造精致的認知感，但字體過小會造成用戶認知困難。為了獲取登陸界面設計各設計單元的認知約束閾值，研究通過在登陸界面整體尺寸不變的前提下，針對一系列逐次遞減的尺寸單元進行對比性測試，以觸發式響應實驗的方式獲取極限閾值。以賬號輸入框縱向認知為例，閾值知識表達方式如下：

名稱：賬號單元認知閾值(圖5)。

表達：當賬號輸入名單元方向的尺寸數據小于閾值時，用戶認知發生困難。即需要大于 該值。

邏輯表征為

當=1時，2≥，=4.6 (mm)(7)

圖5 賬號單元認知閾值

2.3 界面設計交互式評價

設計知識重用的另一種形式是將主觀設計知識通過人的參與(如評價)進行收斂化和參數化。在進化設計中，對個體的評價可以決定其基因被遺傳的概率大小，進而影響后續個體的形態發展，因此評價機制的設計對于整個進化方法至關重要。本文以圖形美學為例，構建多因素設計評價規則。基于劍橋CRILLY等[14]提出的“基于視覺的用戶與產品互動”模型，將設計物視作信息的發射端，評價者視作為接收端，那么這種交互可以引發用戶在認知、情感與行為的反應[15]。因此，本文的界面設計評價主要從認知、情感和行為角度進行體現。

在處理時，認知、情感方面的體驗評價采用交互式語義評價的方式進行(圖6)，即根據短文本語義分析法[16]，首先搜集自然語言中與移動設備界面設計認知和情感相關的“詞條本體”[17]，按照GB13190_91《漢語敘詞表編制規則》將包含認知情感信息的形容詞語義抽取出來作為界面設計的標準認知情感體驗評價目標語義，經過頻次排序，最終得到標準認知情感語義子集分別為

而后將標準認知情感語義設計成Likert 5點語義量表，讓用戶對被評價個體根據標準語義進行打分，最終得到個體在認知和情感方面的體驗評價分值。為了提升評價方法的有效性和適用性，開發了一個可以將特征點基因可視化為低保真界面圖像的程序[18]，用戶直接面對造型特征線進行評價。

圖6 評價語義抽取流程

行為方面的體驗評價主要利用界面原型的方式讓用戶進行模擬操作，計算其操作的正確性與效率，從而確定該設計個體在操作行為方面的體驗評價分值。

得到種群中每個個體的認知、情感、行為體驗評價分值后，即可組成評價矩陣，按照各分值對于界面設計個體的重要程度模糊子集=(認知，情感，行為)，得到最終評價結果集合=×。

3 進化驅動的界面設計創新方法

利用遺傳算法將知識約束、交互式評價等知識組織起來，即可構成進化設計創新方法。其流程如圖7所示。

圖7 進化驅動的界面設計創新方法

模塊介紹：

(1) 種群模塊。由于界面設計類型有限，導致初始種群個體相對較少。因此本文采用小種群Micro-GA算法，每代種群包含5個個體。

(2) 約束模塊。為了判斷生成的個體是否符合界面設計規則，即對于每個生成的個體，首先用設計規則加以匹配，并賦予相應的適應度值，保證篩選后的種群在基本設計邏輯范圍內，保證個體合格率，提高評價效率。

(3) 遺傳算子模塊。其特點為：①增強進化算法的隨機搜索能力，加大變異概率；②加大導向個體的選擇概率；③保持種群個體的多樣性。

(4) 評價模塊。采用上一節中交互式評價方法對個體適應度進行評價。

(5) 迭代終止模塊。界面設計的創新實際上是一種探索，當可變參數變為確定參數時，解空間就變得愈加受限，隨之設計的變化選擇自由度就越小，探索性隨之減弱。對前期設計而言，需要的是設計空間(design space)，而不是設計集中(design fixation)，設計進化需要的是提出一系列良好解(“pretty good” solutions)而不是一個單一解(single optimal solution)[15]。因此，和傳統的進化目標不同。設計師需要的是具有基本設計邏輯的“設計啟發，而不是機器代替設計師進行創新。即在設計過程中，不會存在一個“綜合最優”的個體，而是生成一系列“較優”的個體刺激設計師進行后續創新。只有保持一定的模糊性，為設計創新的生成留有一定空間，才能服務于設計實踐。因此，當經歷5代進化后，如果連續兩代出現至少3個適應度大于等于3.5分(分值1~5)的個體，即認為達到了目標的設計空間，即可終止進化。

4 案 例

通過設計實踐來考察和驗證進化設計方法的可靠性和可用性。選取5款移動APP登陸界面作為進化設計的初始樣本(圖8)。樣本群基本覆蓋了目前市場上的典型登陸界面形式。

圖8 進化設計初始樣本種群

4.1 進化設計實驗

在設計教學中發現，沒有設計經驗的大一新生具有普通用戶的特征，而研究生則具有了一定的設計經驗知識，可視為設計師。為了收集普通用戶和設計師的見解，進而形成對設計進化方向的引導。通過隨機抽樣，選取大一學生和設計專業研究生各15人共30人組成評價組(平均年齡24.56歲，標準差4.27)。設計實驗流程如圖9所示，具體做法為：

(1) 由工作人員引導評價人員了解界面設計特征，介紹評價方法。

(2) 由評價人員針對進化設計的初始種群個體形態進行體驗評價，得到初始適應度值，然后開始進化計算。

(3) 計算機每生成一代個體，均由評價人員對其進行交互式評價后再返回進化計算中，循環迭代，直至符合進化迭代終止條件，結束實驗。

圖9 進化設計實驗流程圖

在設計知識庫中儲存了56個可用的知識約束條目算法，并由計算機自動控制表達滿足知識約束的造型數據信息，通過進化計算得到基因編碼后，通過可視化程序將編碼轉化為可視化形式，再由評價人員對可視化圖像進行打分。

4.2 進化設計結果

進化設計實驗進行10代終止，共產生45個新個體，如圖10所示，其收斂曲線如圖11所示。

基于進化結果中的優質個體(適應度較高)，輔助設計師進行設計，設計師并不是只在最后一代中選擇，而是在所有的優良個體中選擇。圖12為設計師按照此方法得到的方案。設計流程為：

(1) 在進化所得優質個體組中按設計師個人喜好選擇一個個體。

(2) 將選擇個體與父輩個體進行比較，確定其變化特征，變化特征即為設計重點。

(3) 結合設計定位進行概念發散，最終得到高保真設計方案。

圖10 進化譜系

圖11 收斂曲線((a)個體收斂曲線；(b)優質個體收斂曲線)

圖12 設計案例

5 結 論

本研究提出了一種面向知識重用和智能創新的交互界面進化設計方法。該方法將界面設計問題視作進化演變問題，對視覺單元進行了基因編碼，并根據設計師的邏輯化經驗知識對創新個體進行約束，結合交互式評價等進化操作，生成了可以輔助設計師進行概念生成和完善的創新個體。最終形成了一套計算機輔助智能創新的、面向設計知識重用的界面設計創新方法。方法可以輔助設計師在缺乏設計知識和主觀靈感時，進行啟發式、輔助式的產品設計，提升設計知識重用及計算機輔助智能創新水平。

本研究還存在著一系列不足，如研究在評價用戶篩選、評價因素規劃方面都不夠全面，采用的界面形式較單一；進化算子和進化規則也較簡單；評價機制還不夠智能、敏捷等。這些問題會在后續研究中深入探討。

[1] ALAN C. About Face 4交互設計精髓[M]. 電子工業出版社, 2015.ALAN C. About face 4[M]. Electronic Industry Press, 2015 (in Chinese).

[2] ROSENMAN M A. An exploration into evolutionary models for non-routine design[J]. Artificial Intelligence in Engineering, 1997, 11(3): 287-293.

[3] CHAN I W M, PINFOLD M, KWONG C K, et al. Automation and optimisation of Family Mould cavity and runner layout design (FMCRLD) using genetic algorithms and Mould layout design grammars[J]. Computer-Aided Design, 2014, 47: 118-133.

[4] 趙海英, 彭宏, 張小利. 基于進化計算的地毯圖案生成方法[J]. 圖學學報, 2015, 36(1): 41-46.ZHAO H Y, PENG H, ZHANG X L. A generation method of carpet pattern based on evolutionary computation[J]. Journal of Graphics, 2015, 36(1): 41-46 (in Chinese).

[5] YUAN Q N, XU S H, JIAN L. A new method for retrieving batik shape patterns[J]. Journal of the Association for Information Science and Technology, 2018, 69(4): 578-599.

[6] 鄧海靜, 鄧丁奇. 基于TRIZ需求進化定律的微耕機創新設計[J]. 圖學學報, 2017, 38(6): 881-886.DENG H J, DENG D Q. Innovative tiller design based on the TRIZ demand revolution law[J]. Journal of Graphics, 2017, 38(6): 881-886 (in Chinese).

[7] 景春暉, 趙江洪. 基于進化思想的汽車造型優化設計方法研究[J]. 中國機械工程, 2014, 25(11): 1517-1523.JING C H, ZHAO J H. Optimization design method of automobile styling based on evolution strategy[J]. China Mechanical Engineering, 2014, 25(11): 1517-1523 (in Chinese).

[8] DOU R L, ZONG C, LI M Q. An interactive genetic algorithm with the interval arithmetic based on hesitation and its application to achieve customer collaborative product configuration design[J]. Applied Soft Computing, 2016, 38: 384-394.

[9] MARS A, GRABSKA E, ?LUSARCZYK G, et al. Design characteristics and aesthetics in evolutionary design of architectural forms directed by fuzzy evaluation[J]. Artificial Intelligence for Engineering Design, Analysis and Manufacturing, 2020, 34(2): 147-159.

[10] 顧偉康, 尹歡. 隱藏式的設計方法在汽車內飾上的KANO模型研究[J]. 包裝工程, 2020, 41(24): 115-120.GU W K, YIN H. Research on Kano model of hidden design method in automobile interior[J]. Packaging Engineering, 2020, 41(24): 115-120 (in Chinese).

[11] 鄭楊碩, 賀世超, 羅文瀾. “有情輸入法”之信息交互原型設計與評價研究[J]. 包裝工程, 2019, 40(10): 162-168.ZHENG Y S, HE S C, LUO W L. Information interaction design and evaluation research of “youqing input method” prototype[J]. Packaging Engineering, 2019, 40(10): 162-168 (in Chinese).

[12] 張海濤, 唐詩曼, 魏明珠, 等. 多維度屬性加權分析的微博用戶聚類研究[J]. 圖書情報工作, 2018, 62(24): 124-133.ZHANG H T, TANG S M, WEI M Z, et al. Research on the clustering of microblog users based on multi-dimensional attribute weighting analysis[J]. Library and Information Service, 2018, 62(24): 124-133 (in Chinese).

[13] 鮮潔宇, 錢筱琳, 江國珍, 等. 拖拉機產品族設計DNA視覺化方法[J]. 機械設計, 2018, 35(8): 111-115.XIAN J Y, QIAN X L, JIANG G Z, et al. Visualization method for product family design DNA of tractor[J]. Journal of Machine Design, 2018, 35(8): 111-115 (in Chinese).

[14] CRILLY N, MOULTRIE J, CLARKSON P J. Seeing things: consumer response to the visual domain in product design[J]. Design Studies, 2004, 25(6): 547-577.

[15] 景春暉. 兼變傳衍、持經達變—基于進化思想的汽車造型設計方法[D]. 長沙: 湖南大學, 2015.JING C H. The car styling design method based on evolutionary thought[D]. Changsha: Hunan University, 2015 (in Chinese).

[16] 楚東曉, 彭玉潔. 構建面向服務產品的感性價值創造模型[J]. 裝飾, 2019, (7): 87-91.CHU D X, PENG Y J. Building a kansei value creation model in product design for senvice-oriented products[J]. Art & Design, 2019, (7): 87-91 (in Chinese).

[17] 馬靜, 何雪楓, 簡旭文. 動態熱門話題的“特征詞條本體”自動構建與進化研究[J]. 現代圖書情報技術, 2016(10): 33-41.MA J, HE X F, JIAN X W. Automatically building “feature items ontology” for trending topics[J]. New Technology of Library and Information Service, 2016(10): 33-41 (in Chinese).

[18] 景春暉, 張晶. 汽車造型設計空間研究[J]. 機械設計, 2016, 33(7): 121-124.JING C H, ZHANG J. Study on space design of automotive modeling[J]. Journal of Machine Design, 2016, 33(7): 121-124 (in Chinese).

Research on evolutionary design of interactive interface for knowledge reuse and intelligent innovation

JING Chun-hui, ZHI Jin-yi

(School of Architecture and Design, Southwest Jiaotong University, Chengdu Sichuan 611756,China)

In order to break away from the traditional design method depending on the designer’s personal experience and subjective cognition, to reuse design knowledge, and to provide innovative inspiration for artificial design with automatic intelligence, the evolutionary gene model of interactive interface was constructed based on the reuse knowledge rules and boundaries summarized in the process of interactive interface design. Then, the genetic algorithm was employed to construct the evolutionary modules of the interactive interface coding, such as genetic operators, knowledge reuse constraint rules base, and interactive semantic evaluation, forming an interactive interface evolutionary design method for knowledge reuse and automation intelligent innovation. Finally, on the basis of the method, forty-five effective offspring individuals were generated from the ten generations of evolution using five common login interactive interfaces as the initial population. The effectiveness of the method was verified by design practice. The results show that the design knowledge can be summarized and reused through design rules, and the automatic intelligent aided design can be undertaken through constraint evolution, thereby elevating the level of design knowledge reuse and computer-aided intelligent innovation design.

knowledge reuse; intelligent innovation; evolutionary design; interactive interface; genetic algorithm

TP 391；V 221；TB 47

10.11996/JG.j.2095-302X.2021020332

A

2095-302X(2021)02-0332-07

2020-09-10；

10 September，2020；

2020-10-23

23 October，2020

教育部人文社會科學研究項目(19YJA760094)；四川省社會科學規劃項目“四川統計發展專項課題”(SC20TJ031)；四川省哲學社會科學重點研究基地-現代設計與文化研究中心重點項目(MD20Z001)；工效學會-津發優秀青年學者聯合研究項目(CES-Kingfar-2019-001)；教育部人文社科青年基金項目(19YJC760054)

MOE Layout Foundation of Humanities and Social Sciences (19YJA760094);Sichuan Social Science Planning Fund Program: Sichuan Statistical Development Special Project (SC20TJ031); Sichuan Key Research Base of Philosophy and Social Science Key Project of Modern Design and Culture Research Center (MD20Z001); CES-Kingfar Excellent YoungScholar Joint Research Funding (CES-Kingfar-2019-001); Humanities and Social Science Youth Fund Project of Ministry of Education (19YJC760054)

景春暉(1986-)，男，河北承德人，講師，博士。主要研究方向為交互體驗與人因工程。E-mail：JINGCH@swjtu.edu.cn

JING Chun-hui (1986-), male, lecture, Ph.D. His main research interests cover user experience and human factors. E-mail：JINGCH@swjtu.edu.cn