Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps 论文解读

摘要-面向用户的软件开发人员通常将图形用户界面（GUI）的模型转换为
代码。这个过程既发生在应用程序启动时，也发生在演化环境中，因为GUI的变化与时俱进
不断发展的功能。不幸的是，这种做法既具有挑战性又耗时。在本文中，我们提出了一种自动化的方法
通过三个任务实现GUI的准确原型制作，从而实现了这一过程：检测，分类和组装。一，逻辑组件
使用计算机视觉技术或模型元数据从模型工件中检测出GUI的数量。然后，软件库
挖掘，自动动态分析和深度卷积神经网络可将GUI组件准确分类为
特定于域的类型（例如，切换按钮）。最后，数据驱动的K最近邻算法生成合适的分层GUI
可以从中自动组装原型应用程序的结构。我们在系统中为Android实现了这种方法
叫做REDRAW。我们的评估表明，REDRAW的GUI组件平均分类精度达到91％，并且
组装原型应用程序，这些应用程序在视觉亲和力方面紧密地镜像目标模型，同时展示合理的代码
结构体。对行业从业人员的采访表明，ReDraw具有改善实际开发工作流程的潜力。

1.介绍

最现代的面向用户的软件应用程序是以GUI为中心，并依赖有吸引力的用户界面（UI）和直观的用户体验（UX）来吸引客户，促进有效完成计算任务，以及吸引用户。麻烦或美观的软件令人不快的用户界面成功的可能性很小，尤其是公司希望将自己的应用与具有类似功能的竞争对手。这种现象可以在移动应用市场中很容易观察到作为App Store [1]或Google Play [2]，其中许多提供类似功能的竞争应用程序（也称为应用程序）功能（例如任务管理器，天气应用）通过UI / UX来区分自己[3]。因此，重要的是正在开发任何基于GUI的应用程序的第一步和原型设计模型，这有助于对UI进行实例化和试验，以便进行评估或证明抽象设计概念。在工业环境中对于较大的团队，此过程通常由拥有特定领域专业知识的敬业设计师使用图像编辑软件（例如Photoshop [4]或Sketch [5]）制作精美，直观的GUI。这些团队是通常负责表达一致的设计语言涵盖公司数字化业务的许多方面，包括网站，软件应用程序和数字营销材料。此设计过程的某些组件也倾向于延续到较小的独立发展通过创建线框或模型来判断设计思想的实践团队，以进行设计或原型设计过程
•所有作者都在美国大学计算机科学系工作
威廉与玛丽（William＆Mary），弗吉尼亚州威廉斯堡，23185。
电子邮件：{kpmoran，cebernal，mjcurcio，rfbonett，denys} @ cs.wm.edu
2018年5月收到手稿;
承诺花费开发资源实施这些资源。创建这些初始设计图稿后，至关重要的是，它们必须按顺序忠实地翻译为代码
让最终用户体验设计和用户界面以其预期的形式。此过程（通常涉及多次迭代）过去的工作和实证研究表明具有挑战性，耗时且容易出错的[6]，[7]，[8]，
[9]，[10]，特别是如果设计和实现是由不同的团队进行（通常在工业设置[10]）。此外，UI / UX团队经常
练习一个迭代的设计过程，在早期阶段收集有关GUI有效性的反馈。更详细地讲，使用原型是更可取的
可以收集反馈；但是，按照目前的做法和工具，这通常太昂贵了[11]，[12]。此外，过去在移动应用程序中检测GUI设计违规的工作
从工业角度突出了这个问题的重要性[10]。根据与华为，一家主要的电信公司，独特的71包含82个设计违规的应用程序屏幕
使用扎根理论对公司的迭代设计和开发过程中的结果进行了经验分类方法。这导致对移动设计违规的分类涵盖了三个主要类别和14个子类别并说明开发人员可以忠实地遇到的困难
为移动应用程序实现GUI以及负担开发人员可能提出的违反设计的行为在总体发展过程中。许多快速发展的初创公司和新兴公司试图创建软件原型以展示想法并获得投资者支持也将极大受益于快速的应用程序原型制作。而不是
arXiv：1802.02312v2 [cs.SE] 2018年6月5日
IEEE软件工程交易，第1卷。＃，不。＃，2018 2
花很少的时间和资源进行迭代设计和编码用户界面，一种精确的自动化方法将可能是首选。这样一来，规模较小的公司就可以将更多的精力放在功能和价值上，而将更少的精力放在将设计转换为可行的应用程序代码。给定前端开发人员和设计师面临的挫败感通过构建准确的GUI，显然需要自动支持。为了减轻这一过程的困难，一些现代IDE，例如XCode [13]，Visual Studio [14]和Android Studio [15]，提供内置的GUI编辑器。然而，最近的研究表明，使用这些编辑器来创建复杂的高保真GUI既麻烦又困难[11]，因为即使是简单的任务，用户也容易引入错误和提示失败[16]。其他商业解决方案包括用于协作GUI设计的产品并在目标设备上交互式预览设计或浏览器（使用自定义框架显示，
受限功能）[17]，[18]，[19]，[20]，[21]，[22]，[23]，
[24]，[25]，[26]，[27]，[28]，[29]，但没有一个提供能够自动将模型转换为准确的本机代码（具有适当组件）的端到端解决方案类型）
目标平台。很明显，一个工具甚至可以部分自动化此过程可能会大大减少设计和开发过程的负担。不幸的是，自动化了原型制作过程GUI是一项艰巨的任务。这个困难的核心是需要弥合巨大的抽象差距，这是必要的从基于像素的GUI或数字设计的图形表示中推理出准确的用户界面代码草图。通常，此抽象差距可通过开发人员的领域知识。例如，开发人员能够识别模型中的离散对象应该实例化为屏幕上的组件，根据他们的分类将它们分为适当的类别预期的功能，并将它们安排在适当的位置分层结构，以便它们正确显示在屏幕尺寸范围。但是，即使是熟练的开发人员，这个过程可能很耗时并且容易出错[10]。因此，随之而来的是一种自动化的方法GUI原型制作过程必须弥合此图像到代码的抽象鸿沟。反过来，这需要创建能够表示领域知识的模型通常由开发人员持有，并应用此知识创建准确的原型。鉴于在单个软件域中，GUI的设计和功能可能会发生巨大变化，因此手动编码的信息或试探法不可能完全支持这种复杂的系统任务。此外，创建，更新和维护手动进行这种试探是一项艰巨的任务。因此，我们建议使用数据驱动的方法来学习该领域知识利用机器学习（ML）技术的方法以及现有应用程序中已经存在的GUI信息（特别是屏幕截图和GUI元数据）通过以下方式获取挖掘软件存储库（MSR）。
更具体地说，我们提出了一种将原型设计过程分解为以下任务的方法：检测，分类和组装。第一项任务涉及检测用户的原子元素（例如无法进一步分解的GUI组件）的边界框模拟设计工件（例如基于像素）的界面图片。可以通过解析有关代表GUI组件的对象的信息来解决此挑战
直接从模型工件（例如，从Photoshop解析导出的元数据），或使用CV技术进行推断对象[8]。一旦来自设计工件的GUI组件已被识别，需要将其分类为特定于域的正确类型（例如按钮，下拉菜单，进度条）。本质上，这是图像分类任务，并且对该主题的研究已显示出巨大的
近年来的进展，主要是由于深卷积神经网络（CNN）[30]，[31]，[32]，[33]，[34]。但是，由于CNN是一种监督式学习这项技术通常需要大量的训练数据，例如ILSVRC数据集[35]才能有效。我们主张对应用程序进行自动动态分析从软件存储库中提取的信息可用于收集屏幕截图和GUI元数据，可用于自动获取带标签的训练数据。使用此数据，可以对CNN进行有效的训练，以从模型中对GUI组件的图像进行分类（使用检测到的边界框）放入其特定于域的GUI组件类型。但是，组件的分类图像不是足以汇编有效的GUI代码。 GUI通常是在代码中表示为层次树，其中逻辑组组件捆绑在一起放在容器中。我们说明了迭代K近邻（KNN）算法和基于简历GUI元数据的CV技术屏幕截图可以构建现实的GUI层次结构，被翻译成代码。我们已经实现了上述方法在适用于Android平台的称为REDRAW的系统中。我们从Google Play提取了8,878个最受好评的应用，并使用全自动输入生成了这些应用从我们先前的工作中得出的方法（例如GUI抓取）关于移动测试[36]，[37]。在自动应用程序部署过程中，最受欢迎屏幕的GUI层次结构从每个应用程序中提取。然后，我们在最受欢迎的原生Android GUI组件类型为在防雷屏上观察到。 REDRAW使用此分类器结合迭代KNN算法和其他CV技术将不同类型的模型工件转换为原型Android应用程序。我们执行了
一整套三项评估REDRAW的研究旨在测量（i）基于CNN的分类器的准确性（根据基线特征描述符和基于支持向量机的技术），（ii）相似度
生成的应用程序到实体模型（在视觉上和在结构上），以及（iii）的潜在工业适用性我们的系统，通过对手机的半结构化访谈Google，华为和Facebook的设计师和开发人员。我们的结果表明，基于CNN的GUI组件分类器达到了91％的top-1平均精度（即CNN预测的顶级类别是正确的），我们生成了应用程序与其模型具有高度的视觉相似性工件，生成的应用程序的代码结构相似到实际应用，REDRAW具有潜力改善并促进原型开发一些实用扩展的移动应用程序。我们的评估还说明了REDRAW的表现优于其他相关产品用于移动应用程序原型的方法，REMAUI [8]IEEE软件工程交易，第1卷。＃，不。＃，2018 3和pix2code [38]。最后，我们提供详细的讨论我们方法的局限性和有前途的途径基于提出的核心思想的未来研究。总而言之，我们的论文值得关注贡献：
•引入新颖的原型制作方法
植根于技术组合的软件GUI来自程序分析，MSR，ML和CV；和此方法在称为的工具中的实现
适用于Android平台的REDRAW；
•对REDRAW的综合经验评估，
测量几个补充质量指标，与相关工作进行比较，并描述行业专业人员对其效用的反馈；
•在线附录[39]，其中显示了以下内容的屏幕截图：
生成的应用程序并研究复制信息；
•作为实施REDRAW的一部分，我们收集了大量
包含以下内容的移动应用程序GUI数据集
屏幕截图和与GUI相关的元数据超过14k
屏幕和超过190k GUI组件；
•REDRAW的公开开源版本
代码，数据集和训练有素的ML模型[39]。

