CN114782725B - 一种对比用户界面图像差异的方法、装置以及存储介质 - Google Patents

Abstract

本申请公开了一种对比用户界面图像差异的方法、装置以及存储介质，涉及图像设计与开发领域。包括：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。解决了仅能对比用户界面源图像与修改后的用户界面图像的差异，不能说明两者之间差异原因的技术问题。

Description

一种对比用户界面图像差异的方法、装置以及存储介质

技术领域

本申请涉及图像设计与开发领域，特别是涉及一种对比用户界面图像差异的方法、装置以及存储介质。

背景技术

图像设计与开发领域有着强烈的用户界面图像差异对比需求。例如，设计师修改用户界面设计稿后发给研发人员，研发人员如何能够快速知道修改的内容、在研发人员将用户界面设计稿代码化之后，设计师如何能够快速核验用户界面设计稿的视觉还原度以及新兴的代码自动生成技术如何能够在生成代码后，快速评估代码的用户界面设计稿的视觉还原度。

目前，常见的用户界面图像差异对比方案主要针对于自然场景图像，逐像素对比用户界面源设计稿图像与修改后的用户界面设计稿图像中的每个对应的像素点，并从像素亮度、对比度和临近结构等方面进行对比。

但逐像素对比方案仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像中的像素级别的差异，并不能准确表征两图像的差异原因。因此，如何准确表征用户界面源设计稿图像与修改后的用户界面设计稿图像的差异原因成为了目前亟待解决的问题。

现有技术1（CN104423933A）：一种云平台用户界面适配方法及适配器。其中的适配方法包括：当接收到针对应用需求的至少一个虚拟化环境适配指令时，获取对应虚拟化环境的差异化配置文件；根据所述差异化配置文件对所述虚拟化环境的用户界面进行差异化适配；将适配结果输出给所述用户界面。还公开了相应的适配器。采用本发明实施例提供的一种云平台用户界面适配方法及适配器的技术方案，通过设置差异化配置文件，根据差异化配置文件对虚拟化环境的用户界面进行差异化适配，可以实现各个虚拟化环境下的用户界面差异化处理。

现有技术2（CN112612690A）：一种用户界面信息处理方法、装置、电子设备及存储介质，该方法包括：启动对目标终端的显示界面的录屏操作；生成与所述目标应用程序对应的自动操作指令；将所述自动操作指令发送给所述目标终端，以使得所述目标终端：基于所述自动操作指令分别对所述对照版本的用户界面以及所述测试版本的用户界面进行自动触发操作；分别确定包含对对照版本、测试版本的用户界面进行触发操作以及基于相应触发操作进行业务数据展示的录屏信息为第一录屏信息以及第二录屏信息；基于所述第一录屏信息和所述第二录屏信息，生成所述对照版本和所述测试版本的用户界面差异信息。本公开能够提高用户界面测试的覆盖率、效率以及便利性。

针对上述的现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题，目前尚未提出有效的解决方案。

发明内容

本公开的实施例提供了一种对比用户界面图像差异的方法、装置以及存储介质，以至少解决现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题

根据本公开实施例的一个方面，提供了一种对比用户界面图像差异的方法，包括：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

根据本公开实施例的另一个方面，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时由处理器执行以上任意一项所述的方法。

根据本公开实施例的另一个方面，还提供了一种对比用户界面差异的装置，包括：信息获取模块，用于获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；文件解析模块，用于解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；匹配对比模块，用于将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及结果确定模块，用于根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

根据本公开实施例的另一个方面，还提供了一种对比用户界面差异的装置，包括：第一处理器；以及第一存储器，与第一处理器连接，用于为第一处理器提供处理以下处理步骤的指令：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

在本公开实施例中，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

附图说明

此处所说明的附图用来提供对本公开的进一步理解，构成本申请的一部分，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。在附图中：

图1是用于实现根据本公开实施例1所述的方法的计算设备的硬件结构框图；

