CN116795346B - 基于视觉对比的组件界面绘制方法和系统 - Google Patents

Abstract

本发明提供基于视觉对比的组件界面绘制方法和系统，基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载。

Description

基于视觉对比的组件界面绘制方法和系统

技术领域

本发明涉及计算机界面的技术领域，特别涉及基于视觉对比的组件界面绘制方法和系统。

背景技术

应用程序在运行过程中会在终端形成相应的界面，界面上布局有多种功能组件，用户通过对界面上的功能组件进行操作能够控制应用程序的工作状态。在同一终端安装有不同类型的应用程序，若所有应用程序在终端上形成的界面存在视觉相似性，会导致用户对不同应用程序操作过程中产生视觉混乱，影响应用程序的操作可靠性和界面识别度。为了保证不同应用程序的界面之间在界面组件布局的独特性，需要对界面组件进行有目的的视觉区分化绘制。

发明内容

针对现有技术存在的缺陷，本发明提供了基于视觉对比的组件界面绘制方法和系统，基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。

本发明提供基于视觉对比的组件界面绘制方法，包括如下步骤：

步骤S1，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形；

步骤S2，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

步骤S3，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；

步骤S4，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端。

在本申请公开的一个实施例中，在所述步骤S1中，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形，包括：

从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；

基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素，再对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

在本申请公开的一个实施例中，在所述步骤S2中，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。

在本申请公开的一个实施例中，在所述步骤S3中，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

在本申请公开的一个实施例中，在所述步骤S4中，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述用户端。

本发明还提供基于视觉对比的组件界面绘制系统，包括：

组件图形元素获取模块，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；

组件图形生成模块，基于所述若干组件图形元素，形成若干组件图形；

组件图形选择模块，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

组件界面布局调整模块，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；

组件界面视觉差异确定模块，对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；

组件图形视觉调整模块，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；

界面数据生成与发送模块，基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端。

在本申请公开的一个实施例中，组件图形元素获取模块基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素，包括：

从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；

基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素；

组件图形生成模块基于所述若干组件图形元素，形成若干组件图形，包括：

对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

在本申请公开的一个实施例中，组件图形选择模块将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。

在本申请公开的一个实施例中，组件界面布局调整模块基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

组件界面视觉差异确定模块对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：

对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

在本申请公开的一个实施例中，组件图形视觉调整模块基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

界面数据生成与发送模块基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端，包括：

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述用户端。

相比于现有技术，该基于视觉对比的组件界面绘制方法和系统基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。

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

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

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

图1为本发明提供的基于视觉对比的组件界面绘制方法的流程示意图。

图2为本发明提供的基于视觉对比的组件界面绘制系统的框架示意图。

具体实施方式

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

参阅图1，为本发明实施例提供的基于视觉对比的组件界面绘制方法的流程示意图。该基于视觉对比的组件界面绘制方法包括：

步骤S1，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于若干组件图形元素，形成若干组件图形；

步骤S2，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

步骤S3，基于组件界面的组件布局信息，对选择的组件图形进行布局调整；对组件界面进行视觉识别，确定组件界面存在的组件图形相互之间以及组件图形与组件界面的背景图层之间的视觉差异信息；

步骤S4，基于视觉差异信息，对组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自用户端的界面调用请求，将匹配的界面数据文件发送至用户端。

上述技术方案的有益效果为：该基于视觉对比的组件界面绘制方法基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。

优选地，在步骤S1中，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于若干组件图形元素，形成若干组件图形，包括：

从来自用户端的组件图形构建指令中提取用户端的用户身份信息，将用户身份信息与预设身份信息名单进行对比，判断用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到安全用户端需要构建的组件图形类型和视觉特征；

基于组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素，再对若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

上述技术方案的有益效果为：用户所持的智能手机或便携式计算机等终端需要构建关于应用程序的界面时，先向服务端发送组件图形构建指令，以此构建布局在界面执行相应操作功能的组件图形。先从组件图形构建指令中提取用户端的用户身份信息，将用户身份信息与预设身份信息名单进行对比，若用户身份信息存在与预设身份信息名单，则确定用户端属于安全用户端。此时，再对来自安全用户端的组件图形构建指令进行解析处理，得到安全用户端需要构建的组件图形类型和视觉特征；其中，该组件图形类型可为但不限于是组件图形对应适用的界面操作功能类型，该组件图形视觉特征可为但不限于是组件图形的形状轮廓和色度特征。再以组件图形类型和视觉特征为基准，对组件图形元素库进行查找，获取相应匹配的若干组件图形元素。该组件图形元素库可包括对应不同组件图形类型和视觉特征的组件图形元素。再将查找的若干组件图形元素以不同相对位置关系方式进行拼接组合，从而形成若干组件图形，这样能够提高组件图形的视觉多样性和丰富性。

优选地，在步骤S2中，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与历史组件图形进行视觉对比，得到每个组件图形与历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从若干组件图形中选择与历史组件图形具有最小视觉相似度的组件图形。

