张志翔，王慧亚，范佳琪

（四川大学计算机学院，成都610065）

0 引言

移动设备和应用程序对全世界人们的日常生活产生重要影响。这种影响源于这些应用程序能够执行一系列的任务，从简单的杂务，如设定闹钟提示到更复杂的活动。这些任务由移动设备上提供的丰富的“应用程序”生态系统实现。但是，在开发者将应用程序发布到Apple 的App Store 或Google Play 等市场之前，他们必须进行一系列的前提操作才能达到最终的效果。此过程从应用程序的需求和用户界面的构思和概念开始。然后，继续创建一组描绘图形用户界面（GUI）的屏幕模型。用户界面和用户体验（UI/UX）设计人员通常会迭代这些模型，直到在GUI 中捕获所有功能。一旦最终设计准备就绪，程序员将模型（通常在像Sketch 这样的软件中创建）和设计者提供的资源转换为可运行的应用程序。在确认应用程序成功通过一系列测试后，它将在市场上发布。

1 用户界面检索

1.1 界面检索的发展历程

应用程序具有丰富的图形化用户界面，而具有良好GUI 设计的应用程序在当今手机软件泛滥的年代更具有竞争力，这促使开发人员在GUI 开发上投入大量精力。由于市场上有大量成功的应用程序，重用高质量GUI 代码的想法是自然和有吸引力的。就像在谷歌中搜索最近的商店一样，搜索具有相似GUI 设计的应用程序也应该是一个简单而快速的任务。要求用户使用复杂的建模工具提供高保真图像是不切实际的。搜索工具应该支持轻量级和低保真原型。然而，现有的GUI 代码搜索方法[2,3]并没有为用户提供方便地建模GUI 的直接方法，这限制了它们的可用性。后面提出了一种新颖的方法，使用草图搜索视觉相似的应用程序。在纸上绘制图形用户界面是一种直观的方法，用户可以使用铅笔快速建模应用程序图形用户界面。为了寻找实现草图设计的代码，有利用基于深度学习（DL）的框架将草图转换成GUI 结构。然后，计算翻译后的结构性GUI 数据与应用程序库中的数据之间的相似度评分，并根据这些相似度评分对搜索结果进行排序，最后返回给用户。

因此，开发任何基于图形用户界面的应用程序的一个重要步骤是起草和原型设计模型。在拥有更大团队的工业环境中，这一过程通常由专门的设计师执行，他们拥有特定领域的专业知识，能够使用图像编辑软件（如Photoshop 或Sketch）制作具有吸引力、直观的图形用户界面。这些团队通常负责在公司数字业务的多个方面表达连贯的设计语言，包括网站、软件应用程序和数字营销材料。在创建了这些初始设计草稿之后，必须将它们忠实地转换为代码，以便最终用户能够以其预期的形式体验设计和用户界面。

此过程中最困难的部分之一是从“草图”到用户界面原型化，也就是从设计到原型代码，从UI 设计师到前端程序员。为了改善此项设计任务和编程任务，现有的用户界面重用的索引方式有基于草图（手绘）、UI模型（Sketch、PS 等）、屏幕截图、关键词、条件筛选（如按钮、下拉框、颜色等）或组合搜索。现有的软件仓库有Rico（2017）[13]、ERICA（2016）[14]、GitHub、谷 歌 商店等。

1.2 界面检索的相关技术

目前的检索技术有基于计算机视觉技术和索引元数据，如Google Image Search[1]，但是，这是一种更通用的搜索工具，不允许详细搜索大型Android 应用程序屏幕索引，并且缺乏按屏幕或GUI 组件类型过滤搜索的功能。还有使用设计模型和关键字搜索的，如GUIFetch[2]。虽然GUIFetch 方法代表了一种有前途的技术，可帮助开发人员通过检索实现示例将现有模型转换为代码，但在应用GUI 概念化的早期阶段，它几乎不支持设计人员和开发人员，因为它需要模型作为输入。

