从神经机器翻译器到引导移动GUI的实现摘要：GUI框架是实现UI设计图像

摘要：GUI 框架是实现 UI 设计图像的起点。为了从 UI 设计图像中获取 GUI 框架，开发人员必须在视觉上理解图像中的 UI 元素及其空间布局，然后将这种理解转化为适当的 GUI 组件及其组成。自动化这种视觉理解和翻译对于引导移动 GUI 实施将是有益的，但是由于 UI 设计的多样性和生成的 GUI 框架的复杂性，这是一项具有挑战性的任务。现有工具是严格的，因为它们依赖于启发式设计的视觉理解和 GUI 生成规则。在本文中，我们提出了一种神经机器翻译器，它将计算机视觉和机器翻译的最新进展相结合，用于将 UI 设计图像转换为 GUI 框架。我们的翻译人员学习如何在 UI 图像中提取视觉特征，对这些特征的空间布局进行编码以及在统一的神经网络框架中生成 GUI 框架，而无需手动制定规则。为了培训翻译人员，我们开发了一种自动化的 GUI 探索方法，可以自动从实际应用程序中收集大规模 UI 数据。我们进行了广泛的实验，以评估我们方法的准确性，通用性和实用性。
1. 介绍移动应用程序（app）是具有丰富图形用户界面（GUI）的以事件为中心的程序。应用程序的 GUI 不仅应提供用户交互的工作界面，而且还应创造直观且令人愉悦的用户体验。实际上，后者对于应用程序在竞争激烈的市场中取得成功至关重要。开发应用程序的 GUI 通常涉及两个独立但相关的活动：设计 UI 和实现 UI 。设计 UI 需要适当的用户交互，信息体系结构和 UI 的视觉效果，而实现 UI 的重点是使 UI 与 GUI 框架的正确布局和小部件一起使用。
用户界面设计可以从头开始创建，也可以根据用户界面设计套件或现有应用程序的 GUI 进行改编，通常以设计图像的形式传达给开发人员以实现。UI 设计图像以像素矩阵形式描绘了所需的 UI 元素及其空间布局。为了使用 GUI 框架实现 UI 设计图像，开发人员必须能够将 UI（或 UI 的一部分）的基于像素的描述转换为 GUI 框架。如图 1 所示， GUI 框架定义了在 GUI 实现中应组成 GUI 构建器（例如 Android 布局和小部件）的组件以及组成方式，以在 UI 设计图像中再现 UI 元素及其空间布局。该 GUI 框架类似于最初的“引导指令” ，可启用后续的 GUI 实现（例如，设置字体，颜色，填充，背景图像等）。
但是， UI 设计图像（即像素语言的 UI 设计）和 GUI 框架（即 GUI 框架组件名称的语言的 UI 设计）之间存在概念上的差距。为了弥合这种差距，开发人员需要充分了解 GUI 框架的组件以及这些组件所支持的视觉效果，交互作用和构图，以便为不同种类的 UI 元素和空间布局创建合适的 GUI 框架。如果开发人员不具备此知识，则 GUI 实现将陷入困境，因为现代 GUI 实现无法通过对某些文本，图像和控件进行硬编码定位来实现。对于必须在各种屏幕尺寸上运行的移动应用程序尤其如此。
文章插图
图 1：将设计图像转换为 Android GUI 框架（并非全部）
为了克服 UI 设计图像和 GUI 框架之间的知识障碍，开发人员可以尝试通过反复试验的方法找出 UI 设计图像的 GUI 组件应组成什么以及如何组成。尽管现代的 GUI 构建器为创建 GUI 实现提供了强大的交互式支持（例如，拖放，所见即所得），但这种类型的尝试和尝试错误将非常麻烦且令人沮丧。首先，移动应用的 GUI 通常涉及许多 GUI 组件和复杂的空间布局（请参见图 4（b））。其次，复杂的 GUI 框架支持数十种布局和小部件（有些可以互换）以及这些布局和小部件的灵活组合。在不熟悉的 GUI 框架的反复试验中，开发人员很容易迷失方向。
另外，开发人员可以从 GUI 框架教程或现有的 GUI 实现中学习。为此，他们必须能够找到一些实现与所需 UI 相似的 UI 设计的教程或 GUI 实现。通过 UI 设计图像查找此类教程或 GUI 实现是一项艰巨的图像搜索任务。很难为 UI 设计和使用信息检索（IR）方法所需的 GUI 组件制定简洁，准确的文本查询。开发人员还可以从开发人员社区寻求实现 UI 设计的解决方案（例如， Stack Overflow），但他们可能并不总是能够及时获得有用的建议。
应用程序的用户界面非常复杂，可以支持复杂的任务，并且在应用程序的生命周期内可能会经历许多修改。考虑到正在开发和维护的数百万个应用程序，从 UI 设计到 GUI 实施的自动转换将对移动应用程序开发有利。给定 UI 设计图像，某些工具可以自动生成 GUI 实现。这种自动生成的方法克服了将 UI 设计图像转换为 GUI 框架的反复试验，基于搜索或询问开发者社区方法的局限性。但是，现有工具很严格，因为它们依赖于手工设计的视觉理解和 GUI 生成模板，这些模板仅包含有限的 UI 图像到 GUI 框架的翻译知识。