2.背景和相关工作

模拟驱动开发实践的第一个概念我们在本文中引用的是模型工件，即我们定义为：定义1-模拟工件：软件设计和开发过程的工件，规定了设计准则GUI及其内容。在工业移动应用程序开发中，模型工件通常以高保真图像（带有或没有元数据）由设计人员使用软件创建例如Photoshop [4]或Sketch [5]。在这种情况下，要等待设计和开发工作流，元数据包含有关可以从这些事实中导出和解析模型图像1。独立开发人员也可以使用以下截图现有的应用程序以对自己的应用程序进行原型制作。在这种情况下，除了正在运行的应用程序的屏幕截图，运行时
GUI信息（例如Web应用程序的html DOM树）或可以提取移动应用的GUI层次结构）进一步协助原型制作过程。但是这个在模型驱动的情况下通常是不可能的开发（我们的方法旨在支持），如可执行应用程序不存在。我们定义的第二个概念是GUI组件的概念（也通常称为GUI小部件）。在本文中，我们使用术语GUI组件和组件可互换。我们
将它们定义为：
1.例如，通过导出可缩放矢量图形（.svg）或Photoshop的html格式。定义2-GUI组件：原子图形元素具有预定义功能的软件，显示在软件应用程序的GUI中。GUI组件具有以下几种依赖于域的组件之一类型，每种不同的类型都有不同的功能或美学目的。例如，在常见的网络应用中组件类型包括下拉菜单和复选框，仅举几例。在此定义中，原子性的概念很重要，因为它将GUI组件与容器区分开来。第三我们定义的概念是GUI容器的概念：定义3-GUI容器：分组的逻辑构造成员GUI组件，通常定义空间显示其成员的属性。在以GUI为中心的现代应用中，GUI组件很少使用预定义的坐标在屏幕上呈现。相反，容器的逻辑分组形成了分层结构（或GUI层次结构）。这些层次结构通常
定义有关其组成成分的空间信息，并且在许多情况下会对尺寸的变化做出反应显示区域（即反应式设计）[40]。例如，显示文本的GUI组件可能会根据到其容器的尺寸。有了这些定义，我们要解决的问题内容如下：
问题陈述：给定一个模型工件，生成一个与模型GUI非常相似的原型应用程序在视觉上以及在GUI层次结构的预期结构方面。
正如我们在第二节中所述。 3，这个问题可以分解分为三个不同的任务，包括检测和分类GUI组件的功能化，以及现实的组装
GUI层次结构和相关代码。在本文的范围内，我们专注于自动为移动应用生成GUI在视觉和结构上都相似（
GUI层次结构）。为此，我们调查了能力我们提出的从两种类型的模型工件自动为应用程序原型制作方法的方法：（i）
现有应用程序；以及（ii）草图[5]原型反转从现有的流行应用程序设计而成。我们利用这些类型的工件作为真实模型通常不是
适用于开源移动应用，因此无法在我们的研究中使用。应该注意的是两种本文中使用的模型伪像可能无法捕获在创建过程中创建的模型中存在某些歧义一个真正的软件设计过程的过程。我们讨论这在第二节中的含义。 6。
2.1.1卷积神经网络（CNN）背景
为了帮助将GUI组件的图像分类为在特定领域类型中，REDRAW利用卷积神经网络（CNN）。提供背景对于不熟悉的读者，在本小节中，我们给出了典型CNN架构概述，解释元素实现准确图像分类的体系结构。但是，对于CNN的更全面描述，我们请读者阅读[30]和[41]。

