唐煜祺

（四川大學(xué)計(jì)算機(jī)學(xué)院，成都610065）

0 引言

平面設(shè)計(jì)廣泛應(yīng)用在我們的工作和生活中，網(wǎng)站頁面、App界面、雜志封面、圖像廣告，等等。對(duì)于一個(gè)優(yōu)質(zhì)的平面設(shè)計(jì)，往往離不開好的圖形布局（組件的位置和大小）。圖形布局設(shè)計(jì)屬于平面設(shè)計(jì)的草圖設(shè)計(jì)階段，它決定了頁面的層次結(jié)構(gòu)和組件的相對(duì)關(guān)系，它能夠引導(dǎo)瀏覽者的注意力流動(dòng)從而影響信息傳達(dá)的順序和效率，并且影響頁面整體的美觀。以微信App界面為例，圖形布局圖如圖1所示。

圖1

圖形布局的設(shè)計(jì)需要兼顧用戶的需求、目的，并滿足基本設(shè)計(jì)準(zhǔn)則和美學(xué)要求。設(shè)計(jì)師通過繪制圖形布局圖，能夠讓用戶直觀地感受到頁面的整體效果。但圖形布局的設(shè)計(jì)是一個(gè)需要大量設(shè)計(jì)經(jīng)驗(yàn)且耗時(shí)耗力的過程。圖形布局時(shí)需要綜合考慮美學(xué)（組件對(duì)齊規(guī)則、界面對(duì)稱性、頁面留白比例等）因素，平衡各組件關(guān)系（組件的相對(duì)大小及位置關(guān)系，例如返回按鈕大多位于頁面左上角）、信息傳達(dá)順序（標(biāo)題、正文、翻頁按鈕一般按照視覺流順序依次呈現(xiàn)）等多個(gè)因素。即便是對(duì)于有大量平面設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師，圖形布局設(shè)計(jì)也是一個(gè)耗時(shí)且反復(fù)迭代的過程（最終的頁面效果會(huì)反饋影響布局設(shè)計(jì)）。

為了解決上述問題，現(xiàn)有許多研究提出了自動(dòng)生成圖形布局的方法。旨在節(jié)約設(shè)計(jì)時(shí)間、提升設(shè)計(jì)人員與用戶的溝通效率，并降低設(shè)計(jì)人員的學(xué)習(xí)成本，生成符合基本設(shè)計(jì)準(zhǔn)則的高質(zhì)量圖形布局。本文針對(duì)自動(dòng)生成圖形布局的研究進(jìn)行分類闡述、對(duì)比和分析，以便后期對(duì)自動(dòng)生成圖形布局研究提供潛在的研究方向和技術(shù)參考。

1 研究現(xiàn)狀

總體而言，自動(dòng)生成圖形布局分為傳統(tǒng)方法（基于啟發(fā)式規(guī)則、基于模板等），以及深度學(xué)習(xí)方法（GAN、VAE、GNN網(wǎng)絡(luò)），現(xiàn)對(duì)各類方法的特點(diǎn)進(jìn)行闡述。

1.1 傳統(tǒng)方法

基于啟發(fā)式規(guī)則。啟發(fā)式規(guī)則的方法通過預(yù)設(shè)一些既有規(guī)則約束，按照用戶的輸入生成符合要求的布局。Peter O’Donovan[1]提出的方法，可以改變?cè)撁娴牟季?，使之重定向到不同尺寸或生成不同風(fēng)格的布局。該方法先建模重要性檢測(cè)模塊，通過眼動(dòng)儀追蹤人眼注視真實(shí)界面時(shí)目光順序及停留時(shí)間，建模界面元素重要性檢測(cè)模塊。再用該模塊對(duì)用戶輸入原界面元素重要性進(jìn)行檢測(cè)，以保證重新生成的布局中元素重要性不變。并且通過能量函數(shù)對(duì)布局風(fēng)格（界面對(duì)稱性、元素密度、留白比例、元素大小、呈現(xiàn)順序等）進(jìn)行量化評(píng)估，并通過擾亂原布局并量化得到不同風(fēng)格的界面。

圖2

基于模板?；谀０宓姆椒▌t是先預(yù)設(shè)幾種基本模型，再根據(jù)用戶選擇生成相應(yīng)布局。如Nathan Hurst[2]的研究針對(duì)文本文檔的格式（包括微觀和宏觀排版問題），通過預(yù)定義頁面類型（單個(gè)固定大小頁面、固定大小多個(gè)頁面、垂直滾動(dòng)頁面、水平滾動(dòng)頁面），并將自動(dòng)構(gòu)建文檔布局作為約束優(yōu)化問題：決策變量編碼放置元素的位置，約束執(zhí)行所需的幾何關(guān)系（例如頁面中的對(duì)齊或包含），并通過目標(biāo)函數(shù)度量布局的質(zhì)量。該方法將問題和解決問題的技術(shù)分離（把問題提取為約束，但不限制優(yōu)化約束的方法），從而簡(jiǎn)化軟件開發(fā)。