图2是根据本公开实施例1的第一个方面所述的对比用户界面图像差异的方法的流程示意图；

图3是根据本公开实施例1的第一个方面所述的第一界面图像和第二界面图像的示意图；

图4是根据本公开实施例1的第一个方面所述的属性文件中的组件信息的示意图；

图5a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域与子图像进行对比的示意图；

图5b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图；

图6a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域的特征点与子图像的特征点进行对比的示意图；

图6b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图；

图7a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域与子文字进行对比的示意图；

图7b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子文字进行对比的示意图；

图8是根据本公开实施例2的第一个方面所述的对比用户界面图像差异的装置的示意图；以及

图9是根据本公开实施例3的第一个方面所述的对比用户界面图像差异的装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本公开的技术方案，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本公开一部分的实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本公开保护的范围。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本实施例，提供了一种对比用户界面图像差异的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本实施例所提供的方法实施例可以在移动终端、计算机终端、服务器或者类似的计算设备中执行。图1示出了一种用于实现对比用户界面图像差异的方法的计算设备的硬件结构框图。如图1所示，计算设备可以包括一个或多个处理器（处理器可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置）、用于存储数据的存储器、以及用于通信功能的传输装置。除此以外，还可以包括：显示器、输入/输出接口（I/O接口）、通用串行总线（USB）端口（可以作为I/O接口的端口中的一个端口被包括）、网络接口、电源和/或相机。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算设备还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

应当注意到的是上述一个或多个处理器和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到计算设备中的其他元件中的任意一个内。如本公开实施例中所涉及到的，该数据处理电路作为一种处理器控制（例如与接口连接的可变电阻终端路径的选择）。

存储器可用于存储应用软件的软件程序以及模块，如本公开实施例中的对比用户界面图像差异的方法对应的程序指令/数据存储装置，处理器通过运行存储在存储器内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的应用程序的对比用户界面图像差异的方法。存储器可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至计算设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算设备的通信供应商提供的无线网络。在一个实例中，传输装置包括一个网络适配器（Network Interface Controller，NIC），其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置可以为射频（Radio Frequency，RF）模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器（LCD），该液晶显示器可使得用户能够与计算设备的用户界面进行交互。

此处需要说明的是，在一些可选实施例中，上述图1所示的计算设备可以包括硬件元件（包括电路）、软件元件（包括存储在计算机可读介质上的计算机代码）、或硬件元件和软件元件两者的结合。应当指出的是，图1仅为特定具体实例的一个实例，并且旨在示出可存在于上述计算设备中的部件的类型。

在上述运行环境下，根据本实施例的第一个方面，提供了一种对比用户界面图像差异的方法。图2示出了该方法的流程示意图，参考图2所示，该方法包括：

S202：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；

S204：解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；以及

S206：将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及

S208：根据对比结果确定第一界面图像和所第二界面图像的差异值和差异原因。

图3是根据本公开实施例1的第一个方面所述的第一界面图像和第二界面图像的示意图。第一界面图像和第二界面图像均是由“五角星”、“圆环”、“笑脸”和“平”等图案组成的。并且，第一界面图像和第二界面图像中的图案均有特定的位置、大小、颜色以及像素值。

具体地，参考图2和图3所示，首先，确定需要进行对比的第一界面图像、第二界面图像和属性文件（S202）。其中，第一界面图像为用户界面源设计稿图像；第二界面图像为修改后的用户界面设计稿图像。并且其中，修改后的用户界面设计稿图像可以是设计人员修改后的用户界面设计稿图像、研发人员完成用户界面设计稿的代码化后生成的图像或由代码生成器自动生成代码后生成的图像。并且其中，属性文件为包含与第一界面图像数据信息的文件。

然后，解析属性文件，提取属性文件中的组件和组件信息（S204）。属性文件中的组件主要包括有子图像和/或子文字。其中，子图像可以分为用户导入位图或矢量生成位图。参考图3所示，“星星”、“圆环”和“笑脸”就是子图像，“平”就是子文字。组件信息表示组件在第一界面图像中的参数信息。其中，参数信息可以是位置信息、尺寸信息、像素信息、颜色信息和亮度信息等。图4是根据本公开实施例1的第一个方面所述的属性文件中的组件信息的示意图。参考图4所示，“type：“text”的含义是组件为子文字；“type：“image”的含义是组件为子图像，“x和y”的含义表示组件在第一界面图像中的位置信息，“width和height”的含义表示组件在第一界面图像中尺寸信息。例如，组件的类型为子文字，子文字的中心点在第一界面图像中的x坐标为366，子文字的中心点在第一界面图像中的y坐标为11，子文字的高度为45，子文字的宽度为240。则可以根据上述位置信息和尺寸信息确定子文字在第一界面图像中的方位。

此外，在完成属性文件的解析，并获取组件和组件信息后，将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比（S206）。若要将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配，首先需要根据属性文件中的组件信息，确定与组件对应的第一界面图像的子区域和第二界面图像的子区域。然后将第一界面图像的子区域和第二界面图像的子区域分别与组件进行对比。并且其中，由于在第一界面图像和第二界面图像中可能存在子图像，也可能存在子文字。因此，将第一界面图像的子区域和第二界面图像的子区域分别与组件的匹配和对比，可能会存在子图像的匹配和对比，也可能存在子文字的匹配和对比。并且，还可以以计数的方式表示子图像或子文字匹配成功率。例如，若第一界面图像的子区域和第二界面图像的子区域分别与组件匹配成功，则匹配成功数加1。再例如，在第一界面图像和第二界面图像中有3个子图像分别与组件匹配成功，则匹配成功数为3；在第一界面图像和第二界面图像中有5个子文字分别与组件匹配成功，则匹配成功数为5。

若第一界面图像的子区域和第二界面图像的子区域分别与组件匹配成功，那么需要对第一界面图像的子区域和第二界面图像的子区域分别与组件进行对比。并且，由于第一界面图像和第二界面图像可能存在子文字和子图像，因此需要分别对子图像和子文字进行对比计算。例如，对第一界面图像的子区域和第二界面图像的子区域的尺寸值进行计算、对第一界面图像的子区域和第二界面图像的子区域的位置值进行计算以及对第一界面图像的子区域和第二界面图像的子区域的像素差异进行计算。

最后，根据对比结果确定第一界面图像和所第二界面图像的差异值和差异原因（S208）。图5a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域与子图像进行对比的示意图；图5b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图。参考图5a和图5b所示，第一界面图像的子区域和第二界面图像的子区域需要与组件进行对比的是子图像，子图像是笑脸。由子图像（笑脸）分别与第一界面图像的子区域和第二界面图像的子区域进行对比后发现，第一界面图像的子区域（笑脸）和第二界面图像的子区域（笑脸）的差异原因在于位置差异以及尺寸差异。并且可以计算出第二界面图像的子区域（笑脸）占第一界面图像的子区域（笑脸）的尺寸值为60%，位置值中的x方向的偏移值为0，y方向的偏移值为-3。

在本公开实施例中，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

可选地，将第一界面图像的子区域和第二界面图像的子区域分别与组件进行对比的操作包括：预先在属性文件中提取组件在第一界面图像中的尺寸值、位置值和像素值，其中组件的尺寸值、位置值和像素值为组件的组件信息；将第一界面图像的子区域的尺寸值、位置值和像素值和第二界面图像的子区域的尺寸值、位置值和像素值分别与组件的尺寸值、位置值和像素值进行对比；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

