具有幾何約束的非等面積界面布局優化方法

韋曦，孫靖

具有幾何約束的非等面積界面布局優化方法

韋曦1，孫靖2

（1.宿遷學院，江蘇 宿遷 223800；2.江蘇海洋大學，江蘇 連云港 222005）

由于計算的難度與精度問題，在求解布局的過程中通常不考慮待布局元素面積的大小和形狀的幾何約束問題，導致求解的布局結果是理論上的，無法達到真正實用的目的。為提高界面布局優化方法生成布局方案的可用性，提出了一種集成啟發式算法、多屬性決策（MAMD）和整數線性規劃（ILP）的方法。首先，在獲取到待布局元素間相關性、待布局元素的使用頻率和面積等數據情況下，使用遺傳算法（GA）通過改變待布局元素幾何約束的參數生成一組備選布局方案；其次，將交互成本、GA尋優所花費的時間、有效性、效率和滿意度作為評價界面布局的五個指標，根據TOPSIS、AHP和數據包絡分析（DEA）等多屬性決策方法對所有備選布局方案進行排序；最后，使用ILP方法獲取一致性排序。獲得一個有效、具有高可用性的布局方案。根據實驗結果可知，該方法尋到的最優布局方案比原始方案有效地降低了交互成本和算法尋優的時間，提高了布局方案的可用性。

用戶界面；幾何約束；多屬性決策方法；遺傳算法；布局優化；可用性

用戶界面（UI）布局的重點在于如何在有限的顯示區域內有效地實現信息的布局[1]。為包含多個控件和指示器的控制面板（CP）建立最佳配置是一個復雜的問題。近年來，一些學者對設施布局進行了廣泛研究，這些研究主要集中在平面圖上待布局元素間的相對位置，如梁永強等[2]提出一種圖標利用率與易搜索率進行匹配的布局設計方法。但當布局問題的復雜性增加時，最常用的求解布局的方法是建立UI交互的定量模型，使用啟發式算法尋找提供最佳模型性能的配置[3]，如鄧麗等[4]根據人的認知規律總結出布局原則并建立相關的數學模型，使用遺傳和蟻群算法加以求解。這些研究主要集中在人機界面上待布局元素間相對位置的尋優，但卻忽略了元素的面積大小和幾何約束（長寬比）問題，一般假設待布局元素的面積相等[4-5]或使用原始待布局元素面積的大小[6]。這樣求解出的布局是理論上的，在實際生產中，不符合實際布局的情況，需要后期手動加以調整。目前，也有一些學者研究具有非等面積的界面布局問題。但Diego等[7]在其文獻中指出，關于布局優化的研究要么忽略了幾何限制，要么對各元素的幾何比例建立了一個不合理的區間。此外，在啟發式算法求解布局的過程也存在一些問題。首先，用于收集數據的一些方式，會使獲得的數據呈現一定的主觀性或者不精確[8]。其次，使用啟發式算法求解得到的結果一般是在可接受計算成本內的最好的解，但無法判斷所得解的可行性和最優性[9]。基于以上考慮，本文提出了一種基于遺傳算法–多屬性決策–整數線性規劃（GA–MADM– ILP）的具有幾何約束的非等面積用戶界面布局優化集成方法。

1 方法概述

為了尋求具有高可用性的布局優化方案，針對現存方法在求解布局過程中存在的問題，提出一種基于GA–MAMD–ILP集成的布局方法，詳細流程見圖1。

這項工作中提出的方法分3個階段。在第1階段，確定合適布局原則；第2階段，收集相關數據用于求解基于幾何約束的非等面積UI布局優化問題。在第3階段，通過TOPSIS、AHP和DEA等多屬性決策方法對備選方案進行排序，然后，使用ILP對3種方案排名尋找一致性排序結果。

圖1 本文方法的流程

1.1 問題描述

本研究給定需要優化的控制面板（CP），見圖2。其控制面板上有指示器及操作按鍵兩個類型的元素。CP的長度為，寬為，面積為，需要布局元素的數量為，為待布局元素幾何比即長寬比（/），s為待布局元素在CP上所占面積的大小。這些待布局元素的形狀是矩形的，且是具有靈活長寬比的矩形。此處的靈活是該矩形的長寬比在一定區間內可以自由變化，且每個矩形的長寬比可能不同。當設備的長寬比不固定時，就有可能獲得滿足元素更嚴格幾何約束的解[10]。

