自动生成图形布局综述

唐煜祺

（四川大学计算机学院，成都610065）

0 引言

平面设计广泛应用在我们的工作和生活中，网站页面、App界面、杂志封面、图像广告，等等。对于一个优质的平面设计，往往离不开好的图形布局（组件的位置和大小）。图形布局设计属于平面设计的草图设计阶段，它决定了页面的层次结构和组件的相对关系，它能够引导浏览者的注意力流动从而影响信息传达的顺序和效率，并且影响页面整体的美观。以微信App界面为例，图形布局图如图1所示。

图1

图形布局的设计需要兼顾用户的需求、目的，并满足基本设计准则和美学要求。设计师通过绘制图形布局图，能够让用户直观地感受到页面的整体效果。但图形布局的设计是一个需要大量设计经验且耗时耗力的过程。图形布局时需要综合考虑美学（组件对齐规则、界面对称性、页面留白比例等）因素，平衡各组件关系（组件的相对大小及位置关系，例如返回按钮大多位于页面左上角）、信息传达顺序（标题、正文、翻页按钮一般按照视觉流顺序依次呈现）等多个因素。即便是对于有大量平面设计经验的设计师，图形布局设计也是一个耗时且反复迭代的过程（最终的页面效果会反馈影响布局设计）。

为了解决上述问题，现有许多研究提出了自动生成图形布局的方法。旨在节约设计时间、提升设计人员与用户的沟通效率，并降低设计人员的学习成本，生成符合基本设计准则的高质量图形布局。本文针对自动生成图形布局的研究进行分类阐述、对比和分析，以便后期对自动生成图形布局研究提供潜在的研究方向和技术参考。

1 研究现状

总体而言，自动生成图形布局分为传统方法（基于启发式规则、基于模板等），以及深度学习方法（GAN、VAE、GNN网络），现对各类方法的特点进行阐述。

1.1 传统方法

基于启发式规则。启发式规则的方法通过预设一些既有规则约束，按照用户的输入生成符合要求的布局。Peter O’Donovan[1]提出的方法，可以改变原页面的布局，使之重定向到不同尺寸或生成不同风格的布局。该方法先建模重要性检测模块，通过眼动仪追踪人眼注视真实界面时目光顺序及停留时间，建模界面元素重要性检测模块。再用该模块对用户输入原界面元素重要性进行检测，以保证重新生成的布局中元素重要性不变。并且通过能量函数对布局风格（界面对称性、元素密度、留白比例、元素大小、呈现顺序等）进行量化评估，并通过扰乱原布局并量化得到不同风格的界面。

图2

基于模板。基于模板的方法则是先预设几种基本模型，再根据用户选择生成相应布局。如Nathan Hurst[2]的研究针对文本文档的格式（包括微观和宏观排版问题），通过预定义页面类型（单个固定大小页面、固定大小多个页面、垂直滚动页面、水平滚动页面），并将自动构建文档布局作为约束优化问题：决策变量编码放置元素的位置，约束执行所需的几何关系（例如页面中的对齐或包含），并通过目标函数度量布局的质量。该方法将问题和解决问题的技术分离（把问题提取为约束，但不限制优化约束的方法），从而简化软件开发。

概率模型。Niranjan Damera-Venkata等人[3]提出了一种基于生成的统一概率文档模型，能够为文档（文本、图像、图形、侧边栏等元素组成的页面）生成平面布局。模型的核心是美学设计判断的概率编码思想，不确定性编码为先验概率分布。例如，设计人员可以指定两个页面元素之间的空白具有平均值（期望值）和方差（灵活性）。如果方差很大，则允许空白的取值范围更大。小的差异意味着更大的数值范围。该模型正式地合并了关键设计变量，如内容分页、页面元素的相对排列可能性和可能的页面编辑。这些设计选择被联合建模为耦合随机变量（贝叶斯网络）与不确定性建模的概率分布，网络的整体联合概率分布为好的设计选择赋予了更高的概率，从而将布局生成问题简化为概率推理问题，并证明了该软编码方法在美学方面优于硬性的单向约束。

1.2 深度学习方法

