用户界面检索研究综述

2021-11-20严治

现代计算机 2021年13期

严治

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

0 引言

用户界面（UI）在现代桌面软件、移动应用程序和Web应用程序中无处不在，它定义了用户如何与应用程序交互，并使他们能够操作应用程序的功能。一个设计良好的UI让应用程序使用起来更加简单和高效，这对应用程序的成功和用户的忠诚度将产生极大影响[1-2]。

为了设计出既吸引用户又具有高可用性的应用程序，设计人员必须尽可能考虑多种UI设计方案，从中找出最优的方案，并评估其效果。为了支持这一过程的顺利进行，设计人员往往需要大量相关的UI设计样例的支持。得益于近年来数据驱动设计的提出和大规模UI数据集的涌现，例如ERICA[3]、Rico[4]和Gallery D.C.[5]等，这为设计人员提供了大量真实可用的UI设计样例。这些样例通常包含优秀的设计样式和当前流行的设计趋势[6-7]，设计人员可以从这些设计样例中获得灵感，并从不同设计样例中通过对比来评估每种设计样例的优缺点，然后对好的设计点进行整合来探索更好的设计方案[8]。

1 研究现状

现在主流的用户界面检索研究大致可以分为以下三类：①基于metadata的用户界面检索；②基于界面树的用户界面检索；③基于示例的用户界面检索。下面就每类分别进行阐述。

1.1 基于metadata的用户界面检索

基于metadata的方法一般需要设计一些属性标签，然后从界面中提取出相应的属性特征，用来描述这个界面。检索的时候一般基于关键词进行检索，就能找到数据库中对应标签的界面。这类方法的代表就是传统基于文字的搜索方法，一般通过给数据库中的图像数据进行标注之后，便可以通过关键词找到想要的图像。

Bernal-Cardenas等人[9]收集了应用程序的metadata和界面截图，然后对低质量的应用进行了一个过滤操作，最后将每个界面的metadata例如组件类别、App名称、组件上展示的文本提取出来，作为界面的属性标签。除此之外，他还提取了界面中占比最多的6种颜色作为界面颜色这一属性上的标签。在查询阶段，用户输入一段描述文本，查询解析器会将用户描述的关键词提取出来作为查询真正的输入，像是color:red AND ui:edittext一类的描述，最后便可以找到用户想要的界面。

Kumar等人[10]开发了一个大规模设计挖掘平台，包括一个拥有10万多个网页和1亿个设计元素的存储库，用于支持界面的检索。这个平台的体系架构包括五部分：Web爬虫、代理服务器、数据存储、后处理和API。其中爬虫通过代理加载网页，然后将网页存入数据库中。这之后在存储的网页上运行后处理程序来计算界面元素的语义特征和计算机视觉特征，最后客户端应用程序可以通过API查询想要的界面。为了支持更复杂的访问模式，API提供了基于JSON的自定义设计查询语言（DQL）。这种查询语言允许基于DOM属性和计算视觉特征的组合进行查询结果的筛选，并且能将DQL转换成数据库的查询语言，很大程度上方便了用户。

与之类似，Ritchie等人[11]也设计了一个系统，允许用户交互式地基于风格查找相关网页界面。他们收集了多家网站的300多个热门界面作为初始数据集，由于系统能自动提取新加入的网页的特征，因此数据集的拓展也很容易。该系统能支持用户基于界面中文字、界面颜色和界面风格进行检索，或者使用以上三个特性的组合。选择这些功能是通过采访设计师和设计文献中的准则综合考量的。

1.2 基于界面树的用户界面检索

基于界面树的方法一般是通过将界面提取成树的形式，然后比较树的相似度来得到相似界面，不同的研究在树的比较方法上选择不同。

Behrang等人[12]开发了一个名为GUIFetch的工具，使用关键词和应用程序线框图从公共代码仓库中找到与线框图相似的应用程序，并按照相似度以应用截图形式进行排序展示，同时附有源程序代码。该工具首先通过关键字检索的方法在现有代码仓库中找到相关的应用程序代码，并删除了一些相同的应用程序，然后通过结合静态分析和动态分析的方法来得到界面的层次结构树。对于线框图这一方面，文中使用Pencil原型工具进行线框图的绘制，该软件里有73种Android组件类型，并且可以导出绘制的线框图的层次结构文件。在得到了线框图和界面的层次结构树之后，该工具对树中叶子节点即组件进行了比较，其中包括四个拟定标准，分别是类型、涉及文本（如果有的话）、大小（高度和宽度）和位置。这四个标准有各自的权重，通过比较线框图和界面中所有的组件，该工具对线框图中每个组件选择了相似度得分最高的界面组件作为匹配项，最后进行一个累加的运算便得到了最后的界面相似性得分。在后面的评估中，结果表明GUIFetch能基本完全找到与线框图最相似的应用程序界面，并且在推荐相关性的研究中，有54%被认为是完全相关，40%被认为是60%到100%相关。

Zheng等人[13]设计了一个名为FaceOff的系统，用于协助Web UI设计。该系统首先从流行的网站和专业的设计样例中构建了一个基于15491个网页的Web UI存储库。接下来，在这个存储库中提取不同页面之间的公共模板。然后，建立了一个样式嵌入模型，它使用卷积神经网络（CNN）对每个GUI模板对应的图像进行编码。这样对于给定的正在设计的页面，FaceOff将其分割成多个块，并检索匹配每个块的GUI模板。然后FaceOff根据样式嵌入模型为每个检索到的模板推荐不同的样式组合。这样开发人员可以选择一个所需的样式组合，就能获得一个设计良好的网页。需要注意的是，为了更好地切合界面内容，界面可能还需要开发人员做一些小的改动。其中对模板的检索就用到了界面树的信息，因为网页界面本身就是一颗DOM树，树的提取相对容易，文中使用一种树的编辑距离的变体算法来计算两颗树之间的相似性。