圖2 多功能鉆機控制面板，每個元素為一個AOI

為了獲取可用性高的布局方案，收集以往文獻對元素長寬比（）值設置的數據，為本文值的設置提供理論指導，見表1。Rusu等[11]認為最優的長寬比應該為1，這樣的比值可以提高圖形的可讀性和理解性；Tate和Smith在文獻[12]中為布局提供了設施最大允許長寬比的數值參考，他們認為設施的最大允許長寬比或者最大寬長比超過3是把設施布置在過長的單元內，會造成面板面積一定程度的浪費，不適宜于任何類型的生產工作。Diego等[10]在其研究中表明，在長寬比小于3的情況下尋到了交互成本最小的布局方案，而Diego等[13]在其研究中，將待布局元素根據其類型的不同將最大允許長寬比設置為6。這一數值的設定與Tate和Smith等的研究[12]結果產生了矛盾。所以，本文在以上文獻基礎上，不預先設定值，而是在1到6之間進行實驗。針對在特定面積下何種長寬比能尋到最優的布局方案進行實驗，根據以往文獻提供的數據并且考慮到計算難度與計算時間等問題，在1到3之間時，將值的步長設置為0.1，而在3到6之間的步長設置為0.5，進行實驗。

表1 以往文獻中對待布局元素長寬比值的設置

Tab.1 The setting of length-width ratio (R) of AOIs discussed in previous literatures

在本文中，考慮到所有待布局元素放置的方向都是自由導向的（水平或垂直放置）且=，所以，所有待布局元素長寬比的取值為[min,max]，min和max分別為待布局元素的最小和最大長寬比。為保證每個待布局元素布局的靈活性，其長寬比可以在該區間內取任意值。<1時，即元素為垂直放置，>1時，元素為水平放置，見圖3。

圖3 待布局元素形狀的長寬比(R)在最小和最大長寬比之間的變化

1.2 確定布局原則

不了解界面布局原則，不服從人的認知因素的界面布局，勢必會導致性能和用戶體驗的下降[14]。本研究使用界面布置的基本設計原則和基于認知心理學的相關知識[4]共同建立以下布局設計原則。

原則1：重要性和使用頻率原則。元件的尺寸大小應根據其重要性和使用頻率確定，重要性和使用頻率的綜合權重越高，元件的尺寸應該越大。

原則2：相關性原則。兩元素間相關性的高低與元素間順序訪問的次數成正比。相關性越高，元素間在界面上的位置必須彼此靠近，即兩元素間相關性越高距離越近。

1.3 生成備選布局方案

在此階段，根據上文中的布局原則，構建目標函數，用于在UI空間內找到在滿足所有約束條件交互成本最小的布局方案。以下是該階段的詳細步驟。

1.3.1 數據收集

步驟1，使用眼動追蹤設備獲取相關性和使用頻率數據。

為了獲取布局所需的相關數據，此節使用眼動追蹤設備進行第1次眼動實驗，收集待布局元素間的訪問順序及使用頻率等數據。這是一種非侵入式的數據收集方式，收集到的數據更加合理。

步驟2，多屬性決策–熵混合方法確定待布局元素的重要性和使用頻率數據。

在計算待布局元素的面積時，為了避免一些重要性高的元素占據大部分界面，而一些使用頻率高但重要度程度低的元素變得不切合實際的小，考慮到元素的重要性程度和使用頻率之間沒有必然的線性關系。因此，采用重要性和使用頻率綜合權重值確定元素面積的大小。本文使用多屬性決策與熵值法混合的方法來確定待布局元素重要性和使用頻率的綜合權重。采用多屬性決策的方法獲取待布局元素的主觀權重，同時采用熵值法獲得客觀權重，然后將主觀權重和客觀權重進行線性計算，得到待布局元素的綜合權重。

1）多屬性決策方法確定重要性和操作頻率的主觀權重。由位專家和操作員根據個待布局元素在使用過程中的重要性程度給出評分，分值在1～100分。分值越大表示元素越重要。構建重要性決策矩陣[a]，分值呈現正態分布狀態。對[a]進行歸一化處理得到矩陣[]。根據步驟1，可獲得使用頻率矩陣[]=[f]。

由于參與評分和執行任務的人員數量是相同的，并且是同一組人。所以，重要性和使用頻率的綜合權重矩陣可表如下：

