CN112527292A

CN112527292A - 一种基于界面自动生成的方法、存储介质及***

Info

Publication number: CN112527292A
Application number: CN202011419301.XA
Authority: CN
Inventors: 魏阳阳; 杜凯
Original assignee: Jianghan University
Current assignee: Jianghan University
Priority date: 2020-12-07
Filing date: 2020-12-07
Publication date: 2021-03-19

Abstract

本发明涉及一种基于界面自动生成的方法，其包括步骤获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性；对获取的元素进行类别识别，验证该元素的用途；根据元素的类别及元素属性生成描述文件；根据描述文件生成用户界面的代码。本发明还提供一种存储介质及基于界面自动生成的***，本发明提供的基于界面自动生成的方法、存储介质及***可减少重复性操作，降低了代码工作量，提高了效率，增加了用户体验性，且可根据客户的需求创建定制化的界面。

Description

一种基于界面自动生成的方法、存储介质及***

技术领域

本发明涉及界面设计领域，尤其涉及一种基于界面自动生成的方法、存储介质及***。

背景技术

软件界面也称作UI(User Interface)，是人机交互重要部分，也是软件使用的第一印象，是软件设计的重要组成部分。软件界面设计越来越被软件设计重视，所谓的用户体验大部分就是指软件界面的设计。界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计，软件框架设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计，安装过程设计，包装及商品化。UI(User Interface)即用户界面，也称人机接口。是指用户和某些***进行交互方法的集合，这些***不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等。User interface也可以称之为用户接口或人机接口，是***和用户之间进行交互和信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换。它是介于使用者与硬件而设计彼此之间互动沟通相关软件，目的在使得使用者能够方便有效率地去操作硬件以达成双向之互动，完成所希望借助硬件完成之工作。用户接口定义广泛，包含了人机交互与图形使用者接口，凡参与人类与机械的信息交流的领域都存在着用户接口。

现有技术下，一般软件都是由界面开发者事先设计好，然后后台开发人员根据设计好的界面去编辑代码。

但是，这种方式的交互存在以下的不足：灵活性差，如果软件前期设计不够完善，后续则需要对界面进行手工修改，造成界面布局和后台的代码都需要修改。这种重复性操作，造成了代码工作量大，且效率也不高；用户体验性不好，呈现在用户面前的界面都是事先写死的界面，不能根据客户的需求创建定制化的界面，必须通过开发人员的协助；当软件进行更新时，如果有涉及到界面部分则需要重新绘制界面，且需要重新编码，而不能继承沿用以前的代码，造成了资源的极大浪费。

发明内容

有鉴于此，本发明提供一种基于界面自动生成的方法、存储介质及***解决传统界面灵活性差、重复工作量大的问题。

为了达到上述目的，本发明解决技术问题的技术方案是提供一种基于界面自动生成的方法，其包括步骤：获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性；对获取的元素进行类别识别，验证该元素的用途；根据元素的类别及元素属性生成描述文件；根据描述文件生成用户界面的代码。

进一步，所述获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性包括步骤：获取用户界面设计图；对获取到的用户界面设计图进行预处理；提取预处理后的用户界面设计图上的元素及元素属性。

进一步，所述对获取的元素进行类别识别，验证该元素的用途包括步骤：收集大量不同类型的设计图并形成图库；使用SIFT算法进行图库中的图片识别，并获取图片的元素及元素属性；选取图库中与获取的用户界面设计图相似度最高的一类来验证并定义元素的类别。

进一步，所述根据描述文件生成用户界面的代码包括步骤：解析描述文件得到用户界面设计图中所采用的每个元素和每个元素属性；根据解析结果生成代码。

进一步，所述元素为用户界面各个元素的排版、布局等信息的设计图，用户界面的元素可以包括容器、菜单栏、滚动条、按钮、列表、文本框、图标等控件，所述元素的属性包括大小、颜色、形状、所处的位置信息。

进一步，所述描述文件为按照某一预设规则存储所获取的每个元素和每个元素的属性的文件。

本发明还提供一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行基于界面自动生成的方法。

本发明还提供一种基于界面自动生成的***，其包括处理器和存储器,所述存储器上存储有计算机程序，所述计算机程序被所述处理器执行时，实现基于界面自动生成的方法。

与现有技术相比，本发明所提供的基于界面自动生成的方法、存储介质及***具有以下有益效果：

