基于手繪草圖的中保真原型自動生成

梁旭東， 黎 鳴， 趙慧玲， 范 益， 林 濤

(四川大學(xué)計算機學(xué)院， 成都 610065)

界面原型通常分為低保真和高保真兩種保真度[1]. 低保真原型通常是手繪草圖，其創(chuàng)建快速，便于比較多個設(shè)計方案，但需要較高的溝通成本[1-3]；高保真原型與最終界面外觀相似，便于溝通，但不易制作和修改[1,3]. 在實際的原型設(shè)計過程中，還存在著介于這兩者之間的中保真原型，它是對低保真原型的數(shù)字化，具有美觀的布局，但不具備視覺設(shè)計細節(jié)[1]. 中保真原型為后續(xù)的高保真原型設(shè)計奠定了必要基礎(chǔ).

在原型設(shè)計過程中，根據(jù)手繪草圖制作中保真原型是必要和關(guān)鍵的一步，該步驟完成的好壞將直接影響后續(xù)高保真原型的設(shè)計. 同時，快速將手繪草圖轉(zhuǎn)換為可以修改或重新排列組件的數(shù)字原型，對加快設(shè)計過程很有價值[4]. 此外，一項對設(shè)計師工作負荷進行分析的研究表明，相較于低保真原型和高保真原型，制作中保真原型需要花費設(shè)計師更多的體力和更少的腦力[5]，這說明中保真原型設(shè)計是一項高重復(fù)性、低創(chuàng)造性的工作，該過程具有很大的自動化潛力.

近年來，人工智能技術(shù)特別是目標檢測算法已取得了很大的進展[6,7]，該技術(shù)的引入對加快界面設(shè)計很有意義. 典型的研究思路是先對草圖進行檢測，然后生成代碼[8,9]，雖然取得了不錯的效果，但不便于設(shè)計師進行修改，他們更習(xí)慣于在設(shè)計工具的圖形界面上創(chuàng)作[3]. 因此，研究者們提出了面向設(shè)計師的原型界面自動生成方法[5,10]，然而，該方面的研究還有待完善，界面布局仍然需要設(shè)計師花費大量時間手動調(diào)整. 界面的美觀度對用戶感知的可用性和滿意度有積極影響，美觀是界面設(shè)計的重要目標[11]. 手繪草圖由于創(chuàng)建隨意的特點，缺乏美觀的布局，這導(dǎo)致其不便于溝通. 然而，目前還缺乏基于手繪草圖進行布局優(yōu)化的研究.

針對上述問題，本文提出了基于目標檢測和啟發(fā)式規(guī)則的中保真原型自動生成方法，旨在幫助設(shè)計師從低保真手繪草圖快速實現(xiàn)數(shù)字化的中保真原型. 首先，本文使用置換注意力(Shuffle Attention，SA)[12]改進Faster-RCNN[13](SA-FRCNN)以提高對手繪草圖的檢測精度；然后，提出啟發(fā)式規(guī)則基于檢測結(jié)果進行布局優(yōu)化，生成對應(yīng)的中保真原型. 此外，本文基于該方法開發(fā)了一個中保真原型自動生成工具，該工具實現(xiàn)為界面設(shè)計軟件Adobe XD的一個插件，接受拍照上傳的手繪草圖，能幫助設(shè)計師快速從手繪草圖自動生成數(shù)字化的中保真原型.

中保真原型自動生成分為界面組件檢測和界面布局優(yōu)化兩部分，其總體框架如圖1所示. 首先，本文使用目標檢測模型SA-FRCNN檢測手繪草圖中的組件，得到組件的類型、位置和大小等信息；接著采用啟發(fā)式規(guī)則，基于檢測結(jié)果劃分組件間的包含關(guān)系，并調(diào)整組件的大小和位置，自動生成可編輯、數(shù)字化的中保真原型.

圖1 中保真原型自動生成框架Fig.1 Framework of the mid-fidelity prototype automatic genetation

2.1 基于SA-FRCNN的界面組件檢測