待布局元素的重要性和使用頻率的綜合權重值可以定義如下：

2）熵值法確定重要性和操作頻率的客觀權重。

對于待布局元素，其重要性和使用頻率的綜合權重如下：

1.3.2 構建及求解目標函數

此階段的目標是尋到滿足所有約束條件下交互成本最低的布局方案。

方案1，約束條件。

使用算法求解布局問題時，需要使所有待布局元素在CP內尋優，不能超出CP的邊界且所有元素間不能發生重疊。

邊界約束。任意擺放的一個待布局元素同時滿足以下兩個約束則不會超出邊界。

重疊約束。對于兩個待布局元素和，滿足以下任一約束條件便不會發生重疊情況。

幾何約束。對于任意一個待布局元素，其長寬比R都在指定取值范圍內，不能超出該取值范圍。

方案2，構建目標函數。

在既定的CP空間內，為使交互成本達到最小，每個待布局元素放置時需考慮元素間的相關性。相關性越高，元素間的距離應越小。優化的目標是使界面布局的交互成本達到最低。目標函數見式（13）

方案3，使用GA求解目標函數。

因為布局優化問題是一個NP–hard問題，因此本文通過使用GA求解方案2中目標函數。通過改變的參數，獲得一組不同值的備選布局方案并計算每個備選布局方案的最小交互成本。

1.3.3 評估指標

該評付指標的目的是評估上文中生成的所有備選布局方案的優劣。

1.3.3.1 確定評估指標

第一，Tompkins等[16]研究表明，一個有效的布局可以將制造成本降低10%～30%；交互成本的高低可以反映用戶與界面交互績效的高低；因此，交互成本可以作為評價界面布局交互績效高低的一個重要指標。第二，因為本文是針對具有幾何約束的布局優化方法研究，所以本文設置了不同的取值；GA尋到最優解所花費的時間可以作為評判幾何約束設置合理性的一個指標。第三，針對目前多變的用戶需求，僅根據交互成本來評價布局的優劣是不合理的[5]，因為評價一個界面布局效果的好壞取決于人與界面的交互性能，而布局優化的主要目的是提高界面的可用性[17]。可用性定義涉及三個方面的指標，即效率、有效性和滿意度。

本文將完成指定任務所花費的時間作為評估布局方案的效率指標；用戶在特定界面上完成指定任務時出現的錯誤次數可以作為一個有效性的指標，情境后問卷（After-Scenario Questionnaire，ASQ）[18]可以衡量用戶在使用界面完成任務時的滿意度，必須使用這三個不同指標對界面進行可用性進行評估。針對本文有面積大小和幾何約束的特點，對ASQ中的3個問題做一定調整：“問題1，總體來說，我對完成這些任務的容易程度感到滿意；問題2，總體來說，我對完成這些任務所用的時間感到滿意；問題3，總體來說，在完成任務時，在特定的距離下，我對能清晰感知到界面中所有待布局元素所呈現關鍵信息感到滿意。”受測者使用李克特量表從1（非常滿意）-7（非常不滿意）對3個問題給出評分，得分越低滿意度越高。

1.3.3.2 計算評估指標

在1.3.2節方案3中由GA求解目標函數的過程中得出交互成本和尋優時間。

效率、有效性和滿意度通過GA生成所有滿足約束條件的備選布局方案后，為了評估每個備選布局方案的可用性，對個受測者進行第2次眼動實驗。在第2次眼動實驗中，受測者在每一個備選布局方案上執行與眼動實驗1相同15項任務，記錄受測者在每個備選布局方案上完成任務所花費的時間、出現的錯誤次數和每個受測者在完成任務后完成一份ASQ，ASQ最終得分為3個問題得分的平均值。最終，將布局庫中所有備選方案與每個布局方案對應的5個評估指標數據生成一個決策矩陣。

1.4 備選布局方案排序

該階段是本文的最后階段，該階段需要實現的目的是根據1.3.3節中提出的5個布局評估指標和多屬性決策方法對1.3節中生成的所有備選布局方案進行排序。為了克服多屬性決策方案的主觀性，使用三種多屬性決策方法（AHP、TOPSIS和DEA）分別對所有備選布局方案進行排序[19]。其中，AHP和TOPSIS為參數的多屬性決策評價方法，數據包絡分析（DEA，Data envelopment analysis）為非參數的多屬性決策評價方法，最早由查恩斯、庫珀和羅德斯于1978年提出，它是一種非參數MADM評估方法，可用于評估多輸入多輸出（單輸出）系統的有效性。最終，使用ILP對3種結果獲取一致性排序。