概率模型。Niranjan Damera-Venkata等人[3]提出了一種基于生成的統(tǒng)一概率文檔模型，能夠?yàn)槲臋n（文本、圖像、圖形、側(cè)邊欄等元素組成的頁面）生成平面布局。模型的核心是美學(xué)設(shè)計(jì)判斷的概率編碼思想，不確定性編碼為先驗(yàn)概率分布。例如，設(shè)計(jì)人員可以指定兩個(gè)頁面元素之間的空白具有平均值（期望值）和方差（靈活性）。如果方差很大，則允許空白的取值范圍更大。小的差異意味著更大的數(shù)值范圍。該模型正式地合并了關(guān)鍵設(shè)計(jì)變量，如內(nèi)容分頁、頁面元素的相對(duì)排列可能性和可能的頁面編輯。這些設(shè)計(jì)選擇被聯(lián)合建模為耦合隨機(jī)變量（貝葉斯網(wǎng)絡(luò)）與不確定性建模的概率分布，網(wǎng)絡(luò)的整體聯(lián)合概率分布為好的設(shè)計(jì)選擇賦予了更高的概率，從而將布局生成問題簡(jiǎn)化為概率推理問題，并證明了該軟編碼方法在美學(xué)方面優(yōu)于硬性的單向約束。

1.2 深度學(xué)習(xí)方法

Jianan Li[4]通過改進(jìn)的GAN網(wǎng)絡(luò)模型生成了文檔布局以及場(chǎng)景布局。該模型通過自定義的可微線框渲染層，將生成的布局映射到線框圖像，并通過CNN鑒別器對(duì)其優(yōu)化，獲得了較好的對(duì)齊質(zhì)量。平面設(shè)計(jì)中，對(duì)組件的對(duì)齊質(zhì)量要求十分嚴(yán)格，幾毫米的兩個(gè)組件未對(duì)齊就可能破壞整個(gè)設(shè)計(jì)。傳統(tǒng)的GANs模型訓(xùn)練時(shí)綜合了像素空間的布局，會(huì)導(dǎo)致布局及其渲染混合，因此不能很好地捕捉布局風(fēng)格。該模型的對(duì)傳統(tǒng)GAN進(jìn)行改良，由一個(gè)生成器和兩個(gè)鑒別器組成，每個(gè)元素都用它的類概率和幾何參數(shù)表示：bounding-box key?points。生成器以一組隨機(jī)放置的圖形組件作為輸入，并對(duì)其進(jìn)行排列設(shè)計(jì)。輸出為優(yōu)化后的類概率和設(shè)計(jì)元素的幾何參數(shù)。第一個(gè)鑒別器直接操作元素的類概率和幾何參數(shù)，而第二個(gè)鑒別器是CNN網(wǎng)絡(luò)，通過視覺層面來判斷布局對(duì)應(yīng)的線框圖來判斷布局的不對(duì)齊和遮擋。

Akash Abdu Jyothi等人[5]通過Conditional VAEs生成場(chǎng)景圖的布局，雖然場(chǎng)景圖布局對(duì)齊質(zhì)量不如平面設(shè)計(jì)的布局，但也可以作為一種參考。該模型不僅可以生成可靠的場(chǎng)景布局，還可以提供推斷物體之間潛在關(guān)系的先驗(yàn)和方法。例如，一個(gè)人要么騎（在馬背上），要么站在馬旁邊，但他很少站在馬下面。此外，一副圖像中領(lǐng)帶數(shù)量一般不多于人的數(shù)量。該模型將隱藏在高維可視化數(shù)據(jù)中的潛在關(guān)系隱式映射到低維空間，該模型布局生成模塊分為CountVAE和BBoxVAE兩個(gè)組件，分別預(yù)測(cè)組件的數(shù)量和迭代生成組件的布局圖。每一步的預(yù)測(cè)都以初始輸入和之前累積預(yù)測(cè)結(jié)果作為條件，用戶輸入標(biāo)簽集，經(jīng)CountVAE預(yù)測(cè)得到每個(gè)標(biāo)簽的具體數(shù)量，再將其輸入BBoxVAE得到每個(gè)組件的bounding box坐標(biāo)和大小。該模型能夠?qū)W習(xí)真實(shí)世界場(chǎng)景中物體之間的內(nèi)在關(guān)系，此外還能檢測(cè)出異常的場(chǎng)景布局。