在組件檢測階段，本文模型采用了引入置換注意力的兩階段目標檢測網(wǎng)絡(luò)SA-FRCNN，其網(wǎng)絡(luò)架構(gòu)如圖2所示. 該模型由以下幾部分組成：(1)基于ResNet50[14]改進的特征提取網(wǎng)絡(luò)SA-Net50，用于提取輸入草圖的特征；(2)區(qū)域建議網(wǎng)絡(luò)(Region Proposal Network，RPN)[13]將特征圖劃分為多個子區(qū)域，判斷每個子區(qū)域是前景還是背景，并對前景進行邊框回歸，得到感興趣區(qū)域(Region of Interest，ROI)[13]；(3)ROI池化結(jié)合特征圖和ROI得到ROI特征，并將其變換為固定長度，用于分類并再次精修位置.

圖2 SA-FRCNN網(wǎng)絡(luò)架構(gòu)Fig.2 Network architecture of SA-FRCNN

置換注意力采用置換單元高效組合通道注意力和空域注意力，其整體結(jié)構(gòu)如圖3所示，分為4個步驟：(1) 沿通道維度將特征X分為多個子特征[X1,…,Xg]，并對每個子特征Xα再次沿著通道維度等分為Xα1和Xα2，Xα1用于學(xué)習(xí)通道注意力特征，Xα2用于學(xué)習(xí)空域注意力特征；(2) 對Xα1采用全局平均池化(Global Average Pooling，GAP)[15]Fgp嵌入全局信息以生成通道統(tǒng)計，并通過帶有Sigmoid激活的門控機制σ緊湊特征，得到Xα1經(jīng)通道變換后的Xα1*；(3) 在Xα2上采用組歸一化(Group Normalization，GN)[16]來獲得空間統(tǒng)計，然后采用Fc來增強Xα2的表示，得到空域變換后的Xα2*；(4)合并Xα1*和Xα2*，并用通道置換操作進行組間通信，得到變換后的X*. 置換注意力的最終輸出具有與輸入相同的尺寸，這使得置換注意力可以輕易的嵌入到現(xiàn)有網(wǎng)絡(luò)架構(gòu)中.

圖3 置換注意力結(jié)構(gòu)Fig.3 Architecture of shuffle attention

2.2 基于啟發(fā)式規(guī)則的界面布局優(yōu)化

上一階段的輸出是一組對應(yīng)于被檢測組件的包圍框，由于手繪草圖的隨意性，這些包圍框在布局上可能存在排列錯亂和重疊等問題，本文基于啟發(fā)式規(guī)則進行布局優(yōu)化，算法描述如算法1所示.

算法1 基于啟發(fā)式規(guī)則的布局優(yōu)化算法

輸入：經(jīng)檢測所得的組件列表L

輸出：布局優(yōu)化后的組件列表L*

Begin

(1) 對于任意兩組件C1和C2:

(2)α:= min(C1.area,C2.area)

(3) 如果C1和C2產(chǎn)生重疊區(qū)域A且A.area>0.8α:

(4) 如果C1.area>C2.area，C1為C2的父節(jié)點，裁去C2超出C1的區(qū)域

(5) 否則，C2為C1的父節(jié)點，裁去C1超出C2的區(qū)域

(6)ω:= min(C1.w,C2.w)

(7) 如果|C1.x-C2.x|<ω/4，進行左對齊

(8) 如果|C1.w-C2.w|<ω/4，使其寬相等

(9)η:= min(C1.h,C2.h)

(10) 如果|C1.y-C2.y|<η/4，進行上邊對齊

(11) 如果|C1.h-C2.h|<η/4，使其高相等

(12) 對任意父節(jié)點相同的C1和C2：

(13) 當C1和C2產(chǎn)生重疊區(qū)域A時，記A的寬和高分別為Δw和Δh

(14) 如果Δw>Δh，所有C.y>=A.y的組件C向下平移Δh個單位

(15) 否則，所有C.x>=A.x的組件C向右平移Δw個單位

