具有幾何約束的非等面積界面布局優(yōu)化方法

韋曦，孫靖

具有幾何約束的非等面積界面布局優(yōu)化方法

韋曦1，孫靖2

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

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

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

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

1 方法概述

為了尋求具有高可用性的布局優(yōu)化方案，針對(duì)現(xiàn)存方法在求解布局過(guò)程中存在的問(wèn)題，提出一種基于GA–MAMD–ILP集成的布局方法，詳細(xì)流程見圖1。

這項(xiàng)工作中提出的方法分3個(gè)階段。在第1階段，確定合適布局原則；第2階段，收集相關(guān)數(shù)據(jù)用于求解基于幾何約束的非等面積UI布局優(yōu)化問(wèn)題。在第3階段，通過(guò)TOPSIS、AHP和DEA等多屬性決策方法對(duì)備選方案進(jìn)行排序，然后，使用ILP對(duì)3種方案排名尋找一致性排序結(jié)果。

圖1 本文方法的流程

1.1 問(wèn)題描述

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

圖2 多功能鉆機(jī)控制面板，每個(gè)元素為一個(gè)AOI

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

表1 以往文獻(xiàn)中對(duì)待布局元素長(zhǎng)寬比值的設(shè)置

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

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

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

1.2 確定布局原則

不了解界面布局原則，不服從人的認(rèn)知因素的界面布局，勢(shì)必會(huì)導(dǎo)致性能和用戶體驗(yàn)的下降[14]。本研究使用界面布置的基本設(shè)計(jì)原則和基于認(rèn)知心理學(xué)的相關(guān)知識(shí)[4]共同建立以下布局設(shè)計(jì)原則。

原則1：重要性和使用頻率原則。元件的尺寸大小應(yīng)根據(jù)其重要性和使用頻率確定，重要性和使用頻率的綜合權(quán)重越高，元件的尺寸應(yīng)該越大。

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

1.3 生成備選布局方案

在此階段，根據(jù)上文中的布局原則，構(gòu)建目標(biāo)函數(shù)，用于在UI空間內(nèi)找到在滿足所有約束條件交互成本最小的布局方案。以下是該階段的詳細(xì)步驟。

1.3.1 數(shù)據(jù)收集

步驟1，使用眼動(dòng)追蹤設(shè)備獲取相關(guān)性和使用頻率數(shù)據(jù)。

為了獲取布局所需的相關(guān)數(shù)據(jù)，此節(jié)使用眼動(dòng)追蹤設(shè)備進(jìn)行第1次眼動(dòng)實(shí)驗(yàn)，收集待布局元素間的訪問(wèn)順序及使用頻率等數(shù)據(jù)。這是一種非侵入式的數(shù)據(jù)收集方式，收集到的數(shù)據(jù)更加合理。

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

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

1）多屬性決策方法確定重要性和操作頻率的主觀權(quán)重。由位專家和操作員根據(jù)個(gè)待布局元素在使用過(guò)程中的重要性程度給出評(píng)分，分值在1～100分。分值越大表示元素越重要。構(gòu)建重要性決策矩陣[a]，分值呈現(xiàn)正態(tài)分布狀態(tài)。對(duì)[a]進(jìn)行歸一化處理得到矩陣[]。根據(jù)步驟1，可獲得使用頻率矩陣[]=[f]。

由于參與評(píng)分和執(zhí)行任務(wù)的人員數(shù)量是相同的，并且是同一組人。所以，重要性和使用頻率的綜合權(quán)重矩陣可表如下：

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

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

對(duì)于待布局元素，其重要性和使用頻率的綜合權(quán)重如下：

1.3.2 構(gòu)建及求解目標(biāo)函數(shù)

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

方案1，約束條件。

使用算法求解布局問(wèn)題時(shí)，需要使所有待布局元素在CP內(nèi)尋優(yōu)，不能超出CP的邊界且所有元素間不能發(fā)生重疊。