CNN概述：图1说明了传统的CNN架构。与大多数类型的人工神经网络一样，CNN通常包含多个从输入层开始的不同层，其中图像
传递到网络，然后传递到抽象特征的隐藏层，权重代表“重要性”学习目标任务的特征。 CNN派生他们的来自独特的“卷积”层的名称基于卷积的数学原理[42]。的卷积层的用途，如图中的蓝色所示1，是从图像中提取特征。大多数图像是存储为数字的三（或四）维矩阵，矩阵的每个维度代表强度颜色通道（例如RGB）的颜色。卷积层起作用使用过滤器（也称为内核或特征检测器）对这些矩阵进行处理，可以将其视为滑动窗口n到m的大小，可跨一组矩阵滑动以表示图像。此窗口应用卷积运算（即逐元素矩阵乘法）创建特征图，代表提取的图像特征。如卷积层相继应用，更加抽象从原始图像中学习特征。最大池图层也可用作滑动窗口，最大程度地合并要素映射中的值以减少维数。最后，全连接层和softmax分类器充当多层感知器来执行分类。 CNN培训通常使用梯度下降和误差梯度的反向传播来执行。卷积层：卷积层提取特征从图像映射以学习高级功能。规模该特征图的特征来自三个参数：
（i）使用的过滤器数量，
（ii）滑动窗口的步幅，
（iii）是否使用填充。借力
多个过滤器可用于多维特征图，步幅对应于滑动窗口的距离在每次迭代中移动，并且可以将填充应用于从输入图像的边界学习特征。这些
特征图旨在表示抽象特征从图像中获取信息，这些信息可预测过程。整流线性单位（ReLUs）：传统上，是在每个卷积层之后引入非线性，如卷积算子本质上是线性的，可能不是对应于正在学习的数据的非线性性质。的引入这种非线性的典型方式是通过整流线性单（ReLU）。这些操作单位执行的性质很简单，取代了所有负面因素要素图中的零值。卷积后和ReLU操作已执行，结果特征图通常要经过最大池化（图1）。最大池：最大池再次作为滑动窗口，而不是进行卷积，只需合并滑动每个步骤的最大值
窗口。这样可以减少尺寸
提取重要特征时的数据。
完全连接的层：到目前为止描述的层
该网络一直专注于从
图片。因此，网络的最后一层必须
利用这些功能来计算有关类的预测
用于分类。这是通过完全连接的层（通常用作多层感知器）完成的
利用softmax激活功能。
CNN培训程序：完成CNN培训
通过反向传播。全部初始化之后
网络参数，初始权重设置为随机值。然后，输入图像通过网络层进行馈送
正向，所有输出的总误差
类被计算。该错误是通过以下方式向后传播的
网络和梯度下降用于计算误差
网络权重的梯度，然后进行更新
使输出误差最小。学习率控制着
根据梯度将权重更新的程度
计算。在整个培训过程中都会重复此过程
图像集，可以训练两个特征提取
在一个自动化过程中进行分类。训练结束后
完成后，网络应该能够有效
输入图像的分类。
2.2相关工作
2.2.1反向工程移动用户界面：与建议的方法最相关的研究本文是REMAUI，旨在进行反向工程移动应用程序GUI [8]。 REMAUI结合了光学字符识别（OCR），CV和特定于移动设备的功能启发式检测组件并生成静态应用。REMAUI中使用的CV技术功能强大，并且我们基于这些创新。但是，REMAUI具有与我们的工作相比的主要限制包括：（i）不支持将检测到的组件分类为它们的本机组件类型，而是使用二进制文本或图像的分类，限制了现实世界该方法的适用性，以及（ii）不清楚REMAUI生成的GUI层次结构是否现实或有用。开发人员的观点，例如开发人员的GUI层次结构方法未进行评估。
相比之下，本文提出的方法
（i）并非特定于任何特定领域（尽管我们
同时为Android平台实施我们的方法）
当我们采用数据驱动的方法来分类和生成GUI层次结构时，（ii）能够使用CNN将GUI组件分类为各自的类型，并且
（iii）能够使用数据驱动的迭代KNN算法结合CV来生成逼真的GUI层次结构
技术。在我们的评估中，我们提供了以下方面的比较
REDRAW根据不同的方式改用REMAUI第4节和第5节中的质量属性除了REMAUI外，最近还发布了一份开放获取的论文（即未经同行评审的论文），该论文实现了具有共同目标的称为pix2code [38]的方法我们在本文中进行的研究。即，作者实现了他们所使用的编码器/解码器模型受过GUI元数据和屏幕截图信息的培训首先将目标屏幕截图转换为特定域语言（DSL），然后转换为GUI代码。但是这个该方法表现出若干缺点，从而使该方法在现实世界中的适用性受到质疑：
（i）方法仅在一小部分综合验证中生成的应用程序，并且没有大规模的用户界面进行了采矿；
（ii）该方法需要DSL随着时间的流逝，将需要对其进行维护和更新，增加了利用实践中的方法。因此，很难判断效果如何
该方法将对真实的GUI数据执行。相反，REDRAW在通过自动动态分析为用户提供的新颖应用界面挖掘。数据收集与培训过程可以完全自动且迭代地执行随着时间的推移，有助于减轻开发人员的使用负担。为了与目前的研究导向方法进行全面比较，我们还对
第4节和第5节中的RE-DRAW和pix2code方法之间的实际应用原型能力。
2.2.2移动GUI数据集
为了训练准确的CNN分类器，REDRAW需要大量带有标签的GUI组件图像以及其特定于域的类型。在本文中，我们收集通过挖掘以完全自动化的方式收集此数据集并自动执行前250个Android应用Google Play的每个类别（游戏类别除外），从而产生了14,382个唯一的屏幕和191,300个带有标签的GUI组件（数据清洗后）。最近，（在审查本文期间）发布了一个大型的Android应用程序的GUI相关信息数据集，称为RICO，可用[43]。该数据集比本文中收集的数据集更大，包含超过72k的唯一屏幕和3M GUI组件。但是，REDRAW数据集通过针对该问题的一些关键因素加以区分原型移动GUI的领域：
1）GUI组件的裁剪图像：REDRAW
移动GUI数据的数据集包含一组标记的
从较大的屏幕截图中裁剪出的GUI组件
准备由机器学习分类器进行处理。
2）清理数据集：我们在应用，屏幕和GUI组件级别实施了一些过滤程序，以
从REDRAW数据集中删除“噪音”成分。
这是训练有效，准确的机器学习分类器的重要因素。手动验证了这些过滤技术的准确性。
3）数据扩充：在提取数据集时，我们发现使用了某些类型的组件比其他人更频繁地提出派生问题GUI组件类型的平衡数据集。帮助
为了缓解这个问题，我们利用数据增强帮助平衡我们观察到的课程的技巧。我们将在第3.2.4节中扩展推导RE-DRAW数据集的方法。 RICO数据集不展现REDRAW数据集的独特特征上面的规定满足了创建用于对GUI组件进行分类的有效机器学习分类器的要求。但是，应该指出的是，未来的工作可能会适应规定的数据清理和扩充方法在本文中对RICO数据集进行了较大的训练为将来的GUI组件设置。