為了獲得最終排序結果，需要對上述三種多屬性決策方法獲得的排序結果進行聚合處理，使用整數線性規劃的方法[20]對三種布局方案進行一致性排序，見式(14)。

2 實例運用

為驗證本文所提出方法的有效性，以某應急救援設備的控制面板為例進行布局優化。利用軟件將該CP進行仿真（見圖2），利用眼動追蹤軟件檢測控件上的動作和被控過程中控件在相應的空間中響應。為了提高界面的空間利用率，不考慮原始面板布局中的空白區域（AOI17–AOI18）。CP上總待布局元素的個數=16，= 810 mm，=384 mm，=311 040 mm2。CP的總長寬比為2.11。座椅相對于CP的距離可進行調整，操作員標準坐姿情況下，距離取值為500 mm。

選擇20個有該類型鉆機操作經驗的操作員或專家，在CP上執行15個預定義任務，這些任務包括常見任務、緊急任務和不能犯錯的關鍵任務。

2.1 布局原則

本文的2個布局原則見1.2節。

2.2 布局方案

步驟1，獲取相關性數據和使用頻率數據。20名受測人員全部參與實驗，每人都需完成15項預定義的操作任務。其中，常用任務8項、機器故障狀態下的任務5項、不能出錯的關鍵任務1項和在短時間內應完成的緊急任務1項。收集全部操作者完成任務期間的眼動追蹤與鼠標點擊數據，從而計算得到每對AOIs間的雙向轉換矩陣。針對20位操作者，AOIs間的平均轉換矩陣見表2，AOI與自身不存在相關性。同時，收集20位受測者在完成任務期間對16個待布局元素的訪問次數。根據收集到每個待布局元素的訪問次數計算所得16個待布局元素的使用頻率矩陣，見表3。其中，操作者只有在每一個AOI上的注視停留時間超過300 ms才會被認為是AOIs之間的轉換。當受測者認為他們自己完成所有任務時點擊鍵盤空格鍵結束實驗。受試者眼動追蹤實驗的結果見圖4。

表2 待布局元素（AOIs）間的轉換矩陣

Tab.2 Conversion matrix between AOIs

注：數值取小數點后2位。

步驟2，多屬性決策–熵混合方法確定待布局元素的重要性和使用頻率數據。

上述20名操作員和專家根據以往使用經驗，對16個待布局元素進行重要度評分，構建重要度矩陣，并對矩陣進行歸一化處理，見表4。

根據表3—表4和式（1）計算可得16個待布局元素的重要性和使用頻率綜合權重矩陣，見表5。

根據表5和式（3）—（8）計算可得20個受測者的權重，見表6。根據式（9）計算可得16個待布局元素重要性和使用頻率的綜合權重值，見表7。根據Z和CP的總面積，計算可得每一個待布局元素在CP上所占面積，見表7。

表3 待布局元素（AOIs）的使用頻率矩陣

Tab.3 The use frequency matrix of AOIs

注：數值取小數點后2位。

注：a圖中包括熱點圖，鼠標點擊點（黃色圓點）和鼠標運動軌跡（白色線）；b圖AOIs間的轉換次數，黃色線越粗代表AOIs之間的轉換次數越多。

表4 待布局元素重要性評分的歸一化矩陣

Tab.4 Normalized matrix of the importance score of AOIs

注：數值取小數點2位。

表5 重要性和使用頻率綜合權重矩陣

Tab.5 Importance and comprehensive weight matrix of use frequency

注：數值取小數點2位。

Tab.6 Optimal subjective weight and optimal objective weight

注：數值取小數點2位。

表7 待布局元素的重要性、使用頻率綜合權重和優化后待布局元素的面積

Tab.7 Importance and comprehensive weight of use frequency of AOIs and area of AOIs after optimization

20名領域類專家和操作員作為受試者進行第2次眼動實驗。使用眼動設備記錄每一個受測者在每個備選布局方案上完成指定15項任務時所花費的時間和出現錯誤的次數，每個受測者在完成測試任務后被要求填寫一個ASQ。出現的錯誤類型包括受測者沒有清晰識別AOI中的關鍵信息造成的錯誤、鼠標點擊操作出現的錯誤和沒有完成指定的任務而出現的錯誤。最終，所得完成指定任務所花費的時間、錯誤率合ASQ得分（取3個問題得分的平均值），見表8。