邊界約束。任意擺放的一個(gè)待布局元素同時(shí)滿足以下兩個(gè)約束則不會(huì)超出邊界。

重疊約束。對(duì)于兩個(gè)待布局元素和，滿足以下任一約束條件便不會(huì)發(fā)生重疊情況。

幾何約束。對(duì)于任意一個(gè)待布局元素，其長(zhǎng)寬比R都在指定取值范圍內(nèi)，不能超出該取值范圍。

方案2，構(gòu)建目標(biāo)函數(shù)。

在既定的CP空間內(nèi)，為使交互成本達(dá)到最小，每個(gè)待布局元素放置時(shí)需考慮元素間的相關(guān)性。相關(guān)性越高，元素間的距離應(yīng)越小。優(yōu)化的目標(biāo)是使界面布局的交互成本達(dá)到最低。目標(biāo)函數(shù)見式（13）

方案3，使用GA求解目標(biāo)函數(shù)。

因?yàn)椴季謨?yōu)化問(wèn)題是一個(gè)NP–hard問(wèn)題，因此本文通過(guò)使用GA求解方案2中目標(biāo)函數(shù)。通過(guò)改變的參數(shù)，獲得一組不同值的備選布局方案并計(jì)算每個(gè)備選布局方案的最小交互成本。

1.3.3 評(píng)估指標(biāo)

該評(píng)付指標(biāo)的目的是評(píng)估上文中生成的所有備選布局方案的優(yōu)劣。

1.3.3.1 確定評(píng)估指標(biāo)

第一，Tompkins等[16]研究表明，一個(gè)有效的布局可以將制造成本降低10%～30%；交互成本的高低可以反映用戶與界面交互績(jī)效的高低；因此，交互成本可以作為評(píng)價(jià)界面布局交互績(jī)效高低的一個(gè)重要指標(biāo)。第二，因?yàn)楸疚氖轻槍?duì)具有幾何約束的布局優(yōu)化方法研究，所以本文設(shè)置了不同的取值；GA尋到最優(yōu)解所花費(fèi)的時(shí)間可以作為評(píng)判幾何約束設(shè)置合理性的一個(gè)指標(biāo)。第三，針對(duì)目前多變的用戶需求，僅根據(jù)交互成本來(lái)評(píng)價(jià)布局的優(yōu)劣是不合理的[5]，因?yàn)樵u(píng)價(jià)一個(gè)界面布局效果的好壞取決于人與界面的交互性能，而布局優(yōu)化的主要目的是提高界面的可用性[17]?？捎眯远x涉及三個(gè)方面的指標(biāo)，即效率、有效性和滿意度。

本文將完成指定任務(wù)所花費(fèi)的時(shí)間作為評(píng)估布局方案的效率指標(biāo)；用戶在特定界面上完成指定任務(wù)時(shí)出現(xiàn)的錯(cuò)誤次數(shù)可以作為一個(gè)有效性的指標(biāo)，情境后問(wèn)卷（After-Scenario Questionnaire，ASQ）[18]可以衡量用戶在使用界面完成任務(wù)時(shí)的滿意度，必須使用這三個(gè)不同指標(biāo)對(duì)界面進(jìn)行可用性進(jìn)行評(píng)估。針對(duì)本文有面積大小和幾何約束的特點(diǎn)，對(duì)ASQ中的3個(gè)問(wèn)題做一定調(diào)整：“問(wèn)題1，總體來(lái)說(shuō)，我對(duì)完成這些任務(wù)的容易程度感到滿意；問(wèn)題2，總體來(lái)說(shuō)，我對(duì)完成這些任務(wù)所用的時(shí)間感到滿意；問(wèn)題3，總體來(lái)說(shuō)，在完成任務(wù)時(shí)，在特定的距離下，我對(duì)能清晰感知到界面中所有待布局元素所呈現(xiàn)關(guān)鍵信息感到滿意?！笔軠y(cè)者使用李克特量表從1（非常滿意）-7（非常不滿意）對(duì)3個(gè)問(wèn)題給出評(píng)分，得分越低滿意度越高。

