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

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

A method, device and storage medium for comparing the differences of user interface images

【技术实现步骤摘要】
一种对比用户界面图像差异的方法、装置以及存储介质


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

技术介绍

[0002]图像设计与开发领域有着强烈的用户界面图像差异对比需求。例如，设计师修改用户界面设计稿后发给研发人员，研发人员如何能够快速知道修改的内容、在研发人员将用户界面设计稿代码化之后，设计师如何能够快速核验用户界面设计稿的视觉还原度以及新兴的代码自动生成技术如何能够在生成代码后，快速评估代码的用户界面设计稿的视觉还原度。
[0003]目前，常见的用户界面图像差异对比方案主要针对于自然场景图像，逐像素对比用户界面源设计稿图像与修改后的用户界面设计稿图像中的每个对应的像素点，并从像素亮度、对比度和临近结构等方面进行对比。
[0004]但逐像素对比方案仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像中的像素级别的差异，并不能准确表征两图像的差异原因。因此，如何准确表征用户界面源设计稿图像与修改后的用户界面设计稿图像的差异原因成为了目前亟待解决的问题。
[0005]现有技术1（CN104423933A）：一种云平台用户界面适配方法及适配器。其中的适配方法包括：当接收到针对应用需求的至少一个虚拟化环境适配指令时，获取对应虚拟化环境的差异化配置文件；根据所述差异化配置文件对所述虚拟化环境的用户界面进行差异化适配；将适配结果输出给所述用户界面。还公开了相应的适配器。采用本专利技术实施例提供的一种云平台用户界面适配方法及适配器的技术方案，通过设置差异化配置文件，根据差异化配置文件对虚拟化环境的用户界面进行差异化适配，可以实现各个虚拟化环境下的用户界面差异化处理。
[0006]现有技术2（CN112612690A）：一种用户界面信息处理方法、装置、电子设备及存储介质，该方法包括：启动对目标终端的显示界面的录屏操作；生成与所述目标应用程序对应的自动操作指令；将所述自动操作指令发送给所述目标终端，以使得所述目标终端：基于所述自动操作指令分别对所述对照版本的用户界面以及所述测试版本的用户界面进行自动触发操作；分别确定包含对对照版本、测试版本的用户界面进行触发操作以及基于相应触发操作进行业务数据展示的录屏信息为第一录屏信息以及第二录屏信息；基于所述第一录屏信息和所述第二录屏信息，生成所述对照版本和所述测试版本的用户界面差异信息。本公开能够提高用户界面测试的覆盖率、效率以及便利性。
[0007]针对上述的现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题，目前尚未提出有效的解决方案。

技术实现思路

