CN113778905B - Ui设计验收方法、装置、设备及存储介质 - Google Patents

Abstract

本申请涉及计算机领域，提供了一种UI设计验收方法、装置、设备及存储介质，可应用于云技术、人工智能、智慧交通、车联网等场景中。该方法包括：基于待处理UI图像中各个待处理图层各自的像素值，分别获得各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合；再将各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果。无需单独测量每个UI样式的样式尺寸，通过比较各个待处理图层各自的实际图层间距集合，与对应目标图层的目标图层间距集合，能判断出各个待处理图层的UI样式、图层间距设计的是否合理，提高验收效率和验收结果准确率。

Description

UI设计验收方法、装置、设备及存储介质

技术领域

本申请涉及计算机领域，提供了一种UI设计验收方法、装置、设备及存储介质。

背景技术

随着科学技术的发展，越来越多的平台推出了自主开发的应用程序。为了确保开发的用户界面（User Interface，UI）尽可能还原设计稿给出的UI设计方案，UI设计验收成为了应用程序研发过程中的一个关键环节。

相关技术下，在进行UI设计验收时，需要使用Sketch、PhotoShop等工具，测量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设计验收时，采用基于各个待处理图层各自的像素值，确定各个待处理图层的实际图层间距集合的方式，能够准确测量出所有图层间距，有利于提高验收结果准确率。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

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

图1a为本申请实施例中一种应用场景的一个可选的示意图；；

图1b为本申请实施例提供的一种UI设计验收方法的流程示意图；

图1c为本申请实施例提供的待处理UI图像示意图；

图1d为本申请实施例提供的界面结构树示意图；

图1e为本申请实施例提供的获得一个待处理图层x的实际图层间距集合的流程示意图；

图1f为本申请实施例提供的由待处理图层及其他图层叠加形成的示意图；

图2a为本申请实施例提供的设计稿给出的目标UI图像示意图；

图2b为本申请实施例提供的客户端渲染得到的待处理UI图像示意图；

图2c为本申请实施例提供的待处理UI图像的验收结果示意图；

图3为本申请实施例提供的在一具体实施例中进行UI设计验收的流程示意图；

图4为本申请实施例提供的一种UI设计验收装置的结构示意图；

图5为本申请实施例中提供的一种计算机设备的组成结构示意图；

图6为本申请实施例中一个计算装置的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请技术方案的一部分实施例，而不是全部的实施例。基于本申请文件中记载的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请技术方案保护的范围。

以下对本申请实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

1、云计算(Cloud Computing)：

狭义云计算指的是互联网技术（Internet Technology， IT）基础设施的交付和使用模式，是通过网络以按需、易扩展的方式获得所需资源；而广义云计算指的是服务的交付和使用模式，是通过网络以按需、易扩展的方式获得所需服务。其中，可以是IT和软件、互联网相关的服务，也可以是其他服务。

云计算是网格计算（Grid Computing )、分布式计算（Distributed Computing)、并行计算（Parallel Computing)、效用计算（Utility Computing)、网络存储（NetworkStorage Technologies)、虚拟化（Virtualization)、负载均衡（Load Balance)等传统计算机与网络技术发展融合的产物。

随着互联网、实时数据流、连接设备多样化的发展，以及搜索服务、社会网络、移动商务和开放协作等需求的推动，云计算得以迅速发展起来。不同于传统的并行分布式计算，云计算是从理念上将推动整个互联网模式、企业管理模式发生革命性的变革。

2、开放式图形库（Open Graphics Library，OpenGL）：

OpenGL是一个用于渲染二维（2-dimension，2D）、三维（3-dimension，3D）矢量图形的跨语言、跨平台的应用程序编程接口（Application Programming Interface，API），由将近350个不同的调用函数组成，既能用来绘制简单的图形比特，也能用来绘制复杂的三维景象。

OpenGL常用于计算机辅助设计（Computer Aided Design，CAD）、虚拟现实（Virtual Reality，VR）、科学可视化程序和电子游戏开发等应用场景中，该接口通过与图形处理单元交互，以实现硬件加速的效果。

3、树形数据结构：

在计算机科学中，树是一种抽象数据类型或者是这种抽象数据类型的数据结构。树状数据结构是由n（n>0）个有限节点组成的一个具有层次关系的集合，用来表示数据表素之间的一对多关系，其中，树和二叉树是最为常见的两种树状数据结构。

