组件扩展方法、装置、电子设备和存储介质与流程

本申请涉及计算机，具体而言，涉及一种组件扩展方法、装置、电子设备和存储介质。

背景技术：

1、在计算机图形用户界面的设计过程中，为了保持用户界面的风格一致性，设计人员通常在设计图形用户界面之前需要搭建一套完整的设计组件库，以便后续在每个界面实例中快速复用。

2、设计组件库包含图形用户界面中所需的所有界面元素，例如按钮、输入框、导航、列表、提示等。由于业务场景的复杂性和市场需求的多变性，设计人员需要逐个对每类界面元素进行不同尺寸和不同状态的定义，以满足在不同屏幕尺寸和交互状态中的复用。这期间存在大量重复性工作，使得图形用户界面设计的时间成本和人力成本较高，进而影响扩展组件的生成效率和图形用户界面的设计效率。

3、因此，如何提高扩展组件的生成效率和图形用户界面的设计效率成为业界亟待解决的技术问题。

技术实现思路

1、本申请提供一种组件扩展方法、装置、电子设备和存储介质，用于解决如何提高扩展组件的生成效率和图形用户界面的设计效率的技术问题。

2、本申请提供一种组件扩展方法，包括：

3、获取待扩展界面元素对应的基础组件的设计属性参数；

4、将所述基础组件的设计属性参数输入至组件扩展模型，得到所述组件扩展模型输出的多个候选扩展组件的设计属性参数；

5、基于各个候选扩展组件的设计属性参数，以及所述基础组件的设计属性参数，确定所述待扩展界面元素对应的扩展组件；

6、其中，所述组件扩展模型是基于样本界面元素对应的基础组件的设计属性参数，以及所述样本界面元素对应的扩展组件的设计属性参数训练得到的。

7、在一些实施例中，所述基于各个候选扩展组件的设计属性参数，以及所述基础组件的设计属性参数，确定所述待扩展界面元素对应的扩展组件，包括：

8、确定各个候选扩展组件的设计属性参数与所述基础组件的设计属性参数之间的相似度；

9、将相似度大于预设相似度阈值的候选扩展组件作为所述待扩展界面元素对应的扩展组件。

10、在一些实施例中，所述将相似度大于预设相似度阈值的候选扩展组件作为所述待扩展界面元素对应的扩展组件之后，所述方法还包括：

11、基于所述扩展组件的设计属性参数，生成所述扩展组件的显示视图，并在用户界面中显示所述显示视图；

12、接收用户对于所述用户界面的输入；

13、响应于所述输入，对所述扩展组件的设计属性参数进行调整；

14、将设计属性参数调整后的所述扩展组件与所述待扩展界面元素进行关联后存储至组件扩展库。

15、在一些实施例中，所述将设计属性参数调整后的所述扩展组件与所述待扩展界面元素进行关联后存储至组件扩展库之后，所述方法还包括：

16、基于所述待扩展界面元素的基础组件的设计属性参数，以及所述待扩展界面元素的扩展组件的设计属性参数，生成所述组件扩展模型的增量训练样本；

17、基于所述增量训练样本对所述组件扩展模型进行增量训练。

18、在一些实施例中，所述组件扩展模型是基于如下步骤训练得到的：

19、确定样本界面元素、所述样本界面元素对应的基础组件，以及包含所述样本界面元素的多个样本用户界面；

20、基于所述样本界面元素在各个样本用户界面中的显示视图，确定所述样本界面元素对应的扩展组件；

21、基于所述样本界面元素对应的基础组件的设计属性参数，以及所述样本界面元素对应的扩展组件的设计属性参数，对初始模型进行训练，得到所述组件扩展模型。

22、在一些实施例中，所述方法还包括：

23、确定样本用户界面以及待设计的目标用户界面；

24、在所述样本用户界面中确定需要迁移的多个界面元素；

25、基于各个界面元素在所述样本用户界面中的显示视图，确定各个界面元素的第一扩展组件；

26、确定任一界面元素的第一扩展组件与所述任一界面元素的基础组件之间的设计属性参数变化值；

27、基于所述设计属性参数变化值，对所述多个界面元素中的其他界面元素的基础组件的设计属性参数进行调整，得到所述其他界面元素的第二扩展组件的设计属性参数；

28、在所述目标用户界面中，基于所述各个界面元素的第二扩展组件的设计属性参数，生成各个界面元素的第二扩展组件的显示视图。

