研究背景：
图形用户界面（Graphical UserInterface，简称 GUI，又称图形用户接口），为用户和计算机桌面程序，手机类移动端软件，和在线网站提供了可视化的交互方式。设计优秀的GUI颜值在线且简洁易用，吸引大量忠实用户。
但即便对经验丰富的GUI设计者，新App与GUI的创作过程也是非常困难且耗费时间的，例如交互流畅、通用、简洁、美观、风格连贯等与设计相关的规则和标准是设计者们需要遵循的。而且为了紧跟时代潮流，不断从其他的资源（如Dribbble）寻找最新最热的设计来获取灵感也为设计者们带来了额外巨大的工作量。
然而，GUI设计人员在公司中的人数有限，如此复杂繁重的GUI设计工作经常需要程序开发人员“顶上”。在一项对超过5700名软件开发者的调查中，51%的人反映他们从事App的GUI设计任务要比其他开发工作多，且每过几天就要参与。
但是软件程序开发者往往缺少足够的专业设计经验与设计审美。所以经常在刚刚起步或小规模的公司中，缺少GUI设计经验的程序开发者们要通过参考网上现有的GUI来规划实现他们自己的GUI设计。
研究动机：
利用现有GUI来设计与开发新GUI已成为了一种常规辅助设计手段，比如常见的UI搜索方法。但是仍存在诸多问题，例如：
（1）由信息差异导致检索到的GUI可能无法满足开发人员的需求；（2）检索到的GUI设计可能会被许多其他开发者采用，导致与其他App高度相似，甚至可能涉及潜在的知识产权问题；（3）一些检索到的GUI设计风格可能已经过时，开发人员很难跟踪GUI设计的最新趋势。
因此，迫切需要一种用于创造性GUI设计生成的自动化方法来减轻新手设计人员和程序开发人员的负担。通过生成的GUI设计，开发人员可以进一步采用自动化GUI代码生成来实现部分流程自动化。这样，整个GUI开发过程将大大简化。
图1 机器学习生成的新GUI设计
研究方法：
我们引入了对抗生成模型（GAN），但传统GAN方法生成GUI质量差，且缺乏多样性。为此，我们做出调整，通过复用现有GUI设计中的组成部分而非整个GUI来生成新的样本。
GUI由多个小组件和空间布局组合构成，通过研究和归纳，我们将一个GUI“适当”分解为多个组成部分，例如GUI上部的导航栏，选项栏，或者是一些带有具体图像或文字信息组件。我们以它们为数据基础让模型生成新的GUI。
图2 GUI分解为多个组成部分
如何利用这些部分生成新的GUI设计呢？由于它们可被视为一种离散型数据，组成的序列可以用来表示一个新GUI。所以我们参考并采用了一种自然语言处理（NLP）中应对文本序列的方法，并开发了我们的生成模型GUIGAN。
我们将生成一个新的GUI设计视为NLP任务中生成一个新句子，而组成句子的单词就是组成GUI的各个部分和组件。这样，我们让模型像学习单词组句一样学习拼接不同GUI的部分来生成新GUI。
可NLP任务中不论单词或句子形式都比较简单，但GUI图像比文本更复杂，不仅具有颜色，风格等直观特征，并且有内部组成结构的信息。
因此我们让模型也去学习真实GUI样本中的风格特征和结构特征。这样一方面可以增加生成样本多样性，同时让它们具备真实GUI的审美外观与结构特征。
图3 “新”GUI由“旧”GUI重新组合而成
GUIGAN：
我们的模型包含一个SiameseNet，一个LSTM生成器，和一个CNN判别器。
SiameseNet用来学习并保存GUI部分的设计风格特征，再根据GUI元数据获取它们的结构信息。
LSTM生成新的序列，序列中的元素即为已有不同GUI的组成部分，它们通过模型的重新组合形成新的GUI设计。
CNN判别器用来给LSTM生成的序列打分，根据生成结果对生成器进行奖惩。
同时，计算生成序列元素的风格特征是否接近，并且结构是否与真实GUI相似，将计算结果加入到整个训练过程中。
图4 GUIGAN方法流程图
自动评估实验：
实验数据来自Rico公开数据集，GUIGAN的FID和1-NNA在两个实验数据集上分别比最佳baseline提高了33.63%和11.33%，28.23%和14.18%。
用户评估实验：
5名具有移动端应用开发经验的参与者分别就生成GUI的美观，颜色风格协调性，结构合理性三个方面打分，另外对功能性做出评判。
GUIGAN在三项指标比baseline提高了31.22%、25.00%和34.87%。GUIGAN在功能性上有0.812的平均分，比baseline提高了79.65%。对两个方法的显著性分析也表示了GUIGAN在提升所有指标上的重要作用。
进一步工作：
我们的模型还可以根据未完成的预设部分来补全整个GUI设计，而且生成的最终结果各不相同。未来我们将要拓展这项功能，并且也让用户能够输入更多的条件定制化地生成不同的GUI。
图5 给定预设GUI部分（最左列），生成不同结果
原文链接：https://www.computer.org/csdl/proceedings-article/icse/2021/029600a748/1sEXouuzoS4
GitHub: https://github.com/GUIDesignResearch/GUIGAN
