一种基于手绘界面的UI自动生成方法及系统

技术领域

本申请涉及UI设计技术领域，具体涉及一种基于手绘界面的UI自动生成方法及系统。

背景技术

UI界面(UserInterface Interface，用户界面)是指用户与软件、应用或设备进行交互的界面。它是通过图形、动画以及交互等方式来展示信息和功能，并让用户进行操作和反馈的界面。UI界面设计需要综合考虑用户需求、品牌形象和交互流程等因素，通过用户研究、原型设计和测试等方法进行迭代和优化，以提供用户友好的体验和高效的交互方式。所以，UI界面设计通常需要专业的技术人员使用复杂的工具进行设计，而这些工具需要长时间的学习和使用，导致UI界面设计效率低、时间成本高、质量难以保证等问题。

此外，现有的UI界面设计无法满足不同场景下的UI设计需求，并且难以适应快速变化的市场需求等问题。

发明内容

为此，本申请提供一种基于手绘界面的UI自动生成方法及系统，以解决现有技术存在的UI界面设计效率低、质量差以及成本高的问题。

为了实现上述目的，本申请提供如下技术方案：

第一方面，一种基于手绘界面的UI自动生成方法，包括：

步骤1：获取用户的手绘界面图像；

步骤2：将所述手绘界面图像转化为数字图像；

步骤3：采用图像处理技术对所述数字图像进行图像处理；

步骤4：采用计算机视觉和图像识别技术识别处理后的所述数字图像中的界面元素和结构；

步骤5：将所述界面元素和结构输入到预先训练好的UI生成模型中生成UI界面；

步骤6：根据用户需求和自适应设计规则调整所述UI界面，得到符合用户需求的UI界面。

进一步的，所述步骤3中，所述图像处理技术采用基于深度学习的卷积神经网络算法。

进一步的，所述步骤4中，所述图像识别技术采用基于深度学习的分类算法。

进一步的，所述分类算法为支持向量机或随机森林。

进一步的，所述步骤5中，所述UI生成模型的训练过程为：

步骤501：获取手绘界面图像数据集；

步骤502：标注所述手绘界面图像数据集的UI组件边界框和对应的类别标签；

步骤503：对标注后的所述手绘界面图像数据集进行预处理；

步骤504：将预处理后的所述手绘界面图像数据集划分为训练集和验证集；

步骤505：根据所述训练集训练初始机器学习模型；

步骤506：根据验证集评估训练后的机器学习模型是否符合要求，若不符合，则继续训练；若符合，则得到训练好的UI生成模型。

进一步的，所述步骤503中，所述机器学习模型为YOLO模型。

进一步的，所述步骤6中，所述自适应设计规则包括响应式设计、流式布局和断点设计。

第二方面，一种基于手绘界面的UI自动生成系统，包括：

手绘输入模块，用于获取用户的手绘界面图像，并将所述手绘界面图像转化为数字图像；

以及采用图像处理技术对所述数字图像进行图像处理；

以及采用计算机视觉和图像识别技术识别处理后的所述数字图像中的界面元素和结构；

UI生成模块，用于将所述界面元素和结构输入到预先训练好的UI生成模型中生成UI界面；

自适应设计模块，用于根据用户需求和自适应设计规则调整所述UI界面，得到符合用户需求的UI界面。

进一步的，所述UI生成模块包括：

数据采集组件，用于获取UI设计数据；

数据预处理组件，用于对所述UI设计数据进行预处理；

模型训练组件，用于根据预处理后的所述UI设计数据训练机器学习模型；

模型评估组件，用于评估训练的机器学习模型是否符合要求，若不符合，则继续训练；若符合，则得到训练好的UI生成模型。

进一步的，所述自适应设计模块包括：

设备参数获取组件，用于获取用户设备参数；

响应式设计组件，用于根据用户设备参数进行自适应调整；

断点设计组件，用于根据用户设备参数呈现出不同的UI界面设计方案。

相比现有技术，本申请至少具有以下有益效果：

本申请提供了一种基于手绘界面的UI自动生成方法及系统，通过获取用户的手绘界面图像；将手绘界面图像转化为数字图像；采用图像处理技术对数字图像进行图像处理；采用计算机视觉和图像识别技术识别处理后的数字图像中的界面元素和结构；将界面元素和结构输入到预先训练好的UI生成模型中生成UI界面；根据用户需求和自适应设计规则调整所述UI界面，得到符合用户需求的UI界面。本申请提供的基于手绘界面的UI自动生成方法及系统极大的提高了UI设计的开发效率，提高了UI设计的质量和用户体验，降低了开发成本。

附图说明

为了更直观地说明现有技术以及本申请，下面给出几个示例性的附图。应当理解，附图中所示的具体形状、构造，通常不应视为实现本申请时的限定条件；例如，本领域技术人员基于本申请揭示的技术构思和示例性的附图，有能力对某些单元(部件)的增/减/归属划分、具体形状、位置关系、连接方式、尺寸比例关系等容易作出常规的调整或进一步的优化。