2.3 方案排序

方案1 AHP，20個專家與操作員對5個評估指標進行兩兩比較打分，構建判斷矩陣。表9給出了5個評估指標的權重，并對判斷矩陣進行一致性檢驗。對每個布局方案的5個評估指標進行加權求和，見表10。

方案2 TOPSIS，將歸一化處理后的矩陣與專家給出的每一個評估指標的權重相乘，構造加權正態化決策矩陣；從加權正態化決策矩陣中，找出理想解和負理想解，并計算每個布局方案與正理想解和負理想解的距離，并利用負理想解與正理想解和負理想解之和的比值確定所有備選布局方案進行排序，結果見表11。

表8 20個備選布局方案的評估指標

Tab.8 Evaluation factors of 20 alternative layout schemes

注：數值取小數點2位。

方案3 DEA，確定輸入量：交互成本、GA所需的尋優時間、完成指定任務的時間、完成指定任務中出現的錯誤次數以及用戶的ASQ評分；確定輸出量：為了確定所有備選布局方案的有效性，將輸出量統一設置為1；計算的效率指數值并對備選布局方案進行排名，結果見表12。

Step4 ILP

使用式（14）對上述三種多屬性決策方法進行一致性求解，結果見表13。

表9 AHP計算所得權重

Tab.9 Weight calculated by AHP

注：CI=0.0050 CR=0.0044最大特征值=5.02。

表10 使用AHP對所有備選布局方案的排名

Tab.10 Ranking of all alternative layout schemes by AHP

表11 使用TOPSIS對所有備選布局方案的排名

Tab.11 Ranking of all alternative layout schemes by TOPSIS

注：數值省略到小數點后6位。

表12 使用DEA對所有備選布局方案進行的有效性排名

Tab.12 Effectiveness ranking of all alternative layout schemes by DEA

表13 20個備選布局方案的共識排名

Tab.13 Consensus ranking of 20 alternative layout schemes

3 結果

將本文尋到的最優布局方案——第17個備選方案與原始界面的5項評估指標指值進行對比，見表14，數據來自第2節實驗1和實驗2中。本文5個評價標準都為低優指標，即數值低的為理想解。將原始布局方案與本文方法得出的最優布局方案做對比，由表14可見，使用本文方法獲得的最優布局在交互成本、尋優時間、完成任務的所需的時間、錯誤次數和ASQ得分等5個指標上都明顯優于原始布局。根據以上對比結果可知，本文方法得到最優布局方案比原始方案有效地縮短了完成任務的時間、減少了發生錯誤的次數和提高了用戶的滿意度、方案的可用性。

表14 原始布局方案與最優布局方案的對比

Tab.14 Comparison of the original layout scheme and the optimal layout scheme

4 討論

本文采用5個指標綜合評價布局方案，從中選出對5個指標綜合滿意度最高的布局方案，而并非只考慮交互成本一項指標。從表8和表13中可知，當取值在2到3之間時，排名結果較好，而3時的布局方案排名結果整體優于3時。當3時的交互成本相對≤3平均增長了0.03%，3時的交互成本優于≤3，而當3時，隨著值增大而導致取值范圍增大，發生錯誤的次數和ASQ得分比≤3時的平均增加了0.58%和0.16%。從這些數據可發現當3時，交互成本增長率的百分比遠遠小于發生錯誤的次數和ASQ得分增長的百分比。所以，綜合這幾項指標來看，當3相對≤3時的排名更低。這一數值結果也驗證了Tate and Smith等提出的元素長寬比（或者寬長比）大于3是將元素放置于過長的單元內，不適宜于任何類型的生產工作。分析上述數據可知，長寬比設置的不同，會影響用戶與界面的交互性能和可用性，而設置一個合適的長寬比取值范圍則可以獲得具有高可用性的布局方案。

將原始布局方案與本文方法選出的最優布局方案進行對比，從表14可發現，最優布局方案比原始方案減少了11.25%的交互成本，使用算法尋優所需的時間減少了14.89%，而用戶完成指定任務的效率增加了3.43%，完成指定任務的有效性增加了26.25%，用戶對最優布局方案的滿意度與原始布局相比，增加了73.47%。從這些數據中可得出結論：本文方法尋到的最優布局較之原始方案不僅降低了交互成本和算法尋優的時間，完成任務的時間、錯誤次數和ASQ也有不同程度的降低，方案的可用性有著明顯的提升。