具体地，在第一界面图像的子区域和第二界面图像的子区域分别和组件匹配成功的情况下，在属性文件中提取组件的组件信息。其中，组件信息包括：组件在第一界面图像中的尺寸值、位置值和像素值等。参考图4所示，“type：“text”的含义是组件为子文字；“type：“image”的含义是组件为子图像，“x和y”的含义表示组件在第一界面图像中的位置信息，“width和height”的含义表示组件在第一界面图像中尺寸信息。例如，组件的类型为子文字，子文字的中心点在第一界面图像中的x坐标为366，子文字的中心点在第一界面图像中的y坐标为11，子文字的高度为45，子文字的宽度为240。

然后，利用组件分别对比第一界面图像的子区域和第二界面图像的子区域的差异值和差异原因。参考图5a和图5b所示，第一界面图像的子区域和第二界面图像的子区域需要与组件进行对比的是子图像，子图像是笑脸。由子图像（笑脸）分别与第一界面图像的子区域和第二界面图像的子区域进行对比后发现，第一界面图像的子区域（笑脸）和第二界面图像的子区域（笑脸）的差异原因在于位置差异以及尺寸差异。并且可以计算出第二界面图像的子区域（笑脸）占第一界面图像的子区域（笑脸）的尺寸值为60%，位置值中的x方向的偏移值为0，y方向的偏移值为-3。

从而，通过上述操作能够达到根据组件和组件的尺寸值、位置值和像素值明确确定第一界面图像和第二界面图像可能在尺寸、位置或像素等方面出现差异的差异值以及差异原因的技术效果。

可选地，将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配的操作包括：确定组件是否为子图像；在组件是子图像的情况下，对比第一界面图像的颜色亮度和第二界面图像的颜色亮度，并得到对比结果；以及根据对比结果，选择对第一界面图像和第二界面图像进行图像匹配的方式。

具体地，第一界面图像的子区域和第二界面图像的子区域可能是子图像也可能是子文字。在第一界面图像的子区域和第二界面图像的子区域是子图像的情况下，需要根据第二界面图像的颜色亮度相比于第一界面图像的颜色亮度是否发生变化，而选择对第一界面图像的子区域和第二界面图像的子区域进行图像匹配的方式。

从而，通过上述操作达到了能够通过选择合适的匹配方式增加匹配准确率的技术效果。

可选地，在组件是子图像的情况下，对比第一界面图像的颜色亮度和第二界面图像的颜色亮度，并得到对比结果；以及根据对比结果，选择对第一界面图像和第二界面图像进行图像匹配的方式的操作包括：

在第二界面图像的颜色亮度相比于第一界面图像的颜色亮度没有变化的情况下，以子图像为模板，分别在第一界面图像和第二界面图像中进行匹配，并确定与子图像对应的第一界面图像的子区域和第二界面图像的子区域；以及在第二界面图像的颜色亮度相比于第一界面图像的颜色亮度有变化的情况下，提取第一界面图像的特征点、第二界面图像的特征点和子图像的特征点，将子图像的特征点分别与第一界面图像的特征点和第二界面图像的特征点进行匹配，并确定与子图像的特征点对应的第一界面图像的子区域的特征点和第二界面图像的子区域的特征点。

具体地，图6a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域的特征点与子图像的特征点进行对比的示意图；图6b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图。参考图5a、图5b、图6a和图6b所示，在第二界面图像的颜色亮度相比于第一界面图像的颜色亮度没有发生变化的情况下，选择模板匹配的方式将第一界面图像的子区域和第二界面图像的子区域分别与子图像进行匹配。模板匹配的方式为：以子图像为模板，并根据属性文件中的子图像在第一界面图像中的组件信息，分别在第一界面图像和第二界面图像中进行匹配。若第一界面图像和第二界面图像均存在与子图像分别对应的子区域，则说明第一界面图像的子区域和第二界面图像的子区域分别和子图像匹配成功。并且，可以以计数的方式计算第一界面图像的子区域和第二界面图像的子区域分别与子图像匹配的成功率。例如，若第一界面图像的子区域和第二界面图像的子区域分别与组件匹配成功，则匹配成功数加1。