之所以将这种数据结构叫做“树”，是因为它看起来像是一棵倒挂的树，也就是说它是一棵根朝上，而叶子朝下的树。因此，树状数据结构具有以下几个特点：

（1）、每个节点有零个或者多个子节点；

（2）、没有父节点的节点被称之为根节点；

（3）、每一个非根节点的节点，有且只有一个父节点；

（4）、除了根节点以外，每个子节点可以划分为多个不相交的子树。

树形数据结构是一类重要的非线性数据结构，广泛于计算机领域中，比如，在编译程序中用树来表示源程序的语法结构；比如，在数据库***中，树形数据结构也是信息的重要组织形式之一；又比如，采用树形数据结构，搭建文件管理的多级目录结构。

4、YUV：

YUV是一种常用于视频处理组件的颜色编码方法。其中，Y分量表示明亮度Luminance或Luma），也被称之为灰度值；U分量和V分量表示色度（Chrominance或Chroma），常用于描述视频影像的色彩及饱和度，因此，通过U分量和V分量，能够指定视频影像的像素值。

下面对本申请实施例的设计思想进行简要介绍：

随着科学技术的发展，越来越多的平台推出了自主开发的应用程序。为了确保开发的UI尽可能还原设计稿给出的UI设计方案，UI设计验收成为了应用程序研发过程中的一个关键环节。

相关技术下，在进行UI设计验收时，需要使用Sketch、PhotoShop等工具，测量UI图像中在每个图层上显示的UI样式的样式尺寸，以及UI样式所在的子图层与对应父图层之间的图层间距；再将测量获得的各个UI样式的样式尺寸以及图层之间的图层间距与设计稿进行比较，并标注出存在样式尺寸错误或者图层间距尺寸错误的图层，生成相应的验收结果。

目前采用的UI设计验收方法严重依赖于人工的测量结果，尤其是对设计复杂的UI图像进行UI设计验收时，验收效率较低，而且，人工难以手工测量出UI图像上所有UI样式的样式尺寸以及所有图层间距，若基于部分测量结果生成最终的验收结果，反而降低了验收结果准确率。

为了解决验收结果准确率低的问题，本申请实施例提出了一种UI设计验收方法。该方法包括：

获取待处理UI图像，基于待处理UI图像包含的各个待处理图层各自的像素值，分别获得各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合；再将待处理UI图像中各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果；其中，待处理UI图像和目标UI图像，是分别基于相同的UI数据进行渲染处理生成的。

以下结合说明书附图对本申请的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本申请，并不用于限定本申请，并且在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本申请实施例可应用于云技术、人工智能等各种场景。图1a示出了一种应用场景的一个可选的示意图，在该应用场景下包括两个运行了客户端的物理终端设备110和一台运行了元数据处理（Meta Data Handle）模块的服务器130，两个物理终端设备110分别通过有线网络或者无线网络与服务器130进行通信。

客户端在进行页面加载时，通过物理终端设备110向服务器130发送UI标识，以获取服务器130下发的与UI标识相对应的UI数据；客户端基于UI数据进行渲染处理，在显示屏120上显示待处理UI图像，再通过调用物理终端设备110的截屏方法，将待处理UI图像上传至服务器130的元数据处理模块中。

服务器130的元数据处理模块获取待处理UI图像，基于待处理UI图像包含待各个待处理图层各自的像素值，分别获得各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合；再将待处理UI图像中各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果；其中，目标UI图像也是基于上述UI数据渲染处理生成的。

在本申请实施例中，物理终端设备110是用户使用的电子设备，电子设备可以是个人计算机、手机、平板电脑、笔记本电脑、电子书阅读器、智能语音交互设备、智能家电、车载终端等具备页面渲染能力的电子设备。

服务器130可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式***，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络（Content Delivery Network，CDN）、大数据以及人工智能平台等基础云计算服务的云服务器，本申请在此不做限制。

参阅图1b示出的流程示意图，对本申请实施例提出的UI设计验收方法进行介绍。

S101：服务器获取待处理UI图像。

在执行步骤101之前，物理终端设备上运行的客户端，通过物理终端设备向服务器发送UI标识，以获取服务器下发的与UI标识相对应的UI数据；客户端基于UI数据进行渲染处理，在物理终端设备的显示屏上显示渲染完毕的待处理UI图像，客户端再通过调用物理终端设备的截屏方法，将待处理UI图像上传至服务器的元数据处理模块中。

