论文部分内容阅读
图形用户界面(Graphical User Interface,GUI)又称图形用户接口,如今遍布于各类电脑程序、移动应用软件和在线网站,是用户与软件程序之间交互的桥梁。优秀的GUI设计美观精巧且简洁易用,是一款应用程序(Application,App)成功的关键。但GUI设计工作不仅非常耗时,还需要设计者持续保持创造力以适应不断更新的流行元素,即便对经验丰富的设计者来说仍充满挑战。而且由于目前各公司的快速发展,不断压缩了应用程序的开发周期,使GUI设计者的工作量持续增加。另外,由于具备专业技能和丰富经验的GUI设计者人数紧缺,很多企业被迫将GUI设计工作交给缺乏专业技能与设计经验的软件开发者们,这种情况无疑使GUI设计开发过程变得更加艰难。在实际设计开发中,GUI设计者与开发者们经常上网搜索优秀的GUI资源作为参考对象或初始设计,同时也在寻找和使用更多自动化的GUI辅助性工具或方法来帮助GUI设计工作,如自动搜索或模板生成这些辅助性方法不仅可以快速帮助他们完成满足业务需求的GUI设计,而且能迎合不同设计者的设计理念。但是目前关于GUI设计相关的研究较少,而且针对GUI设计风格、GUI结构等特征的信息挖掘不足,无法将用户需求与他们想得到的结果关联。不过网上各类平台有着海量App应用软件和丰富多样的GUI数据,且随着计算机视觉、机器学习等技术方法的不断更新且正在应用于多个领域,GUI设计的辅助性自动化方法研究同时具备了数据和技术两方面的支持。基于上述内容,本文结合特征提取与表达方法,利用深度学习模型,强化学习算法,根据移动端GUI数据在软件工程中的特点,对GUI元数据,GUI设计风格,GUI结构特征等信息进行研究分析,设计辅助GUI设计的自动化方法,为GUI设计者与软件开发者实现多种辅助性应用工具,加速GUI设计开发过程。本文主要研究内容包括:(1)GUI设计风格特征提取与表达:GUI的设计风格是移动应用程序设计开发的重要环节,影响着产品的外观与用户体验。本文首先对GUI设计风格提出同源GUI风格相似,非同源GUI风格各异的假设并通过实验验证,构建了GUI Pair数据集。其次提出GUI2Vec方法,使用基于双通道CNN的孪生网络模型对GUI数据的设计风格进行建模,通过无监督学习和二分类学习两个阶段训练,使模型具备对GUI设计风格的学习与表达能力。利用GUI2Vec将GUI设计转换为能够代表GUI设计风格的语义特征向量,实现GUI设计风格特征空间的构造,开发了GUI风格搜索与GUI风格连续性检测两个辅助性自动工具。实验证明了GUI2Vec对比其他方法在GUI设计风格特征提取与表达上具有更好的表现,同时由GUI2Vec扩展开发的两个应用工具经用户评估证明具有实用性。然后本文对模型做出调整并优化训练过程提出了GUIVit,引入transformer模块与多任务训练机制,构建了Rico Topic数据集,实验证明了GUIVit的特征学习与表达能力以及实用性价值。最后,研究了GUI数据中包含的自然图片带来的干扰和影响,构建了Img Masked GUI数据集,通过实验对干扰进行了分析。(2)基于生成式对抗网络的GUI设计生成方法:GUI自动化生成方法是辅助GUI设计者的重要手段,可以为设计开发者提供多样化的参考样本。针对传统基于像素级别的GAN方法难以生成清晰度高且边缘规则的GUI图像样本,本文提出了GUIGAN,一种基于对抗训练模式的GUI设计自动生成方法。首先将GUI视作一系列局部组件构成的整体,利用元数据以及结构规则,将GUI分解为子树作为组成新GUI设计的最小组成单位,并构建了Subtree子树数据集。通过GUIGAN中的生成器和判别器的对抗式训练使生成器能够生成由GUI子树组成的序列,利用元数据将其重组即可得到新的GUI设计。在训练中融合GUI设计风格信息与结构序列信息共同优化生成器参数,使GUIGAN能够学习生成风格协调,结构搭配合理,且多样化的新GUI设计样本。实验证明,与其他研究方法相比GUIGAN能够利用已有App和GUI数据生成质量较高,多样性更丰富的新GUI设计样本,并通过人工评估证明了GUIGAN的有效性和实用价值。(3)基于结构特征学习的GUI线框图生成方法:为进一步提升生成GUI的结构质量,同时让模型可以根据给定目标生成对应的GUI设计,本文提出GUIWFG。首先使用深度学习网络模型提取特征,用策略梯度算法更新参数,同时将模型输入数据由GUI截屏图像转换为可表示GUI结构的线框图。然后引入局部结构位置偏差和目标GUI结构学习对象共同对模型进行优化,使模型能够依据目标对象的特点,生成符合实际GUI结构的新GUI设计。实验使用了本文构建的Rico Topic数据集,结果证明GUIWFG能够根据给定目标GUI对象生成具有更高结构质量的新GUI设计,在保证结构布局合理的情况下依然保持GUI的整体质量与样本多样性,用户评估实验同样证明了GUIWFG潜在的实用功能性。最后引入常用于自然图像或艺术图片中的风格迁移方法,对GUIWFG的生成样本进行风格转换,提升生成GUI的整体风格连贯性,并扩展生成GUI的风格多样性。综上所述,本文面向GUI设计开发过程,通过建立深度学习模型,对GUI数据中的GUI设计风格,GUI结构等相关信息特征进行研究,并以此为支持实现如GUI搜索,GUI风格连续性检测,GUI设计生成,GUI结构线框图生成等具有实用价值的辅助性自动化工具,旨在帮助GUI设计开发者提供更多可以参考借鉴对象,提高其GUI设计效率,同时也希望能够在GUI设计开发工作自动化进程中做出尝试。