之后又出现了GUIGLE[3]，它是一种实现轻量级方法的补充方法，可快速搜索大量应用程序GUI 并直观地检查结果，从而促进基于检索到的屏幕的集合设计模式概念化GUI 的过程。此外，GUIGLE 支持一组简单但功能强大的搜索查询公式，允许用户快速发现与GUIFetch 不支持的高度特定概念（即通过屏幕和GUI组件类型过滤）相关的应用程序屏幕。最后，GUIGLE能够索引大量Google Play 应用而无需访问源代码，而GUIFetch 需要访问源代码，因此仅限于较小的开源应用程序集。但是GUIGLE 的局限性也很明显，只能采用条件组合查询，无法进行更为复杂的查询检索。

之后又有通过草图的方式来进行检索，草图在设计过程中很常见，并且通常只需要设计师手稿画出来。这表明草图可能是一种很好的方法，设计师可以在搜索UI 语料库时指定查询标准，这激发了基于草图的UI 检索技术的研究。Swire[4]一种基于草图的神经网络驱动技术，用于检索用户界面。基于草图的图像检索是计算机视觉社区中经常研究的问题。标准的基于草图的图像检索任务涉及用户使用二进制笔划创建简化草图，描绘目标自然图像的最小用户定义特征。例如，当用户希望以特定姿势检索鸟的图像时，用户将仅绘制鸟的目标身体的轮廓和描绘鸟的翅膀的线。由于用户在尝试检索这些图像时经常关注图像内的目标对象，因此先前工作中的典型方法是首先获得原始图像的边缘图，其描绘（前景）对象与背景场景之间的边界。边缘检测技术，如Canny 边缘检测器[5]。然后，这些方法使用图像相似性技术将边缘图与用户创建的草图相匹配。研究人员开发了各种图像相似度，以提高检索性能，从基本的峰值信噪比（PSNR）[6]到更高级的袋状（BOW）方向梯度直方图（HOG）filters[7]。

随着最近神经网络和众包的日益普及，研究人员开发了大规模的草图数据集，这些数据集与自然图像数据集相对应，为神经网络驱动的图像检索任务提供动力。TU-Berlin[8]和Sketchy[9]草图数据集由众包草图组成，这些草图是通过向群众工作者提供原始相应的自然图像而收集的。使用这些相应的草图、图像对，训练神经网络以将匹配的草图和图像直接编码成类似的低维输出。当使用草图查询检索图像时，自然图像按其神经网络输出与草图查询的输出之间的距离（例如欧几里德距离）进行排序。Swire 受到上述基于神经网络的图像检索方法的极大影响。此外，太古使用BoWHOG flters 作为基线方法来演示和对比基于神经网络的Swire 使用草图检索UI 的高效率。

2 界面检索的应用

现有的界面检索的系统有GUIFetch、Swire、GUIGLE。

GUIFetch，该技术将应用程序的草图作为输入，并利用公共存储库中越来越多的开源应用程序来识别具有类似于提供的草图中的GUI 和转换的应用程序。GUIFetch 首先搜索公共存储库，使用关键字匹配找到有可能的应用程序。然后，它使用静态和动态分析相结合的方法，来构建识别出的应用程序界面和界面转换的模型，并计算模型和提供的草图之间的相似性度量。最后，GUIFetch 根据其计算的相似值对识别出的应用程序（或其部分）进行排序，并生成结果的可视化排序以及相应应用程序的代码。在实验中为Android应用程序实现了GUIFetch，并通过涉及不同类型应用程序的用户研究对其进行了评估。

GUIGLE 是一种实现轻量级方法的补充方法，可快速搜索大量应用程序GUI 并直观地检查结果，从而促进基于检索到的屏幕的集合设计模式概念化GUI 的过程。此外，GUIGLE 支持一组简单但功能强大的搜索查询公式，允许用户快速发现与GUIFetch 不支持的高度特定概念（即通过屏幕和GUI 组件类型过滤）相关的应用程序屏幕。最后，GUIGLE 能够索引大量Google Play应用而无需访问源代码。