图1为本申请实施例一提供的一种基于手绘界面的UI自动生成方法流程图；

图2为本申请实施例二提供的一种基于手绘界面的UI自动生成系统结构示意图。

具体实施方式

以下结合附图，通过具体实施例对本申请作进一步详述。

在本申请的描述中：除非另有说明，“多个”的含义是两个或两个以上。本申请中的术语“第一”、“第二”、“第三”等旨在区别指代的对象，而不具有技术内涵方面的特别意义(例如，不应理解为对重要程度或次序等的强调)。“包括”、“包含”、“具有”等表述方式，同时还意味着“不限于”(某些单元、部件、材料、步骤等)。

本申请中所引用的如“上”、“下”、“左”、“右”、“中间”等的用语，通常是为了便于对照附图直观理解，而并非对实际产品中位置关系的绝对限定。在未脱离本申请揭示的技术构思的情况下，这些相对位置关系的改变，当亦视为本申请表述的范畴。

实施例一

请参阅图1，本实施例提供了一种基于手绘界面的UI自动生成方法，包括：

步骤1：获取用户的手绘界面图像；

具体的，用户可以在纸上绘制UI界面，也可以通过手写输入板或数字板直接绘制电子版的UI界面。其中，手写输入板或数字板是本实施例为用户提供的UI界面设计工具，包括画布、画笔和颜色选择器等，使得用户能够轻松地进行UI界面设计，其包含丰富的功能模块，例如文本框、按钮、下拉列表、表格等，以便用户能够快速地构建UI界面；还提供了实时预览功能和一键生成代码功能，实时预览功能使得用户能够随时查看UI界面的效果，并进行调整和修改，一键生成代码功能使得用户能够将UI界面设计转换成代码，并集成到软件开发中。

步骤2：将手绘界面图像转化为数字图像；

具体的，若是纸上绘制的UI界面，则使用扫描仪或者数码相机将纸上绘制的UI界面转换为数字图像；若是手写输入板或数字板直接绘制的UI界面，则直接识别手绘UI界面并将其转化为数字图像，然后进行后续处理。

步骤3：采用图像处理技术对数字图像进行图像处理；

具体的，图像处理包括图像增强、去除噪点、二值化、调整图像尺寸和色彩等，图像处理是为了方便后续进行图像识别。本步骤中，图像处理技术采用基于深度学习的卷积神经网络算法。

步骤4：采用计算机视觉和图像识别技术识别处理后的数字图像中的界面元素和结构；

具体的，本步骤中图像识别技术采用基于深度学习的分类算法，例如支持向量机(SupportVectorMachine，SVM)和随机森林(Random Forest)；界面元素包括按钮、文本框以及下拉菜单等。

步骤5：将界面元素和结构输入到预先训练好的UI生成模型中生成UI界面；

本步骤在训练UI生成模型时，具体包括：

步骤501：获取手绘界面图像数据集；

具体的，收集并准备用于训练的手绘界面图像数据集，手绘界面图像数据集主要是手绘的大量的UI组件图和页面图，以确保手绘界面图像数据集包含各种分类的图像。

步骤502：标注手绘界面图像数据集的UI组件边界框和对应的类别标签；

步骤503：对标注后的手绘界面图像数据集进行预处理；

具体的，预处理包括调整大小、裁剪、旋转和增强等操作，以提高训练数据的质量和多样性。

步骤504：将预处理后的手绘界面图像数据集划分为训练集和验证集；

具体的，训练集用于初始模型的训练，验证集用于评估模型的性能和调整超参数。

步骤505：根据训练集训练初始机器学习模型；

具体的，机器学习模型优选为YOLO模型，YOLO(You Only Look Once)是一种实时目标检测算法，通过单次前向传播来同时预测图像中的多个对象的位置和类别。相比于传统的目标检测算法，YOLO具有更快的速度和更高的精度。它的核心思想是将目标检测问题转化为一个回归问题，通过将图像划分为网格，并为每个网格预测边界框和类别概率来进行目标检测，每个边界框包含了一个物体的位置和大小，每个类别概率表示该边界框中物体属于不同类别的可能性。YOLO使用一个卷积神经网络(CNN)作为主干网络，用于提取图像特征，然后，通过多层卷积层和全连接层对这些特征进行处理，最终输出边界框和类别概率。

本步骤在使用训练集训练初始机器学习模型过程中，模型将学习如何从图像中识别目标物体。

步骤506：根据验证集评估训练后的机器学习模型是若否符合要求，若不符合，则继续训练；若符合，则得到训练好的UI生成模型。