参考图5a和图5b所示，第一界面图像的子区域和第二界面图像的子区域需要与组件进行对比的是子图像，子图像是笑脸。由子图像（笑脸）分别与第一界面图像的子区域和第二界面图像的子区域进行对比后发现，第一界面图像的子区域（笑脸）和第二界面图像的子区域（笑脸）的差异原因在于位置差异以及尺寸差异。并且可以计算出第二界面图像的子区域（笑脸）占第一界面图像的子区域（笑脸）的尺寸值为60%，位置值中的x方向的偏移值为0，y方向的偏移值为-3。

在第二界面图像的颜色亮度相比于第一界面图像的颜色亮度发生变化的情况下，选择特征点匹配的方式将第一界面图像的子区域和第二界面图像的子区域分别与子图像进行匹配。由于特征点对于颜色、亮度和角度等影响因素不敏感，因此基于特征点匹配的方式能够减少因为第二界面图像的颜色亮度相比于第一界面图像的颜色亮度发生变化而产生的匹配误差。特征点匹配的方式是：首先对第一界面图像的子区域的特征点、第二界面图像的子区域的特征点和子图像的特征点进行提取，然后将子图像的特征点分别与第一界面图像的子区域的特征点和第二界面图像的子区域的特征点进行匹配。若第一界面图像的子区域的特征点和第二界面图像的子区域的特征点分别与子图像的特征点匹配成功，则匹配成功数加1。

参考图6a和图6b所示，第一界面图像的子区域和第二界面图像的子区域是子图像，子图像是星星，星星的特征点是五个凸出的角的顶点，因此利用这5个特征点分别与第一界面图像的子区域的特征点和第二界面图像的子区域的特征点进行匹配。由于第一界面图像的子区域的特征点和第二界面图像的子区域的特征点与子图像的特征点的匹配成功，因此匹配成功数加1。

当匹配成功数分别与第一界面图像的子区域和第二界面图像子区域的数值相同时，说明第一界面图像和第二界面图像无差异。例如，第一界面图像中的子区域数为5，第二界面图像中的子区域数为5，并且匹配成功数为5。则说明第一界面图像和第二界面图像无差异。

从而，通过上述操作达到了能够根据选择不同的子图像匹配方式增加匹配准确率以及增加匹配方式选择性的技术效果。

可选地，确定组件是否为子图像的操作包括：在组件不是子图像的情况下，确定组件是子文字；以及在组件是子文字的情况下，分别提取第一界面图像和第二界面图像的文字，以子文字为模板，分别对提取出的第一界面图像的文字和第二界面图像的文字与子文字进行匹配，并确定与子文字对应的第一界面图像的子区域和第二界面图像的子区域。

具体地，图7a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域与子文字进行对比的示意图；图7b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子文字进行对比的示意图。参考图7a和图7b所示，在组件不是子图像是子文字的情况下，将子文字分别与第一界面图像的子区域和第二界面图像的子区域进行匹配。进行子文字匹配的方式包括：首先在属性文件中提取子文字，然后在第一界面图像和第二界面图像中进行文字识别，提取第一界面图像与子文字对应的子区域、第二界面图像与子文字对应的子区域、第一界面图像的子区域的位置值和第二界面图像的子区域的位置值。并且，将子文字分别与第一界面图像的子区域和第二界面图像的子区域进行匹配，确定与子文字对应的第一界面图像的子区域和第二界面图像的子区域。若匹配成功，则匹配成功数加1。

参考图7a和图7b所示，第一界面图像的子区域和第二界面图像的子区域是“平”字。由子文字分别对第一界面图像的子区域和第二界面图像的子区域进行匹配，由图示可知，第一界面图像的子区域和第二界面图像的子区域均与子文字匹配成功，匹配成功数加1。

从而，通过上述操作达到了能够对子文字进行匹配的技术效果。

在本公开实施例中，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