2.2.3其他GUI设计和逆向工程工具：
鉴于以GUI为中心的软件非常普遍，致力于构建高级工具的大量工作帮助构建GUI和相关代码[44]，[45]，[46]，[47]，[48]，[49]，[50]和反向工程GUI[51]，[52]，[53]，[54]，[55]，[56]。虽然这些方法是针对各种目标，他们都试图推理逻辑，或者GUI图形表示形式的程序化信息但是，以上引用的研究项目显示以下一个或多个属性：（i）它们不专门旨在支持将现有设计模型自动转换为代码[52]，[53]，[54]，[55]，[56]，（ii）他们强迫设计师或开发人员通过对如何应用程序经过设计或编码[44]，[45]，[46]，[47]，[48]，[49]或（iii）他们纯粹依靠现有的逆向工程应用使用运行时信息，而在模拟驱动开发的背景[49]，[51]。这些属性表明上述方法不是适用于本文所述的问题领域（通过模型自动生成应用程序代码或代表严重限制实际应用性的重大限制。与开发人员联系的方法或设计人员进入严格的工作流程（例如限制方式创建或编码模型）努力获得采用由于既定图像编辑的竞争灵活性软件和编码平台。在典型情况下，无法使用需要目标应用程序运行时信息的方法模拟驱动的开发方案，作为实现还不存在。尽管我们的方法依赖于运行时数据，它是独立于目标应用程序收集和处理的或模型人工制品。我们的方法旨在克服利用MSR和MSR进行先前研究的缺点ML技术可自动推断用于以下方面的GUI模型不同的领域，并有可能融入当前的设计工作流程，如第2节所述。 5.4。除了对此主题进行研究之外，还有一些旨在改善模型的商业解决方案和针对不同类型应用的原型制作过程
[17]，[18]，[19]，[20]，[21]，[22]，[23]，[24]，[25]，[26]，[27]，[28]。这些方法允许设计者之间更好的协作，并且一些更高级的产品使有限的功能原型可以显示在目标平台上。在软件框架的支持下。例如，一些工具将在手机上显示样机的屏幕截图通过预安装的应用程序访问设备，并允许设计人员预览设计。但是，这些技术不具备将模型工件转换为GUI代码并进行绑定设计者使用特定的，可能不太灵活的软件或
服务。在撰写本文时，一家新兴公司发布了名为Supernova Studio [29]的软件，声称能够将Sketch文件转换为本地代码适用于iOS和Android。虽然这个平台确实包含一些强大的功能，例如转换“草图”屏幕设计转换为具有“反应性”组件坐标的GUI代码，表现出两个主要缺点：（i）它固有地与Sketch应用程序，不允许从其他设计工具导入，并且（ii）无法将GUI组件分类为各自的类型，而是依赖于
用户手动完成此过程[57]。因此，REDRAW就我们的GUI组件而言，是互补的分类技术可以与Supernova Studio改善了其整体效果。