此外，本文方法也存在一些局限性，在計算每個待布局元素的面積時是將所有待布局元素鋪滿整個CP，沒有考慮待布局元素間的間距和留白等因素。本文中得出的最優元素值與CP的比例有關，CP的長寬比不同，求解出的最優的取值可能是不同的。在下一步的工作中，將實驗在不同界面比例下，何種長寬比取值能獲得高可用性的布局方案。

5 結語

本文以提高布局優化方法生成布局方案的適用性和可用性為目的。本文方法在優化布局時考慮了每個待布局元素的元素面積和幾何約束。因此，得到的優化布局可以直接使用，不需設計人員再進行后期的手動調整。本文提出了一種新的確定UI上每個待布局元素面積（MAMD–Entroy混合方法）的方法，并通過不斷改變的參數值，使用GA獲得一組不同長寬比情況下的布局方案；然后以三種多屬性決策方法針對五個指標對備選布局方案進行排序，最終使用ILP獲得共識排序，找出長寬比在[0.5,2]時得到了可用性最高的布局方案。通過實驗可發現，通過本文方法獲取的布局方案與原始方案相比，不僅降低了交互成本和算法尋優的時間，完成任務的時間、錯誤次數和ASQ也有不同程度的降低，提高了方案的可用性。

[1] NIU Ya-feng, XIE Yi, XUE Cheng-qi, et al. Investigation on the Neurophysiological Correlates of Similarity Cognition of Digital Interface Color and Layout[J]. Advances in Mechanical Engineering, 2018, 10(11): 168781401880320.

[2] 梁永強, 李培林, 王崴, 等. GUI中圖標利用率與易搜索率匹配設計方法[J]. 計算機輔助設計與圖形學學報, 2018, 30(1): 155-162.

[3] LIANG Yong-qiang, LI Pei-lin, WANG Wei, et al. Design Method of Matching Icon Utilization and Easy Search Rate in GUI[J]. Journal of Computer-Aided Design & Computer Graphics, 2018, 30(1): 155-162.

[4] FRANCIS G. Designing Multifunction Displays: An Optimization Approach[J]. International Journal of Cog-nitive Ergonomics, 2000, 4(2): 107-124.

[5] DENG Li, WANG Guo-hua, YU Sui-huai. Layout Design of Human-Machine Interaction Interface of Cabin Based on Cognitive Ergonomics and GA-ACA[J]. Com-putational Intelligence and Neuroscience, 2016, 2016: 1032139.

[6] KUMAR R. Sustainable Robust Layout Using Big Data Approach: A Key towards Industry 4.0[J]. Journal of Cleaner Production, 2018, 204: 643-659.

[7] 陳德鈞, 方衛寧, 秦永貞, 等. 軌道車輛司機操縱臺人機界面布局優化模型與算法[J]. 鐵道學報, 2014, 36(11): 40-47.

[8] CHEN De-jun, FANG Wei-ning, QIN Yong-zhen, et al. Optimizing Model and Algorithm for Human-Machine

[9] Interface Layout of Metro Train Driver's Desk[J]. Journal of the China Railway Society, 2014, 36(11): 40-47.

[10] DIEGO M J A, SANTAMARINA S M C, ALCAIDE M J, et al. Solving Facility Layout Problems with Strict Geometric Constraints Using a Two-Phase Genetic Algorithm[J]. International Journal of Production Research, 2009, 47(6): 1679-1693.

[11] ALPPAY C, et al. An Ergonomics Based Design Research Method for the Arrangement of Helicopter Flight Instrument Panels[J]. Applied Ergonomics, 2015, 51: 85-101.

[12] 沈秀敏. 基于整數線性規劃方法的集裝箱裝載布局優化問題研究[D]. 大連: 大連海事大學, 2013.

[13] SHEN Xiu-min. Research on Layout Optimization of Container Loading Problem Based on Integer Linear Programming Approach[D]. Dalian: Dalian Maritime University, 2013.

[14] DIEGO M J A, SANTAMARINA S M C, CLOQUELL B V A, et al. Slicing Tree's Geometric Potential: An Indicator for Layout Problems Based on Slicing Tree Structure[J]. International Journal of Production Research, 2008, 46(4): 1071-1087.

