自動生成圖形布局綜述

唐煜祺

（四川大學計算機學院，成都610065）

0 引言

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

圖1

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

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

1 研究現(xiàn)狀

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

1.1 傳統(tǒng)方法

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

圖2

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

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

1.2 深度學習方法

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

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

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

圖3

圖4

圖5

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

圖6

圖7

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

2.1 傳統(tǒng)方法

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

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

2.2 深度學習方法

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

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

3 結語

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