2.2.4使用CNN的图像分类：
大规模的图像识别和分类巨大的进步主要归功于CNN的发展[30]，[31]，[32]，[33]，[34]，[58]。这些受监督的ML方法能够自动学习强大，突出的功能大量标记训练中图像类别的分类图像，例如ILSVRC数据集[35]。建立在勒村（LeCun）的开拓性工作[58]，这是第一种看到比现有技术有明显性能提升的方法（利用预定义的特征提取）是AlexNet[30]，这实现了前五名的平均平均误差（MAE）为在ILSVRC12上≈15％该网络的架构是相对浅薄，但是以后的工作将显示出好处和使用更深层架构的权衡。 Zeiler和Fer gus开发了ZFNet [31]架构，该架构能够实现比AlexNet（≈11％）低的前五名MAE，并且设计了一种可视化隐藏层的方法（或激活图）。最近的方法如因为GoogLeNet [33]和Microsoft的ResNet [34]使用更深入架构（例如分别为22和152层）并具有设法超过了人类在图像上的准确性水平分类任务。但是，网络学习的收益更深层次的架构提供的能力伴随着交易在培训数据要求和培训方面时间。在本文中，我们展示了一个相对简单的CNN可以在合理的时间内训练建筑在流行的Android GUI组件类上实现前1名的平均分类准确度为91％。

3方法说明

我们将围绕以下方面描述GUI原型制作的方法该过程分为三个主要阶段：检测，分类和部件。图2说明了该过程的概述我们将在整个方法说明中参考。在高层次上，我们的方法首先检测GUI组件通过使用CV技术或直接从生成的模型工件中解析元数据使用专业的照片编辑软件。二，分类我们将检测到的GUI组件转换为适当的类型使用从大规模收集的GUI数据训练CNN对提取的应用程序进行自动动态分析挖掘软件存储库。经过训练的CNN随后可以应用于模型工件以对检测到的组件进行分类。最后，构建合适的GUI层次结构（例如，GUI容器中GUI组件的正确分组）我们利用基于KNN的算法，该算法利用了从大规模动态分析中提取的GUI信息组装现实的GUI组件的嵌套层次结构和GUI容器。为了说明我们的一般方法，在每个阶段，我们首先描述建议的方法，高层设计决策，然后讨论特定于我们的REDRAW实例的实现细节适用于Android平台。

3.1阶段1-GUI组件的检测
GUI原型方法所需的第一个任务是检测存在于实体模型中的GUI组件。此阶段的主要目标是准确推断原子GUI组件元素的边界框（在实体模型中基于像素的坐标的术语）。这允许将GUI组件的各个图像裁剪并提取以便在以后使用原型制作过程的各个阶段。可以通过以下两种方法之一完成此阶段：（i）解析数据从模型工件中提取，或（ii）使用CV技术检测GUI组件。展示了此阶段的可视化在图2-1中。在以下小节中，我们将介绍这两种方法的检测程序作为我们在REDRAW中的特定实现。
3.1.1从设计模型中解析数据
检测GUI组件的第一种方法是在图2-1的底部所示的模型人工制品中存在的“信息”是利用编码到模型人工制品中的信息。鉴于UI / UX在当今时代的重要性面向消费者的软件，许多设计师和小型团队开发人员团队进行专业级图像编辑Photoshop [4]或Sketch [5]等软件来创建GUI的线框或像素完美静态图像包含模型工件。在此过程中，通常使用照片编辑或设计软件来创建空白尺寸与目标设备屏幕匹配的画布，或显示区域（带有一些有助于缩放的设计软件到多个屏幕尺寸[4]，[5]）。然后，代表GUI组件作为可编辑对象放置在此组件的顶部画布来构建模型。这些工具大多数是能够以以下格式导出模型工件：编码有关画布上对象的空间信息，例如使用可缩放矢量图形（.svg）格式或html输出[59]。有关对象布局的信息，包括这些对象的边界框，都可以解析从这些输出格式中获得高度准确的结果检测组件。因此，如果此元数据用于可用模型实体，可以对其进行解析以获得GUI组件的极其精确的边界框存在于模型工件中，然后可用于其余的原型制作过程。给定在元数据中编码的空间信息有时可以在模型工件中使用，可能会质疑此信息是否也可以用于重建GUI组件的分层表示，可以以后有助于代码转换过程。不幸，现实的GUI层次结构通常无法被可行地解析至少由于以下两个原因而从此类工件中获取：
（i）使用照片编辑软件创建模型的设计师倾向于编码与层次结构不同的编码由于设计师缺乏知识，开发人员会关于以编程方式的最佳方式在屏幕上排列GUI组件[10]；
（ii）限制在照片编辑软件中，可能会禁止创建符合程序要求的适当空间布局。因此，任何分层从此类工件中解析出来的结构很可能是特定的设计师的喜好，或受照片编辑软件功能的限制，从而限制了我们的原型场景。例如，设计师可能没有提供足够的GUI容器来创建有效的反应式移动版式或照片编辑软件可能不允许按比例缩放GUI组件的相对位置跨不同的屏幕尺寸。

3.1.2使用CV技术进行GUI组件检测：
解析来自实体模型的信息会导致高度GUI组件的准确边界框此信息由于以下方面的限制，可能并非始终可用使用的照片编辑软件或设计不同的照片实践，例如以数字或物理方式绘制模型使用数位屏，数位板或纸。在这些情况下，实体模型可能仅包含图像，因此需要CV技术来识别相关的GUI组件信息。为了支持这些情况，我们的方法建立在[8]中的CV技术检测GUI组件边界盒子。此过程使用了一系列不同的简历技术（图2-1）推断对象周围的边界框，这些边界框对应于图像中的GUI组件。首先，坎尼的边缘检测算法[60]用于检测边缘图像中的对象。然后将这些边缘扩张合并边缘彼此靠近。最后，那些轮廓边用于导出原子周围的边界框GUI组件。合并基于文本的其他启发式方法使用光学字符识别（OCR）的组件是用于合并文本逻辑块的边界框（例如，不是将每个单词都检测为自己的组成部分，句子和文本段落合并在一起）。
3.1.3 ReDraw实现-GUI组件检测
在实施REDRAW时，要支持以下情况：可以从Android应用程序的模型中收集元数据，我们以使用Marketch创建的工件为目标[59] Sketch [5]的插件，可将模型导出为html和javascript的组合。素描很受欢迎在移动开发人员之间，并通过大型插件库提供了广泛的自定义功能[61]。 REDRAW解析包含在其中的GUI组件的边界框导出的Marketch文件。支持与元数据相关的场景实体模型不可用，REDRAW使用CV技术自动推断组件的边界框从静态图像。为此，我们重新实施了在[8]中描述的方法。因此，REDRAW的GUI组件检测阶段的输入是屏幕截图和相应的插销文件（对其应用了marketch解析过程）或单个屏幕截图（已应用基于CV的技术）。最终结果GUI组件检测过程是一组边界位于原始输入屏幕截图中的框坐标和从原始裁剪图像中收集的图像集合根据派生的边界框截图描述原子GUI组件。以后将提供此信息到CNN中分类为Android特定组件阶段2.2中的类型。应当注意，在此过程中仅检测到GUI组件。在另一手工GUI容器和相应的GUI层次结构在第2节中描述的组装阶段构造。 3.3。

3.2阶段2-GUI组件分类
一旦从实体模型工件中检测到原子GUI组件元素的边界框，下一个原型制作过程的第一步是将特定GUI组件的裁剪图像分类为特定于域的类型。为此，我们提出了一种基于数据的基于机器学习的方法利用CNN的方法。如图2-2.1和图2- 2.2，此阶段包含两个主要部分：
（i）大规模软件资源库挖掘和自动动态分析，以及（ii）CNN的训练和应用以进行分类GUI组件的图像。
在以下小节中我们首先讨论的动机和实施之前的资源库挖掘和动态分析过程
讨论使用CNN的基本原理以及我们的具体REDRAW中的体系结构和实现。
3.2.1 2.1阶段-大型软件存储库挖掘和动态分析
鉴于其受监管的性质和深入的架构，CNN针对图像分类任务，需要大量的训练数据才能实现精确分类。训练传统CNN图像分类网络的数据通常由大量标有其图像的图像组成对应的类别，其中标签对应于图像中的主要主题。传统上，此类数据集具有人工采购，其中人类费力地标记数据集中的每个图像。但是，我们建议自动创建由特定GUI组件的图像组成的带标签的训练数据的方法从完整的屏幕截图和对应的标签中裁剪其特定于域的类型（例如，“按钮”或“微调框”中的Android）使用全自动动态程序分析。我们对自动化动态分析的关键见解过程如下：在自动探索从大型存储库中提取的软件期间，平台特定的框架可以用来提取描述GUI的元数据，然后可以将其转换为适合的大标签训练集CNN。如图2- 2.1所示，此过程可以通过挖掘软件存储库自动提取可执行文件。然后进行大量有关自动输入的研究可以使用基于GUI的应用程序测试生成通过模拟用户输入自动执行挖掘的应用程序。例如，如果目标是移动应用，则输入生成技术依赖于基于随机的[62]，[63]，[64]，[65]，[66]，系统化[36]，[67]，[68]，[69]，[70]，基于模型的[37]，[67]，[69]，[71 ]，[72]，[73]，[74]或进化[75]，[76]策略可以用于此任务。作为应用程序执行后，屏幕截图和与GUI相关的元数据可以为每个观察到的独特屏幕自动提取或应用的布局。其他类似的自动GUI翻录或爬网方法也可以适用于其他平台例如网络[77]，[78]，[79]，[80]，[81]。可以使用第三方软件捕获屏幕截图或目标操作系统随附的实用程序。可以从多种来源收集与GUI相关的元数据包括可访问性服务[82]，html DOM信息或UI框架，例如uiautomator [83]。的然后可以使用GUI元数据和屏幕截图提取GUI组件的子图像及其标记的类型从描述每个屏幕的相关元数据中解析。所得数据集的基础质量与标签如何很好地描述了GUI组件的类型显示在屏幕上。鉴于许多软件UI框架，可用于挖掘此类数据直接从呈现的实用程序中提取信息屏幕上的应用程序GUI组件，此信息
可能非常准确。但是，有一些从这些框架工作中收集到的信息包含轻微错误或不相关情况的情况。我们讨论这些情况和可采取的缓解措施
他们在秒。 3.2.4。

3.2.2 ReDraw实施-软件存储库挖掘和自动动态分析
采购大量Android应用来构建我们的我们开采的CNN的培训，验证和测试语料库Google Play上的免费应用程序。为了确保所挖掘应用的代表性和质量，我们提取了截至2017年6月Google Play商店中的所有类别。然后，我们筛选出主要包含游戏，因为游戏倾向于使用无法自动提取的非标准类型的GUI组件。这个离开我们共有39个类别。然后，我们使用了Google PlayAPI库[84]，可从每个库下载前240个APK类别，不包括一个以上存在的重复项类别。在此之后，总共产生了8,878个唯一的APK解释跨类别交叉列出的重复项。为了从挖掘的APK中提取信息，我们实施了一个大型动态分析引擎，称为使用系统自动化的执行引擎基于我们先前工作的输入生成方法CRASHSCOPE和MONKEYLAB [36]，[37]，[70]，[85]开发了应用程序并提取了屏幕截图和与GUI相关的内容有关已访问屏幕的信息。更具体地说，我们的系统化GUI探索在以下位置导航目标应用的GUI以深度优先搜索（DFS）的方式锻炼轻敲，可长时间敲击且可键入的字符（例如，能够接受文本输入）组件。在系统的探索中，我们使用Android的uiautomator框架[83]提取与GUI相关的信息作为描述层次结构的xml文件以及给定显示的组件的各种属性屏幕。我们使用了Android screencap实用程序来收集屏幕截图。 uiautomator xml文件包含各种显示的每个GUI组件的属性和属性在Android应用程序屏幕上（包括边界）框（例如，屏幕内的精确位置和区域）和组件类型（例如EditText，Toggle Button）。这些属性允许从显示的给定屏幕上提取每个GUI组件的单个子图像相应的屏幕截图并自动标记为带有正确的类型。DFS探索策略的实施利用状态机模型，其中考虑了状态唯一的应用程序屏幕，如其活动名称所示并使用以下命令提取显示的窗口（例如对话框）adb shell dumpsys window命令。考虑到超过8.8k个应用中可行的执行时间我们的数据集，同时仍在探索几个应用程序屏幕，我们将我们的勘探策略限制为每次执行50次操作应用程式。先前的研究表明，大多数自动输入Android的生成方法趋于达到峰值覆盖率（例如，声明覆盖率在≈20％到40％之间）经过5分钟的探索[86]。而不同的输入生成方法往往表现出不同的数量给定时间单位的操作数，我们过去的工作表明我们的自动输入生成方法可以实现
竞争性覆盖类似方法[36]，而我们的规定每次50次动作的舒适时间超过5分钟应用程式。此外，我们的目标是进行大规模分析不是要完全探索每个应用程序，而是确保各种屏幕和GUI组件类型。对于每个应用，执行引擎提取uiautomator前六个唯一屏幕的文件和屏幕快照对每个应用程序的屏幕数量参观了。如果给定的数量少于六个屏幕应用程序，然后收集所有屏幕的信息。我们的大型执行引擎以并行方式运行，中央调度员向工人分配工作的地方，每个工作人员都连接到一个物理Nexus 7的地方平板电脑，负责协调执行传入的工作。在动态分析过程中，每个工作都包含系统地执行来自我们的数据集。工人完成工作后，通知调度员，调度员又分配新的工作。此过程在5名工人中并行进行，直到所有我们已经研究了数据集中的应用程序。由于广告在免费应用[87]，[88]中很流行，并且通常是动态WebView而非本机组件组成，我们使用Xposed [89]来阻止应用中的广告使其他类型的本机组件模糊。此过程产生了GUI信息的数据集和19,786个独特的应用程序屏幕截图，其中包括超过431,747个本机Android GUI组件，其中包含er，据作者所知，迄今为止收集的最大的此类数据集RICO数据集[43]。在图3中，我们说明了按应用划分的前19个观察组分的对数尺度根据指定类别中应用程序出现的组件频率，使用热图来确定类别（毫不奇怪，不包括TextViews观察到的组件的流行类型，占≈25％组件）。组件中的分布数据集说明了两个要点。首先，而ImageViews和TextViews往往包含大量的在实践中观察到的组件，开发人员也大量依靠其他类型的本机Android组件来实现应用程序功能的关键部分。例如按钮CheckedTextViews和RadioButtons组合在一起在我们的数据集中的各个应用程序中使用了2万多次。第二，我们观察到某些类型的组件可能更多流行于不同类别的应用。例如，应用从“ MUSIC_AND_AUDIO”类别开始SeekBar和ToggleButton组件的使用率更高实现媒体播放器的预期功能，例如浏览音乐和视频文件。这些发现说明，要使一种方法能够有效为各种移动应用程序生成原型，它必须能够正确检测和分类流行
支持各种功能的GUI组件类型。3.2.3 2.2阶段-GUI组件的CNN分类收集了标记的训练数据集后，我们需要训练一种机器学习方法来提取显着特征从GUI组件图像中进行分类基于这些提取特征的图像。去完成我们的方法利用了CNN的最新进展。的与其他图像分类相比，CNN的主要优势方法是该体系结构允许从图像数据中自动提取抽象特征，近似值非线性关系的应用原理数据局部性和端到端可训练的分类建筑。

Fig. 3: Heat-map of GUI Components by Category Before
Filtering