Swire，一种基于草图的UI 检索技术，使设计人员能够使用草图与大型UI 数据集进行交互。在Swire 的开发过程中，收集了与UI 相对应的草图数据集，这些草图能够支持研究人员开发更多基于草图的数据驱动应用程序。通过对该数据集的培训，Swire 的灵活深度学习模型在检索UI 方面实现了高性能，并支持多种实用设计应用。通过太古的发展，作者希望为设计师提供相关的材料和计算资源，以专注于设计过程中的创造性和创新性任务。

3 讨论尚未解决的问题和成功的领域

现目前因为对草图的研究的加深，基于边缘检测技术的提高，以及神经网络和众包的日益普及和实际使用的加强，对草图内容层次的识别提供了各种不同的方法。GUIGLE，一个用于Android 应用程序截图的GUI 搜索引擎，用户可以检查每个检索到的屏幕并获取详细信息，例如GUI 组件列表，所属应用程序的Google Play 商店的名称和链接，同一应用程序的其他屏幕，按比例排序的前6 种颜色屏幕中的颜色和其他类似的屏幕。但是没有复杂的查询来实现更为强大的搜索，这包括创建考虑组件层次结构的查询的可能性，并考虑颜色的比例以更好地对屏幕截图进行排名。此外，GUIGLE 可以设想为开发人员提供封闭源应用程序的app 骨架的起点。这可以通过利用基于屏幕截图生成GUI 代码的方法来完成。

GUIFetch，一种代码搜索技术，它利用公共存储库中越来越多的开放源代码应用程序，为用户提供可用作他们想要创建的应用程序的起点的代码。给出一个应用程序的草图（即应用程序的界面和它们之间的转换），GUIFetch 在公共存储库中搜索尽可能类似于所提供的草图的应用程序。然后向用户报告匹配的应用程序，按照草图的相似程度对其进行排序。GUIFetch 可以为开发人员提供构建基于GUI 的应用程序的起点，支持早期原型开发，并帮助设计师评估是否有类似于他们想要开发的现有应用程序。但是在文中应用程序类型过少，应用程序的数量也很少。接下来需要进行更多涉及更多用户和应用程序类型的研究。

尽管Swire 在检索相关UI 示例方面取得了成功，但发现它无法获得对某些草图的细粒度语义理解。文章中展示了在Swire 评估期间观察到的失败案例的几种模式。第一种模式发生在Swire 处理罕见的自定义UI 元素时。太古未能理解复杂的天气图，并检索了另一个具有类似布局的界面，作为与查询最相关的结果。第二种模式是太古未能理解具有不同颜色的UI，例如具有图像背景的UI。Swire 将登录屏幕与背景图像混淆，尽管最相关的UI 仍位于第二位。由于太古主要关注草图的高级布局信息，未来可以通过在草图中理解和控制个别元素来改善它。一个可行的解决方案是训练元素级草图识别模型，以识别用户在某些区域中描绘的特定类型的元素。目前，太古的神经网络只采用屏幕截图和草图作为输入。虽然可视内容提供了关于UI 的一些结构和语义信息，但相信Swire 可以通过包括结构化UI 层次结构树来改进，其中每个元素的属性作为网络的附加输入。包含UI 结构层次将添加丰富的结构和语义信息，这些信息可能会提高Swire 对UI 的理解。这个查询模型工作的一个自然扩展是探索从基于草图的输入生成具有高层UI 特征模型的生成模型。虽然过去已经开发了多种自动化方法，但由于其不可预测性和生成的界面的最低限制，它们未能获得较大成就。虽然Swire 展示了在支持设计应用程序方面的能力和潜力，但这些应用程序目前是粗糙的原型，尚不适合设计人员日常使用。

4 结语

本文介绍了现有的手机应用程序的必要性和开发流程，从而发现对用户界面检索的需求，并从不同的检索技术引出了相应实现的应用。基于草图的UI 检索因为深度学习的发展逐渐成为主流，将来的发展方向主要是构建草图的模型以及相似度匹配算法的研究。