S102：服务器基于待处理UI图像包含的各个待处理图层各自的像素值，分别获得各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合。

参阅图1c示出的待处理UI图像示意图，该图像包含多个待处理图层，各个待处理图层被设置了相应的图层颜色，且符合设定从属关系的两个图层的图层颜色不同。以一个待处理图层x为例，通过执行以下操作，可获得待处理图层x的像素值：

在待处理UI图像的界面结构树中，获取到表征待处理图层x的子节点，以及表征符合设定从属关系的其他图层的父节点，其中，设定从属关系表征，待处理图层x在界面结构树中对应的节点，是其他图层在界面结构树中对应的节点的子节点；从父节点的纹理单元中读取子节点的图像纹理信息，并基于子节点的标识信息与子节点的图像纹理信息，获得待处理图层x的像素值。

具体地说，服务器中的元数据处理模块解析待处理UI图像，获得如图1d所示的界面结构树，界面结构树形似一棵倒挂的树，界面结构树的根节点为待处理UI图像最底层的背景图层，界面结构树的叶子节点为待处理UI图像最上层的待处理图层。

为了便于计算各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合，元数据处理模块自下至上依次遍历界面结构树的各个节点，每遍历一个节点，当该节点表征一个待处理图层的子节点时，获取子节点以及表征符合设定从属关系的其他图层的父节点，通过OpenGL从父节点的纹理单元中读取子节点的图像纹理信息（即待处理图层的图层颜色），基于子节点的标识信息与子节点的图像纹理信息创建片元着色器1，再通过片元着色器1调用纹理2D（texture2D）函数计算待处理图层的U分量、V分量，最后基于U分量和V分量，获得该待处理图层的像素值。

元数据处理模块每遍历一个节点，除了执行上述操作，获得待处理图层的像素值以外，还会通过OpenGL从父节点的纹理单元中读取父节点的图像纹理信息（即其他图层的图层颜色），基于父节点的标识信息与父节点的图像纹理信息创建片元着色器2，再通过片元着色器2调用纹理2D（texture2D）函数计算其他图层的U分量、V分量，最后基于U分量和V分量，获得该其他图层的像素值。

本申请实施例是基于待处理UI图像包含的各个待处理图层各自的像素值，分别获得的各个待处理图层各自的实际图层间距集合，因此，元数据处理模块通过执行上述操作，准确地获得待处理UI图像中各个待处理图层的像素值，有利于提高后续测量结果与验收结果的准确率。由于每个待处理图层包含多个像素点，因此，位于同一待处理图层上的各个像素点的像素值均为对应图层的像素值。

接下来，针对各个待处理图层，分别采用循环方式执行如图1e所示的流程示意图，直到获得相应的实际图层间距集合为止，其中，图1e示出了获得一个待处理图层x的实际图层间距集合的过程。

S1021：在待处理图层x中，每遍历一个第一像素点s，基于第一像素点s的像素值与上一次遍历的第一像素点的像素值，确定上一次遍历的第一像素点为第一边缘像素点时，基于第一边缘像素点，获取在待处理图层x对应的其他图层中的第二边缘像素点，以及基于第一边缘像素点和第二边缘像素点之间的像素距离，确定待处理图层x在一个边缘方向的实际图层距离。

一个待处理图层由多个像素点构成，每个像素点的像素值均为该图层的像素值，由于符合设定从属关系的两个图层被设置为不同的图层颜色，因此，可以基于当前遍历的像素点的像素值是否发生突变，来确定两个图层各自的边缘像素点，再基于对应的两个边缘像素点，计算出待处理图层与符合设定从属关系的其他图层之间的实际图层间距。相较于相关技术提供的UI设计验收方法，本申请实施例提高了各个实际图层间距的测量准确率，有利于优化验收结果准确率。

具体地说，当确定第一像素点s的像素值与上一次遍历的第一像素点的像素值不同，且第一像素点s的像素值与其他图层的像素值相同时，确定上一次遍历的第一像素点为第一边缘像素点。

在确定出第一边缘像素点之后，以第一边缘像素点为起点，对待处理图层x对应的其他图层上，位于一个边缘方向的多个第二像素点进行遍历，每遍历一个第二像素点s’，基于第二像素点s’的像素值与上一次遍历的第二像素点的像素值，判断上一次遍历的第二像素点是否为第二边缘像素点。

