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
花很少的时间和资源进行迭代设计和编码用户界面，一种精确的自动化方法将可能是首选。这样一来，规模较小的公司就可以将更多的精力放在功能和价值上，而将更少的精力放在将设计转换为可行的应用程序代码。给定前端开发人员和设计师面临的挫败感通过构建准确的G​​UI，显然需要自动支持。为了减轻这一过程的困难，一些现代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具有潜力改善并促进原型开发一些