申请/专利权人：上海赛可出行科技服务有限公司

申请日：2020-10-12

公开（公告）日：2024-04-30

公开（公告）号：CN112181416B

主分类号：G06F8/38

分类号：G06F8/38;G06F8/34;G06F8/36;G06V10/94

优先权：

专利状态码：有效-授权

法律状态：2024.04.30#授权;2021.03.26#实质审查的生效;2021.01.05#公开

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

主权项：1.一种从视觉稿直接生成UI代码的方法，其特征在于，包括以下流程：S1，输入文件类型为SKETCH文件设计文档；S2，通过解析SKETCH的图层信息，可以得到设计文稿中的，图层结构、模板结构、图层信息，以此来划分最小的不可切割的块；S3，图层结构获取划分完毕后，需要根据图层的数据描述信息，坐标信息，进行图层布局的合并、布局拆分及布局的预测，解析生成相关的布局属性，为了进行多平台的布局适配，采用Flex布局，在这一步，会对图层的不可分割的最小块进行横向排列和纵向排列的循环递归，直到所有的块都能放在对应产生的“格子”里，在元素相互叠加的状态下，产生绝对布局，将相互叠加的元素放在叠加后识别的”格子”里；S4，在已经初步布局识别的格栅中，根据视图结构信息和图层属性，进行布局的预测的修正，根据图层的结构和属性，判断图层的伸缩性以此选取合适的布局容器；通过对设计文档中的视图结构信息和图层属性读取和类型匹配，映射为对应的移动端的UI元素，提炼视图结构信息和图层属性，由于模板信息中有OVERRIDE属性描述、基础组件有预打标信息描述，填充UI元素的属性结构，在图层的遍历过程中，还可以获取到图层的依赖数据，作为资源、素材的导出依赖；S5，查找当前图层依赖关系，重复S1-S4，直到当前图层及依赖的sketch的外部引用文件图层信息全部识别完成；进入修正阶段，由操作人员控制，修正解析图层、解析布局、解析属性的偏差；对于非组件元素、异常的视图元素进行指定规则的元素转化或者抛弃；S6，上述步骤完成后，整个视图树基本形成，以下步骤是语义化定义页面、定义内容，在语义化阶段会继续对视图树进行修改，在语义化阶段，会对视图树中的节点进行命名的分析、节点与节点之间的关系分析，还有对多状态组件进行语义定义，此项为数据依赖关系，节点命名提供支撑；S7，分析节点信息、修正信息及语义化信息，根据组件与数据规则，生成图片数据映射信息、文本数据映射信息和状态映射信息，其中还分成，静态数据和动态数据，数据依赖语义化分析和修正信息；S8，在上述内容准备就绪后，即可以开始进行DSL的推导，生产成为标准语义的视图树、样式树以及对应的业务接口描述；S9，DSL编译器可以通过对组件跟视图布局的配置，载入对应不同的编译器，生成对应不同平台的代码；S10，合并代码到项目中，需要项目有对应的业务层支撑框架。

全文数据：

权利要求：

百度查询： 上海赛可出行科技服务有限公司 一种从视觉稿直接生成UI代码的方法及装置

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD