CN113722039A - 一种界面校验方法、装置、电子设备以及存储介质 - Google Patents

Abstract

本公开提供了一种界面校验方法、装置、电子设备以及存储介质，其中，该方法包括：获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；并将所述配对UI界面组展示在校验界面的界面校验区域中；响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

Description

一种界面校验方法、装置、电子设备以及存储介质

技术领域

本公开涉及计算机的技术领域，具体而言，涉及一种界面校验方法、装置、电子设备以及存储介质。

背景技术

在UI(User Interface)界面设计领域，需要对UI界面进行验收，比如，可以对多个待验收的UI界面进行比对，从而根据比对结果对该UI界面执行验收操作，例如，在UI界面的设计领域，通常需要对UI界面的UI原稿和UI设计稿进行反复比对，实现对UI设计稿的验收。现有的验收方式主要通过手动的方式对待验收的UI界面进行比对。由于，手动比对的工具较为单一，且手工比对的主观性较强，因此，在对结构较为复杂的UI界面的验收时，现有的验收方式无法保证比对的准确度，同时也影响UI界面的验收进度和验收效率。

发明内容

本公开实施例至少提供一种界面校验方法、装置、电子设备以及存储介质。

第一方面，本公开实施例提供了一种界面校验方法，包括：获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；并将所述配对UI界面组展示在校验界面的界面校验区域中；响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

一种可选的实施方式中，所述将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，包括：基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度，得到多个相似度；确定所述多个相似度中满足相似度要求的UI界面；基于所述满足相似度要求的UI界面确定所述配对UI界面组。

一种可选的实施方式中，所述方法还包括：获取每个所述待校验UI界面组的校验标识信息；所述校验标识信息用于指示对应待校验UI界面组所属的校验项目；在基于所述校验标识信息确定出各个待校验UI界面组所属相同校验项目的情况下，基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度。

一种可选的实施方式中，所述将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，包括：响应于针对至少部分所述待校验UI界面组的界面选择指令，在至少部分所述待校验UI界面组中选择待校验UI界面；基于选择的所述待校验UI界面确定所述配对UI界面组。

一种可选的实施方式中，所述基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对，包括：在所述多个UI界面之间确定至少一组相匹配的UI组成元素；基于所述界面信息，将每组所述相匹配的UI组成元素进行比对，得到每组所述相匹配的UI组成元素的比对结果。

一种可选的实施方式中，所述差异数据包括差异描述信息，所述展示所述差异数据，包括：在所述校验界面的差异展示区域展示所述差异描述信息，其中，所述差异描述信息包括以下至少之一：图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息。

一种可选的实施方式中，所述差异数据包括差异标记信息；所述方法还包括：响应于针对所述差异展示区域中差异描述信息的触发操作，在所述多个UI界面中，确定被触发的差异描述信息所对应的目标差异元素；在所述界面校验区域展示的多个UI界面中，展示所述目标差异元素之间的差异标记信息；所述差异标记信息包括以下至少一种：差异元素的标注框、差异元素的标注框之间的连接方式。

一种可选的实施方式中，所述方法还包括：响应于数据创建指令，在所述校验界面中创建新差异数据，其中，所述新差异数据包含：新差异标记信息和/或新差异描述信息。

一种可选的实施方式中，所述响应于数据创建指令，在所述校验界面中创建新差异数据，包括：响应于所述数据创建指令，在所述校验界面的界面校验区域中确定新差异元素，并为所述新差异元素创建所述新差异标记信息；和/或，响应于所述数据创建指令，创建所述新差异元素的新差异描述信息，并在所述校验界面的差异展示区域中展示所述新差异描述信息。

一种可选的实施方式中，所述在所述校验界面中创建新差异数据，包括：响应于区域选择指令，在所述多个UI界面中确定目标校验区域，并对所述目标校验区域执行目标操作，得到操作结果，其中，所述目标操作包含以下至少之一：区域放大操作、颜色识别操作、形状识别操作；基于所述操作结果，在所述校验界面中创建新差异数据。

第一方面，本公开实施例提供了一种界面校验装置，包括：获取单元，用于获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；配对单元，用于将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；展示单元，用于将所述配对UI界面组展示在校验界面的界面校验区域中；比对单元，用于响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；确定展示单元，用于基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

第三方面，本公开实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

在本公开实施例中，首先，获取多个待校验UI界面的界面信息，并将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；之后，响应于针对界面校验区域中配对UI界面组的校验操作，基于界面信息将配对UI界面组的多个UI界面的UI组成元素进行比对，最后，根据比对结果确定多个UI界面中差异元素的差异数据，并对该差异数据进行展示。通过基于界面信息将待校验UI界面组中UI界面进行配对组合，以对配对之后的UI界面组进行校验的方式，可以实现自动的确定多个UI界面中差异元素的差异信息，从而提高了对UI界面进行校验效率，同时加快了校验进度，节省了大量的人力资源。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种界面校验方法的流程图；

图2示出了本公开实施例所提供的一种配对UI界面组在校验界面中的展示效果示意图；

图3示出了本公开实施例所提供的界面校验方法中，一种可选的将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组的具体方法的流程图；

图4示出了本公开实施例所提供的界面校验方法中，另一种可选的将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组的具体方法的流程图；

图5示出了本公开实施例所提供的一种在校验界面中展示差异描述信息的效果示意图；

图6示出了本公开实施例所提供的一种在校验界面中展示差异标记信息的效果示意图；

图7示出了本公开实施例所提供的一种在校验界面上创建新差异信息的效果示意图；

图8示出了本公开实施例所提供的一种界面校验装置的示意图；

图9示出了本公开实施例所提供的一种电子设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。

经研究发现，现有的验收方式主要通过手动的方式对待验收的UI界面进行比对。由于，手动比对的工具较为单一，且手工比对的主观性较强，因此，在对结构较为复杂的UI界面的验收时，现有的验收方式无法保证比对的准确度，同时也影响UI界面的验收进度和验收效率。

基于上述研究，本公开提供了一种界面校验方法、装置、电子设备以及存储介质。在本公开实施例中，首先，获取多个待校验UI界面的界面信息，并将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；之后，响应于针对界面校验区域中配对UI界面组的校验操作，基于界面信息将配对UI界面组的多个UI界面的UI组成元素进行比对，最后，根据比对结果确定多个UI界面中差异元素的差异数据，并对该差异数据进行展示。通过基于界面信息将待校验UI界面组中UI界面进行配对组合，以对配对之后的UI界面组进行校验的方式，可以实现自动的确定多个UI界面中差异元素的差异信息，从而提高了对UI界面进行校验效率，同时加快了校验进度，节省了大量的人力资源。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种界面校验方法进行详细介绍，本公开实施例所提供的界面校验方法的执行主体一般为具有一定计算能力的电子设备。

参见图1所示，为本公开实施例提供的一种界面校验方法的流程图，所述方法包括步骤S101～S107，其中：

S101：获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息。

这里，多个待校验UI界面组中的UI界面可以理解为需要进行校验比对的UI界面。每个待校验UI界面组中可以包含多个UI界面，本公开对每个待校验UI界面组中所包含的UI界面的数量不作具体限定。

示例性地，该多个待校验UI界面组可以为至少一个UI原稿界面组和至少一个UI设计稿界面组，其中，UI原稿可以理解为UI设计人员设计的一个标准的UI界面，UI设计稿可以理解为程序开发人员基于该标准的UI界面研发出的UI界面。在程序开发人员设计出UI设计稿之后，UI设计人员需要校验该UI原稿和UI设计稿的一致性。在校验一致性时，可以采用本公开所提供的界面校验方法对UI原稿和UI设计稿进行验收。

在本公开实施例中，多个待校验UI界面组的界面信息中包含该界面组中每个UI界面中的各个UI组成元素的元素信息，其中，该UI组成元素是可以满足用户交互要求的一些组件。UI组成元素的元素信息可以理解为UI组成元素的属性信息。例如，UI组成元素的元素信息可以是UI组成元素的组件标识信息，还可以是UI组成元素的位置信息、图案信息、形状信息、尺寸信息、颜色信息等属性信息。

S103：将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；并将所述配对UI界面组展示在校验界面的界面校验区域中。

在本公开实施例中，在获取到多个待校验UI界面组之后，可以将各个待校验UI界面组之间的UI界面进行配对组合。例如，可以将UI原稿界面组和至少一个UI设计稿界面组中的UI界面进行配对组合，从而得到至少一个配对UI界面组。例如，一个配对UI界面组中包含：一个UI原稿和至少一个UI设计稿。

在确定出配对UI界面组之后，如图2所示，就可以将配对UI界面组展示在校验界面的界面校验区域中。

S105：响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对。

在本公开实施例中，如图2所示，可以在界面校验区域设置“开始校验”的按钮，在检测到用户点击“开始校验”的按钮之后，确定检测到校验操作，此时，响应于针对配对UI界面组的校验操作，并基于待校验UI界面组的界面信息将配对UI界面组的多个UI界面的UI组成元素进行比对。

在配对UI界面组的数量为多个的情况下，用户可以在界面校验区域中选择需要当前时刻进行校验的配对UI界面组，并点击“开始校验”的按钮。在检测到用户的点击操作之后，确定检测到上述校验操作。之后，响应于该校验操作，将用户当前时刻所选择的配对UI界面组中的多个UI界面的UI组成元素进行比对。

S107：基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

在本公开实施例中，差异数据包括差异描述信息和差异标记信息。差异描述信息包括以下至少之一：图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息。差异标记信息可以是每个差异元素的差异标识符号和/或差异元素之间的关联符号。

这里，差异标识符号可以是圆形、正方形、矩形、心形等任意形状的符号；差异元素之间的关联符号可以是直线、曲线、单箭头连接线、双箭头连接线等任意表示方式的关联符号。本公开对差异标识符号和关联符号的表达形式不作具体限定，以能够实现为准。

在本公开实施例中，首先，获取多个待校验UI界面的界面信息，并将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；之后，响应于针对界面校验区域中配对UI界面组的校验操作，基于界面信息将配对UI界面组的多个UI界面的UI组成元素进行比对，最后，根据比对结果确定多个UI界面中差异元素的差异数据，并对该差异数据进行展示。通过基于界面信息将待校验UI界面组中UI界面进行配对组合，以对配对之后的UI界面组进行校验的方式，可以实现自动的确定多个UI界面中差异元素的差异信息，从而提高了对UI界面进行校验效率，同时加快了校验进度，节省了大量的人力资源。

在本公开实施例中，上述步骤S101至步骤S107中所描述的步骤，可以通过目标设计软件来实现，这里，目标设计软件又可以称为“设计助手”，下面将详细介绍上述步骤S101至步骤S107。

在一个可选的实施方式中，如图3所示，针对步骤S103，将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，包括如下步骤：

步骤S301，基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度，得到多个相似度；

步骤S302，确定所述多个相似度中满足相似度要求的UI界面；

步骤S303，基于所述满足相似度要求的UI界面确定所述配对UI界面组。

在本公开实施例中，可以通过相似度算法，对界面信息进行相似度计算，从而确定待校验UI界面组之间UI界面的界面相似度。

例如，多个待校验UI界面组包含一个UI原稿界面组和一个UI设计稿界面组，其中，一个UI原稿界面组中包含N个UI原稿，一个UI设计稿界面组中包含M个UI设计稿，此时，可以计算每个UI原稿和每个UI设计稿之间的相似度，从而得到多个相似度；并确定多个相似度中满足相似度要求的UI界面，例如，可以确定多个相似度中最大相似度所对应的UI界面为满足相似度要求的UI界面。然后，将该UI原稿和最大相似度所对应的UI界面作为一个配对UI界面组。

通过上述描述可知，界面信息中可以包含UI组成元素的位置信息、图案信息、形状信息、尺寸信息、颜色信息等属性信息。此时，还可以获取每个属性信息的权重值，并基于该权重值对界面信息进行相似度计算，从而确定各个待校验UI界面组之间UI界面的界面相似度。

上述实施方式中，通过对界面信息进行相似度计算将各个待校验UI界面组中的UI界面进行配对，得到配对UI界面组的方式，可以实现快速的进行UI界面的配对，进而加快了UI界面校验的校验进度，提高了UI界面的校验效率。

在本公开实施例中，除了通过上述所描述的方式将UI界面进行配对组合之外，还可以通过下述所描述的方式，将各个待校验UI界面组之间的UI界面进行配对组合，具体包括：

获取各个待校验UI界面组中每个UI界面所对应的界面标识，其中，该界面标识用于指示对应UI界面的界面类型。

此时，可以将各个待校验UI界面组中对应相同界面标识的UI界面进行配对，得到配对UI界面组。

在本公开实施例中，该方法还包括如下步骤：

(1)、获取每个所述待校验UI界面组的校验标识信息；所述校验标识信息用于指示对应待校验UI界面组所属的校验项目；

(2)、在基于所述校验标识信息确定出各个待校验UI界面组所属相同校验项目的情况下，基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度。

在本公开实施例中，用户可以在目标设计软件中创建多个校验项目，不同校验项目所对应的待校验UI界面组不完全相同，且针对每个校验项目设置了对应的校验标识信息，为不同校验项目设置的校验标识信息不相同。也即，校验标识信息用于将区分多个校验项目。

基于此，在本公开实施例中，在计算各个待校验UI界面组之间UI界面的界面相似度之前，可以获取每个待校验UI界面组的校验标识信息，进而通过该校验标识信息确定各个待校验UI界面组是否所属于相同的校验项目。在确定出属于相同的校验项目的情况下，计算各个待校验UI界面组之间UI界面的界面相似度。

例如，待校验UI界面组包含UI原稿界面组和UI设计稿界面组，此时，可以获取UI设计稿界面组的校验标识信息，并获取UI原稿界面组的校验标识信息。并将获取到的两个校验标识信息进行匹配。若匹配成功，则可以执行将UI设计稿界面组的界面信息和UI原稿界面组的界面信息进行相似度计算，进而根据该相似度计算结果从多个UI设计稿中确定与当前时刻待验收的UI原稿相匹配的UI设计稿，并得到配对UI界面组。

若用户在目标设计软件上对待校验UI界面组上传错误，则可能导致配对失败，从而无法进行UI界面的校验操作。为了进一步提高校验效率，可以通过设置上述校验标识信息对各个待校验UI界面组进行初筛，从而根据初筛结果进行UI界面的配对时，可以节省配对的时间，并提高配对效率。

在一个可选的实施方式中，如图4所示，针对步骤S103，将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，还包括如下步骤：

步骤S401，响应于针对至少部分所述待校验UI界面组的界面选择指令，在至少部分所述待校验UI界面组中选择待校验UI界面；

步骤S402，基于选择的所述待校验UI界面确定所述配对UI界面组。

在本公开实施例中，除了通过上述所描述的自动配对方式，将各个待校验UI界面组中的UI界面进行配对之外，还可以通过手动配对方式将各个待校验UI界面组中的UI界面进行配对。

具体实施时，待校验UI界面组中的部分或者全部UI界面可以显示在校验界面中与界面校验区域相邻的目标区域中，例如，如图2所示，目标区域为校验界面中界面校验区域的两侧区域。其中，界面校验区域的左侧区域用于展示UI原稿，界面校验区域的右侧区域用于展示UI设计稿。

用户可以在上述目标区域所展示的待校验UI界面组中，在至少部分待校验UI界面组中选择对应的UI界面作为待校验UI界面，并基于所选择的待校验UI界面确定配对UI界面组。

针对上述步骤S401和步骤S402，一种可能的实施方式为：

响应于针对每个待校验UI界面组的界面选择指令，在每个待校验UI界面组中选择待校验UI界面，并将用户所选择的待校验UI界面确定为一个配对UI界面组。在选择出配对UI界面组之后，还可以将该配对UI界面组中的UI界面展示在界面校验区域中，例如，如图2所示，配对UI界面组中包含UI原稿和UI设计稿，此时，可以将UI原稿和UI设计稿展示在界面校验区域中，例如，将UI原稿展示在左侧位置，并将UI设计稿展示在右侧位置。

具体实施时，如图2所示，用户可以在左侧位置展示的UI原稿中点击一个UI原稿，并对该UI原稿执行拖拽操作。在将该UI原稿拖拽至界面校验区域中之后，可以在该界面校验区域中展示该UI原稿。同样地，用户可以在左侧位置展示的UI设计稿中点击一个UI设计稿，并对该UI设计稿执行拖拽操作。在将该UI设计稿拖拽至界面校验区域中之后，可以在该界面校验区域中展示该UI设计稿。

针对上述步骤S401和步骤S402，另一种可能的实施方式为：

响应于针对多个待校验UI界面组中第一待校验UI界面组的界面选择指令，确定第一待校验UI界面组中被选择的UI界面为待校验UI界面；之后，计算多个待校验UI界面组的第二待校验UI界面组中每个UI界面与待校验UI界面之间的相似度，进而通过该相似度，在第二待校验UI界面组中确定与待校验UI界面相匹配的UI界面。之后，基于该待校验UI界面及其相匹配的UI界面确定配对UI界面组。

这里，第一待校验UI界面组为多个待校验UI界面组中的任意一个界面组，第二待校验UI界面组为多个待校验UI界面组中除第一待校验UI界面组之外的其他UI界面组。

可以理解的是，可以通过自动配对的方式确定配对UI界面组，除此之外，还可以通过手动配对的方式确定配对UI界面组。在通过自动配对确定配对UI界面组之后，如果自动配对的结果错误，则还可以通过手动配对的方式将配对错误的配对UI界面组进行手动调整，从而实现自动配对方式和手动配对方式的结合。

上述实施方式中，通过上述处理方式，可以实现为用户提供多种确定配对UI界面组的方式，从而满足用户的多元化需求。

在一个可选的实施方式中，针对上述步骤S105，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对，具体包括如下步骤：

步骤S1051，在所述多个UI界面之间确定至少一组相匹配的UI组成元素；

步骤S1052，基于所述界面信息，将每组所述相匹配的UI组成元素进行比对，得到每组所述相匹配的UI组成元素的比对结果。

在本公开实施例中，在按照上述所描述的方式确定出配对UI界面组之后，可以按照如图2所示的方式，将配对UI界面组中的UI界面展示在界面校验区域中，并在配对UI界面组的多个UI界面之间确定至少一组相匹配的UI组成元素。

具体实施时，可以确定每个UI界面的界面信息，并根据每个UI界面的界面信息，将多个UI界面中相同类型的UI组成元素进行自动配对组合，得到至少一组相匹配的UI组成元素。

这里，界面信息可以包含以下至少之一：每个UI组成元素的标识信息、每个UI组成元素的位置信息、每个UI组成元素的形状信息、每个UI组成元素的大小信息、每个UI组成元素的颜色信息等信息。针对上述每个界面信息，均预先设置了对应的优先级，此时，可以基于每个界面信息的优先级，将多个UI界面中相同类型的UI组成元素进行自动配对组合，得到至少一组相匹配的UI组成元素。

在本公开实施例中，在根据界面信息进行UI组成元素的配对组合时，用户可以预先从界面信息中选择一个或多个信息，进而按照用户所选择的一个或多个信息的优先级，将多个UI界面中相同类型的UI组成元素进行自动配对组合，得到至少一组相匹配的UI组成元素。

举例来说，假设界面信息包含：标识信息和位置信息，其中，标识信息的优先级高于位置信息的优先级。此时，可以将各个UI界面中对应相同标识信息的UI组成元素确定为相同类型的UI组成元素。之后，则可以针对未配对成功的UI组成元素，基于位置信息进行配对组合，例如，可以将各个UI界面中位置差距小于预设数值的UI组成元素确定为相同类型的UI组成元素。

在按照上述所描述的方式确定至少一组相匹配的UI组成元素之后，就可以基于界面信息，将每组相匹配的UI组成元素进行比对，从而得到每组相匹配的UI组成元素的比对结果。

上述实施方式中，在确定至少一组相匹配的UI组成元素之后，基于界面信息将每组相匹配的UI组成元素进行比对的方式，可以提高差异元素的比对准确率，从而得到更加准确的比对结果。

在得到比对结果之后，就可以基于该比对结果确定多个UI界面中差异元素的差异数据，并展示该差异数据。具体地，该差异数据包含差异描述信息和差异标记信息。

在差异数据包括差异描述信息的情况下，上述步骤S107：展示所述差异数据，具体包括如下步骤：

在所述校验界面的差异展示区域展示所述差异描述信息，其中，所述差异描述信息包括以下至少之一：图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息。

具体地，如图5所示，在将配对UI界面组的多个UI界面的UI组成元素进行比对，得到比对结果之后，目标设计软件可以从如图2所示校验界面跳转至如图5所示的校验界面，在该校验界面中包含差异展示区域。在该差异展示区域内包含每组差异元素的差异描述信息，例如，图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息等类型的信息。

在一个可选的实施方式中，在上述差异数据包括差异标记信息的情况下，该方法还包括如下步骤：

(1)、响应于针对所述差异展示区域中差异描述信息的触发操作，在所述多个UI界面中，确定被触发的差异描述信息所对应的目标差异元素；

(2)、在所述界面校验区域展示的多个UI界面中，展示所述目标差异元素之间的差异标记信息；所述差异标记信息包括以下至少一种：差异元素的标注框、差异元素的标注框之间的连接方式。

在本公开实施例中，当检测到用户针对差异展示区域中所展示的差异描述信息的点击操作，则确定检测到上述触发操作。此时，可以确定被点击(或者，被触发)的差异描述信息，并基于差异描述信息和差异元素之间的映射关系，确定该差异描述信息所对应的目标差异元素。

在确定出目标差异元素之后，就可以在界面校验区域中展示目标差异元素的差异标记信息，例如，可以为如图6所示的差异标记信息。

如图6所示，该差异元素为UI原稿中的UI组成元素“小时”和UI设计中的UI组成元素“小时”。该差异元素之间的差异标记信息为标注框，以及标注框之间的连接线。

上述实施方式中，通过确定被触发的差异描述信息的目标差异元素，并在界面校验区域中展示目标差异元素之间的差异标记信息的方式，能够更加直观的为用户展示出多个UI界面之间的差异元素。

在一个可选的实施方式中，该方法还包括如下步骤：

响应于数据创建指令，在所述校验界面中创建新差异数据，其中，所述新差异数据包含：新差异标记信息和/或新差异描述信息。

除了通过上述所描述的方式确定差异数据之外，本公开技术方案还支持手动创建新差异数据，例如，新差异标记信息和/或新差异描述信息。

在多个UI组成元素之间差异较小，无法通过目标设计软件进行识别时，针对部分差异元素将无法进行识别，此时可以通过手动创建的方式创建新差异数据。

具体实施时，可以通过下述所描述的方式，在所述校验界面中创建新差异数据，具体包括如下步骤：

(1)、响应于所述数据创建指令，在所述校验界面的界面校验区域中确定新差异元素，并为所述新差异元素创建所述新差异标记信息。

和/或

(2)、响应于所述数据创建指令，创建所述新差异元素的新差异描述信息，并在所述校验界面的差异展示区域中展示所述新差异描述信息。

在差异数据为差异标记信息的情况下，上述数据创建指令可以为新差异元素的框选指令，以及新差异元素的新差异标记信息的创建指令。

具体实施时，如图7所示，假设，多个UI界面为UI原稿和UI设计稿，此时，用户可以在UI原稿中框选UI组成元素A，并在UI设计稿中框选UI组成元素B。目标设计软件分别响应于用户针对UI组成元素A和UI组成元素B的框选指令，对UI组成元素A和UI组成元素B分别进行框选，得到如图7所示的框选结果。之后，用户可以通过界面校验区域中的标记工具为新差异元素创建新差异标记信息，此时，目标设计软件响应于针对新差异元素的新差异标记信息的创建指令，在界面校验区域中为新差异元素创建新差异标记信息，例如，添加如图7所示的带箭头的线段。

在差异数据为差异描述信息的情况下，上述数据创建指令可以为差异展示区域中创建新差异描述信息的创建指令。

具体实施时，可以在差异展示区域中点击“创建+”按钮，此时，如图7所示，就可以在差异展示区域中创建一个新的信息描述框。之后，可以检测用户针对该新的信息描述框的信息输入操作，并基于检测到的用户在该新的信息描述框输入的描述信息，创建新差异描述信息。

在本公开实施例中，可以单独创建新差异描述信息，以及单独创建新差异标记信息，还可以同时创建新差异描述信息和新差异标记信息。本公开技术方案还可以在创建新差异描述信息之后，基于新差异描述信息，自动在界面校验区域中确定新差异元素，并为新差异元素创建新差异标记信息。

上述实施方式中，通过手动创建差异标记信息和/或差异描述信息，丰富差异展示区域中的差异数据，从而得到更加准确的差异数据，进而提高待校验UI界面组的校验精度。

在一个可选的实施方式中，上述步骤在所述校验界面中创建新差异数据，具体还包括如下过程：

(1)、响应于区域选择指令，在所述多个UI界面中确定目标校验区域，并对所述目标校验区域执行目标操作，得到操作结果，其中，所述目标操作包含以下至少之一：区域放大操作、颜色识别操作、形状识别操作；

(2)、基于所述操作结果，在所述校验界面中创建新差异数据。

在本公开实施例中，用户可以在界面校验区域所展示的每个UI界面中确定目标校验区域，然后，通过界面校验区域中的标记工具为目标校验区域执行目标操作，例如，执行区域放大操作、颜色识别操作和形状识别操作。

在UI组成元素之间的差异较小，且用户无法进行识别的情况下，可以通过标记工具来对目标校验区域执行对应的目标操作。通过该处理方式，可以保证新差异数据的准确性，进而进一步提高了UI界面的精度。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与界面校验方法对应的界面校验装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述界面校验方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图8所示，为本公开实施例提供的一种界面校验装置的示意图，所述装置包括：获取单元81、配对单元82、展示单元83、比对单元84、确定展示单元85；其中：

获取单元81，用于获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；

配对单元82，用于将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；

展示单元83，用于将所述配对UI界面组展示在校验界面的界面校验区域中；

比对单元84，用于响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；

确定展示单元85，用于基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

在本公开实施例中，首先，获取多个待校验UI界面的界面信息，并将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；之后，响应于针对界面校验区域中配对UI界面组的校验操作，基于界面信息将配对UI界面组的多个UI界面的UI组成元素进行比对，最后，根据比对结果确定多个UI界面中差异元素的差异数据，并对该差异数据进行展示。通过基于界面信息将待校验UI界面组中UI界面进行配对组合，以对配对之后的UI界面组进行校验的方式，可以实现自动的确定多个UI界面中差异元素的差异信息，从而提高了对UI界面进行校验效率，同时加快了校验进度，节省了大量的人力资源。

一种可能的实施方式中，配对单元，还用于：基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度，得到多个相似度；确定所述多个相似度中满足相似度要求的UI界面；基于所述满足相似度要求的UI界面确定所述配对UI界面组。

一种可能的实施方式中，该装置还用于：获取每个所述待校验UI界面组的校验标识信息；所述校验标识信息用于指示对应待校验UI界面组所属的校验项目；在基于所述校验标识信息确定出各个待校验UI界面组所属相同校验项目的情况下，基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度。

一种可能的实施方式中，配对单元，还用于：响应于针对至少部分所述待校验UI界面组的界面选择指令，在至少部分所述待校验UI界面组中选择待校验UI界面；基于选择的所述待校验UI界面确定所述配对UI界面组。

一种可能的实施方式中，比对单元，还用于：在所述多个UI界面之间确定至少一组相匹配的UI组成元素；基于所述界面信息，将每组所述相匹配的UI组成元素进行比对，得到每组所述相匹配的UI组成元素的比对结果。

一种可能的实施方式中，在差异数据包括差异描述信息的情况下，确定展示单元，还用于：在所述校验界面的差异展示区域展示所述差异描述信息，其中，所述差异描述信息包括以下至少之一：图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息。

一种可能的实施方式中，在差异数据包括差异标记信息的情况下，该装置还用于：响应于针对所述差异展示区域中差异描述信息的触发操作，在所述多个UI界面中，确定被触发的差异描述信息所对应的目标差异元素；在所述界面校验区域展示的多个UI界面中，展示所述目标差异元素之间的差异标记信息；所述差异标记信息包括以下至少一种：差异元素的标注框、差异元素的标注框之间的连接方式。

一种可能的实施方式中，该装置还用于：响应于数据创建指令，在所述校验界面中创建新差异数据，其中，所述新差异数据包含：新差异标记信息和/或新差异描述信息。

一种可能的实施方式中，该装置还用于：响应于所述数据创建指令，在所述校验界面的界面校验区域中确定新差异元素，并为所述新差异元素创建所述新差异标记信息；和/或，响应于所述数据创建指令，创建所述新差异元素的新差异描述信息，并在所述校验界面的差异展示区域中展示所述新差异描述信息。

一种可能的实施方式中，该装置还用于：响应于区域选择指令，在所述多个UI界面中确定目标校验区域，并对所述目标校验区域执行目标操作，得到操作结果，其中，所述目标操作包含以下至少之一：区域放大操作、颜色识别操作、形状识别操作；基于所述操作结果，在所述校验界面中创建新差异数据。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

对应于图1中的界面校验方法，本公开实施例还提供了一种电子设备900，如图9所示，为本公开实施例提供的电子设备900结构示意图，包括：

处理器91、存储器92、和总线93；存储器92用于存储执行指令，包括内存921和外部存储器922；这里的内存921也称内存储器，用于暂时存放处理器91中的运算数据，以及与硬盘等外部存储器922交换的数据，处理器91通过内存921与外部存储器922进行数据交换，当所述电子设备900运行时，所述处理器91与所述存储器92之间通过总线93通信，使得所述处理器91执行以下指令：