具体的判断过程为，当确定第二像素点s’的像素值与上一次遍历的第二像素点的像素值不同，且第二像素点s’的像素值与两个图层的像素值均不相同时，确定上一次遍历的第二像素点为第二边缘像素点。

S1022：将获得的多个边缘方向的实际图层间距，作为待处理图层x的实际间距集合输出。

例如，在图1f示出的示意图中，包含数字3的图层为待处理图层，包含黑色背景的图层为其他图层。

以位于待处理图层的中心处的第一像素点为起点，对待处理图层上位于向上的边缘方向的多个第一像素点进行遍历，每遍历一个第一像素点s，基于第一像素点s的像素值与上一次遍历的第一像素点的像素值，判断上一次遍历的第一像素点是否为第一边缘像素点。

在确定出第一边缘像素点之后，以第一边缘像素点为起点，对其他图层上位于向上的边缘方向的多个第二像素点进行遍历，每遍历一个第二像素点s’，基于第二像素点s’的像素值与上一次遍历的第二像素点的像素值，判断上一次遍历的第二像素点是否为第二边缘像素点。

最后，基于第一边缘像素点和第二边缘像素点之间的像素距离，确定待处理图层在向上的边缘方向的实际图层间距为18.5pt。使用同样的方法，获得待处理图层在向左的边缘方向的实际图层间距为29pt，待处理图层在向右的边缘方向的实际图层间距为28.5pt，待处理图层在向下的边缘方向的实际图层间距为18.5pt。

S103：服务器将待处理UI图像中各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果；其中，待处理UI图像和目标UI图像，是分别基于相同的UI数据进行渲染处理得到的。

将待处理UI图像中显示的各个待处理图层各自对应的实际图层间距集合，与目标UI图像中显示的对应目标图层的目标图层间距集合进行比较，每比较一个待处理图层的实际图层间距集合，当存在至少一个实际图层间距与对应的目标图层间距不同时，在该待处理图层上标注相应的目标图层间距，并将标注后的待处理UI图像，作为对应的验收结果。在待处理UI图像上标注出正确的目标图层间距，方便开发人员基于验收结果调整UI设计代码，以使基于调整后的UI设计代码渲染得到的待处理UI图像，尽可能还原出设计稿给出的设计方案。

其中，元数据处理模块在针对待处理UI图像执行上述操作的过程中，还会采用异步方式，针对目标UI图像执行类似于步骤102示出的操作，获得各个目标图层的目标图层间距集合。由于前文已经详述步骤102的具体操作，在此便不再赘述针对目标UI图像执行的具体操作了。

例如，图2a为目标UI图像，图2b为待处理UI图像，分别对两幅图像执行以下操作，获得目标UI图像中各个目标图层的目标图层间距集合，以及待处理UI图像中各个待处理图层的实际图层间距集合；将待处理UI图像中显示的各个待处理图层各自对应的实际图层间距集合，与目标UI图像中显示的对应目标图层的目标图层间距集合进行比较，获得相应的比较结果，再基于比较结果对待处理UI图像进行重绘处理，获得如图2c所示的验收结果。由于部分图层之间的间距过小，未能示出对应的正确的图层间距数值，仅使用直线标注出待处理UI图像中存在设计问题的图层。

根据图2a示出的示意图可知，目标UI图像中显示的各个目标图层为一个个矩形块，而各个矩形块的长宽尺寸既是对应图层的图层尺寸，也是显示在该图层上的UI样式的样式尺寸。当确定好各个目标图层显示的UI样式的样式尺寸时，也会确定好各个目标图层的目标图层间距集合。

因此，本申请实施例基于各个待处理图层各自的像素值，确定出各个待处理图层与符合设定从属关系的其他图层之间的实际图层间距集合，通过比较待处理UI图像中显示的各个待处理图层各自对应的实际图层间距集合，与目标UI图像中显示的对应目标图层的目标图层间距集合，既可以判断各个待处理图层显示的UI样式的设计是否合理，又能判断各个待处理图层的实际图层间距集合的设计是否合理。

相较于相关技术提供的UI设计验收方法，本申请实施例无需单独测量每个UI样式的样式尺寸，简化了验收步骤，提高了验收效率。特别是对设计复杂的待处理UI图像进行UI设计验收时，采用基于各个待处理图层各自的像素值，确定各个待处理图层的实际图层间距集合的方式，能够准确测量出所有图层间距，有利于提高验收结果准确率。

