研究背景：
图形用户界面（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