29、在一些实施例中，所述界面元素包括按钮、文本框、标签、下拉框、复选框、进度条、图像、菜单、列表和超链接中的至少一种；所述设计属性参数包括文字样式参数、颜色样式参数和显示效果样式参数中的至少一种。

30、本申请提供一种组件扩展装置，包括：

31、获取单元，用于获取待扩展界面元素对应的基础组件的设计属性参数；

32、扩展单元，用于将所述基础组件的设计属性参数输入至组件扩展模型，得到所述组件扩展模型输出的多个候选扩展组件的设计属性参数；

33、确定单元，用于基于各个候选扩展组件的设计属性参数，以及所述基础组件的设计属性参数，确定所述待扩展界面元素对应的扩展组件；

34、其中，所述组件扩展模型是基于样本界面元素对应的基础组件的设计属性参数，以及所述样本界面元素对应的扩展组件的设计属性参数训练得到的。

35、本申请提供一种电子设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述的组件扩展方法。

36、本申请提供一种计算机可读的存储介质，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行所述的组件扩展方法。

37、本申请提供的组件扩展方法、装置、电子设备和存储介质，将待扩展界面元素对应的基础组件的设计属性参数输入至组件扩展模型，得到组件扩展模型输出的多个候选扩展组件的设计属性参数；基于各个候选扩展组件的设计属性参数，以及基础组件的设计属性参数，确定待扩展界面元素对应的扩展组件；其中，组件扩展模型是基于样本界面元素对应的基础组件的设计属性参数，以及样本界面元素对应的扩展组件的设计属性参数训练得到的；由于通过训练得到的组件扩展模型对基础组件的设计属性参数进行处理，预测得到待扩展界面元素对应的扩展组件，无需设计人员通过人工对基础组件进行参数调整得到扩展组件，提高了扩展组件的生成效率，节约了图形用户界面设计过程中的时间成本和人力成本，相应地，设计人员在设计图形用户界面时，可以直接调用扩展组件进行设计，提高了图形用户界面的设计效率。

技术特征：

1.一种组件扩展方法，其特征在于，包括：

2.根据权利要求1所述的组件扩展方法，其特征在于，所述基于各个候选扩展组件的设计属性参数，以及所述基础组件的设计属性参数，确定所述待扩展界面元素对应的扩展组件，包括：

3.根据权利要求2所述的组件扩展方法，其特征在于，所述将相似度大于预设相似度阈值的候选扩展组件作为所述待扩展界面元素对应的扩展组件之后，所述方法还包括：

4.根据权利要求3所述的组件扩展方法，其特征在于，所述将设计属性参数调整后的所述扩展组件与所述待扩展界面元素进行关联后存储至组件扩展库之后，所述方法还包括：

5.根据权利要求1至4任一项所述的组件扩展方法，其特征在于，所述组件扩展模型是基于如下步骤训练得到的：

6.根据权利要求1至4任一项所述的组件扩展方法，其特征在于，所述方法还包括：

7.根据权利要求1至4任一项所述的组件扩展方法，其特征在于，所述界面元素包括按钮、文本框、标签、下拉框、复选框、进度条、图像、菜单、列表和超链接中的至少一种；所述设计属性参数包括文字样式参数、颜色样式参数和显示效果样式参数中的至少一种。

8.一种组件扩展装置，其特征在于，包括：

9.一种电子设备，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行权利要求1至7任一项所述的组件扩展方法。

10.一种计算机可读的存储介质，其特征在于，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行权利要求1至7任一项所述的组件扩展方法。

技术总结
本申请提供了一种组件扩展方法、装置、电子设备和存储介质，其中方法包括：获取待扩展界面元素对应的基础组件的设计属性参数；将所述基础组件的设计属性参数输入至组件扩展模型，得到所述组件扩展模型输出的多个候选扩展组件的设计属性参数；基于各个候选扩展组件的设计属性参数，以及所述基础组件的设计属性参数，确定所述待扩展界面元素对应的扩展组件；所述组件扩展模型是基于样本界面元素对应的基础组件的设计属性参数，以及所述样本界面元素对应的扩展组件的设计属性参数训练得到的。本申请提供的方法和装置，提高了扩展组件的生成效率，提高了图形用户界面的设计效率。

技术研发人员：李梦雨
受保护的技术使用者：中银金融科技有限公司
技术研发日：
技术公布日：2024/3/27