CN109840087B - 界面设计系统及方法、计算机可读存储介质 - Google Patents

Abstract

本申请公开了一种界面设计系统，属于计算机技术领域，用于解决现有技术中界面设计效率低下的问题。所述系统包括：设计稿导入客户端和设计稿管理服务端，其中，设计稿导入客户端，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；设计稿管理服务端，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；设计稿管理服务端，还用于根据所述界面设计稿和切片数据，对目标画板进行版本管理。本申请公开的界面设计系统通过基于设计稿的切片数据对设计稿进行版本管理，高效地发现版本差异，提升界面设计系统的效率。

Description

界面设计系统及方法、计算机可读存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种界面设计系统及方法、计算机可读存储介质。

背景技术

界面设计系统用于设计网页或者客户端软件的界面等。现有技术中的界面设计系统，如蓝湖、语雀等系统通常包括界面设计客户端，以及后台服务器。所述后台服务器用于更新所述界面设计客户端以及进行设计稿关联、项目组共享等功能。现有技术中的界面设计系统基于设计稿层面进行设计稿的管理，功能单一，限制了界面设计的效率。

发明内容

本申请提供一种界面设计系统，有助于提升界面设计的效率。

为了解决上述问题，第一方面，本申请实施例提供了一种界面设计系统，包括：设计稿导入客户端和设计稿管理服务端，其中，

所述设计稿导入客户端，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；

所述设计稿管理服务端，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；

所述设计稿管理服务端，还用于根据所述界面设计稿和切片数据，对所述目标画板进行版本管理。

第二方面，本申请实施例提供了一种界面设计方法，包括：

获取根据用户的导入操作确定的目标画板关联的界面设计稿和切片数据；

根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；

根据所述界面设计稿和切片数据，对所述目标画板进行版本管理。

第三方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时本申请实施例公开的界面设计方法的步骤。

本申请实施例公开的界面设计系统，包括：设计稿导入客户端和设计稿管理服务端，其中，所述设计稿导入客户端，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；所述设计稿管理服务端，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；所述设计稿管理服务端，还用于根据所述界面设计稿和切片数据，对所述目标画板进行版本管理，有助于提升界面设计系统的效率。通过本申请公开的界面设计系统，可以基于设计稿的切片数据对设计稿进行版本管理，例如，基于切片信息进行设计稿版本差异化比对和标注，高效地发现版本差异，并进行画板版本维护，有助于提升界面设计系统的效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例一的界面设计系统结构示意图；

图2是本申请实施例二的界面设计系统结构示意图；

图3是本申请实施例三的界面设计系统结构示意图；

图4是本申请实施例三的界面设计系统中视觉比对结果标注示意图之一；

图5是本申请实施例三的界面设计系统中视觉比对结果标注示意图之二；

图6是本申请实施例四的界面设计系统结构示意图；

图7是本申请实施例五的界面设计系统结构示意图；

图8是本申请实施例六的界面设计方法流程图。

具体实施方式

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

实施例一

本实施例公开的一种界面设计系统，如图1所示，该系统包括：设计稿导入客户端110和设计稿管理服务端120，其中，

所述设计稿导入客户端110，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；

所述设计稿管理服务端120，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；

所述设计稿管理服务端120，还用于根据所述界面设计稿和切片数据，对所述目标画板进行版本管理。

在本申请的一些实施例中，所述计稿导入客户端110可以为安装在Sketch或PhotoShop等界面编辑软件中的插件，也可以为与Sketch或PhotoShop等界面编辑软件类似的界面编辑软件。

在本申请的一些实施例中，所述设计稿导入客户端设置有知识方法库、组件库和素材库，所述设计稿导入客户端110还用于：根据用户的操作从所述组件库选择组件和/或从所述素材库中选择素材，并按照所述知识方法库中的知识方法，通过选择的所述组件和/或素材在目标画板上编辑界面设计稿。所述设计稿导入客户端110提供图形用户界面，通过图形用户界面与设计人员进行交互，基于画板实现界面设计。并且，所述设计稿导入客户端110支持将画板导出为界面设计稿的功能。所述设计稿导入客户端110根据用户的导入操作，将选择的界面设计稿到处为指定格式的设计稿(如JPG格式的图片文件)，并上传到所述设计稿管理服务端120。