参阅图3示出的流程示意图，以一具体实施例为例，描述对待处理UI图像进行UI设计验收的过程。

S301：服务器的元数据处理模块解析设计人员上传的目标UI图像，获得对应的UI数据；

S302：元数据处理模块将UI数据包装为xml数据格式的UI数据，并将xml数据格式的UI数据与目标UI图像的UI标识映射存储在服务器的数据库中；

S303：物理终端设备上运行的客户端，通过物理终端设备向服务器发送UI标识，以获取服务器下发的与UI标识相对应的UI数据；

S304：客户端基于UI数据进行渲染处理，在物理终端设备的显示屏上显示渲染完毕的待处理UI图像，客户端再通过调用物理终端设备的截屏方法，将待处理UI图像上传至元数据处理模块中；

S305：元数据处理模块解析待处理UI图像，获得对应的界面结构树；

S306：元数据处理模块自下至上依次遍历界面结构树的各个节点，每遍历一个节点，通过OpenGL获得该待处理图层的像素值以及符合设定从属关系的其他图层的像素值，并基于该待处理图层的像素值和其他图层的像素值，获得该待处理图层的实际图层间距集合；

S307：元数据处理模块将待处理UI图像中各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果。

与上述方法实施例基于同一发明构思，本申请实施例还提供了一种UI设计验收装置的结构示意图。如图4所示，装置400可以包括：

获取单元401，用于获取待处理UI图像；

处理单元402，用于基于待处理UI图像包含的各个待处理图层各自的像素值，分别获得各个待处理图层，各自与符合设定从属关系的其他图层之间的实际图层间距集合；

验收单元403，用于将待处理UI图像中各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成待处理UI图像的验收结果；

其中，待处理UI图像和目标UI图像，是分别基于相同的UI数据进行渲染处理生成的。

可选的，处理单元402用于：

针对各个待处理图层，分别采用循环方式执行以下操作，直到获得相应的实际图层间距集合为止：

在一个待处理图层中，每遍历一个第一像素点，基于一个第一像素点的像素值与上一次遍历的第一像素点的像素值，确定上一次遍历的第一像素点为第一边缘像素点时，基于第一边缘像素点，获取在一个待处理图层对应的其他图层中的第二边缘像素点，以及基于第一边缘像素点和第二边缘像素点之间的像素距离，确定一个待处理图层在一个边缘方向的实际图层间距；

将获得的多个边缘方向的实际图层间距，作为一个待处理图层的实际图层间距集合输出。

可选的，处理单元402用于：

当确定一个第一像素点的像素值与上一次遍历的第一像素点的像素值不同，且一个第一像素点的像素值与其他图层的像素值相同时，确定上一次遍历的第一像素点为第一边缘像素点。

可选的，处理单元402用于：

以第一边缘像素点为起点，对一个待处理图层对应的其他图层上，位于一个边缘方向的多个第二像素点进行遍历，每遍历一个第二像素点，基于一个第二像素点的像素值与上一次遍历的第二像素点的像素值，判断上一次遍历的第二像素点是否为第二边缘像素点。

可选的，处理单元402用于：

当确定一个第二像素点的像素值与上一次遍历的第二像素点的像素值不同，且一个第二像素点的像素值与两个图层的像素值均不相同时，确定上一次遍历的第二像素点为第二边缘像素点。

可选的，处理单元402通过执行以下操作，获得待处理UI图像中一个待处理图层的像素值：

在待处理UI图像的界面结构树中，获取到表征一个待处理图层的子节点，以及表征符合设定从属关系的其他图层的父节点；

从父节点的纹理单元中，读取子节点的图像纹理信息；

基于子节点的标识信息与子节点的图像纹理信息，获得一个待处理图层的像素值。

可选的，设定从属关系表征，一个待处理图层在界面结构树中对应的节点，是其他图层在界面结构树中对应的节点的子节点。

可选的，验收单元403用于：

将待处理UI图像中显示的各个待处理图层各自对应的实际图层间距集合，与目标UI图像中显示的对应目标图层的目标图层间距集合进行比较，每比较一个待处理图层的实际图层间距集合，当存在至少一个实际图层间距与对应的目标图层间距不同时，在一个待处理图层上标注相应的目标图层间距；

将标注后的待处理UI图像，作为对应的验收结果。

