界面生成方法、装置以及存储介质制造方法及图纸

本申请公开了一种界面生成方法、装置以及存储介质，涉及信息技术领域。其中，一种界面生成方法，包括：获取与界面设计稿中的图层相关的资源图层列表，其中资源图层列表用于记录图层的属性信息；通过预设的目标检测模型根据资源图层列表对界面设计稿进行目标识别，得到多个目标元素；以及根据多个目标元素进行布局，生成目标界面。解决了现有技术中存在的根据小图层进行布局而造成的冗余结构的技术问题。图层进行布局而造成的冗余结构的技术问题。图层进行布局而造成的冗余结构的技术问题。

Interface generation method, device and storage medium

【技术实现步骤摘要】
界面生成方法、装置以及存储介质


[0001]本申请涉及信息
，特别是涉及一种界面生成方法、装置以及存储介质。

技术介绍

[0002]组件布局是设计稿自动生成代码流程的关键步骤，目标是将组件按人易理解的层级结构进行组织。组件布局的对象是从设计稿中解析的大量图层。
[0003]当前布局方案面临的难题是：视觉层次与资源层次的不一致性，即一些图层在视觉层面是一个整体，但是在资源层面由多个图层组成。如一些炫丽背景图层是由多个不同颜色或不同形状的小图层组合而成，之后会将这些小图层进行布局，但是在这样的情况下，根据小图层进行布局后却会带来冗余结构，不符合前端的开发准则。
[0004]现有技术1（CN112181416A）：一种从视觉稿直接生成UI代码的方法及装置。该方法及装置包括下面六个部分：一、经过预打标的组件库，包括基础组件和业务组件；组件库亦同时为设计师提供快速构建页面的能力；二、实现不同主题色、字体的录入和导出；三、实现组件状态在SKETCH面板的可视化切换；四、对设计稿图层信息进行识别，包括组件的打标信息和组件库的属性和状态信本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面生成方法，其特征在于，包括：获取与界面设计稿中的图层相关的资源图层列表，其中所述资源图层列表用于记录所述图层的属性信息；通过预设的目标检测模型根据所述资源图层列表对所述界面设计稿进行目标识别，得到多个目标元素；以及根据所述多个目标元素进行布局，生成目标界面。2.根据权利要求1所述的方法，其特征在于，通过预设的目标检测模型根据所述资源图层列表对所述界面设计稿进行目标识别，得到多个目标元素的操作，包括：对所述界面设计稿进行目标识别，得到前景元素与背景元素；根据所述资源图层列表分别对所述前景元素和背景元素进行区域划分，得到组成所述前景元素和背景元素的多个子元素；以及将存在同一个区域的多个子元素进行合并处理，得到所述多个目标元素。3.根据权利要求2所述的方法，其特征在于，根据所述资源图层列表分别对所述前景元素和背景元素进行区域划分，得到组成所述前景元素和背景元素的多个子元素的操作，包括：根据资源图层列表和所述前景元素和背景元素的位置及大小，将所述前景元素和背景元素分别进行区域划分，得到多个区域；以及根据所述资源图层列表和多个区域的位置及大小，确定各个区域中的子元素。4.根据权利要求2所述的方法，其特征在于，将存在同一个区域的多个子元素进行合并处理，得到所述多个目标元素的操作，包括：对所述多个子元素进行筛选，确定所述多个子元素的图层类型；以及将图层类型为文字图层的子元素滤除，对剩余的子元素进行合并处理，得到所述多个目标元素。5.根据权利要求1所述的方法，其特征在于，根据所述多个目标元素进行布局，生成目标界面的操作，包括：根据所述多个目标元素的位置信息，将所述多个目标元素进行横向排列和纵向排列，其中所述多个目标元素为不可分割的最小单元；以及通过预设的代码生成工具，根据布局后的多个目标元素，生成所述目标界面。6.一种存储介质，其特征在于，所述存储介质包括存储的程...

【专利技术属性】
技术研发人员：徐洋，陈俊伟，王磊，
申请(专利权)人：北京尽微致广信息技术有限公司，
类型：发明
国别省市：