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

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

【技术实现步骤摘要】
基于视觉对比的组件界面绘制方法和系统


[0001]本专利技术涉及计算机界面的
，特别涉及基于视觉对比的组件界面绘制方法和系统。

技术介绍

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

技术实现思路

[0003]针对现有技术存在的缺陷，本专利技术提供了基于视觉对比的组件界面绘制方法和系统，基于用户端的组件图形构建指令，获取若干组件图形元素，以此形成若干组件图形，实现组件图形的多样化形成；将每个组件图形与历史组件图形进行视觉对比，从中选择与历史组件图形具有最小视觉相似度的组件图形，避免组件图形与历史形成的组件图形高度相似，从组件图形层面上降低界面的视觉相似性；在组件界面上将选择的组件图形进行布局调整，并获取组件界面上关于组件图形和背景图层的视觉差异信息，以此进行视觉参数调整，对组件界面内部不同界面元素进行视觉区分化处理，提高组件界面整体的视觉可识别性；再将组件界面对应的界面数据文件返回至客户端，便于客户端进行有效的界面加载，提高组件界面的使用便捷性和可靠性。
[0004]本专利技术提供基于视觉对比的组件界面绘制方法，包括如下步骤：步骤S1，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形；步骤S2，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；步骤S3，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；步骤S4，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述客户端。
[0005]在本申请公开的一个实施例中，在所述步骤S1中，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形，包括：
从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素，再对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。
[0006]在本申请公开的一个实施例中，在所述步骤S2中，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。
[0007]在本申请公开的一个实施例中，在所述步骤S3中，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括每个组件图形与其对应的背景图层之间的色度差异。
[0008]在本申请公开的一个实施例中，在所述步骤S4中，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述客户端，包括：基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述客户端。
[0009]本专利技术还提供基于视觉对比的组件界面绘制系统，包括：组件图形元素获取模块，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；
组件图形生成模块，基于所述若干组件图形元素，形成若干组件图形；组件图形选择模块，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；组件界面布局调整模块，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；组件界面视觉差异确定模块，对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；组件图形视觉调整模块，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；界面数据生成与发送模块，基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述客户端。
[0010]在本申请公开的一个实施例中，组件图形元素获取模块基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素，包括：从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素；组件图形生成模块基于所述若干组件图形元素，形成若干组件图形，包括：对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于视觉对比的组件界面绘制方法，其特征在于，其包括如下步骤：步骤S1，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形；步骤S2，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形；步骤S3，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息；步骤S4，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述客户端。2.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：在所述步骤S1中，基于来自用户端的组件图形构建指令，获取相匹配的若干组件图形元素；基于所述若干组件图形元素，形成若干组件图形，包括：从来自用户端的组件图形构建指令中提取所述用户端的用户身份信息，将所述用户身份信息与预设身份信息名单进行对比，判断所述用户端是否属于安全用户端；对来自安全用户端的组件图形构建指令进行解析处理，得到所述安全用户端需要构建的组件图形类型和视觉特征；基于所述组件图形类型和视觉特征，对组件图形元素库进行匹配查找，获取相匹配的若干组件图形元素，再对所述若干组件图形元素进行不同相对位置关系的组合，从而形成若干组件图形。3.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：在所述步骤S2中，将每个组件图形与历史组件图形库包含的历史组件图形进行视觉对比，从所述若干组件图形中选择与历史组件图形库具有最小视觉相似度的组件图形，包括：基于所述用户端当前执行的组件界面绘制任务属性信息，从历史组件图形库中筛选所述用户端最近一次执行相同属性的组件界面绘制任务形成的历史组件图形；将每个组件图形与所述历史组件图形进行视觉对比，得到每个组件图形与所述历史组件图形之间关于图形形状轮廓和图形色度分布的视觉相似度；在从所述若干组件图形中选择与所述历史组件图形具有最小视觉相似度的组件图形。4.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：在所述步骤S3中，基于组件界面的组件布局信息，对所述选择的组件图形进行布局调整；对所述组件界面进行视觉识别，确定所述组件界面存在的组件图形相互之间以及组件图形与所述组件界面的背景图层之间的视觉差异信息，包括：基于组件界面的组件布局位置和组件布局相对距离信息，在所述组件界面对所有选择的组件图形分别进行布局位置和图形尺寸的调整；对所述组件界面的全范围进行视觉识别，得到所述组件界面存在的每个组件图形与其邻近的其他组件图形之间的第一视觉差异信息，以及每个组件图形与其所在组件界面区域的背景图层之间的第二视觉差异信息；其中，所述第一视觉差异信息包括每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异；所述第二视觉差异信息包括
每个组件图形与其对应的背景图层之间的色度差异。5.如权利要求1所述的基于视觉对比的组件界面绘制方法，其特征在于：在所述步骤S4中，基于所述视觉差异信息，对所述组件界面存在的组件图形进行视觉参数调整；基于完成绘制的组件界面，生成界面数据文件；再基于来自所述用户端的界面调用请求，将匹配的界面数据文件发送至所述客户端，包括：基于每个组件图形与其邻近的其他组件图形之间的图形轮廓差异和图形色度差异，调整相应组件图形的图形轮廓和/或图形色度；基于每个组件图形与其对应的背景图层之间的色度差异，调整相应组件图形和/或背景图层的色度；对完成绘制的组件界面进行界面代码数据提取，生成相应的界面数据文件；对所述界面数据文件进行加密打包处理，得到界面数据文件包；基于来自所述用户端的界面调用请求，选择匹配的界面数据文件包并发送至所述客户端。6.基于视觉对比的组件界面绘制系统，其特征在于，包括：组件图形元素获取模块，基于来自用户端的组件图形...

【专利技术属性】
技术研发人员：蔡万苍，樊骥，谢成勇，李牧，朱谨颋，李云鹏，
申请(专利权)人：成都中科合迅科技有限公司，
类型：发明
国别省市：