通过本发明的方法，实现了灵活性高，在软件前期设计不够完善的情况下，后续无需对界面进行手工修改。减少重复性操作，降低了代码工作量，提高了效率，增加了用户体验性，且可根据客户的需求创建定制化的界面。当软件进行更新时，如果有涉及到界面部分则需要重新绘制界面，可自动生成代码，而无需要重新编码，节约了资源。

以上所述本发明的具体实施方式，并不构成对本发明保护范围的限定。任何根据本发明的技术构思所做出的各种其他相应的改变与变形，均应包含在本发明的保护范围内。

附图说明

图1为本发明第一实施例提供的一种基于界面自动生成的方法的步骤流程示意图；

图2为图1中步骤S1的子步骤流程图；

图3为图1中步骤S2的子步骤流程图；

图4为图1中步骤S4的子步骤流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，本发明提供的一种基于界面自动生成的方法，其包括步骤：

S1，获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性；

具体的，对设计图进行预处理，可以通过锐化，去噪等手段都可以使画质得到增强，防止了噪声等图片的干扰因素在实际操作中使用识别算法和切割算法造成的不精确的结果，极大地提升后续切割图像和识别图像的精确度。在对图像进行预处理后，可以更好的获取设计图中的所有元素及每个元素对应的属性。

可以理解，设计图的元素可以是用户界面各个元素的排版、布局等信息的设计图，用户界面的元素可以包括容器、菜单栏、滚动条、按钮、列表、文本框、图标等控件，上述元素的属性可以包括大小、颜色、形状、所处的位置信息等。

S2，对获取的元素进行类别识别，验证该元素的用途；

具体的，在获取到设计图中的元素及元素属性后，其实际用途并不能够直接得到，如提取到的元素实际为按钮，该提取的只是一个初步判断，还需要对其到底是否为按钮进行验证。

在本实施例中，通过搜集大量现有的不同类型的设计图，建立一个设计图的图库，然后使用SIFT算法进行图库中的图片识别获取图片的元素及元素属性。即，使用图库内对应类型的设计图，找到相似度最高的一类，用来定义步骤S1中提取的每个元素的类别，结合提取时的初步判断及验证过程，确定该元素真实的类别。

可以理解，当验证结果与提取的结果一致时，则确定该元素为提取时认定的元素类别，而当验证结果与提取时认定的元素类别不一致时，以验证时确定的类别为准。

S3，根据元素的类别及元素属性生成描述文件；

具体的，利用提取到的每个元素、元素属性及类别生成描述文件，描述文件可以是按照某一预设规则存储所获取的每个元素和每个元素的属性的文件，例如，描述文件可以是基于用户界面的设计图中所采用的每个元素和每个元素的属性所创建的树形数据结构文件、XML(Extensible Markup Language，可扩展标记语言)文件等。可以理解的是，描述文件中可以通过唯一标识分别标识每个元素。

S4，根据描述文件生成用户界面的代码；

具体的，生成获取每个元素类别及元素属性的描述文件后，即获得了每个元素的元素属性、元素类别及所有元素的排列，从而可直接根据得到的信息转换成对应的代码。

可以理解，转换代码可以是根据人工解析上述描述文件得到用户界面的设计图中所采用的每个元素和每个元素的属性，从而可以基于解析得到的每个元素和每个元素的属性自动生成用户界面的代码。

请参阅图2，步骤S1还包括子步骤：

S11，获取用户界面设计图；

具体的，获取用户界面设计图的方式可以是直接通过图像识别的技术进行获取，即直接以图片的形式获取到用户界面设计图。

S12，对获取到的用户界面设计图进行预处理；

具体的，在获取到用户界面设计图后，受获取手段、环境等因素的影响，获取的图片可能会不太清楚，所以需要对图片进行预处理。可以通过锐化，去噪等手段都可以使画质得到增强，防止了噪声等图片的干扰因素在实际操作中使用识别算法和切割算法造成的不精确的结果。

S13，提取预处理后的用户界面设计图上的元素及元素属性；

具体的，在预处理完成后，提取用户界面设计图上所有的元素及元素属性。

请参阅图3，步骤S2还包括子步骤：

S21，收集大量不同类型的设计图并形成图库；

具体的，收集大量不同类型的其他设计图，并将这些设计图进行整合，从而形成图库。