在本实施例中，还可以只使用组件信息而不使用组件。通过属性文件中的组件信息确定组件在第一界面图像中的位置信息，并利用位置信息在第一界面图像中截取子图像，利用在第一界面图像中截取的子图像与第二界面图像的子区域进行匹配对比。

还可以不利用属性文件，随机在第一界面图像中选择子区域，并提取第一界面图像中的子区域，再与第二界面图像中的子区域进行匹配对比。

此外，参考图1所示，根据本实施例的第三个方面，提供了一种存储介质。存储介质包括存储的程序，其中，在程序运行时由处理器执行以上任意一项所述的方法。

从而根据本实施例，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，或者网络设备等）执行本发明各个实施例所述的方法。

实施例2

图8示出了根据本实施例的第一个方面所述的对比用户界面差异的装置800，该装置800与根据实施例1的第一个方面所述的方法相对应。参考图8所示，该装置800包括：信息获取模块810，用于获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；文件解析模块820，用于解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；匹配对比模块830，用于将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及结果确定模块840，用于根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

可选地，将第一界面图像的子区域和第二界面图像的子区域分别与组件进行对比的操作包括：信息提取模块，用于预先在属性文件中提取组件在第一界面图像中的尺寸值、位置值和像素值，其中组件的尺寸值、位置值和像素值为组件的组件信息；信息对比模块，用于将第一界面图像的子区域的尺寸值、位置值和像素值和第二界面图像的子区域的尺寸值、位置值和像素值分别与组件的尺寸值、位置值和像素值进行对比；以及结果确定模块，用于根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

可选地，将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配的操作包括：组件确定模块，用于确定组件是否为子图像；颜色亮度对比模块，用于在组件是子图像的情况下，对比第一界面图像的颜色亮度和第二界面图像的颜色亮度，并得到对比结果；以及图像匹配方式选择模块，用于根据对比结果，选择对第一界面图像和第二界面图像进行图像匹配的方式。

从而根据本实施例，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

实施例3

图9示出了根据本实施例的第一个方面所述的对比用户界面差异的装置900，该装置900与根据实施例1的第一个方面所述的方法相对应。参考图9所示，该装置900包括：第一处理器910；以及第一存储器920，与第一处理器910连接，用于为第一处理器910提供处理以下处理步骤的指令：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。

从而根据本实施例，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

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

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

以上仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (7)

1.一种对比用户界面图像差异的方法，其特征在于，包括：

获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；

解析所述属性文件，并提取所述属性文件中的组件和组件信息，其中所述组件为组成所述第一界面图像的子图像或子文字，所述组件信息为所述组件与所述第一界面图像相关的数据信息；

将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配和对比，其中所述第一界面图像的子区域和所述第二界面图像的子区域为分别与所述组件对应的区域；

根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因；

将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配的操作包括：

确定所述组件是否为所述子图像；

在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；

根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式；

在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；以及根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式的操作包括：

在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度没有变化的情况下，以所子图像为模板，分别在所述第一界面图像和所述第二界面图像中进行匹配，并确定与所述子图像对应的所述第一界面图像的子区域和所述第二界面图像的子区域；以及

在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度有变化的情况下，提取所述第一界面图像的特征点、所述第二界面图像特征点和所述子图像的特征点，将所述子图像的特征点分别与所述第一界面图像的特征点和所述第二界面图像的特征点进行匹配，并确定与所述子图像的特征点对应的所述第一界面图像的子区域的特征点和所述第二界面图像的子区域的特征点。

2.根据权利要求1所述的方法，其特征在于，将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行对比的操作包括：

预先在所述属性文件中提取所述组件在所述第一界面图像中的尺寸值、位置值和像素值，其中所述组件的尺寸值、位置值和像素值为所述组件的组件信息；

将所述第一界面图像的子区域的尺寸值、位置值和像素值和所述第二界面图像的子区域的尺寸值、位置值和像素值分别与所述组件的尺寸值、位置值和像素值进行对比；以及