[15] RUSU A, et al. A Straight-Line Order-Preserving Binary Tree Drawing Algorithm with Linear Area and Arbitrary Aspect Ratio[J]. Computational Geometry, 2015, 48(3): 268-294.

[16] TATE D M, SMITH A E. Unequal-Area Facility Layout by Genetic Search[J]. IIE Transactions, 1995, 27(4): 465-472.

[17] DIEGO M J A, et al. User-Interfaces Layout Optimization Using Eye-Tracking, Mouse Movements and Genetic Algorithms[J]. Applied Ergonomics, 2019, 78: 197-209.

[18] YAN Sheng-yuan, et al. Effect of User Interface Layout on the Operators’ Mental Workload in Emergency Operating Procedures in Nuclear Power Plants[J]. Nuclear Engineering and Design, 2017, 322: 266-276.

[19] KENNEDY A. Eye Tracking: A Comprehensive Guide to Methods and Measures[J]. The Quarterly Journal of Experimental Psychology, 2016, 69(3): 607-609.

[20] Tompkins J A. Facilities planning: A vision for the 21st century[J]. Iie Solutions. 1997, 29(8): 18-19.

[21] 普丹丹, 張富豪. 滌綸織物/PVC復合材料的動態機械性能及其在界面評價中的應用[J]. 絲綢, 2021, 58(10): 18-22.

PU Dan-dan, ZHANG Fu-hao. Dynamic Mechanical Properties of Polyester Fabric/pvc Composites and Their Applications in Interface Evaluation[J]. Journal of Silk, 2021, 58(10): 18-22.

[22] LEWIS J R. IBM Computer Usability Satisfaction Que-stionnaires: Psychometric Evaluation and Instructions for Use[J]. International Journal of Human-Computer Interaction, 1995, 7(1): 57-78.

[23] 汪坤, 史偉民, 李建強, 等. 基于深度學習的織物印花分割算法研究[J]. 現代紡織技術, 2021, 29(3): 45-50.

WANG Kun, SHI Wei-min, LI Jian-qiang, et al. Research on Fabric Printing Segmentation Algorthm Based on Deep Learning[J]. Advanced Textile Technology, 2021, 29(3): 45-50.

[24] KAUR H, SINGH S P, GLARDON R. An Integer Linear Program for Integrated Supplier Selection: A Sustainable Flexible Framework[J]. Global Journal of Flexible Systems Management, 2016, 17(2): 113-134.

Non-equal Area Interface Layout Optimization Method with Geometric Constraints

WEI Xi1, SUN Jing2

(1.Suqian University, Jiangsu Suqian 223800, China;2.Jiangsu Ocean University, Jiangsu Lianyungang 222005,China.)

Because of the difficulty and precision of calculation, the size of AOIs and geometric constraints are usually not considered in the process of solving the layout, which leads to the theoretical layout results and cannot achieve the real practical purpose. The work aims to propose a method integrating heuristic algorithm, multiple attribute decision making (MADM) and integer linear programming (ILP), so as to improve the availability of interface layout optimization method to generate layout scheme. At first, under the condition that the data such as the correlation between AOIs, the use frequency and the size of the area of AOIs were obtained, a set of alternative layout schemes were generated with genetic algorithm (GA) by changing that parameters of the geometric constraint of AOIs. Secondly, the interaction cost, time of GA optimization, effectiveness, efficiency and satisfaction were taken as the five criteria to evaluate the interface layout, and all the alternative layout schemes were ranked according to multiple attribute decision making such as TOPSIS, AHP and Data Envelopment Analysis (DEA). Then, the ILP method was used to obtain consistent ranking. Thus, an effective and highly available layout scheme was obtained. According to the experimental results, it can be found that compared with the original scheme, the optimal layout scheme can effectively reduce the interaction cost and algorithm optimization time, and improve the availability of the layout scheme.

user interface (UI); geometric constraints; multiple attribute decision making (MADM); genetic algorithm (GA); layout optimization; availability

TB472

A

1001-3563(2022)24-0075-12

10.19554/j.cnki.1001-3563.2022.24.009

2022–07–06

國家自然科學基金面上項目（61873105）

韋曦（1984—），女，碩士，講師，主要研究方向為廣告設計、品牌設計等。

責任編輯：陳作