在本申请的一些实施例中，所述设计稿管理服务端120进一步用于根据用户的导入操作将目标画板关联的界面设计稿进行切片处理得到所述界面设计稿对应的切片数据；将所述目标画板关联的界面设计稿和所述界面设计稿对应的切片数据上传至所述设计稿管理服务端。例如，所述设计稿导入客户端110在将界面设计稿上传到设计稿管理服务端120的过程中，进一步计算画板中每个切片元素的布局、定位、以及其对应的背景颜色和切片资源等系列信息，将这类信息进行打包生成切片数据，以画板为维度上传至所述设计稿管理服务端120。具体实施时，画板中的每个切片元素对应一个切片元素，具体实施时，所述切片数据包括：切片标识、布局信息(如左对齐、右对齐)、定位、形状、背景颜色、透明度等信息。具体实施时，切片数据可以使用JASON文件存储。导出切片元素的切片数据的具体方法参见现有技术，本申请实施例中不再赘述。

所述设计稿导入客户端110在根据用户的导入操作将目标画板(即选择的画板)中的切片元素导出之后，将导出得到的切片元素的切片数据上传至所述设计稿管理服务端120。

之后，所述设计稿管理服务端120将接收到所述用户上传的与所述目标画板关联的数据，即所述目标画板对应的界面设计稿和所述目标画板中切片元素对应的切片数据。

在本申请的一些实施例中，所述设计稿管理服务端120以画板为最小粒度对于同一用户上传的画板关联的界面设计稿和切片数据进行版本管理。例如，对于同一用户上传的画板关联的数据，根据数据上传的时间确定画板的版本信息。如，首次上传的画板的版本信息可以定义为1.0版本，首次上传时间之后再次上传的该画板的数据的版本信息可以定义为1.1版本。如此，依次上传的所述画板数据，按照上传时间的先后顺序，版本号递增。画板的版本信息也是画板关联的界面设计稿和切片数据的版本信息。之后，以确定的版本信息标识画板的界面设计稿和切片数据，并进行存储。

在本申请的一些实施例中，可以进一步根据不同版本的画板各自关联的界面设计稿和切片数据，确定不同版本的设计稿之间的差异，并对确定的差异进行标注和/或输出。在本申请的另一些实施例中，还可以结合人员组织架构和项目组织架构对画板关联的数据进行查询、评估、测试、设计期限扽等相关的版本管理。

本申请实施例公开的界面设计系统，包括：设计稿导入客户端和设计稿管理服务端，其中，所述设计稿导入客户端，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；所述设计稿管理服务端，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；所述设计稿管理服务端，还用于根据所述界面设计稿和切片数据，对所述目标画板进行版本管理，有助于提升界面设计系统的效率。通过本申请公开的界面设计系统，可以基于设计稿的切片数据对设计稿进行版本管理，例如，基于切片信息进行设计稿版本差异化比对和标注，高效地发现版本差异，并进行画板版本维护，有助于提升界面设计系统的效率。

实施例二

基于实施例一，本实施例公开的一种界面设计系统，如图2所示，所述设计稿管理服务端120进一步包括：版本差异管理模块1201。

所述版本差异管理模块1201，用于将不同版本信息标识的所述目标画板关联的切片数据进行比对，确定存在差异的切片元素；以及，至少在所述不同版本信息标识的一个界面设计稿中对存在差异的切片元素进行标注。其中，将不同版本信息标识的所述目标画板关联的切片数据进行比对，确定存在差异的切片元素，包括：对不同版本信息标识的所述目标画板关联的切片数据中具有相同切片标识的切片元素的设计信息进行比对，确定存在差异的切片元素。

所述设计信息与所述切片元素的类型匹配。在对具有相同切片标识的切片元素的设计信息进行比对时，可以根据设计精度要求预设比对规则，并按照所述比对规则进行比对。例如，对于形状类切片元素，比对的设计信息为定位信息、大小，对于图片类切片元素，比对的设计信息为定位信息、大小和透明度等，对于文本框类的切片元素，比对的设计信息为布局信息。

具体实施时，至少在所述不同版本信息标识的一个界面设计稿中对存在差异的切片元素进行标注包括：对于新增的切片标识，在该新增切片标识所在切片数据对应的界面设计稿中标识新增切片，例如，将新增切片对应的设计元素的背景标注为绿色背景块；对于删除的切片标识，在该删除切片标识所在切片数据对应的界面设计稿中标识删除切片，例如，将删除切片对应的设计元素的背景标注为红色背景块；对于位置不同的切片标识，对该切片标识对应的设计元素标注位置偏移；对于位置相同数据内容不同的切片标识，对该切片标识对应的设计元素进行内容差异标注。