3.2.4 ReDraw实现-CNN分类器
一旦目标模型工件中的GUI组件具有使用模型元数据或基于CV进行检测技术，REDRAW必须有效地对这些组件进行分类。为此，REDRAW实现了CNN功能，该功能可将GUI组件的目标图像分类为观察到的15种最受欢迎的组件之一在我们的数据集中。在本小节中，我们首先描述用于生成训练，验证，和测试数据集（示例如图4所示）在介绍我们的CNN架构和培训之前我们采用的程序。数据清理：我们实施了几种类型的预处理和过滤技术，以帮助减少噪声。更多具体来说，我们在三个方面实施了过滤流程不同的粒度级别：
（i）应用程序，（ii）屏幕和（iii）GUI组件级别。
虽然REDRAW的未来版本可能支持非本机应用程序，但要提供适当的范围来满足严格要求实验中，我们已经实现了带有支持端口的REDRAW，以对本机Android应用程序进行原型设计。因此，一旦我们收集了xml和屏幕截图文件，应用过滤器以丢弃非本地应用程序，包括游戏和混合应用程序。因此，我们应用了以下应用程序级过滤方法：•混合应用程序：我们过滤了使用Apache Cordova [90]来使用Web技术（例如html和CSS）实现移动应用程序的应用程序。为了实现这一点，我们首先使用Apktool对APK进行了反编译[91]获取应用程序中使用的资源。然后我们丢弃包含www文件夹的应用程序里面有html代码。•非标准GUI框架：一些现代应用程序利用第三方图形框架或库创建高度定制的GUI。尽管此类框架作品通常被大量用于创建移动游戏，但它们也可以用于创建用于适用于更多传统应用。一种流行的框架是Unity [92]游戏引擎。从而，为避免使用该引擎的应用程序，我们筛选出了包含文件夹结构的应用程序使用Apktool反编译后，代码文件夹中的com / unity3d / player。此过程导致删除了223个应用程序以及由8,655个应用组成的数据集，然后我们对其进行了屏幕级过滤。在屏幕级别，我们实现了以下预处理技术：•过滤出风景屏幕：保持高度和所有屏幕的宽度一致，我们仅收集数据从以纵向显示的屏幕中。因此，我们检查了提取的屏幕截图的大小并确认宽度和高度对应到1200x1920，使用的横向屏幕尺寸在我们的目标Nexus 7设备上。但是，有一些角落情况下图像具有正确的肖像大小，但它是横向的。因此，要克服我们检查了提取的uiautomator xml文件并验证了屏幕尺寸以确保人像取向。•仅包含布局组件的过滤屏幕：在Android中，布局组件用作将其他类型的功能分组在一起的容器组件，例如按钮和微调器。然而，一些屏幕可能仅由布局组件组成。因此，为了确保数据集中的多样性，我们进行了分析动态过程中提取的uiautomator xml文件分析以丢弃仅包含以下内容的屏幕布局组件，例如LinearLayout，GridLayout，和FrameLayout等。•过滤WebView：虽然许多最受欢迎Android应用是本机应用，某些应用可能是混合应用本质上就是利用本机内的Web内容应用包装器。因为此类应用使用的组件无法通过uiautomator提取，我们将其丢弃从我们的数据集中删除WebView屏幕占据了屏幕面积的50％以上。应用这些过滤技术后，删除了2129个应用程序和4,954个屏幕，结果数据集包含14,382个唯一屏幕和431,747个屏幕6,538个应用程序中的独特组件。我们使用了uiautomator xml文件中的信息以提取GUI层次结构中叶级GUI组件的边界框。我们仅按顺序提取叶级组件使我们的数据集与从模型中检测到的组件对齐。从直觉上讲，容器组件（例如非叶节点）将表现出ML方法能够按顺序推导的显着特征进行准确的分类（因此，在第二节中介绍了基于KNN的方法。 3.3）。此外，尚不清楚如何使用这种GUI容器分类网络来迭代地构建GUI结构。我们对提取的叶子成分进行了最终过滤：•过滤噪声：我们观察到在极少数情况下组件的边界无效（例如，超出屏幕边界，或表示为零或负区域）或组件将没有分配给他们的类型。因此，我们将这些情况过滤掉。•过滤纯色：我们还观察到在某些情况下在这种情况下，提取的组件是由单一纯色，或在少数情况下为两种纯色。这通常是由于视图屏幕的层次结构已加载，但内容为仍呈现在页面上或通过网络，当截图被捕获时。因此，我们丢弃此类案件。•过滤稀有GUI组件：在我们的数据集中，我们发现一些组件只出现了很少因此，我们用初始数据集中少于200个实例，导致我们的数据集中有15种GUI组件类型。上述数据清理过程导致去除240,447个组件，从而产生191,300个来自6,538个应用程序的GUI组件的带标签的图像。我们提供了一个热图，说明了组件在不同Google Play类别中的应用中的受欢迎程度图5为了确保数据集的完整性，我们随机抽取了具有统计意义的1,000个GUI组件图像样本（对应于置信区间）在置信度为95％时为±3.09），并且只有一位作者手动检查所有1,000张图像和标签，以确保数据集完整性。

Fig. 4: Example of a subset of ReDraw’s training data
set consisting of GUI-Component sub-images and domain
(Android) specific labels. Images and corresponding Labels
are grouped according to the dashed-lines.

重画的CNN架构：
我们的CNN架构是如图7所示。我们的网络使用类似的架构与AlexNet[30]相比，它有两个更小的卷积层，而不是5层，并在MATLAB中使用神经网络[93]、并行计算[94]和计算机实现远景[95]工具包。而“更深层”的建筑确实存在[31]、[33]、[34]和已经被证明在大规模图像识别基准上取得了更好的性能，这以显著延长训练时间和要调整的参数集较大。因为我们的目标是分类15类最流行的Android GUI组件，我们不需要更深层次的网络把成千上万的图像分类。我们走得更深架构和更多的图像类别未来的工作。同时，这也让我们的CNN得以汇聚几个小时而不是几个星期，正如我们所说明的，仍然达到高精度。为了调整我们的CNN，我们进行了小规模的实验通过从每个类中随机抽取1K个图像来构建小型培训/验证/测试集（75%，15%，10%）以更快的速度训练时间（注意，这些数据集与用于训练/验证/测试所述网络的全套设备更早）。在这些实验中，我们反复记录验证集的准确性，并记录最终结果测试集的准确性。我们调整了层的位置和网络参数直到我们达到峰值测试我们随机抽样数据集的准确性。训练CNN：训练REDRAW的网络我们衍生的训练集；我们端到端地训练我们的CNN利用反向传播和随机梯度下降与动量（SGDM）结合使用防止我们的网络过度适应我们的培训数据。也就是说，每五个阶段（例如，整个训练集
通过网络一次）我们测试我们的CNN在验证集上，保存了一份同时分类器的权重。如果我们观察我们在两个以上的检查站的准确性下降，我们终止培训程序。我们改变了学习方式比率从0.001到1×105在50个时代之后，然后又降到1×10675个时代之后培训结束。逐步降低学习率允许网络“微调”已学习的权重随着时间的推移，导致整体分类的增加精度[30]。我们的网络训练时间是17小时，12小时在一台只有Nvidia Tesla K40 GPU的机器上的分钟数。
使用CNN进行分类：
一旦CNN经过训练，新的，看不见的图像可以输入网络产生一系列分类分数，对应于每节课。在重画的情况下，组件类最高置信度被指定为给定的目标图像。我们对分类进行了评估使用中描述的数据集重画CNN的准确性本小节稍后将在第。4和5。