基于AI的人机界面自动优化设计出图方法及装置与流程

基于ai的人机界面自动优化设计出图方法及装置
技术领域
1.本发明涉及一种出图方法及装置，属于计算机辅助设计领域，具体是涉及一种基于ai的人机界面自动优化设计出图方法及装置。


背景技术：

2.在工程应用人机界面设计中，通常多个项目有类似的需求，重复工作耗费大量人力物力，如何简化流程，自动生成图形界面，提高协同工作效率，是界面设计面对的一个普遍性问题。但目前实践中尚无有效的方法为设计人员提供便捷的自动化设计工具，设计人员依然需要根据自身经验和项目背景进行重复开发，人力成本和沟通成本较高。
3.在原型图到界面完成的过程中，目前技术主要通过美工人员在原型图的基础上设计图案以及图案位置，而设计的过程为人工，尚无相关自动化技术在此方面的应用。
4.为了解决这一问题，本发明通过结合人工智能的方法对原型图功能区进行分类，并进行内容自动识别与填充，进一步，通过数据库内容匹配与风格选择形成界面的自动设计。这也可以对工程的设计效果一致性提供帮助，具有较好的应用前景。


技术实现要素：

5.以下给出一个或多个方面的简要概述以提供对这些方面的基本理解。此概述不是所有构想到的方面的详尽综览，并且既非旨在指认出所有方面的关键性或决定性要素亦非试图界定任何或所有方面的范围。其唯一的目的是要以简化形式给出一个或多个方面的一些概念以为稍后给出的更加详细的描述之序。
6.本发明主要的目的是解决现有技术中所存在的上述的技术问题，提供了一种基于ai的人机界面自动优化设计出图方法及装置。该方法及装置基于原型图进行设计，输入原型图，输出界面和参数，并能够对原型图进行优化。
7.为解决上述问题，本发明的方案是：
8.一种基于ai的人机界面自动优化设计出图方法，包括：原型图输入步骤，用于输入人机界面原型图；功能划分步骤，用于对原型图进行功能区划分，后续对不同区域内容进行分别设计；文字提取步骤，用于对原型图中文字内容进行扫描，将文字内容提取待后续处理；风格选择步骤，用于选择不同界面风格，所述不同界面风格对应不同风格图片素材库；素材匹配步骤，用于在风格选择步骤中选定的素材库中对各功能区素材和文字进行初步匹配；界面生成步骤，用于将素材匹配步骤中匹配的素材作为输入，在各功能区生成素材的组合和关键点坐标的组合，从而形成界面。
9.优选的，上述的一种基于ai的人机界面自动优化设计出图方法，还包括：
输出判断步骤，用于判断界面生成步骤输出的界面是否满足设计要求，如果满足，则形成完整的人机界面并进行输出和存储；如果不满足，则调用所述界面生成步骤重新生成界面直至满足设计要求为止。
10.优选的，上述的一种基于ai的人机界面自动优化设计出图方法，所述原型图输入步骤中输入的人机界面原型图包括：标题功能区、菜单功能区、图表功能区，各部分内容需由框线框出。
11.优选的，上述的一种基于ai的人机界面自动优化设计出图方法，所述风格选择步骤中，预设不同界面设计风格选择下拉菜单，不同界面设计风格对应不同的素材库。
12.优选的，上述的一种基于ai的人机界面自动优化设计出图方法，所述界面生成步骤中，构建并训练人机界面各功能区生成模型，基于所述人机界面各功能区生成模型来生成界面。
13.一种基于ai的人机界面自动优化设计出图装置，包括：原型图输入模块，用于输入人机界面原型图；功能划分模块，用于对原型图进行功能区划分，后续对不同区域内容进行分别设计；文字提取模块，用于对原型图中文字内容进行扫描，将文字内容提取待后续处理；风格选择模块，用于选择不同界面风格，所述不同界面风格对应不同风格图片素材库；素材匹配模块，用于在风格选择模块中选定的素材库中对各功能区素材和文字进行初步匹配；界面生成模块，用于将素材匹配模块中匹配的素材作为输入，在各功能区生成素材的组合和关键点坐标的组合，从而形成界面。
14.优选的，上述的一种基于ai的人机界面自动优化设计出图装置，还包括：输出判断模块，用于判断界面生成模块输出的界面是否满足设计要求，如果满足，则形成完整的人机界面并进行输出和存储；如果不满足，则调用所述界面生成模块重新生成界面直至满足设计要求为止。
15.优选的，上述的一种基于ai的人机界面自动优化设计出图装置，所述原型图输入模块中输入的人机界面原型图包括：标题功能区、菜单功能区、图表功能区，各部分内容需由框线框出。
16.优选的，上述的一种基于ai的人机界面自动优化设计出图装置，所述风格选择模块中，预设不同界面设计风格选择下拉菜单，不同界面设计风格对应不同的素材库。
17.优选的，上述的一种基于ai的人机界面自动优化设计出图装置，所述界面生成模块中，构建并训练人机界面各功能区生成模型，基于所述人机界面各功能区生成模型来生成界面。
18.因此，相对于现有技术，本发明的优点是：可以实现原型图到成品图的快速设计，降低人力成本和沟通成本。可大幅提高设计人员的设计效率和出图效率。所采用的算法计算效率相比其他算法更高。
附图说明
19.并入本文并形成说明书的一部分的附图例示了本发明的实施例，并且附图与说明书一起进一步用于解释本发明的原理以及使得所属领域技术人员能够制作和使用本公开。
20.图1例示了本发明实施例中的基于ai的人机界面自动优化设计出图方法流程图。
21.图2例示了本发明实施例中的步骤1输入的原型图示意图。
22.图3例示了本发明实施例中的步骤3中的功能区划分原理图。
23.图4例示了本发明实施例中的步骤3中的功能区划分结果示意图。
24.图5例示了本发明实施例中的步骤5中的素材库组件示意图。
25.图6例示了本发明实施例中的步骤6中的功能区生成模型算法的原理示意图。
26.将参照附图描述本发明的实施例。
具体实施方式
27.实施例
28.本实施例，首先提供了一种基于ai的人机界面自动优化设计出图方法，如图1所示，该方法包括：
29.步骤1：原型图输入步骤，用于输入人机界面原型图。原型图在工程中一般由设计人员给出，通常为框图或线稿。
30.步骤2：功能划分步骤，用于对原型图进行功能区划分，后续对不同区域内容进行分别设计。
31.步骤3：文字提取步骤，用于对原型图中文字内容进行扫描，将文字内容提取待后续处理。
32.步骤4：风格选择步骤，用于选择不同界面风格，对应不同风格图片素材库。
33.步骤5：素材匹配步骤，用于在素材库中对各功能区素材和文字进行初步匹配，作为图形界面优化网络的输入。
34.步骤6：界面生成步骤，用于将匹配的素材作为输入，在各功能区生成素材的组合和关键点坐标的组合，从而形成界面，并输出。
35.步骤7：输出判断步骤，设计人员判断是否满足设计要求，如果不满足返回步骤6重新生成新的界面。如果满足，则继续执行步骤8。
36.步骤8：结果输出步骤，形成完整的人机界面并进行输出和存储。
37.下面将结合附图2-6对本发明的各步骤进行详细说明。
38.在步骤1中，设计人员输入原型图，原型图包括标题功能区、菜单功能区、图表功能区，各部分内容需由框线框出，各部分需有文字说明。
39.在步骤2中，对原型图进行功能区划分，后续对不同区域内容进行分别设计。
40.作为一种优选方式，本实施例采用一种改进的harris角点检测算法确定功能区，具体包括：
41.步骤201，偏导数求取子步骤，求取输入的原型图在两个方向上的偏导数。
42.对输入的原型图转换为灰度图并定义为i(x,y)，并分别求其在两个方向上的偏导数，其中i代表图像灰度图，(x,y)代表灰度图参数，代指各点在灰度图中的坐标。
43.步骤202，自相关函数求取子步骤，用于求取图像检测窗口平移时的自相关函数。
44.图像检测窗口平移时得到的自相关函数为，其中m可由i(x,y)的偏导数计算得出，(u,v)代表待检测点坐标，分别代表灰度图在x方向和y方向的偏导数，e代表自相关函数。
45.步骤203，角点识别子步骤，用于构建从图像中提取角点的依据并从图像中提取可能的候选角点。
46.对于m，由可计算得到，作为判断角点的依据，当较小时认为非边界或角点，当差别较大时认为是边缘点，当都很大时认为是可能的角点，det代表矩阵m的行列式值，trace为矩阵m的迹（数学名词），为矩阵m的特征值。
47.步骤204，角点判断子步骤，用于从侯选角点中判断并提取角点。
48.对步骤203中可能的角点进行分析，将所有角点进行排列并去除x，y中有离群值的点，具体地，定义离群点的方法如下：
49.输入：，其代表所有可能的候选角点的坐标值。
50.计算，其中代表第一个角点与第二个角点的x距离，代表第二个角点与第三个角点的y距离。i,j,k分别代表第一个点、第二个点、第三个点。
51.；
52.当时认为j点为正常角点，i点和k点为可能的正常角点，并对i点和k点进行的计算，其中threshold为预设的阈值可自行设定（如threshold=1），否则为离群点。
53.输出：正常角点的坐标以及与该点临近的其余几个角点坐标。
54.步骤205，功能区确定子步骤，用于根据角点确定功能区。
55.遍历4个邻近角点所围成区域内部所有像素点，如区域内部点值大于0则将所述4个邻近角点所组成的矩形划划分为一个功能区，如图3所示。对实际原型图划分的结果如图4所示，对每个功能区角点进行了检测，并标注框内可能的元素类型，本例中主要包含标题、菜单、图表几种元素。
56.在步骤3中，采用通用技术对文字进行处理，并根据以往界面字体风格选择统一的字体，该方法在业界已有较多应用，此处不再进行赘述。
57.在步骤4：在平台中预设不同界面设计风格选择下拉菜单，不同风格在后台对应到不同的素材库，以科技风为例，本平台在科技风素材库中设置了标题、小标题、图表、表格、其他组件等类型。
58.在步骤5：在获得功能区文字和指定平台界面风格后，可以将相关素材导入图形生成算法中，以图表类组件为例，如图5所示。
59.在步骤6中，基于自注意力机制的图形生成和优化算法，将各功能区的文字和素材进行统一分析和处理。其中，基于自注意力机制的图形生成和优化算法包括如下子步骤：
60.步骤601，基于以往项目中积累的平台人机交互界面等构建数据集，该数据集由文
字信息、文字对应的矢量图组成，将数据集划分为训练集、验证集、测试集，划分比例可为6：2：2。
61.步骤602，对步骤5中获取的素材图像进行预处理、归一化、并按单元进行分割，获得统一格式的图像数据。
62.步骤603，构建并训练人机界面各功能区生成模型，如图6所示，包括注意力层、生成层和分类层，其中relu函数表达式为。其中，relu为深度学习的激活函数，属于本领域的公知常识。
63.步骤604，基于构建的人机界面各功能区生成模型来生成界面。
64.在步骤7中，设计人员对基于算法生成的各功能区界面进行判别，选择合格的功能区进行保留，不合格的回到步骤6进行再次生成，全部功能区合格后再进行输出。
65.在步骤8中，最终确定界面方案后，形成完整的人机界面，并输出各功能模块文字和图的绝对位置，存储并传递到前端进行开发相关工作。
66.通过以上描述可知，本实施例提出的自动化图形界面生成方法可大幅提高相关设计人员的设计效率和出图效率。
67.本实施例中，尽管为使解释简单化将上述方法图示并描述为一系列动作，但是应理解并领会，这些方法不受动作的次序所限，因为根据一个或多个实施例，一些动作可按不同次序发生和/或与来自本文中图示和描述或本文中未图示和描述但本领域技术人员可以理解的其他动作并发地发生。
68.注意到，说明书中对“一个实施例”、“实施例”、“示例实施例”、“一些实施例”等的引用指示所描述的实施例可以包括特定特征、结构或特性，但是每个实施例可以不必包括所述特定特征、结构或特性。而且，这样的短语不必指代同一实施例。此外，当结合实施例描述特定特征、结构或特性时，无论是否明确描述，结合其他实施例来实现这样的特征、结构或特性将在所属领域的技术人员的知识范围内。
69.提供对本公开的先前描述是为使得本领域任何技术人员皆能够制作或使用本公开。对本公开的各种修改对本领域技术人员来说都将是显而易见的，且本文中所定义的普适原理可被应用到其他变体而不会脱离本公开的精神或范围。由此，本公开并非旨在被限定于本文中所描述的示例和设计，而是应被授予与本文中所公开的原理和新颖性特征相一致的最广范围。