1.3.3.2 計(jì)算評(píng)估指標(biāo)

在1.3.2節(jié)方案3中由GA求解目標(biāo)函數(shù)的過(guò)程中得出交互成本和尋優(yōu)時(shí)間。

效率、有效性和滿意度通過(guò)GA生成所有滿足約束條件的備選布局方案后，為了評(píng)估每個(gè)備選布局方案的可用性，對(duì)個(gè)受測(cè)者進(jìn)行第2次眼動(dòng)實(shí)驗(yàn)。在第2次眼動(dòng)實(shí)驗(yàn)中，受測(cè)者在每一個(gè)備選布局方案上執(zhí)行與眼動(dòng)實(shí)驗(yàn)1相同15項(xiàng)任務(wù)，記錄受測(cè)者在每個(gè)備選布局方案上完成任務(wù)所花費(fèi)的時(shí)間、出現(xiàn)的錯(cuò)誤次數(shù)和每個(gè)受測(cè)者在完成任務(wù)后完成一份ASQ，ASQ最終得分為3個(gè)問(wèn)題得分的平均值。最終，將布局庫(kù)中所有備選方案與每個(gè)布局方案對(duì)應(yīng)的5個(gè)評(píng)估指標(biāo)數(shù)據(jù)生成一個(gè)決策矩陣。

1.4 備選布局方案排序

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

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

2 實(shí)例運(yùn)用

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

選擇20個(gè)有該類型鉆機(jī)操作經(jīng)驗(yàn)的操作員或?qū)＜遥贑P上執(zhí)行15個(gè)預(yù)定義任務(wù)，這些任務(wù)包括常見任務(wù)、緊急任務(wù)和不能犯錯(cuò)的關(guān)鍵任務(wù)。

2.1 布局原則

本文的2個(gè)布局原則見1.2節(jié)。

2.2 布局方案

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

表2 待布局元素（AOIs）間的轉(zhuǎn)換矩陣

Tab.2 Conversion matrix between AOIs

注：數(shù)值取小數(shù)點(diǎn)后2位。

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

上述20名操作員和專家根據(jù)以往使用經(jīng)驗(yàn)，對(duì)16個(gè)待布局元素進(jìn)行重要度評(píng)分，構(gòu)建重要度矩陣，并對(duì)矩陣進(jìn)行歸一化處理，見表4。

根據(jù)表3—表4和式（1）計(jì)算可得16個(gè)待布局元素的重要性和使用頻率綜合權(quán)重矩陣，見表5。

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

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

Tab.3 The use frequency matrix of AOIs

注：數(shù)值取小數(shù)點(diǎn)后2位。

注：a圖中包括熱點(diǎn)圖，鼠標(biāo)點(diǎn)擊點(diǎn)（黃色圓點(diǎn)）和鼠標(biāo)運(yùn)動(dòng)軌跡（白色線）；b圖AOIs間的轉(zhuǎn)換次數(shù)，黃色線越粗代表AOIs之間的轉(zhuǎn)換次數(shù)越多。

表4 待布局元素重要性評(píng)分的歸一化矩陣

Tab.4 Normalized matrix of the importance score of AOIs

注：數(shù)值取小數(shù)點(diǎn)2位。

表5 重要性和使用頻率綜合權(quán)重矩陣

Tab.5 Importance and comprehensive weight matrix of use frequency

注：數(shù)值取小數(shù)點(diǎn)2位。

Tab.6 Optimal subjective weight and optimal objective weight

注：數(shù)值取小數(shù)點(diǎn)2位。

表7 待布局元素的重要性、使用頻率綜合權(quán)重和優(yōu)化后待布局元素的面積

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