上述技术方案的有益效果为：在实际操作中，确定用户端当前执行的组件界面绘制任务对应的组件界面中组件的布局数量和相对位置作为属性信息，从历史组件图形库中筛选用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形，利用筛选的历史组件图形作为基准，将上述组合形成的组件图形与历史组件图形进行关于图形形状轮廓和图形色度分布的视觉对比，确定两者在图形形状轮廓和图形色度分布上的视觉相似度，再选择具有最小视觉相似度的组件图形，从而避免后续绘制的界面中组件图形与历史组件图形之间存在较大的视觉混淆性。

优选地，在步骤S3中，基于组件界面的组件布局信息，对选择的组件图形进行布局调整；对组件界面进行视觉识别，确定组件界面存在的组件图形相互之间以及组件图形与组件界面的背景图层之间的视觉差异信息，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

对组件界面的全范围进行视觉识别，得到组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

上述技术方案的有益效果为：获取组件界面的整个界面区域中需要布置组件图形对应的位置以及整个界面区域中需要布置组件图形的不同位置点的相对距离，以此作为组件界面的组件布局位置和组件布局相对距离信息，再在组件界面对所有选择的组件图形分别进行布局位置和图形尺寸缩放的调整，使得选择的组件图形准确布局在组件界面对应的位置点上，以及保证组件界面上相邻的组件图形的距离过近而无法准确进行不同组件图形的视觉区分。再对组件界面的全范围进行视觉识别，得到组件界面存在的每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，以及每个组件图形与其所在组件界面区域的背景图层之间的背景图层之间的色度差异，从而对组件界面的不同组件图形之间和组件图形与背景图层之间进行视觉差异的量化识别，便于后续对组件界面的组件图形和背景图层进行有针对性的视觉调整，提高组件界面的视觉可辨识度。

优选地，在步骤S4中，基于视觉差异信息，对组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自用户端的界面调用请求，将匹配的界面数据文件发送至用户端，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对界面数据文件进行加密打包处理，得到界面数据文件包；基于来自用户端的界面调用请求，选择匹配的界面数据文件包并发送至用户端。

上述技术方案的有益效果为：基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度，比如改变每个组件图形和/或其邻近的其他组件图形的图形轮廓和/或图形色度，使得不同组件图形之间在图形轮廓和/或图形色度上存在足够大的视觉区分度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度，比如改变每个组件图形和/或其对应的背景图层的色度，使得组件图形与其对应的背景图层之间在色度上存在足够大的视觉区分度。此外，还对完成绘制的组件界面进行界面代码数据的提取，得到相应的界面数据文件包，当用户端接收到界面数据文件包后进行数据解密和加载处理，能够在用户端形成相应的组件界面。

参阅图2，为本发明实施例提供的基于视觉对比的组件界面绘制系统的框架示意图。该基于视觉对比的组件界面绘制系统包括：

组件图形元素获取模块，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；

组件图形生成模块，基于若干组件图形元素，形成若干组件图形；

组件图形选择模块，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

组件界面布局调整模块，基于组件界面的组件布局信息，对选择的组件图形进行布局调整；

组件界面视觉差异确定模块，对组件界面进行视觉识别，确定组件界面存在的组件图形相互之间以及组件图形与组件界面的背景图层之间的视觉差异信息；

组件图形视觉调整模块，基于视觉差异信息，对组件界面存在的组件图形进行视觉参数调整；界面数据生成与发送模块，基于完成绘制的组件界面，生成界面数据文件；再基于来自用户端的界面调用请求，将匹配的界面数据文件发送至用户端。

上述技术方案的有益效果为：该基于视觉对比的组件界面绘制系统基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。

优选地，组件图形元素获取模块基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素，包括：

从来自用户端的组件图形构建指令中提取用户端的用户身份信息，将用户身份信息与预设身份信息名单进行对比，判断用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到安全用户端需要构建的组件图形类型和视觉特征；

基于组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素；

组件图形生成模块基于若干组件图形元素，形成若干组件图形，包括：

对若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

上述技术方案的有益效果为：用户所持的智能手机或便携式计算机等终端需要构建关于应用程序的界面时，先向服务端发送组件图形构建指令，以此构建布局在界面执行相应操作功能的组件图形。先从组件图形构建指令中提取用户端的用户身份信息，将用户身份信息与预设身份信息名单进行对比，若用户身份信息存在与预设身份信息名单，则确定用户端属于安全用户端。此时，再对来自安全用户端的组件图形构建指令进行解析处理，得到安全用户端需要构建的组件图形类型和视觉特征；其中，该组件图形类型可为但不限于是组件图形对应适用的界面操作功能类型，该组件图形视觉特征可为但不限于是组件图形的形状轮廓和色度特征。再以组件图形类型和视觉特征为基准，对组件图形元素库进行查找，获取相应匹配的若干组件图形元素。该组件图形元素库可包括对应不同组件图形类型和视觉特征的组件图形元素。再将查找的若干组件图形元素以不同相对位置关系方式进行拼接组合，从而形成若干组件图形，这样能够提高组件图形的视觉多样性和丰富性。