为了描述的方便，以上各部分按照功能划分为各模块（或单元）分别描述。当然，在实施本申请时可以把各模块（或单元）的功能在同一个或多个软件或硬件中实现。

在介绍了本申请示例性实施方式的UI设计验收方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的计算机设备。

所属技术领域的技术人员能够理解，本申请的各个方面可以实现为***、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式（包括固件、微代码等），或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“***”。

与上述方法实施例基于同一发明构思，本申请实施例中还提供了一种计算机设备，参阅图5所示，计算机设备500可以至少包括处理器501、以及存储器502。其中，存储器502存储有程序代码，当程序代码被处理器501执行时，使得处理器501执行上述任意一种UI设计验收方法的步骤。

在一些可能的实施方式中，根据本申请的计算装置可以至少包括至少一个处理器、以及至少一个存储器。其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行本说明书描述的根据本申请各种示例性实施方式的UI设计验收方法中的步骤。例如，处理器可以执行如图1b中所示的步骤。

下面参照图6来描述根据本申请的这种实施方式的计算装置600。图6的计算装置600仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算装置600以通用计算装置的形式表现。计算装置600的组件可以包括但不限于：上述至少一个处理单元601、上述至少一个存储单元602、连接不同***组件（包括存储单元602和处理单元601）的总线603。

总线603表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、***总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元602可以包括易失性存储器形式的可读介质，例如随机存取存储器（RAM）6021和/或高速缓存存储单元6022，还可以进一步包括只读存储器（ROM）6023。

存储单元602还可以包括具有一组（至少一个）程序模块6024的程序/实用工具6025，这样的程序模块6024包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算装置600也可以与一个或多个外部设备604（例如键盘、指向设备等）通信，还可与一个或者多个使得用户能与计算装置600交互的设备通信，和/或与使得该计算装置600能与一个或多个其它计算装置进行通信的任何设备（例如路由器、调制解调器等等）通信。这种通信可以通过输入/输出（I/O）接口605进行。并且，计算装置600还可以通过网络适配器606与一个或者多个网络（例如局域网（LAN），广域网（WAN）和/或公共网络，例如因特网）通信。如图所示，网络适配器606通过总线603与用于计算装置600的其它模块通信。应当理解，尽管图中未示出，可以结合计算装置600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

与上述方法实施例基于同一发明构思，本申请提供的UI设计验收方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在计算机设备上运行时，程序代码用于使计算机设备执行本说明书描述的根据本申请各种示例性实施方式的UI设计验收方法中的步骤，例如，电子设备可以执行如图1b中所示的步骤。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子（非穷举的列表）包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (13)

1.一种UI设计验收方法，其特征在于，包括：

获取待处理UI图像；

针对所述待处理UI图像包含的各个待处理图层，分别采用循环方式执行以下操作，直到获得相应的实际图层间距集合为止：在一个待处理图层中，每遍历一个第一像素点，基于所述一个第一像素点的像素值与上一次遍历的第一像素点的像素值，确定所述上一次遍历的第一像素点为第一边缘像素点时，基于所述第一边缘像素点，获取与所述一个待处理图层之间符合设定从属关系的其他图层中的第二边缘像素点，以及基于所述第一边缘像素点和所述第二边缘像素点之间的像素距离，确定所述一个待处理图层在一个边缘方向的实际图层间距，将获得的多个边缘方向的实际图层间距，作为所述一个待处理图层的实际图层间距集合输出；

将所述待处理UI图像中所述各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成所述待处理UI图像的验收结果；

其中，所述待处理UI图像和所述目标UI图像，是分别基于相同的UI数据进行渲染处理生成的。

2.如权利要求1所述的方法，其特征在于，所述基于所述一个第一像素点的像素值与上一次遍历的第一像素点的像素值，确定所述上一次遍历的第一像素点为第一边缘像素点，包括：

当确定所述一个第一像素点的像素值与所述上一次遍历的第一像素点的像素值不同，且所述一个第一像素点的像素值与所述其他图层的像素值相同时，确定所述上一次遍历的第一像素点为所述第一边缘像素点。

3.如权利要求1所述的方法，其特征在于，所述基于所述第一边缘像素点，获取在所述一个待处理图层对应的其他图层中的第二边缘像素点，包括：

以所述第一边缘像素点为起点，对所述一个待处理图层对应的其他图层上，位于所述一个边缘方向的多个第二像素点进行遍历，每遍历一个第二像素点，基于所述一个第二像素点的像素值与上一次遍历的第二像素点的像素值，判断所述上一次遍历的第二像素点是否为所述第二边缘像素点。