20名領(lǐng)域類專家和操作員作為受試者進(jìn)行第2次眼動(dòng)實(shí)驗(yàn)。使用眼動(dòng)設(shè)備記錄每一個(gè)受測(cè)者在每個(gè)備選布局方案上完成指定15項(xiàng)任務(wù)時(shí)所花費(fèi)的時(shí)間和出現(xiàn)錯(cuò)誤的次數(shù)，每個(gè)受測(cè)者在完成測(cè)試任務(wù)后被要求填寫一個(gè)ASQ。出現(xiàn)的錯(cuò)誤類型包括受測(cè)者沒(méi)有清晰識(shí)別AOI中的關(guān)鍵信息造成的錯(cuò)誤、鼠標(biāo)點(diǎn)擊操作出現(xiàn)的錯(cuò)誤和沒(méi)有完成指定的任務(wù)而出現(xiàn)的錯(cuò)誤。最終，所得完成指定任務(wù)所花費(fèi)的時(shí)間、錯(cuò)誤率合ASQ得分（取3個(gè)問(wèn)題得分的平均值），見表8。

2.3 方案排序

方案1 AHP，20個(gè)專家與操作員對(duì)5個(gè)評(píng)估指標(biāo)進(jìn)行兩兩比較打分，構(gòu)建判斷矩陣。表9給出了5個(gè)評(píng)估指標(biāo)的權(quán)重，并對(duì)判斷矩陣進(jìn)行一致性檢驗(yàn)。對(duì)每個(gè)布局方案的5個(gè)評(píng)估指標(biāo)進(jìn)行加權(quán)求和，見表10。

方案2 TOPSIS，將歸一化處理后的矩陣與專家給出的每一個(gè)評(píng)估指標(biāo)的權(quán)重相乘，構(gòu)造加權(quán)正態(tài)化決策矩陣；從加權(quán)正態(tài)化決策矩陣中，找出理想解和負(fù)理想解，并計(jì)算每個(gè)布局方案與正理想解和負(fù)理想解的距離，并利用負(fù)理想解與正理想解和負(fù)理想解之和的比值確定所有備選布局方案進(jìn)行排序，結(jié)果見表11。

表8 20個(gè)備選布局方案的評(píng)估指標(biāo)

Tab.8 Evaluation factors of 20 alternative layout schemes

注：數(shù)值取小數(shù)點(diǎn)2位。

方案3 DEA，確定輸入量：交互成本、GA所需的尋優(yōu)時(shí)間、完成指定任務(wù)的時(shí)間、完成指定任務(wù)中出現(xiàn)的錯(cuò)誤次數(shù)以及用戶的ASQ評(píng)分；確定輸出量：為了確定所有備選布局方案的有效性，將輸出量統(tǒng)一設(shè)置為1；計(jì)算的效率指數(shù)值并對(duì)備選布局方案進(jìn)行排名，結(jié)果見表12。

Step4 ILP

使用式（14）對(duì)上述三種多屬性決策方法進(jìn)行一致性求解，結(jié)果見表13。

表9 AHP計(jì)算所得權(quán)重

Tab.9 Weight calculated by AHP

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

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

Tab.10 Ranking of all alternative layout schemes by AHP

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

Tab.11 Ranking of all alternative layout schemes by TOPSIS

注：數(shù)值省略到小數(shù)點(diǎn)后6位。

表12 使用DEA對(duì)所有備選布局方案進(jìn)行的有效性排名

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

表13 20個(gè)備選布局方案的共識(shí)排名

Tab.13 Consensus ranking of 20 alternative layout schemes

3 結(jié)果