本申请实施例公开的界面设计系统，通过将画板进行切片处理后，基于切片数据对画板进行版本管理，可以实现基于切片数据确定不同版本的画板对应的界面设计稿的差异，并对差异之处进行标注，实现了高效地发现版本差异，便于进行画板版本维护，有助于提升界面设计系统的效率。

实施例三

基于实施例二，本实施例公开的一种界面设计系统，如图3所示，所述设计稿管理服务端120还包括：界面测试模块1202。

所述界面测试模块1202，用于获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，其中，所述待测试界面设计稿关联的链接用于访问所述待测试界面设计稿的相关资源信息；所述界面测试模块1202还用于，获取所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接所显示的产品稿；以及，对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素。在本申请的一些实施例中，所述的链接可以为URL(统一资源定位符)形式。在本申请的另一些实施例中，所述的链接可以为为二维码形式。

在本申请的一些实施例中，所述界面测试模块1202设置有人机交互界面，测试人员可以通过人机交互界面选择待测试界面设计稿，并输入用于测试该待测试界面设计稿的测试环境信息。其中，所述测试环境信息可以为操作测试终端的操作系统类型、版本、测试终端的型号等信息。测试人员还需要通过人机交互界面输入与所述待测试界面设计稿关联的链接。其中，与所述待测试界面设计稿关联的链接用于指示存储所述待测试界面设计稿的相关资源信息的地址，如存储所述待测试界面设计稿对应的图片和/或切片数据的地址。通过执行该连接，可以获取所述待测试界面设计稿对应的图片和/或切片数据。

所述测试人员在输入上述信息之后，将上述信息存储至所述界面测试模块1202的指定位置，便于测试终端访问。

在本申请的一些实施例中，所述测试人员在输入上述信息之后，还可以通过所述界面测试模块1202，根据上述信息，生成测试指令，并将所述测试指令发送至与所述测试环境信息匹配的预设测试终端，由测试终端下载并执行测试软件，显示所述待测试界面设计稿对应的图片。具体实施时，测试软件运行过程中，执行测试指令中包括的链接，以获取所述待测试界面设计稿对应的相关资源信息，如图片或切片数据，并进行显示。

在所述测试终端通过执行所述链接，并完成与所述待测试界面设计稿对应的界面显示之后，所述测试终端通过执行截屏操作获取屏幕上显示的图片，作为与所述待测试界面设计稿对应的产品稿，并将所述产品稿发送至所述界面测试模块1202进行存储。同时，所述测试终端根据所述产品稿在所述界面测试模块1202的存储地址生成测试结束信息，作为对所述测试指令响应信息，发送至所述界面测试模块1202。

在本申请的一些实施例中，所述获取所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接所显示的产品稿的步骤，包括：获取所述测试终端响应于输入与所述待测试界面设计稿关联的链接的操作，所返回的产品稿的存储地址；通过所述存储地址获取所述产品稿；其中，所述产品稿为所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接时所显示的界面的截屏图片。所述界面测试模块1202定期查询测试指令的反馈结果，并获取相应的产品稿。

在获取到针对某一待测试界面设计稿反馈的测试结果之后，所述界面测试模块1202进一步执行待测试界面设计稿和相应产品稿的视觉比对。

在本申请的一些实施例中，所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤，包括：通过图像识别算法对所述待测试界面设计稿和所述产品稿分别进行切片元素分类；对所述待测试界面设计稿的切片元素分类结果和所述产品稿的切片元素分类结果分别进行聚合，分别确定所述待测试界面设计稿中各切片元素对应的图像块和所述产品稿中各切片元素对应的图像块；将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素。

例如，首先通过图像识别算法分别对界面设计稿和产品稿进行局部内容分类，确定界面设计稿和产品稿中包括的：图片、文字、图形等设计元素。之后，针对分类内容进行聚合，相同分类相同属性的设计元素聚合成块。如同一排的文字，如果颜色、字体、字号、字重均相同，则聚合为一个图像块。再例如，一个带小图标和文字的按钮，则划分为三个图像块，分别为：图片、文字、图形。

在本申请的一些实施例中，所述将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素的步骤，包括：将所述产品稿中各切片元素对应的图像块的位置信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定位置差异；和/或，将所述产品稿中各切片元素对应的图像块的图像内容信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定内容差异。

具体实施时，对于产品稿中的每个图像块进行全局位置测量，确定每个图像块距离图片左上角(坐标0,0)的距离，进一步计算出每一个图像块的坐标和该块的宽、高。然后，对界面设计稿和产品稿的图像块坐标位置进行比对，针对界面设计稿内标注的绝对位置信息与产品稿相应图像块的坐标位置进行比对，对于坐标位置存在差异的块，记录产品稿中该块的坐标位置。

在本申请的一些实施例中，在对所述待测试界面设计稿与产品稿基于图像块进行位置差异比对之后，还需要对图像块的内容进行比对。本申请实施例中，切片数据是包括设计元素(即切片元素)的标注信息的。因此，具体实施时，可以通过界面设计稿中设计元素的标注信息对产品稿中相应设计元素计算得到的图片信息进行比对，以确定设计元素的图像内容差异。

具体实施时，对于图像块中包括的不同类型的设计元素，所需比对的图像内容有所不同。例如，对于包括文本框的图像块，计算产品稿中该图像块对应的切片元素的图片大小、形状、边框粗细、边框颜色、阴影大小、阴影颜色等信息，并将计算得到的信息与所述待测试界面设计稿相应设计元素的标注信息进行比对，确定图像块的内容差异。再例如，对于文本框中的文字块，确定产品稿中文字的颜色、字体、字号、字重、字间距等信息，并将确定的信息与所述待测试界面设计稿相应设计元素的标注信息进行比对，确定文字块的内容差异。又例如，对于包括按钮的图像块，计算产品稿中按钮所在图像块的背景颜色、边框粗细、边框颜色、阴影大小、阴影颜色、圆角大小等信息，并将确定的信息与所述待测试界面设计稿相应设计元素的标注信息进行比对，确定按钮的内容差异。

在本申请的一些实施例中，所述对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤之后，还包括：在所述待测试界面设计稿和/或所述产品稿上，对存在差异的切片元素进行标注。

进一步的，为了便于设计人员和/或测试人员准确、及时的发现、定位产品实现或界面设计过程中发现的问题，本申请具体实施时，在确定存在差异的贴片元素之后，在界面设计稿或产品稿上对存在差异的切片元素进行标注，或者，在界面设计稿和产品稿上均对存在差异的切片元素进行标注。具体实施时，对存在差异的切片元素进行标注的方法包括：标注距离差异，如图4中的410所示。对存在差异的切片元素进行标注的方法还包括：圈画存在差异的所述设计元素，如图5中的510所示。具体实施时，还可以通过其他方法对存在差异的切片元素进行标注，本申请实施例例中不再一一例举。

本申请实施例公开的界面设计系统，通过设置界面测试模块，以获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，并在测试终端完成测试之后获取测试终端显示得到的产品稿，然后，通过对待测试界面设计稿和所述产品稿自动进行视觉比对，并对比对结果进行标注，提升了界面设计的测试效率。同时，通过对视觉比对过程中发现的差异之处进行标注，有助于对界面设计或产品实现过程中发现的问题进行追踪，提升界面设计迭代更新的效率。

实施例四

基于实施例二或实施例三，本实施例公开的一种界面设计系统，如图6所示，所述设计稿管理服务端120还包括：设计稿管理模块1203。

所述设计稿管理模块1203，用于对目标画板关联的界面设计稿基于预设维度进行管理，其中，所述预设维度包括以下至少一项：组织管理维度、项目管理维度、设计稿维度。在本申请的一些实施例中，如图6所示，所述设计稿管理模块1203进一步包括：界面标签管理子模块12031、实体组织架构管理子模块12032、项目版本管理子模块12033以及权限管理子模块12034。

其中，所述界面标签管理子模块12031，用于基于设计稿维度对界面设计稿进行管理。例如，根据设计人员的操作对界面设计稿设置标签，并建立所述标签、所述设计人员和所述界面设计稿之间的关联关系。所述标签用于标识并管理所述设计稿当设计人员登陆所述界面设计系统之后，所述设计界面标签管理子模块12031向所述设计人员展示所述设计人员设置标签的界面设计稿，有助于屏蔽冗余信息。