S22，使用SIFT算法进行图库中的图片识别，并获取图片的元素及元素属性。

具体的，SIFT，即尺度不变特征变换(Scale-invariant feature transform，SIFT)，是用于图像处理领域的一种描述。这种描述具有尺度不变性，可在图像中检测出关键点，是一种局部特征描述子。SIFT特征是基于物体上的一些局部外观的兴趣点而与影像的大小和旋转无关。对于光线、噪声、微视角改变的容忍度也相当高。基于这些特性，它们是高度显著而且相对容易撷取，在母数庞大的特征数据库中，很容易辨识物体而且鲜有误认。使用SIFT特征描述对于部分物体遮蔽的侦测率也相当高，甚至只需要3个以上的SIFT物体特征就足以计算出位置与方位。在现今的电脑硬件速度下和小型的特征数据库条件下，辨识速度可接近即时运算。SIFT特征的信息量大，适合在海量数据库中快速准确匹配。

S23，选取图库中与获取的用户界面设计图相似度最高的一类来验证并定义元素的类别；

具体的，在识别图库中所有设计图时，选择与获取的用户界面设计图相似度最高的一张图片，以该图片识别出来的元素的类别，对用户界面设计图上的元素类别进行定义。

请参阅图4，步骤S4还包括子步骤：

S41，解析描述文件得到用户界面设计图中所采用的每个元素和每个元素属性；

具体的，在形成描述文件后，对描述文件进行解析，从而得到解析文件对应的用户界面设计图中每个元素和每个元素属性。

S42，根据解析结果生成代码；

具体的，在解析描述文件后，根据解析得到的每个元素和每个元素属性，生成对应的代码。

本发明还提供一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述方法步骤。存储介质可以包括如软盘、光盘、DVD、硬盘、闪存、U盘、CF卡、SD卡、MMC卡、SM卡、记忆棒(Memory Stick)、XD卡等。

计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可以是个人计算机设备、服务器或其他网络设备等)用以执行本发明方法的全部或部分步骤。

本发明还提供一种基于界面自动生成的***，该基于界面自动生成的***包括处理器和存储器,存储器上存储有计算机程序，计算机程序被处理器执行时，实现基于界面自动生成的方法。

Claims

1.一种基于界面自动生成的方法，其特征在于，包括步骤：

获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性；

对获取的元素进行类别识别，验证该元素的用途；

根据元素的类别及元素属性生成描述文件；

根据描述文件生成用户界面的代码。

2.如权利要求1所述的一种基于界面自动生成的方法，其特征在于，所述获取用户界面设计图，并进行预处理，以获得设计图中的元素及元素属性包括步骤：

获取用户界面设计图；

对获取到的用户界面设计图进行预处理；

提取预处理后的用户界面设计图上的元素及元素属性。

3.如权利要求1所述的一种基于界面自动生成的方法，其特征在于，所述对获取的元素进行类别识别，验证该元素的用途包括步骤：

收集大量不同类型的设计图并形成图库；

使用SIFT算法进行图库中的图片识别，并获取图片的元素及元素属性；

选取图库中与获取的用户界面设计图相似度最高的一类来验证并定义元素的类别。

4.如权利要求1所述的一种基于界面自动生成的方法，其特征在于，所述根据描述文件生成用户界面的代码包括步骤：

解析描述文件得到用户界面设计图中所采用的每个元素和每个元素属性；

根据解析结果生成代码。

5.如权利要求1所述的一种基于界面自动生成的方法，其特征在于：

所述元素为用户界面各个元素的排版、布局等信息的设计图，用户界面的元素可以包括容器、菜单栏、滚动条、按钮、列表、文本框、图标等控件，所述元素的属性包括大小、颜色、形状、所处的位置信息。

6.如权利要求1所述的一种基于界面自动生成的方法，其特征在于：

所述描述文件为按照某一预设规则存储所获取的每个元素和每个元素的属性的文件。

7.一种存储介质，其特征在于：

所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1-6中任一项中所述的基于界面自动生成的方法。

8.一种基于界面自动生成的***，其特征在于：

所述基于界面自动生成的***包括处理器及存储器，所述存储器上存储有计算机程序，所述计算机程序被所述处理器执行，实现如权利要求1-6任一项所述的基于界面自动生成的方法。