[发明专利]一种从视觉稿直接生成UI代码的方法及装置

说明书

本发明涉及移动应用开发领域，特别是涉及一种从视觉稿直接生成UI代码的方法及装置。该方法及装置包括下面六个部分：一、经过预打标的组件库，包括基础组件和业务组件；组件库亦同时为设计师提供快速构建页面的能力；二、实现不同主题色、字体的录入和导出；三、实现组件状态在SKETCH面板的可视化切换；四、对设计稿图层信息进行识别，包括组件的打标信息和组件库的属性和状态信息；五、布局识别和DSL树生成；六、DSL解析和实现UI代码在各平台的生成和资源导出。

技术领域

本发明涉及移动应用开发领域，特别涉及一种从视觉稿直接生成UI代码的方法及装置。

背景技术

在移动应用开发中，UI的构建、修改迭代占据了整个项目开发中的很大一部分时间。尤其是在编写高质量的UI代码情况下，需要保证UI代码和业务代码的分离与控制；在目前的开发方式下，由于开发人员的代码质量参差不齐，经常导致UI结构混乱，UI代码与业务重叠，多人开发的项目环境下，导致UI碎片化，UI库维护困难以及代码的冗余，直接或间接的导致代码运行效率、调试效率以及包体的过大等；另外在多平台下，多个开发人员不同的开发方式使每个平台的展示效果与设计图的还原度难以一致；在代码生成层面，由于孤立的设计稿难以提供足够的元素类别信息，布局信息，状态信息以及最终的代码生成逻辑信息。因此，业内实现方式主要包括两种：

1.在Sketch中预置组件的模板代码，即只提供静态代码输出：如Dapollo插件

2.借助人工智能技术，通过模型训练，识别设计稿中的元素类别并动态生成代码：如imgcook工具

目前现有的技术存在如下问题：

1.模板代码缺乏动态生产代码的能力，难以适应实际复杂场景高可用代码的需求。

2.人工智能技术识别的准确率尚不足以应用于实际生产，且训练模型对数据的数量和质量要求甚高。

发明内容

本发明要解决的技术问题是克服现有技术的缺陷，提供一种从视觉稿直接生成UI代码的方法及装置。

为了解决上述技术问题，本发明提供了如下的技术方案：

本发明提供一种从视觉稿直接生成UI代码的方法，包括以下流程：

S1，输入文件类型为SKETCH文件设计文档；

S2，通过解析SKETCH的图层信息，可以得到设计文稿中的，图层结构、模板结构、图层信息，以此来划分最小的不可切割的块；

S3，图层结构获取划分完毕后，需要根据图层的数据描述信息，坐标信息，进行图层布局的合并、布局拆分及布局的预测，解析生成相关的布局属性，为了进行多平台的布局适配，采用Flex布局，在这一步，会对图层的不可分割的最小块进行横向排列和纵向排列的循环递归，直到所有的块都能放在对应产生的“格子”里，在元素相互叠加的状态下，产生绝对布局，将相互叠加的元素放在叠加后识别的”格子”里；

S4，在已经初步布局识别的格栅中，根据视图结构信息和图层属性，进行布局的预测的修正，根据图层的结构和属性，判断图层的伸缩性以此选取合适的布局容器；通过对设计文档中的视图结构信息和图层属性读取和类型匹配，映射为对应的移动端的UI元素，提炼视图结构信息和图层属性，由于模板信息中有OVERRIDE属性描述、基础组件有预打标信息描述，填充UI元素的属性结构，在图层的遍历过程中，还可以获取到图层的依赖数据，作为资源、素材的导出依赖；

S5，查找当前图层依赖关系，重复S1-S4，直到当前图层及依赖的sketch的外部引用文件图层信息全部识别完成；进入修正阶段，由操作人员控制，修正解析图层、解析布局、解析属性的偏差；除此之外，对于非组件元素、异常的视图元素进行指定规则的元素转化或者抛弃；