所述实体组织架构管理子模块12032，用于基于组织管理维度对界面设计稿进行管理。例如，根据预设的实体组织架构信息，确定界面设计稿的操作权限。对于设计人员A上传的界面设计稿，所述实体组织架构标明的设计人员A的上级领导具有操作权限。其中，操作权限可以为：查询权限、修改权限等。

所述项目版本管理子模块12033，用于基于项目管理维度对界面设计稿进行管理。例如，对于项目组中的成员，基于项目组的组织架构，可以设置每个成员对界面设计稿的操作权限。

所述权限管理子模块12034，用于设置目标画板关联的界面设计稿的个体操作权限和团队操作权限，以及，设置所述操作权限的类型。

本申请实施例公开的界面设计系统，通过设置设计稿管理模块，以基于组织管理维度、项目管理维度、设计稿维度等维度对目标画板关联的界面设计稿进行管理，例如对界面设计稿的操作权限进行管理，丰富了界面设计系统的功能，有助于提升相关人员之间针对界面设计稿的信息共享，进一步提升界面设计的效率。

实施例五

基于前述任意一个实施例，本实施例公开的一种界面设计系统，所述设计稿管理服务端120还包括:界面显示代码生成模块1204。以基于实施例四公开的界面设计系统实现本实施例举例，本实施例公开的界面设计系统的结构如图7所示。

其中，所述界面显示代码生成模块1204，用于根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码。在本申请的一些实施例中，所述根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码的步骤，包括：获取测试终端的配置信息；根据所述配置信息和所述界面设计稿的切片数据，按照预设的代码生成模版自动生成在所述测试终端的界面显示所述界面设计稿的界面显示代码。

具体实施时，所述界面显示代码生成模块1204通过设置人机交互界面，获取用户输入的测试终端的配置信息，其中，所述配置信息包括：操作系统类型、硬件设备信息等。并根据所述配置信息和所述界面设计稿的切片数据，按照预设的代码生成模版自动生成在所述测试终端上运行的界面显示代码。当所述测试终端运行所述界面显示代码时，将在所述测试终端的屏幕上显示与所述界面设计稿对应的产品稿。

根据所述配置信息和所述界面设计稿的切片数据，生成在所述测试终端上运行的界面显示代码的以技术方案参见现有技术，本实施例中不再赘述。

本实施例公开的界面设计系统，通过设置界面显示代码生成模块，以根据用户输入的配置信息自动生成在指定终端上显示相应界面设计稿的程序代码，减少了产品设计人员手动编码的工作量，可以缩短界面设计到视觉校验的过程时间，有助于提升界面设计的效率。

实施例六

基于本申请实施例中公开的界面设计系统，本实施例公开一种界面设计方法，如图8所示，所述界面设计方法包括步骤810至步骤830。

步骤810，获取根据用户的导入操作确定的目标画板关联的界面设计稿和切片数据。

步骤820，根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储。

步骤830，根据所述界面设计稿和切片数据，对所述目标画板进行版本管理。

可选的，所述根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，进一步包括：

将不同版本信息标识的所述目标画板关联的切片数据进行比对，确定存在差异的切片元素；

至少在所述不同版本信息标识的一个界面设计稿中对存在差异的切片元素进行标注。

本申请实施例公开的界面设计方法，通过获取根据用户的导入操作确定的目标画板关联的界面设计稿和切片数据；然后，根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储，并根据所述界面设计稿和切片数据，对所述目标画板进行版本管理，有助于提升界面设计系统的效率。通过本申请公开的界面设计方法，本申请实施例公开的界面设计方法，通过将画板进行切片处理后，基于切片数据对画板进行版本管理，可以实现基于切片数据确定不同版本的画板对应的界面设计稿的差异，并对差异之处进行标注，实现了高效地发现版本差异，便于进行画板版本维护，有助于提升界面设计系统的效率。

在本申请的一些实施例中，根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，还包括：

获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，其中，与所述待测试界面设计稿关联的链接用于访问所述待测试界面设计稿的相关资源信息；以及，

获取所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接所显示的产品稿；以及，对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素。

进一步可选的，所述获取所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接所显示的产品稿的步骤，包括：

获取所述测试终端响应于输入与所述待测试界面设计稿关联的链接的操作，所返回的产品稿的存储地址；