具体的，可以通过计算准确率、召回率和平均精度等指标来评估模型的性能，根据评估结果调整模型的超参数和训练策略，以进一步提高模型的性能。

使用测试集对调整后的模型进行测试，评估模型在未见过的数据上的准确性和泛化能力，根据测试结果进一步调整和优化模型的参数和结构，以进一步提高模型的性能和泛化能力。

根据要求通过多次迭代训练来不断改进模型的性能和准确性，直到得到符合要求的模型，即得到训练好的UI生成模型。

本实施例可以定期监测模型的性能和准确性，并根据需要进行模型的更新和改进，随着新的图像数据的积累和业务需求的变化，不断学习和改进模型，以适应新的场景和挑战。

本实施例也可以基于HTML、CSS和JavaScript等技术将UI界面生成UI代码，以便用户能够将UI界面设计方法转换成代码，并集成到软件开发中。

步骤6：根据用户需求和自适应设计规则调整UI界面，得到符合用户需求的UI界面。

具体的，用户需求包括用户的偏好、设备类型和使用场景等；自适应设计规则包括响应式设计、流式布局和断点设计。

本步骤采用响应式设计和流式布局的技术在UI界面生成时，能够根据用户设备的屏幕尺寸、分辨率等参数进行自适应调整，以确保在不同设备上都能够呈现出最佳的显示效果。同时，还采用了断点设计技术，以便在不同屏幕尺寸上呈现出不同的UI界面设计方法。不仅能够满足不同用户的需求，还能让用户获得更好的使用体验。

本实施例还可以将生成的UI代码输出给开发人员，供其集成到软件开发项目中，开发人员可以根据需要进行进一步的开发、调试和优化。

本实施例提供的一种基于手绘界面的UI自动生成方法采用机器学习算法来生成UI界面，极大的提高了UI设计的开发效率；采用自适应设计技术能够根据用户的需求和偏好进行自适应设计，从而满足不同用户的需求，提高了UI设计的质量和用户体验；通过UI界面设计工具使得普通用户也能够轻松地进行UI界面设计，降低了开发成本。

需要说明的是，本实施例提供的一种基于手绘界面的UI自动生成方法可以应用于多种场景。例如：政府部门需要开发一款移动应用程序，用于提供公共服务和信息发布，由于政府部门缺乏专业的UI设计师，因此可以使用本实施例提供的方法让政府工作人员通过纸笔手绘草图或原型图，然后自动生成符合需求的UI界面设计方案，不仅提高了政府移动应用程序开发的效率和质量，还能更好地服务于公众。

实施例二

请参阅图2，本实施例提供一种基于手绘界面的UI自动生成系统，包括：

手绘输入模块，用于获取用户的手绘界面图像，并将手绘界面图像转化为数字图像；以及采用图像处理技术对数字图像进行图像处理；以及采用计算机视觉和图像识别技术识别处理后的数字图像中的界面元素和结构；

具体的，手绘输入模块包括手写输入板、相机、扫描仪、数字板和数据处理模块，其中，手写输入板和数字板用于直接识别用户手绘的UI界面并将其转化为数字图像，相机和扫描仪用于获取用户在纸上绘制的UI界面，并将其转化为数字图像；数据处理模块用于图像处理和识别处理后的数字图像中的界面元素和结构。

UI生成模块，用于将界面元素和结构输入到预先训练好的UI生成模型中生成UI界面；

具体的，UI生成模块包括：

数据采集组件，用于获取UI设计数据；

数据预处理组件，用于对UI设计数据进行预处理；

模型训练组件，用于根据预处理后的UI设计数据训练机器学习模型；

模型评估组件，用于评估训练的机器学习模型是否符合要求，若不符合，则继续训练；若符合，则得到训练好的UI生成模型。

自适应设计模块，用于根据用户需求和自适应设计规则调整UI界面，得到符合用户需求的UI界面。

具体的，自适应设计模块包括：

设备参数获取组件，用于获取用户设备参数；包括屏幕尺寸和分辨率等；

响应式设计组件，用于根据用户设备参数进行自适应调整，以确保在不同设备上都能够呈现出最佳的显示效果；

断点设计组件，用于根据用户设备参数呈现出不同的UI界面设计方案。

关于一种基于手绘界面的UI自动生成系统的具体限定可以参见上文中对于一种基于手绘界面的UI自动生成方法的限定，在此不再赘述。

以上实施例的各技术特征可以进行任意的组合(只要这些技术特征的组合不存在矛盾)，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述；这些未明确写出的实施例，也都应当认为是本说明书记载的范围。

上文中通过一般性说明及具体实施例对本申请作了较为具体和详细的描述。应当理解，基于本申请的技术构思，还可以对这些具体实施例作出若干常规的调整或进一步的创新；但只要未脱离本申请的技术构思，这些常规的调整或进一步的创新得到的技术方案也同样落入本申请的权利要求保护范围。