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

Kevin Moran, Carlos Bernal-Cárdenas+3 more|arXiv (Cornell University)|Feb 7, 2018

Software Engineering Research被引用 6

一句话总结

该论文提出 ReDraw，一种基于机器学习的系统，通过从原型图中检测 GUI 组件，使用深度学习和软件挖掘进行分类，并利用 K-最近邻算法将这些组件组合成结构化且视觉准确的 Android 应用程序，从而实现移动 GUI 原型自动构建。该系统在组件分类上达到 91% 的准确率，并生成与目标原型图高度一致的视觉原型。

ABSTRACT

It is common practice for developers of user-facing software to transform a mock-up of a graphical user interface (GUI) into code. This process takes place both at an application's inception and in an evolutionary context as GUI changes keep pace with evolving features. Unfortunately, this practice is challenging and time-consuming. In this paper, we present an approach that automates this process by enabling accurate prototyping of GUIs via three tasks: detection, classification, and assembly. First, logical components of a GUI are detected from a mock-up artifact using either computer vision techniques or mock-up metadata. Then, software repository mining, automated dynamic analysis, and deep convolutional neural networks are utilized to accurately classify GUI-components into domain-specific types (e.g., toggle-button). Finally, a data-driven, K-nearest-neighbors algorithm generates a suitable hierarchical GUI structure from which a prototype application can be automatically assembled. We implemented this approach for Android in a system called ReDraw. Our evaluation illustrates that ReDraw achieves an average GUI-component classification accuracy of 91% and assembles prototype applications that closely mirror target mock-ups in terms of visual affinity while exhibiting reasonable code structure. Interviews with industrial practitioners illustrate ReDraw's potential to improve real development workflows.

研究动机与目标

• 解决移动应用开发中将 GUI 原型图手动转换为可运行代码所耗费时间长、易出错的问题。
• 通过机器学习自动化原型设计阶段，减轻设计师和开发者的负担。
• 实现 GUI 原型图到功能型 Android 原型应用的快速、准确且视觉忠实的转换。
• 通过将自动化原型构建集成到实际开发流程中，改善工业工作流。
• 提供端到端解决方案，弥合设计原型图与原生代码之间的抽象鸿沟。

提出的方法

• 使用计算机视觉或从设计文件中提取元数据，检测原型图中的 GUI 组件。
• 利用在挖掘的软件仓库和动态分析数据上训练的深度卷积神经网络，将检测到的组件分类为领域特定类型（例如，切换按钮）。
• 使用在真实 Android 应用布局上训练的 K-最近邻算法，构建分层 GUI 结构。
• 通过数据驱动的代码生成，将分类后的组件与分层结构组合成最终的原型应用程序。
• 利用自动化的动态分析和可访问性服务提取 GUI 元数据，用于训练卷积神经网络分类器。
• 整合多种数据源——软件仓库、动态分析和原型图文件——以训练统一的、平台特定的原型构建流水线。

实验结果

研究问题

• RQ1 机器学习系统能否准确地从静态原型图图像或设计文件中检测并分类 GUI 组件？
• RQ2 基于 KNN 的方法在多大程度上能够从组件分类结果中重建出在语义和视觉上都准确的 GUI 层次结构？
• RQ3 生成的原型在视觉外观和结构布局上与原始原型图的相似程度如何？
• RQ4 与 pix2code 和 REMAUI 等现有基线方法相比，所提出的系统在组件分类准确率和视觉保真度方面表现如何？
• RQ5 工业实践者能否将该系统集成到真实世界开发工作流中并从中受益？

主要发现

• ReDraw 使用在挖掘的软件仓库和动态分析数据上训练的深度卷积神经网络，实现了 91% 的平均 GUI 组件分类准确率。
• 通过定性和定量评估验证，该系统生成的原型应用程序与原始原型图具有高度的视觉相似性。
• 基于 KNN 的组装方法生成的层次结构与人类开发者通常创建的布局结构非常接近。
• 工业实践者报告称，ReDraw 有潜力通过加速原型设计阶段来改善实际开发工作流。
• 与 pix2code 和 REMAUI 等基线方法相比，ReDraw 在组件分类准确率和视觉保真度方面表现出更优的性能。
• 该系统的架构具有可扩展性，适用于其他平台，但未来工作可能需要迁移学习或平台特定的元数据提取。