通过所述存储地址获取所述产品稿；

其中，所述产品稿为所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接时所显示的界面的截屏图片。

进一步可选的，所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤，包括：

通过图像识别算法对所述待测试界面设计稿和所述产品稿分别进行切片元素分类；

对所述待测试界面设计稿的切片元素分类结果和所述产品稿的切片元素分类结果分别进行聚合，分别确定所述待测试界面设计稿中各切片元素对应的图像块和所述产品稿中各切片元素对应的图像块；

将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素。

进一步可选的，所述将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素的步骤，包括：

将所述产品稿中各切片元素对应的图像块的位置信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定位置差异；和/或，

将所述产品稿中各切片元素对应的图像块的图像内容信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定内容差异。

可选的，所述对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤之后，还包括：

在所述待测试界面设计稿和/或所述产品稿上，对存在差异的切片元素进行标注。

通过获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，并在测试终端完成测试之后获取测试终端显示得到的产品稿，然后，对待测试界面设计稿和所述产品稿自动进行视觉比对，并对比对结果进行标注，提升了界面设计的测试效率。同时，通过对视觉比对过程中发现的差异之处进行标注，有助于对界面设计或产品实现过程中发现的问题进行追踪，提升界面设计迭代更新的效率。

在本申请的另一些实施例中，所述根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，还包括：

对目标画板关联的界面设计稿基于预设维度进行管理，其中，所述预设维度包括以下至少一项：组织管理维度、项目管理维度、设计稿维度。

通过基于组织管理维度、项目管理维度、设计稿维度等维度对目标画板关联的界面设计稿进行管理，例如对界面设计稿的操作权限进行管理，丰富了界面设计系统的功能，有助于提升相关人员之间针对界面设计稿的信息共享，进一步提升界面设计的效率。

在本申请的另一些实施例中，所述根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，还包括：

根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码。

进一步可选的，所述根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码的步骤，包括：获取测试终端的配置信息；根据所述配置信息和所述界面设计稿的切片数据，按照预设的代码生成模版自动生成在所述测试终端的界面显示所述界面设计稿的界面显示代码。

进一步可选的，所述界面设计稿为根据用户的操作从所述组件库选择组件和/或从所述素材库中选择素材，并按照所述知识方法库中的知识方法，通过选择的所述组件和/或素材在目标画板上编辑界面设计稿。

通过以根据用户输入的配置信息自动生成在指定终端上显示相应界面设计稿的程序代码，减少了产品设计人员手动编码的工作量，可以缩短界面设计到视觉校验的过程时间，有助于提升界面设计的效率。

本申请实施例公开的界面设计方法基于本申请实施例一至实施例五中任意一个实施例所述的界面设计系统而实施，所述界面设计方法的个步骤的具体实施方式参见所述界面设计系统的各模块的具体实施方式，本实施例中不再赘述。

本申请还公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例六所述的界面设计方法的步骤。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本申请提供的一种界面设计系统及方法进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

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

Claims (14)

1.一种界面设计系统，其特征在于，包括：设计稿导入客户端和设计稿管理服务端，其中，

所述设计稿导入客户端，用于根据用户的导入操作将目标画板关联的界面设计稿和切片数据上传至所述设计稿管理服务端；

所述设计稿管理服务端，用于根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；

所述设计稿管理服务端，还用于根据所述界面设计稿和切片数据，对所述目标画板进行版本管理；

所述设计稿管理服务端，包括：

界面测试模块，用于获取测试终端在通过预设程序运行与待测试界面设计稿关联的链接所显示的产品稿；以及，对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素；

其中，所述对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤，包括：

通过图像识别算法对所述待测试界面设计稿和所述产品稿分别进行切片元素分类；

对所述待测试界面设计稿的切片元素分类结果和所述产品稿的切片元素分类结果分别进行聚合，分别确定所述待测试界面设计稿中各切片元素对应的图像块和所述产品稿中各切片元素对应的图像块；

将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素。

2.根据权利要求1所述的系统，其特征在于，所述设计稿管理服务端进一步包括：

版本差异管理模块，用于将不同版本信息标识的所述目标画板关联的切片数据进行比对，确定存在差异的切片元素；以及，

至少在所述不同版本信息标识的一个界面设计稿中对存在差异的切片元素进行标注。