根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因。

3.根据权利要求1所述的方法，其特征在于，确定所述组件是否为所述子图像的操作包括：

在所述组件不是子图像的情况下，确定所述组件是所述子文字；以及

在所述组件是所述子文字的情况下，分别提取所述第一界面图像和所述第二界面图像的文字，以所述子文字为模板，分别对提取出的所述第一界面图像的文字和所述第二界面图像的文字与所述子文字进行匹配，并确定与所述子文字对应的所述第一界面图像的子区域和所述第二界面图像的子区域。

4.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时由处理器执行权利要求1至3中任意一项所述的方法。

5.一种对比用户界面差异的装置，其特征在于，包括：

信息获取模块，用于获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；

文件解析模块，用于解析所述属性文件，并提取所述属性文件中的组件和组件信息，其中所述组件为组成所述第一界面图像的子图像或子文字，所述组件信息为所述组件与所述第一界面图像相关的数据信息；

匹配对比模块，用于将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配和对比，其中所述第一界面图像的子区域和所述第二界面图像的子区域为分别与所述组件对应的区域；

结果确定模块，用于根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因；

所述匹配对比模块包括：

组件确定模块，用于确定所述组件是否为所述子图像；

颜色亮度对比模块，用于在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；

图像匹配方式选择模块，用于根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式；

所述图像匹配方式选择模块包括：

子区域确定模块，用于在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度没有变化的情况下，以所子图像为模板，分别在所述第一界面图像和所述第二界面图像中进行匹配，并确定与所述子图像对应的所述第一界面图像的子区域和所述第二界面图像的子区域；以及

子区域的特征点确定模块，用于在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度有变化的情况下，提取所述第一界面图像的特征点、所述第二界面图像特征点和所述子图像的特征点，将所述子图像的特征点分别与所述第一界面图像的特征点和所述第二界面图像的特征点进行匹配，并确定与所述子图像的特征点对应的所述第一界面图像的子区域的特征点和所述第二界面图像的子区域的特征点。

6.根据权利要求5所述的装置，其特征在于，将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行对比的操作包括：

信息提取模块，用于预先在所述属性文件中提取所述组件在所述第一界面图像中的尺寸值、位置值和像素值，其中所述组件的尺寸值、位置值和像素值为所述组件的组件信息；

信息对比模块，用于将所述第一界面图像的子区域的尺寸值、位置值和像素值和所述第二界面图像的子区域的尺寸值、位置值和像素值分别与所述组件的尺寸值、位置值和像素值进行对比；以及

结果确定模块，用于根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因。

7.一种对比用户界面差异的装置，其特征在于，包括：

第一处理器；以及

第一存储器，与所述第一处理器连接，用于为所述第一处理器提供处理以下处理步骤的指令：

获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；

解析所述属性文件，并提取所述属性文件中的组件和组件信息，其中所述组件为组成所述第一界面图像的子图像或子文字，所述组件信息为所述组件与所述第一界面图像相关的数据信息；

将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配和对比，其中所述第一界面图像的子区域和所述第二界面图像的子区域为分别与所述组件对应的区域；

根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因；

将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配的操作包括：

确定所述组件是否为所述子图像；

在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；

根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式；

在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；以及根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式的操作包括：

在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度没有变化的情况下，以所子图像为模板，分别在所述第一界面图像和所述第二界面图像中进行匹配，并确定与所述子图像对应的所述第一界面图像的子区域和所述第二界面图像的子区域；以及

在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度有变化的情况下，提取所述第一界面图像的特征点、所述第二界面图像特征点和所述子图像的特征点，将所述子图像的特征点分别与所述第一界面图像的特征点和所述第二界面图像的特征点进行匹配，并确定与所述子图像的特征点对应的所述第一界面图像的子区域的特征点和所述第二界面图像的子区域的特征点。

Images