Hsin-Ying Lee[6]通過結(jié)合GNN和VAE網(wǎng)絡(luò)，能生成滿足用戶特定約束的布局，并且獲得了較高的視覺質(zhì)量。該模型分為三個(gè)模塊：關(guān)系預(yù)測(cè)、布局生成、布局調(diào)優(yōu)。以標(biāo)簽集和用戶指定輸入（非完全圖）作為輸入，通過GNN關(guān)系預(yù)測(cè)模塊得到所有組件間的約束關(guān)系（完全圖），根據(jù)得到的關(guān)系圖輸入Conditional VAEs布局生成模塊生成相應(yīng)的布局圖，最后再通過GNN調(diào)優(yōu)模塊得到高對(duì)齊質(zhì)量的最終布局圖。該模型的優(yōu)勢(shì)在于：①GNN關(guān)系預(yù)測(cè)模塊預(yù)測(cè)組件關(guān)系：通過圖結(jié)構(gòu)能夠更準(zhǔn)確的表示組件之間的相對(duì)大小和位置關(guān)系；②通過條件變分自編碼器，能夠處理用戶輸入的約束，滿足定制化需求；③對(duì)比其他模型，該模型在生成多樣性上也取得了較好的效果。

圖3

圖4

圖5

Sou Tabata[7]提出了一個(gè)能生成多樣化布局的神經(jīng)網(wǎng)絡(luò)。布局生時(shí)根據(jù)預(yù)設(shè)小條件規(guī)則集進(jìn)行隨機(jī)處理的，生成大量候選布局并評(píng)估其多樣性及風(fēng)格?，F(xiàn)有的GAN從已知的累積特性分布中生成布局，這導(dǎo)致難以產(chǎn)生具有高度新穎性的結(jié)果。該研究通過隨機(jī)結(jié)合風(fēng)格、品味等評(píng)估因素，能生成更多樣化結(jié)果，為設(shè)計(jì)師提供更多靈感。

圖6

圖7

2 現(xiàn)有研究不足

2.1 傳統(tǒng)方法

（1）生成結(jié)果不夠多樣化。生成結(jié)果依賴于預(yù)設(shè)的模板或啟發(fā)式規(guī)則，導(dǎo)致結(jié)果過于單一。無法為設(shè)計(jì)師提供足夠靈感。

（3）手動(dòng)定義啟發(fā)式規(guī)則、模板較困難且工作量大。設(shè)計(jì)啟發(fā)式規(guī)則和模板需要大量設(shè)計(jì)經(jīng)驗(yàn)，且是一個(gè)耗費(fèi)精力的過程。即是有經(jīng)驗(yàn)的設(shè)計(jì)師，也難以捕獲到許多潛在規(guī)則。且不同的設(shè)計(jì)師會(huì)有不同的定義，導(dǎo)致最后的規(guī)則是按規(guī)則編寫人員的個(gè)人偏好制定的。

2.2 深度學(xué)習(xí)方法

（1）不支持偏好學(xué)習(xí)。雖然生成結(jié)果較之傳統(tǒng)方法更加多樣化，但目前并沒有支持偏好學(xué)習(xí)的生成模型。用戶需要每次輸入自己的要求，若對(duì)生成結(jié)果不夠滿意，需要更改參數(shù)再次生成。

（2）未考慮基本設(shè)計(jì)準(zhǔn)則。在人工涉及布局的時(shí)候，會(huì)考慮一些基本設(shè)計(jì)準(zhǔn)則。如“格式塔原則”，按照其中的“相似、相鄰、封閉、連續(xù)”等原則，將元素進(jìn)行分組劃分，從而讓頁面結(jié)構(gòu)更加有層次感和美感。

3 結(jié)語

關(guān)于自動(dòng)生成平面布局已經(jīng)有許多研究，從早期的模板、啟發(fā)式規(guī)則到現(xiàn)在的深度學(xué)習(xí)方法。但自動(dòng)化生成布局仍然是一項(xiàng)困難的工作，主要難度在于：①很難量化一個(gè)布局的優(yōu)劣，美學(xué)概念大多比較主觀；②布局設(shè)計(jì)是一個(gè)全局化的技術(shù)，需要平衡各個(gè)組件的相對(duì)關(guān)系，難以清晰地劃分為子任務(wù)；③布局的計(jì)算困難，即便一些看似簡(jiǎn)單的組件位置浮動(dòng)也可能是一個(gè)NP-Hard的任務(wù)。對(duì)于自動(dòng)生成布局的相關(guān)研究，本文對(duì)各類方法的應(yīng)用場(chǎng)景、優(yōu)缺點(diǎn)、技術(shù)實(shí)現(xiàn)進(jìn)行了簡(jiǎn)要的闡述。目前，深度學(xué)習(xí)方法整體性能優(yōu)于傳統(tǒng)方法，但深度學(xué)習(xí)方法還沒有對(duì)用戶偏好的支持，引入平面設(shè)計(jì)的基本設(shè)計(jì)準(zhǔn)則也有待進(jìn)一步探究。