3.根据权利要求1或2所述的系统，其特征在于，所述设计稿管理服务端进一步还包括：

界面测试模块，用于获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，其中，与所述待测试界面设计稿关联的链接用于访问所述待测试界面设计稿的相关资源信息。

4.根据权利要求3所述的系统，其特征在于，所述获取所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接所显示的产品稿的步骤，包括：

获取所述测试终端响应于输入与所述待测试界面设计稿关联的链接的操作，所返回的产品稿的存储地址；

通过所述存储地址获取所述产品稿；

其中，所述产品稿为所述测试终端在通过预设程序运行与所述待测试界面设计稿关联的链接时所显示的界面的截屏图片。

5.根据权利要求1所述的系统，其特征在于，所述将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素的步骤，包括：

将所述产品稿中各切片元素对应的图像块的位置信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定位置差异；和/或，

将所述产品稿中各切片元素对应的图像块的图像内容信息，与所述待测试界面设计稿中与相应切片元素的切片信息进行比对，确定内容差异。

6.根据权利要求3所述的系统，其特征在于，所述对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤之后，还包括：

在所述待测试界面设计稿和/或所述产品稿上，对存在差异的切片元素进行标注。

7.根据权利要求3所述的系统，其特征在于，所述设计稿管理服务端进一步还包括：

设计稿管理模块，用于对目标画板关联的界面设计稿基于预设维度进行管理，其中，所述预设维度包括以下至少一项：组织管理维度、项目管理维度、设计稿维度。

8.根据权利要求3所述的系统，其特征在于，所述设计稿管理服务端进一步还包括：

界面显示代码生成模块，用于根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码。

9.根据权利要求8所述的系统，其特征在于，所述根据所述界面设计稿的所述切片数据生成测试终端运行的所述界面显示代码的步骤，包括：

获取测试终端的配置信息；

根据所述配置信息和所述界面设计稿的切片数据，按照预设的代码生成模版自动生成在所述测试终端的界面显示所述界面设计稿的界面显示代码。

10.根据权利要求1或2所述的系统，其特征在于，所述设计稿导入客户端设置有知识方法库、组件库和素材库，所述设计稿导入客户端还用于：

根据用户的操作从所述组件库选择组件和/或从所述素材库中选择素材，并按照所述知识方法库中的知识方法，通过选择的所述组件和/或素材在目标画板上编辑界面设计稿。

11.一种界面设计方法，其特征在于，包括：

获取根据用户的导入操作确定的目标画板关联的界面设计稿和切片数据；

根据所述导入操作的时间确定所述目标画板的版本信息，并以所述版本信息对所述目标画板及目标画板关联的界面设计稿和切片数据进行标识并存储；

根据所述界面设计稿和切片数据，对所述目标画板进行版本管理；

所述根据所述界面设计稿和切片数据，对所述目标画板进行版本管理，包括：

获取测试终端在通过预设程序运行与待测试界面设计稿关联的链接所显示的产品稿；以及，对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素；

其中，所述对所述待测试界面设计稿和所述产品稿进行视觉比对，确定存在差异的切片元素的步骤，包括：

通过图像识别算法对所述待测试界面设计稿和所述产品稿分别进行切片元素分类；

对所述待测试界面设计稿的切片元素分类结果和所述产品稿的切片元素分类结果分别进行聚合，分别确定所述待测试界面设计稿中各切片元素对应的图像块和所述产品稿中各切片元素对应的图像块；

将所述产品稿中各切片元素对应的图像块，与所述待测试界面设计稿中与其对应的切片元素进行视觉比对，确定存在差异的切片元素。

12.根据权利要求11所述的方法，其特征在于，所述根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，进一步包括：

将不同版本信息标识的所述目标画板关联的切片数据进行比对，确定存在差异的切片元素；

至少在所述不同版本信息标识的一个界面设计稿中对存在差异的切片元素进行标注。

13.根据权利要求11或12所述的方法，其特征在于，根据所述界面设计稿和切片数据，对所述目标画板进行版本管理的步骤，还包括：

获取待测试界面设计稿的测试环境信息和与所述待测试界面设计稿关联的链接，并将所述链接输出至与所述测试环境信息匹配的测试终端，其中，与所述待测试界面设计稿关联的链接用于访问所述待测试界面设计稿的相关资源信息。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求11至13任意一项所述的界面设计方法的步骤。

Images