近些年，随着移动互联网快速发展，各类软件应用如雨后春笋般涌现，为人们的衣食住行等各个方面带来了极大的便利。很多人可能因为工作需要或者个人兴趣而萌生过开发软件产品的想法，但往往因为缺乏足够的软件工程理论知识和软件设计能力，无法将脑中的想法付诸实践。今天，我们准备从软件界面设计的角度出发，简要介绍一些图形界面自动设计方法，教大家如何借助人工智能轻松完成软件界面设计。

 图1 软件应用界面布局图示例

软件设计是软件工程的重要组成部分，而软件界面设计则是软件设计中不可或缺的内容。由于软件界面是连接用户与产品服务的唯一桥梁，因此它直接决定了用户对软件产品的认可程度。良好的界面设计可以有效地提高产品推广度并带来更好的用户体验感。然而，界面设计本身是一种非常耗时且需要丰富经验的工作，目前主要由专业的UI设计师完成，而缺乏设计经验的非专业设计人员往往难以设计出符合预期的界面布局产品。随着科学技术的发展，一些科研人员将人工智能技术引入了界面设计领域，一些图形界面自动化设计的方法应运而生。这些方法往往通过自动生成界面元素布局的方式达到界面自动设计的目的。这类方法具有以下优点：

（1）提高用户的设计效率

（2）降低设计领域对用户的门槛

（3）为用户提供符合一定设计准则的布局

目前，图形界面（包括文档页面、场景图等）自动设计方法主要分为传统方法和深度学习方法两类，下面将依次介绍这两类方法：

传统图形界面自动设计方法

Damera-Venkata等人[1]提出了一种文档自适应布局的概率文档模型（Probabilistic Document Model, PDM），支持自动生成可变内容的文档。该方法将一般的文档布局问题简化为贝叶斯网络的推理问题，直接利用概率机制和机器学习算法进行参数化推理和学习。具体而言，该方法是通过自动调整模板参数对文档编辑过程进行显式建模，并使用模板参数的先验概率分布来捕捉设计师制定的美学设计评判标准。

此外，O’Donovan等人[2]提出了一种基于启发式规则的图形界面布局自动生成方法。该方法通过感知重要性预测、对齐检测和分层分割等方式分析图形设计过程并对其进行量化评估，然后使用非线性逆优化 (Non-linear Inverse Optimization, NIO) 从少量示例布局中学习模型参数。与使用众包方式得到的界面布局设计相比，该方法自动生成的设计比一些新手设计师人工设计的效果略好。

基于深度学习的界面自动设计方法

Yang等人[3]提出了一种新颖的用于平面布局生成的生成对抗网络LayoutGAN。该方法通过对不同类型平面元素的几何关系进行建模来合成界面布局。在该方法中，模型的生成器将一组随机给出的平面图形元素作为输入，并使用自注意力模块来细化它们的标签和几何参数以产生逼真的布局。此外，该方法提出了一种新颖的可微分线框渲染层，将生成的布局映射到线框图像，然后基于CNN的鉴别器对图像空间中的布局进行优化。

Patil等人[4]提出了一种平面文档布局自动生成的新框架READ，将递归神经网络与变分自动编码器相结合，以生成大量多样化的文档平面布局。该方法设计了一种探索性递归的方法提取单个文档的结构，利用递归神经网络将结构表征映射到紧凑的编码空间（该空间近似为高斯分布），然后从该空间中采样新的层次结构，以生成新的文档布局。此外，该方法还引入了一个组合度量方式来衡量文档布局之间的结构相似性，并用它来展示该方法所生成布局的新颖性和多样性。

Gupta等人[5]提出了一个用于生成图形元素布局的自注意力框架LayoutTransformer。该方法使用自注意力模型来捕获不同布局元素之间的上下文关系，在给定域中生成新颖的布局或根据部分布局方案生成完整的布局，解决了不同领域场景的布局生成问题，例如图像、移动应用程序、文档、3D 目标等。除此以外，文献[6]和文献[7]等介绍了用于场景图生成的方法，这些方法的中间过程会产生图元素的布局信息。

总而言之，这些图形界面自动设计方法能够快速生成图形界面布局，给用户提供具有参考价值的界面设计，随后用户可以基于生成的布局进行个性化调整，以满足自身需求。这些方法在一定程度上可以协助用户完成界面设计工作。但是，由于实际上不同人员的设计观念和审美标准存在差异，即使面对相同的界面设计需求，他们所设计出的相应界面产品也风格各异，因而该类图形界面自动设计方法可能无法完全替代设计师完成界面设计。

目前，智能算法研究中心的研究人员实现了一种基于需求描述的界面自动设计工具。该工具可以通过人机交互获取界面需求文本，然后从文本中自动识别所需要的界面组件，自动生成对应的界面布局，以辅助用户完成界面设计工作，降低界面设计门槛，提高界面设计效率。

 图2 APP界面布局自动生成工具功能展示

此外，该工具支持用户在初步自动生成的界面布局基础上添加约束，重新自动生成符合约束的界面布局。用户还可以直接在图形化的界面布局上进行人工修改。与此同时，该工具还能够在移动UI数据集Rico上检索与自动生成的界面布局最为相似的真实APP界面，让用户直观地感受界面布局最终设计成品的效果。

参考文献

[1] N. Damera-Venkata, J. Bento and E. O'Brien-Strain, "Probabilistic document model for automated document composition," in Proceedings of the 11th ACM symposium on Document engineering, 2011, pp. 3-12.

[2] P. O’Donovan, A. Agarwala and A. Hertzmann, "Learning layouts for single-page graphic designs," IEEE Transactions on Visualization and Computer Graphics, vol. 20, no. 8, pp. 1200-1213, 2014.

[3] J. Li, J. Yang, A. Hertzmann, et al, "LayoutGAN: Generating graphic layouts with wireframe discriminators," in International Conference on Learning Representations (ICLR), 2019.

[4] A. G. Patil, O. Ben-Eliezer, O. Perel, et al, "READ: Recursive autoencoders for document layout generation," in IEEE/CVF Conference on Computer Vision and Pattern Recognition Workshops (CVPRW), 2020, pp. 2316-2325.

[5] K. Gupta, J. Lazarow, A. Achille, et al, "LayoutTransformer: Layout generation and completion with self-attention," in IEEE/CVF International Conference on Computer Vision (ICCV), 2021, pp. 984-994.

[6] A. A. Jyothi, T. Durand, J. He, et al, "LayoutVAE: Stochastic scene layout generation from a label set," in IEEE/CVF International Conference on Computer Vision (ICCV), 2019, pp. 9894-9903.

[7] J. Johnson, A. Gupta and L. Fei-Fei, "Image generation from scene graphs," in IEEE/CVF Conference on Computer Vision and Pattern Recognition Workshops (CVPRW). 2018, pp. 1219-1228.

总编：黄翰

责任编辑：袁中锦

文字：朱文武

图片：朱文武

校稿：何莉怡

时间：2022年6月30日