优选地，组件图形选择模块将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与历史组件图形进行视觉对比，得到每个组件图形与历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从若干组件图形中选择与历史组件图形具有最小视觉相似度的组件图形。

上述技术方案的有益效果为：在实际操作中，确定用户端当前执行的组件界面绘制任务对应的组件界面中组件的布局数量和相对位置作为属性信息，从历史组件图形库中筛选用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形，利用筛选的历史组件图形作为基准，将上述组合形成的组件图形与历史组件图形进行关于图形形状轮廓和图形色度分布的视觉对比，确定两者在图形形状轮廓和图形色度分布上的视觉相似度，再选择具有最小视觉相似度的组件图形，从而避免后续绘制的界面中组件图形与历史组件图形之间存在较大的视觉混淆性。

优选地，组件界面布局调整模块基于组件界面的组件布局信息，对选择的组件图形进行布局调整，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

组件界面视觉差异确定模块对组件界面进行视觉识别，确定组件界面存在的组件图形相互之间以及组件图形与组件界面的背景图层之间的视觉差异信息，包括：

对组件界面的全范围进行视觉识别，得到组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

上述技术方案的有益效果为：获取组件界面的整个界面区域中需要布置组件图形对应的位置以及整个界面区域中需要布置组件图形的不同位置点的相对距离，以此作为组件界面的组件布局位置和组件布局相对距离信息，再在组件界面对所有选择的组件图形分别进行布局位置和图形尺寸缩放的调整，使得选择的组件图形准确布局在组件界面对应的位置点上，以及保证组件界面上相邻的组件图形的距离过近而无法准确进行不同组件图形的视觉区分。再对组件界面的全范围进行视觉识别，得到组件界面存在的每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，以及每个组件图形与其所在组件界面区域的背景图层之间的背景图层之间的色度差异，从而对组件界面的不同组件图形之间和组件图形与背景图层之间进行视觉差异的量化识别，便于后续对组件界面的组件图形和背景图层进行有针对性的视觉调整，提高组件界面的视觉可辨识度。

优选地，组件图形视觉调整模块基于视觉差异信息，对组件界面存在的组件图形进行视觉参数调整，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

界面数据生成与发送模块基于完成绘制的组件界面，生成界面数据文件；再基于来自用户端的界面调用请求，将匹配的界面数据文件发送至用户端，包括：

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对界面数据文件进行加密打包处理，得到界面数据文件包；基于来自用户端的界面调用请求，选择匹配的界面数据文件包并发送至用户端。

上述技术方案的有益效果为：基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度，比如改变每个组件图形和/或其邻近的其他组件图形的图形轮廓和/或图形色度，使得不同组件图形之间在图形轮廓和/或图形色度上存在足够大的视觉区分度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度，比如改变每个组件图形和/或其对应的背景图层的色度，使得组件图形与其对应的背景图层之间在色度上存在足够大的视觉区分度。此外，还对完成绘制的组件界面进行界面代码数据的提取，得到相应的界面数据文件包，当用户端接收到界面数据文件包后进行数据解密和加载处理，能够在用户端形成相应的组件界面。

从上述实施例的内容可知，该基于视觉对比的组件界面绘制方法和系统基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至用户端，便于用户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。

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

Claims (10)

1.基于视觉对比的组件界面绘制方法，其特征在于，其包括如下步骤：

步骤S1，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形；

步骤S2，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

步骤S3，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；

步骤S4，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端。

2.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：

在所述步骤S1中，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形，包括：

从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；

基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素，再对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

3.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：

在所述步骤S2中，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。

4.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：

在所述步骤S3中，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

5.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：

在所述步骤S4中，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述用户端。

6.基于视觉对比的组件界面绘制系统，其特征在于，包括：

组件图形元素获取模块，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；

组件图形生成模块，基于所述若干组件图形元素，形成若干组件图形；

组件图形选择模块，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；

组件界面布局调整模块，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；

组件界面视觉差异确定模块，对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；

组件图形视觉调整模块，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；

界面数据生成与发送模块，基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端。

7.如权利要求6所述的基于视觉对比的组件界面绘制系统，其特征在于：

组件图形元素获取模块基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素，包括：

从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；

对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；

基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素；

组件图形生成模块基于所述若干组件图形元素，形成若干组件图形，包括：

对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。

8.如权利要求6所述的基于视觉对比的组件界面绘制系统，其特征在于：

组件图形选择模块将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：

基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；

将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。

9.如权利要求6所述的基于视觉对比的组件界面绘制系统，其特征在于：

组件界面布局调整模块基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整，包括：

基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；

组件界面视觉差异确定模块对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：

对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。

10.如权利要求6所述的基于视觉对比的组件界面绘制系统，其特征在于：

组件图形视觉调整模块基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整，包括：

基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；

界面数据生成与发送模块基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述用户端，包括：

对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述用户端。