技术特征：
1.一种基于ai的人机界面自动优化设计出图方法，其特征在于，包括：原型图输入步骤，用于输入人机界面原型图；功能划分步骤，用于对原型图进行功能区划分，后续对不同区域内容进行分别设计；文字提取步骤，用于对原型图中文字内容进行扫描，将文字内容提取待后续处理；风格选择步骤，用于选择不同界面风格，所述不同界面风格对应不同风格图片素材库；素材匹配步骤，用于在风格选择步骤中选定的素材库中对各功能区素材和文字进行初步匹配；界面生成步骤，用于将素材匹配步骤中匹配的素材作为输入，在各功能区生成素材的组合和关键点坐标的组合，从而形成界面。2.根据权利要求1所述的一种基于ai的人机界面自动优化设计出图方法，其特征在于，还包括：输出判断步骤，用于判断界面生成步骤输出的界面是否满足设计要求，如果满足，则形成完整的人机界面并进行输出和存储；如果不满足，则调用所述界面生成步骤重新生成界面直至满足设计要求为止。3.根据权利要求1所述的一种基于ai的人机界面自动优化设计出图方法，其特征在于，所述原型图输入步骤中输入的人机界面原型图包括：标题功能区、菜单功能区、图表功能区，各部分内容需由框线框出。4.根据权利要求1所述的一种基于ai的人机界面自动优化设计出图方法，其特征在于，所述风格选择步骤中，预设不同界面设计风格选择下拉菜单，不同界面设计风格对应不同的素材库。5.根据权利要求1所述的一种基于ai的人机界面自动优化设计出图方法，其特征在于，所述界面生成步骤中，构建并训练人机界面各功能区生成模型，基于所述人机界面各功能区生成模型来生成界面。6.一种基于ai的人机界面自动优化设计出图装置，其特征在于，包括：原型图输入模块，用于输入人机界面原型图；功能划分模块，用于对原型图进行功能区划分，后续对不同区域内容进行分别设计；文字提取模块，用于对原型图中文字内容进行扫描，将文字内容提取待后续处理；风格选择模块，用于选择不同界面风格，所述不同界面风格对应不同风格图片素材库；素材匹配模块，用于在风格选择模块中选定的素材库中对各功能区素材和文字进行初步匹配；界面生成模块，用于将素材匹配模块中匹配的素材作为输入，在各功能区生成素材的组合和关键点坐标的组合，从而形成界面。7.根据权利要求6所述的一种基于ai的人机界面自动优化设计出图装置，其特征在于，还包括：输出判断模块，用于判断界面生成模块输出的界面是否满足设计要求，如果满足，则形成完整的人机界面并进行输出和存储；如果不满足，则调用所述界面生成模块重新生成界面直至满足设计要求为止。8.根据权利要求6所述的一种基于ai的人机界面自动优化设计出图装置，其特征在于，所述原型图输入模块中输入的人机界面原型图包括：标题功能区、菜单功能区、图表功能
区，各部分内容需由框线框出。9.根据权利要求6所述的一种基于ai的人机界面自动优化设计出图装置，其特征在于，所述风格选择模块中，预设不同界面设计风格选择下拉菜单，不同界面设计风格对应不同的素材库。10.根据权利要求6所述的一种基于ai的人机界面自动优化设计出图装置，其特征在于，所述界面生成模块中，构建并训练人机界面各功能区生成模型，基于所述人机界面各功能区生成模型来生成界面。

技术总结
本发明涉及一种出图方法及装置，属于计算机辅助设计领域，具体是涉及一种基于AI的人机界面自动优化设计出图方法及装置。该方法及装置基于原型图进行设计，输入原型图，输出界面和参数，并能够对原型图进行优化。因此，本发明可以实现原型图到成品图的快速设计，降低人力成本和沟通成本。可大幅提高设计人员的设计效率和出图效率。所采用的算法计算效率相比其他算法更高。算法更高。算法更高。


技术研发人员：张辉 吴正中 张云飞 刘喆 刘敏青 王晓东 张兵兵
受保护的技术使用者：北京城建智控科技股份有限公司
技术研发日：2023.06.25
技术公布日：2023/8/13