获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；

将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；并将所述配对UI界面组展示在校验界面的界面校验区域中；

响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；

基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的界面校验方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的界面校验方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (13)

1.一种界面校验方法，其特征在于，包括：

获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；

将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；并将所述配对UI界面组展示在校验界面的界面校验区域中；

响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；

基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

2.根据权利要求1所述的方法，其特征在于，所述将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，包括：

基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度，得到多个相似度；

确定所述多个相似度中满足相似度要求的UI界面；

基于所述满足相似度要求的UI界面确定所述配对UI界面组。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

获取每个所述待校验UI界面组的校验标识信息；所述校验标识信息用于指示对应待校验UI界面组所属的校验项目；

在基于所述校验标识信息确定出各个待校验UI界面组所属相同校验项目的情况下，基于所述界面信息，计算各个待校验UI界面组之间UI界面的界面相似度。

4.根据权利要求1所述的方法，其特征在于，所述将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组，包括：

响应于针对至少部分所述待校验UI界面组的界面选择指令，在至少部分所述待校验UI界面组中选择待校验UI界面；

基于选择的所述待校验UI界面确定所述配对UI界面组。

5.根据权利要求1所述的方法，其特征在于，所述基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对，包括：

在所述多个UI界面之间确定至少一组相匹配的UI组成元素；

基于所述界面信息，将每组所述相匹配的UI组成元素进行比对，得到每组所述相匹配的UI组成元素的比对结果。

6.根据权利要求1所述的方法，其特征在于，所述差异数据包括差异描述信息，所述展示所述差异数据，包括：

在所述校验界面的差异展示区域展示所述差异描述信息，其中，所述差异描述信息包括以下至少之一：图案差异描述信息，形状差异描述信息，尺寸差异描述信息，位置差异描述信息，颜色差异描述信息。

7.根据权利要求6所述的方法，其特征在于，所述差异数据包括差异标记信息；所述方法还包括：

响应于针对所述差异展示区域中差异描述信息的触发操作，在所述多个UI界面中，确定被触发的差异描述信息所对应的目标差异元素；

在所述界面校验区域展示的多个UI界面中，展示所述目标差异元素之间的差异标记信息；所述差异标记信息包括以下至少一种：差异元素的标注框、差异元素的标注框之间的连接方式。

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

响应于数据创建指令，在所述校验界面中创建新差异数据，其中，所述新差异数据包含：新差异标记信息和/或新差异描述信息。

9.根据权利要求8所述的方法，其特征在于，所述响应于数据创建指令，在所述校验界面中创建新差异数据，包括：

响应于所述数据创建指令，在所述校验界面的界面校验区域中确定新差异元素，并为所述新差异元素创建所述新差异标记信息；

和/或

响应于所述数据创建指令，创建所述新差异元素的新差异描述信息，并在所述校验界面的差异展示区域中展示所述新差异描述信息。

10.根据权利要求8所述的方法，其特征在于，所述在所述校验界面中创建新差异数据，包括：

响应于区域选择指令，在所述多个UI界面中确定目标校验区域，并对所述目标校验区域执行目标操作，得到操作结果，其中，所述目标操作包含以下至少之一：区域放大操作、颜色识别操作、形状识别操作；

基于所述操作结果，在所述校验界面中创建新差异数据。

11.一种界面校验装置，其特征在于，包括：

获取单元，用于获取多个待校验UI界面组的界面信息；所述界面信息为每个待校验UI界面组中UI界面的各个UI组成元素的元素信息；

配对单元，用于将各个待校验UI界面组之间的UI界面进行配对组合，得到配对UI界面组；

展示单元，用于将所述配对UI界面组展示在校验界面的界面校验区域中；

比对单元，用于响应于针对所述界面校验区域中配对UI界面组的校验操作，基于所述界面信息将所述配对UI界面组的多个UI界面的UI组成元素进行比对；

确定展示单元，用于基于比对结果确定所述多个UI界面中差异元素的差异数据，并展示所述差异数据；所述差异数据包括以下至少之一：颜色差异、形状差异、位置差异、尺寸差异、图案差异。

12.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至10任一所述的界面校验方法的步骤。

13.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至10任一所述的界面校验方法的步骤。

Images