4.如权利要求3所述的方法，其特征在于，所述基于所述一个第二像素点的像素值与上一次遍历的第二像素点的像素值，判断所述上一次遍历的第二像素点是否为所述第二边缘像素点，包括：

当确定所述一个第二像素点的像素值与所述上一次遍历的第二像素点的像素值不同，且所述一个第二像素点的像素值与两个图层的像素值均不相同时，确定所述上一次遍历的第二像素点为所述第二边缘像素点。

5.如权利要求1所述的方法，其特征在于，通过执行以下操作，获得所述待处理UI图像中一个待处理图层的像素值：

在所述待处理UI图像的界面结构树中，获取到表征所述一个待处理图层的子节点，以及表征符合所述设定从属关系的其他图层的父节点；

从所述父节点的纹理单元中，读取所述子节点的图像纹理信息；

基于所述子节点的标识信息与所述子节点的图像纹理信息，获得所述一个待处理图层的像素值。

6.如权利要求5所述的方法，其特征在于，所述设定从属关系表征，所述一个待处理图层在所述界面结构树中对应的节点，是所述其他图层在所述界面结构树中对应的节点的子节点。

7.如权利要求1-6任一项所述的方法，其特征在于，所述将所述待处理UI图像中所述各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成所述待处理UI图像的验收结果，包括：

将所述待处理UI图像中显示的所述各个待处理图层各自对应的实际图层间距集合，与目标UI图像中显示的对应目标图层的目标图层间距集合进行比较，每比较一个待处理图层的实际图层间距集合，当存在至少一个实际图层间距与对应的目标图层间距不同时，在所述一个待处理图层上标注相应的目标图层间距；

将标注后的待处理UI图像，作为对应的验收结果。

8.一种UI设计验收装置，其特征在于，包括：

获取单元，用于获取待处理UI图像；

处理单元，用于针对所述待处理UI图像包含的各个待处理图层，分别采用循环方式执行以下操作，直到获得相应的实际图层间距集合为止：在一个待处理图层中，每遍历一个第一像素点，基于所述一个第一像素点的像素值与上一次遍历的第一像素点的像素值，确定所述上一次遍历的第一像素点为第一边缘像素点时，基于所述第一边缘像素点，获取与所述一个待处理图层之间符合设定从属关系的其他图层中的第二边缘像素点，以及基于所述第一边缘像素点和所述第二边缘像素点之间的像素距离，确定所述一个待处理图层在一个边缘方向的实际图层间距，将获得的多个边缘方向的实际图层间距，作为所述一个待处理图层的实际图层间距集合输出；

验收单元，用于将所述待处理UI图像中所述各个待处理图层各自对应的实际图层间距集合，与目标UI图像中对应目标图层的目标图层间距集合进行比较，生成所述待处理UI图像的验收结果；

其中，所述待处理UI图像和所述目标UI图像，是分别基于相同的UI数据进行渲染处理生成的。

9.如权利要求8所述的装置，其特征在于，所述处理单元用于：

当确定所述一个第一像素点的像素值与所述上一次遍历的第一像素点的像素值不同，且所述一个第一像素点的像素值与所述其他图层的像素值相同时，确定所述上一次遍历的第一像素点为所述第一边缘像素点。

10.如权利要求8所述的装置，其特征在于，所述处理单元用于：

以所述第一边缘像素点为起点，对所述一个待处理图层对应的其他图层上，位于所述一个边缘方向的多个第二像素点进行遍历，每遍历一个第二像素点，基于所述一个第二像素点的像素值与上一次遍历的第二像素点的像素值，判断所述上一次遍历的第二像素点是否为所述第二边缘像素点。

11.如权利要求10所述的装置，其特征在于，所述处理单元用于：

当确定所述一个第二像素点的像素值与所述上一次遍历的第二像素点的像素值不同，且所述一个第二像素点的像素值与两个图层的像素值均不相同时，确定所述上一次遍历的第二像素点为所述第二边缘像素点。

12.一种计算机设备，其特征在于，其包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行权利要求1~7中任一项所述方法的步骤。

13.一种计算机可读存储介质，其特征在于，其包括程序代码，当所述程序代码在计算机设备上运行时，所述程序代码用于使所述计算机设备执行权利要求1~7中任一项所述方法的步骤。

Images