Jianan Li[4]通过改进的GAN网络模型生成了文档布局以及场景布局。该模型通过自定义的可微线框渲染层，将生成的布局映射到线框图像，并通过CNN鉴别器对其优化，获得了较好的对齐质量。平面设计中，对组件的对齐质量要求十分严格，几毫米的两个组件未对齐就可能破坏整个设计。传统的GANs模型训练时综合了像素空间的布局，会导致布局及其渲染混合，因此不能很好地捕捉布局风格。该模型的对传统GAN进行改良，由一个生成器和两个鉴别器组成，每个元素都用它的类概率和几何参数表示：bounding-box key⁃points。生成器以一组随机放置的图形组件作为输入，并对其进行排列设计。输出为优化后的类概率和设计元素的几何参数。第一个鉴别器直接操作元素的类概率和几何参数，而第二个鉴别器是CNN网络，通过视觉层面来判断布局对应的线框图来判断布局的不对齐和遮挡。

Akash Abdu Jyothi等人[5]通过Conditional VAEs生成场景图的布局，虽然场景图布局对齐质量不如平面设计的布局，但也可以作为一种参考。该模型不仅可以生成可靠的场景布局，还可以提供推断物体之间潜在关系的先验和方法。例如，一个人要么骑（在马背上），要么站在马旁边，但他很少站在马下面。此外，一副图像中领带数量一般不多于人的数量。该模型将隐藏在高维可视化数据中的潜在关系隐式映射到低维空间，该模型布局生成模块分为CountVAE和BBoxVAE两个组件，分别预测组件的数量和迭代生成组件的布局图。每一步的预测都以初始输入和之前累积预测结果作为条件，用户输入标签集，经CountVAE预测得到每个标签的具体数量，再将其输入BBoxVAE得到每个组件的bounding box坐标和大小。该模型能够学习真实世界场景中物体之间的内在关系，此外还能检测出异常的场景布局。

Hsin-Ying Lee[6]通过结合GNN和VAE网络，能生成满足用户特定约束的布局，并且获得了较高的视觉质量。该模型分为三个模块：关系预测、布局生成、布局调优。以标签集和用户指定输入（非完全图）作为输入，通过GNN关系预测模块得到所有组件间的约束关系（完全图），根据得到的关系图输入Conditional VAEs布局生成模块生成相应的布局图，最后再通过GNN调优模块得到高对齐质量的最终布局图。该模型的优势在于：①GNN关系预测模块预测组件关系：通过图结构能够更准确的表示组件之间的相对大小和位置关系；②通过条件变分自编码器，能够处理用户输入的约束，满足定制化需求；③对比其他模型，该模型在生成多样性上也取得了较好的效果。

图3

图4

图5

Sou Tabata[7]提出了一个能生成多样化布局的神经网络。布局生时根据预设小条件规则集进行随机处理的，生成大量候选布局并评估其多样性及风格。现有的GAN从已知的累积特性分布中生成布局，这导致难以产生具有高度新颖性的结果。该研究通过随机结合风格、品味等评估因素，能生成更多样化结果，为设计师提供更多灵感。

图6

图7

2 现有研究不足

2.1 传统方法

（1）生成结果不够多样化。生成结果依赖于预设的模板或启发式规则，导致结果过于单一。无法为设计师提供足够灵感。

（3）手动定义启发式规则、模板较困难且工作量大。设计启发式规则和模板需要大量设计经验，且是一个耗费精力的过程。即是有经验的设计师，也难以捕获到许多潜在规则。且不同的设计师会有不同的定义，导致最后的规则是按规则编写人员的个人偏好制定的。

2.2 深度学习方法

（1）不支持偏好学习。虽然生成结果较之传统方法更加多样化，但目前并没有支持偏好学习的生成模型。用户需要每次输入自己的要求，若对生成结果不够满意，需要更改参数再次生成。

（2）未考虑基本设计准则。在人工涉及布局的时候，会考虑一些基本设计准则。如“格式塔原则”，按照其中的“相似、相邻、封闭、连续”等原则，将元素进行分组划分，从而让页面结构更加有层次感和美感。

3 结语

关于自动生成平面布局已经有许多研究，从早期的模板、启发式规则到现在的深度学习方法。但自动化生成布局仍然是一项困难的工作，主要难度在于：①很难量化一个布局的优劣，美学概念大多比较主观；②布局设计是一个全局化的技术，需要平衡各个组件的相对关系，难以清晰地划分为子任务；③布局的计算困难，即便一些看似简单的组件位置浮动也可能是一个NP-Hard的任务。对于自动生成布局的相关研究，本文对各类方法的应用场景、优缺点、技术实现进行了简要的阐述。目前，深度学习方法整体性能优于传统方法，但深度学习方法还没有对用户偏好的支持，引入平面设计的基本设计准则也有待进一步探究。