[0008]本公开的实施例提供了一种对比用户界面图像差异的方法、装置以及存储介质，以至少解决现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题根据本公开实施例的一个方面，提供了一种对比用户界面图像差异的方法，包括：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。
[0009]根据本公开实施例的另一个方面，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时由处理器执行以上任意一项所述的方法。
[0010]根据本公开实施例的另一个方面，还提供了一种对比用户界面差异的装置，包括：信息获取模块，用于获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；文件解析模块，用于解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；匹配对比模块，用于将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及结果确定模块，用于根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。
[0011]根据本公开实施例的另一个方面，还提供了一种对比用户界面差异的装置，包括：第一处理器；以及第一存储器，与第一处理器连接，用于为第一处理器提供处理以下处理步骤的指令：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析属性文件，并提取属性文件中的组件和组件信息，其中组件为组成第一界面图像的子图像或子文字，组件信息为组件与第一界面图像相关的数据信息；将第一界面图像的子区域和第二界面图像的子区域分别与组件进行匹配和对比，其中第一界面图像的子区域和第二界面图像的子区域为分别与组件对应的区域；以及根据对比结果确定第一界面图像和第二界面图像的差异值和差异原因。
[0012]在本公开实施例中，主要采用了获取用户界面的第一界面图像、用户界面的属性文件和用户界面的第二界面图像，解析与第一界面图像关联的属性文件，并从属性文件中提取与第一界面图像关联的组件和组件信息，根据组件信息确定组件在第一界面图像和第二界面图像中的子区域，分别将第一界面图像的子区域和第二界面图像的子区域与组件进行对比的方式，确定第一界面图像和第二界面图像的差异值和差异原因。通过上述操作达到了不仅能够得到第一界面图像和第二界面图像的差异值，还能够得到第一界面图像和第二界面图像的差异原因的技术效果。从而解决了现有技术中存在的目前的用户界面图像差异对比方法仅能够对比用户界面源设计稿图像与修改后的用户界面设计稿图像的差异值，并不能说明两者之间的差异原因的技术问题。
附图说明
[0013]此处所说明的附图用来提供对本公开的进一步理解，构成本申请的一部分，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。在附图中：图1是用于实现根据本公开实施例1所述的方法的计算设备的硬件结构框图；图2是根据本公开实施例1的第一个方面所述的对比用户界面图像差异的方法的流程示意图；图3是根据本公开实施例1的第一个方面所述的第一界面图像和第二界面图像的示意图；图4是根据本公开实施例1的第一个方面所述的属性文件中的组件信息的示意图；图5a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域与子图像进行对比的示意图；图5b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图；图6a是根据本公开实施例1的第一个方面所述的将第一界面图像的子区域的特征点与子图像的特征点进行对比的示意图；图6b是根据本公开实施例1的第一个方面所述的将第二界面图像的子区域与子图像进行对比的示意图；图7a是本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种对比用户界面图像差异的方法，其特征在于，包括：获取用户界面的第一界面图像、用户界面的属性文件以及用户界面的第二界面图像；解析所述属性文件，并提取所述属性文件中的组件和组件信息，其中所述组件为组成所述第一界面图像的子图像或子文字，所述组件信息为所述组件与所述第一界面图像相关的数据信息；将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配和对比，其中所述第一界面图像的子区域和所述第二界面图像的子区域为分别与所述组件对应的区域；以及根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因。2.根据权利要求1所述的方法，其特征在于，将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行对比的操作包括：预先在所述属性文件中提取所述组件在所述第一界面图像中的尺寸值、位置值和像素值，其中所述组件的尺寸值、位置值和像素值为所述组件的组件信息；将所述第一界面图像的子区域的尺寸值、位置值和像素值和所述第二界面图像的子区域的尺寸值、位置值和像素值分别与所述组件的尺寸值、位置值和像素值进行对比；以及根据对比结果确定所述第一界面图像和所述第二界面图像的差异值和差异原因。3.根据权利要求1所述的方法，其特征在于，将所述第一界面图像的子区域和所述第二界面图像的子区域分别与所述组件进行匹配的操作包括：确定所述组件是否为所述子图像；在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；以及根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式。4.根据权利要求3所述的方法，其特征在于，在所述组件是所述子图像的情况下，对比所述第一界面图像的颜色亮度和所述第二界面图像的颜色亮度，并得到对比结果；以及根据所述对比结果，选择对所述第一界面图像和所述第二界面图像进行图像匹配的方式的操作包括：在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度没有变化的情况下，以所子图像为模板，分别在所述第一界面图像和所述第二界面图像中进行匹配，并确定与所述子图像对应的所述第一界面图像的子区域和所述第二界面图像的子区域；以及在所述第二界面图像的颜色亮度相比于所述第一界面图像的颜色亮度有变化的情况下，提取所述第一界面图像的特征点、所述第二界面图像特征点和所述子图像的特征点，将所述子图像的特征点分别与所述第一界面图像的特征点和所述第二界面图像的特征点进行匹配，并确定与所述子图像的特征点对应的所述第一界面图像的子区域的特征点和所述第二界面图像的子区域的特征点。5.根据权利要求3所述的方法，其特征在于，确定所述组件是否为所述子图像的操作包括：在所述组件不是子图像的情况下，确定所述组件是所述子文字；以及在所述组件是所述子文字的情况下，分别提取所述第一界面图像和所述第二界面图像
的文字，以所述子文字为模板，分别对提取出的所述第一界面图像的文字...

【专利技术属性】
技术研发人员：孟超，徐洋，康骏翔，
申请(专利权)人：北京尽微致广信息技术有限公司，
类型：发明
国别省市：