(16) 調(diào)整父節(jié)點大小以完全包含平移后的所有子節(jié)點

End

算法1中，首先，組件間有時存在包含關(guān)系，本文通過計算組件間的重疊面積占比來生成它們的容器包含關(guān)系，便于在各容器內(nèi)分別進行布局優(yōu)化. 對于重疊時超出邊界的部分，本文將其裁剪刪去，如步驟(1)～(5)所示.然后，調(diào)整組件的位置和大小，使其在視覺上保持對齊和一致. 通常而言，水平坐標或垂直坐標大小接近的組件在該方向上應(yīng)保持對齊；大小相近的組件應(yīng)該保持相同的尺寸，如步驟(6)～(11)所示.

最后，采取整體向下或向右平移的方式解決重疊問題，該做法可以有效避免二次重疊. 同時，容器邊界也將更新以保證完全包含平移后的組件，如步驟(12)～(16)所示.

3 實驗與評估

本文從準確率與可用性兩方面對本文方法進行了評估.

3.1 數(shù)據(jù)集及實現(xiàn)細節(jié)

本文在DrawnUI[17]數(shù)據(jù)集上進行實驗，該數(shù)據(jù)集由4291張手繪草圖組成，包含21類組件，涵蓋了大多數(shù)用例. 所有草圖均為移動應(yīng)用程序截圖和網(wǎng)頁截圖的手繪版本.

本文基于PyTorch框架實現(xiàn)了本文的組件檢測模型，隨機選擇了75%的DrawnUI數(shù)據(jù)集訓(xùn)練模型. 在訓(xùn)練模型時，設(shè)置錨框的尺度分別為32×32, 64×64, 128×128, 256×256, 512×512，長寬比分別為1∶1，1∶2，2∶1，以便生成尺度更多樣化的錨框. 初始學(xué)習(xí)率為0.0025，每10個epoch進行衰減，批量大小設(shè)置為2. 在輸入網(wǎng)絡(luò)訓(xùn)練之前已對草圖進行了歸一化處理并調(diào)整了尺寸，使其短邊為800，長邊不超過1333.

3.2 評價指標

本文使用平均精度均值(Mean Average Precision, mAP)作為評價指標來評估本文模型在手繪草圖組件檢測任務(wù)上的性能.mAP需要由精確率計算得出. 精確率計算公式如下.

(1)

式中，CTP為真正例(True Positive，TP)，即正確分類的組件個數(shù)；CFP為假正例(False Positive，F(xiàn)P)，即錯誤分類的組件個數(shù).

平均精確率計算公式如下.

(2)

式中，Cprecision為C類別組件的精確率;N(TotalSketches)C為包含C類別組件的手繪草圖數(shù)量.

平均精度均值計算公式如下.

(3)

式中，CAP為每種組件的檢測精確率;N(Classes)為數(shù)據(jù)集中所有組件的類別數(shù).

3.3 準確率評估

本文使用隨機選擇的25%的DrawnUI數(shù)據(jù)集作為識別準確率評估的測試數(shù)據(jù). 模型訓(xùn)練數(shù)據(jù)中沒有出現(xiàn)任何測試數(shù)據(jù). 本文統(tǒng)計了模型加入置換注意力前后的兩項指標并進行分析，即交并比(Intersection over Union, IoU)為0.5下的mAP(mAP@50)和模型的參數(shù)量，結(jié)果如表1所示.由表1可知，將置換注意力加入FRCNN的特征提取網(wǎng)絡(luò)后，模型的組件檢測效果有明顯的提升(mAP@50提高了2.3%)，同時幾乎沒有增加額外的計算量.

表1 SA-FRCNN的識別準確率

圖4展示了兩個典型的例子，使用紅框和綠框分別標出了識別錯誤和布局錯誤. 如圖4所示，本文提出的組件識別模型總體展現(xiàn)了較好的性能. 然而，對復(fù)雜組件的識別還不夠理想(如圖4b中將“時間選擇器”識別為“按鈕”，未檢測出“列表”). 分析有兩點原因：(1) 這些組件的局部特征和其他組件較為相似；(2) 訓(xùn)練數(shù)據(jù)相對缺乏.