將本文尋到的最優(yōu)布局方案——第17個(gè)備選方案與原始界面的5項(xiàng)評(píng)估指標(biāo)指值進(jìn)行對(duì)比，見表14，數(shù)據(jù)來(lái)自第2節(jié)實(shí)驗(yàn)1和實(shí)驗(yàn)2中。本文5個(gè)評(píng)價(jià)標(biāo)準(zhǔn)都為低優(yōu)指標(biāo)，即數(shù)值低的為理想解。將原始布局方案與本文方法得出的最優(yōu)布局方案做對(duì)比，由表14可見，使用本文方法獲得的最優(yōu)布局在交互成本、尋優(yōu)時(shí)間、完成任務(wù)的所需的時(shí)間、錯(cuò)誤次數(shù)和ASQ得分等5個(gè)指標(biāo)上都明顯優(yōu)于原始布局。根據(jù)以上對(duì)比結(jié)果可知，本文方法得到最優(yōu)布局方案比原始方案有效地縮短了完成任務(wù)的時(shí)間、減少了發(fā)生錯(cuò)誤的次數(shù)和提高了用戶的滿意度、方案的可用性。

表14 原始布局方案與最優(yōu)布局方案的對(duì)比

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

4 討論

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

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

此外，本文方法也存在一些局限性，在計(jì)算每個(gè)待布局元素的面積時(shí)是將所有待布局元素鋪滿整個(gè)CP，沒(méi)有考慮待布局元素間的間距和留白等因素。本文中得出的最優(yōu)元素值與CP的比例有關(guān)，CP的長(zhǎng)寬比不同，求解出的最優(yōu)的取值可能是不同的。在下一步的工作中，將實(shí)驗(yàn)在不同界面比例下，何種長(zhǎng)寬比取值能獲得高可用性的布局方案。

5 結(jié)語(yǔ)

本文以提高布局優(yōu)化方法生成布局方案的適用性和可用性為目的。本文方法在優(yōu)化布局時(shí)考慮了每個(gè)待布局元素的元素面積和幾何約束。因此，得到的優(yōu)化布局可以直接使用，不需設(shè)計(jì)人員再進(jìn)行后期的手動(dòng)調(diào)整。本文提出了一種新的確定UI上每個(gè)待布局元素面積（MAMD–Entroy混合方法）的方法，并通過(guò)不斷改變的參數(shù)值，使用GA獲得一組不同長(zhǎng)寬比情況下的布局方案；然后以三種多屬性決策方法針對(duì)五個(gè)指標(biāo)對(duì)備選布局方案進(jìn)行排序，最終使用ILP獲得共識(shí)排序，找出長(zhǎng)寬比在[0.5,2]時(shí)得到了可用性最高的布局方案。通過(guò)實(shí)驗(yàn)可發(fā)現(xiàn)，通過(guò)本文方法獲取的布局方案與原始方案相比，不僅降低了交互成本和算法尋優(yōu)的時(shí)間，完成任務(wù)的時(shí)間、錯(cuò)誤次數(shù)和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] 梁永強(qiáng), 李培林, 王崴, 等. GUI中圖標(biāo)利用率與易搜索率匹配設(shè)計(jì)方法[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 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] 陳德鈞, 方衛(wèi)寧, 秦永貞, 等. 軌道車輛司機(jī)操縱臺(tái)人機(jī)界面布局優(yōu)化模型與算法[J]. 鐵道學(xué)報(bào), 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] 沈秀敏. 基于整數(shù)線性規(guī)劃方法的集裝箱裝載布局優(yōu)化問(wèn)題研究[D]. 大連: 大連海事大學(xué), 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復(fù)合材料的動(dòng)態(tài)機(jī)械性能及其在界面評(píng)價(jià)中的應(yīng)用[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] 汪坤, 史偉民, 李建強(qiáng), 等. 基于深度學(xué)習(xí)的織物印花分割算法研究[J]. 現(xiàn)代紡織技術(shù), 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

國(guó)家自然科學(xué)基金面上項(xiàng)目（61873105）

韋曦（1984—），女，碩士，講師，主要研究方向?yàn)閺V告設(shè)計(jì)、品牌設(shè)計(jì)等。

責(zé)任編輯：陳作