1.3 基于示例的用户界面检索

基于示例的方法是现在较为常用的方法，且被证明是一种有效的检索方式，例如百度和谷歌的以图搜图，就是这类方法具有实用性的很好例子。这类方法一般是利用深度学习技术，先通过度量学习或者自编码器得到一个统一的嵌入空间，然后将草图或者高保真界面图作为查询条件，从而在这个空间中找到与之相似的界面。

Huang等人[14]采用了度量学习的思想，使用伪孪生神经网络架构，利用三重损失函数对草图和UI样例进行训练，从而得到草图和UI样例的统一嵌入空间，这样便能在这个统一空间中使用草图找到相似的UI样例。在后续评估中，该方法在top1上达到了15.9%，在top10上达到了60.9%，均高于文中基线方法，并且在基于列表的界面、有弹出框的界面和菜单项的界面等比较有代表性的界面上均有较好的检索结果。

Deka等人[4]采用自动编码器的思想，将所有界面通过编码器编码成统一维度的向量表示，由此组成一个向量空间，之后的检索就在这个空间中进行。他首先区分界面图中的文本和非文本元素，然后将界面图转换成语义图的形式，之后采用一个简单自动编码器模型将语义图编码成64维向量，作为这个界面的特征向量表示。在将数据库中所有界面转换成向量表示之后，便可以得到一个统一的向量空间，在这个空间中相似的界面应该聚在一起。这样用户将一张界面图作为查询条件输入编码器便可以得到该界面的向量表示，之后就能在这个空间中使用K近邻的方法找到最相近的其他界面，这样就实现了界面的检索。与之类似的，Lee等人[15]使用的方法与Deka相似，只不过自动编码器的设计有所不同。

Liu等人[16]改进了Deka的方法，进一步改善了检索效果。在Deka的方法中，只提取了界面的文本和非文本语义，这样训练得到的界面表示向量蕴含的信息并不丰富，而Liu对界面组件进行了细致的划分，给定了25种组件的类别，在此基础上使用更精细的组件元素级语义训练自动编码器。同时他采用的是深度自动编码器模型，将简单自动编码器中的全连接层使用卷积层和反卷积层、上采样和下采样替代，能更好的对界面特征进行提取。在给出的比较结果中，Liu的检索效果要优于Deka，说明使用更精细的组件元素级语义训练深度自动编码器，能得到更好的界面表示向量。与之类似，Chen等人[17]使用的方法与Liu相似，不过他使用线框图来对界面进行检索。

2 存在问题及讨论

上述研究虽然都实现了用户界面检索，但是都存在一些或多或少的问题，下面就每类方法存在的问题进行分析讨论。

第一类基于metadata的界面检索主要存在以下几个问题：①属性标签设计困难，因为需要在每个特征层面上进行特征提取或者特征标注，在数据集建立上需要耗费较多精力，并且有些时候缺乏一个设计指导；②属性标签设计无法兼顾所有使用者的需求，设计少了容易覆盖不全面，很可能用户想要的某个属性没有提供；③无法从界面整体角度进行检索，因为这都是基于局部单方面特征进行简单拼凑进行的检索，对离散的数据或许还行，但是对连续的数据分布则难以进行描述，同时很难进行特征的联合。

第二类基于界面树的界面检索依赖树相似度算法的支持，要得到好的效果这类算法的设计并不容易，并且这类方法只考虑了树结构上的相似性，检索因素单一。同时有些方法也没有很好运用起树的层次结构特征，例如上文中的GUIFetch，只比较了树节点的组件相似性，检索的覆盖率不高。

第三类基于示例的界面检索受启发于现有的图像相似性方法，而没有考虑界面图像和自然图像的不同之处，即界面具有的非常明显的结构性特征，因此最后检索结果的查全率并不高。

由此可以看出，第一类方法较难表述清楚用户的需求，并且属性标签设计麻烦，并不太适用于数据量大的界面素材库的检索。第二和第三类方法都没有充分利用界面的全部特征，因此这里考虑使用一种方法融合界面的结构特征和像素特征，通过将这两种特征结合，会对检索结果进行一定的改善，提升查全率。例如采用递归神经网络的思想，在位于界面树节点的组件上提取像素特征，然后使用递归网络得到整棵界面树的一个向量表示，这也即是整个界面的表示，这样提取到的界面表示向量就在一定程度上包含了上面提到的两类特征。

虽然基于示例的检索方法并不完美，但它仍是现在使用最广泛的检索方式，因为用户通过这种方式能轻松直观地表达他们的设计想法，只需要提供草图或线框图或高保真界面图就能进行检索。而在这三种图中，草图对比其他两种有着以下的优势：①草图是早期设计阶段的主要交流工具与产物，并且广泛存在于整个设计阶段；②草图能很好切合早期设计需求的频繁变动，易于修改；③线框图或者高保真界面图都是在草图的基础上得到的，直接跳过草图绘制费时费力，且效果也不一定好。因此基于草图的界面检索将可能会是未来界面检索的主流，如何更好地对草图和界面之间进行匹配将是研究的重点。