此外，本文所提的布局優(yōu)化方法在對齊和重疊問題上表現(xiàn)出較好的性能. 然而，仍然可能存在局部區(qū)域未能對齊的情況，分析原因有兩點：(1) 受限于人工設(shè)定的閾值；(2) 對組件平移可能導(dǎo)致本應(yīng)對齊的組件不再對齊(如圖4a中標出的圖像與文本未能對齊). 此外，盡管整體平移能有效避免二次重疊問題，但也可能改變界面原本的布局(如圖4b中為處理“按鈕”與“容器”的重疊問題而使界面下方布局改變).

3.4 可用性評估

系統(tǒng)可用性是用戶做選擇時重要考慮的因素[18]. 本文選取了10個被試，通過設(shè)計兩個任務(wù)，對本文工具進行了可用性評估.

3.4.1 實驗任務(wù)及過程 本文采用非概率抽樣在四川大學(xué)學(xué)生中選取了10名被試者(5名女性，5名男性)，所有被試者從未使用過本文工具. 實驗前，先向被試者介紹草圖組件的含義及工具的功能，確保被試者能夠正確理解界面和使用工具.

本文指定了界面的功能為“登錄”，要求被試者自由手繪草圖界面，然后完成以下兩項任務(wù)：(1) 使用本文工具直接生成先前手繪草圖對應(yīng)的中保真原型，然后手動調(diào)整自動生成的中保真原型中的錯誤；(2) 采用完全手工的方式在空白畫布上制作先前手繪草圖對應(yīng)的中保真原型. 兩個任務(wù)均完成后，被試者需填寫系統(tǒng)可用性量表(the System Usability Scale，SUS)[19]對本文工具進行可用性評估. SUS的原始打分區(qū)間為1分到5分，1分表示強烈反對，5分表示非常贊成. 為了計算系統(tǒng)的綜合得分，將各項目得分轉(zhuǎn)換為1分到4分區(qū)間內(nèi).

圖4 組件檢測及中保真原型自動生成的結(jié)果Fig.4 Results of components detection and mid-fidelity prototypes automated generation

3.4.2 實驗結(jié)果分析 本文采用威爾科克森符號秩檢驗對被試者完成上述兩個任務(wù)所花費的時間進行了分析，以驗證本文工具能否有效節(jié)約中保真原型設(shè)計的時間成本，結(jié)果如表2所示. 表2中，time_A、time_M分別表示使用自動生成工具和手工完成中保真原型的時間.

表2 自動化和手工設(shè)計所花費的時間

實驗結(jié)果表明，與使用本文工具相比，手工進行中保真原型設(shè)計顯著增加了時間成本(P<0.05)，這說明使用本文工具可以有效節(jié)約時間開銷，提高原型設(shè)計效率.

表3顯示了本文工具在10個方面的平均得分. 由表3可知，被試者認為本文工具簡潔、易用且操作簡單，同時不需要過多技術(shù)干預(yù)且具有較好的一致性；然而，被試者認為本文工具可能不具有良好的常用性和完整性.

SUS的綜合得分代表了對所研究系統(tǒng)的整體可用性的綜合度量. 經(jīng)過計算，本文工具的綜合得分為83分，評級為B，表明總體上具有良好的可用性.

表3 處理后的SUS得分

4 結(jié) 論

本文提出了基于目標檢測和啟發(fā)式規(guī)則的中保真原型自動生成方法，通過基于手繪草圖的組件識別和布局優(yōu)化生成對應(yīng)的中保真原型. 實驗證明,本文方法能夠有效提高原型設(shè)計效率. 未來工作中可以從數(shù)據(jù)集層面著手增強復(fù)雜組件的訓(xùn)練數(shù)據(jù)，并嘗試使用運籌學(xué)知識解決界面布局優(yōu)化問題.