解决方案:京东低代码平台：通天塔楼层从设计稿自动生产之路探索

　　解决方案:京东低代码平台：通天塔楼层从设计稿自动生产之路探索

　　一、背景

　　楼层是电子商务场地页面的核心。过去，地板普遍依靠喷码等方式生产，往往需要大量的研发投入和维护成本。随后，通天塔制作研究团队开发了一种通过拖放元素制作地板的方法。它在业务中被*敏*感*词*应用，但敏捷和效率始终是可以持续追求的目标。因此，在上述背景下，研发希望通过设计稿自动识别和生成地板，进一步提高地板的生产效率。本文是通天塔团队实践探索的整理，希望与大家进行相关方面的探讨。

　　图1 通天塔楼层灵活搭建实例

　　2、什么是设计稿自动识别

　　设计稿自动识别生成楼层项目，是我们团队在“设计前端一体化”方向上的新探索。专注于从设计稿一键生成楼板样式的切入点，实现对Sketch等设计稿的解析并直接生成Babel楼板，后续还可以支​​持二次微调。通过该功能，设计师/运营商无需比对标注，从0开始搭建楼面，还原设计稿，大大降低了施工成本，为商家带来更加智能化、多元化的楼面施工新体验。

　　一期项目落地后，正值618核心场馆建设的高潮期。我们以绿色主会场绿色宣讲楼为首批配套案例，实现设计稿自动识别一键生成巴别楼，交付至大促运营搭建页面。此外，还支持直播、好货等素材类型的落地样式，包括一行、两行、滑动、轮播等交互样式，构建效率提升40%。

　　图2 设计稿自动识别案例

　　三、方案设计 1、出发点

　　从设计稿着手，提高页面构建效率，急需解决的核心问题是：

　　面对这些问题，我们制定了自动识别和生成设计稿楼层的方案。

　　二、核心设计思路

　　为了充分利用现有资源，保持用户习惯，通过：

　　RELAAAY的资产线上化管理 + 通天塔楼层灵活搭建平台 + 设计规范

复制代码

　　您可以打造一个兼顾效率和灵活性的业务搭建平台。下图是传统地坪施工方式与本方案的对比。可以看到，可以直接减少5个步骤，构建效率有了明显的提升。

　　图3 新旧施工方式路径对比

　　3. 核心架构

　　系统提供的核心能力包括：

　　下面是我们整个系统的核心能力架构图：

　　图 4 核心能力*敏*感*词*

　　四、核心难点及解决方案

　　在研发过程中，我们遇到了大大小小的困难。以下是核心困难的三个示例：

　　1、跨平台数据共享

　　通过对用户操作习惯的调查，我们发现受限于电脑系统中Sketch软件的使用，大部分用户在搭建楼板时都会先将设计稿上传到RELAAAY平台，并在在线页面查看标注。塔将恢复地板的视觉吃水。那么，我们只需要连接这三个链接即可。

　　图5 设计稿数据流模式

　　2、自动识别设计稿图层

　　在大家的主观意识中，图像识别需要依赖机器学习，而本方案通过将设计稿数据直接转化为通天塔的楼层协议来识别图像。当然，也可以直接在设计稿图层上标注名称来识别。这种方式的开发成本比较小，但是需要改变设计者的使用习惯，也是一种不靠谱的关系。所以我们直接使用设计稿的JSON数据，解析JSON描述文件，进行以下核心操作，达到识别的目的。

　　通过调用RELAAAY的稿件接口获取描述设计稿的JSON数据。返回数据的格式大致为：

　　图 6 设计稿 JSON 元数据

　　从上图我们可以发现，首先，每个层节点除了需要的样式数据外，还收录大量的冗余信息；另一方面，由于不同设计师的构图习惯不同，会出现一些无效的图片图层，比如用作注释的图层，用作遮罩的图层等，这些都需要我们对数据进行清理和重新处理. 这个过程主要是对JSON数据进行深度遍历，对1）location有收录关系，2）有隐藏属性，3）style字段缺失等层进行合并或删除。同时定期生成唯一ID标识每一层，方便后续计算的快速查询。

　　楼层构建本质上是基于DSL的可视化构建。其核心是将前端开发变成用户“配置”。我们这里的布局和元素，从开发方式到用户使用和预览，都是基于这个“配置”。即需要提取设计稿图层数据的特征信息，重新生成符合楼层DSL协议的布局和元素数据。

　　布局的识别依赖于设计者按照一定的设计规范进行分组，根据组数计算列数和列之间的相对关系，然后从采集的图层数据中生成相应的布局协议>类型=画板。元素的识别比较复杂。根据约定的识别规则，需要对多个有效图层进行位置、样式等自定义逻辑处理。

　　3.元素与数据字段相关联

　　设计稿的描述文件只收录样式信息，有效的楼层除了样式之外还需要关联数据源。那么如何关联识别出的元素的数据字段呢？

　　考虑到用户已经对现有资料有足够的了解，这里通过“组合”的方式对数据进行关联。在：

　　通过样式+已有素材的组合，最终转化为具有完整数据字段源的有效元素，还原设计稿样式。用户无需了解复杂的数据源结构和底层字段，随时可以使用。

　　图七 元素样式匹配数据字段

　　五、计划实施情况

　　接下来用一段视频简单演示了整个解决方案的交互流程和核心步骤。

　　1.草图平台：设计师设计并上传设计稿

　　设计师根据业务需求制作楼层样式的设计稿，按照Babel Tower制定的设计规范，进行图层分组、导出等操作。然后通过插件将设计稿上传到RELAAAY平台，通过开启同步Babel功能进行图层数据采集>和预处理。

　　2. RELAAAY平台：采集>设计草稿元数据并同步Babel。

　　上传设计稿后，可进入RELAAAY平台查看在线设计稿，点击Generate Babel Tower Floor进入Babel Tower平台。

　　3、通天塔平台：自动识别设计稿，提供二次微调。

　　进入通天塔平台，即可获取设计稿自动识别生成的楼面，可通过画布查看元素位置、大小等样式，同时可进行二次微调达到高度灵活的地坪施工目的。通过保存功能，您可以创建一个个人地板风格区域，以后可以在每个页面上重复使用。

　　图8 效果演示

　　六，结论

　　通过设计稿自动识别和生成楼层，收效甚微，已在各种推广中得到应用。下一步，我们将继续优化现有建筑的交互性和易用性，提供更丰富的素材库，支持更多的业务。场景。

　　关于后期的规划，我们会在提高识别准确率和加强设计稿还原方面继续深入研究。有兴趣的小伙伴可以关注和联系我们，以后我们会输出更多的干货~

　　解决方案:深圳网站建设多少钱机不可失时不再来（365登陆平台）

　　首先感谢365站群软件用户提供的反馈和建议。此次，365建站神器站群软件10.2最新版正式发布。针对用户提出的问题和建议进行了优化升级。下面将介绍365建站神器10.2新版更新介绍 365建站神器10.2站群软件升级日志：。

　　1. 文章库在采集之后增加了对文章的批处理功能。场景：采集之后进入文章库的文章的批处理。特征：

　　打开凤凰新闻查看更多高清图片 2、添加文章库随机读取文章和随机发布文章功能。场景：使用文章库发布文章时，可以选择所有分类随机选择分类到指定的内容库，然后随机发布。特征：

　　3.修正内容模型选项卡默认显示窗口错误。使用场景：用于伪原创处理。特征：

　　4.修复Smart采集中乱码问题。使用场景：使用smart采集时，纠正百度快照跳转（有时快照会跳转），抓取内容乱码的情况。特征：

　　5、添加采集规则，可以批量修改分类功能。使用场景：用于采集数据，存储在本地或者发布到网站。特征：

　　6、导入采集规则时，增加提示是否覆盖的功能。使用场景：一键导入采集规则。特征：

　　7、构造网站时，增加了列分类，即二级子类。使用场景：构建网站时使用。特征：

　　8.增加栏目自由添加字段，实现各种站点。使用场景：构建网站时使用，用于实现各种字段类型的网站。特征：

　　9、增加hashtag功能（即聚合）。使用场景：构建网站时使用，用于在聚合网站中实现关联文章，优化相关性。特征：

　　十、其他问题及用户建议的更正 修正换词库中只有一行导入词时无法保存的错误 b. 修正使用分页批量推送功能时会出现多个递增括号的问题 c. 修正本地导入文本时编码为utf-8时的乱码错误。

　　d. 修正了新加入服务器date中部分电脑错误的问题。优化了模板，方便后期添加自适应模板 f. 优化横幅g的显示效果。更正了用户反馈的其他问题和建议 以上是365建站神器10.2站群最新版软件更新详情介绍，欢迎访问365建站神器网站查看站群新功能软件系统，如果您对站群软件有任何问题或建议，也可以联系365站群软件客服告诉我们，期待您的反馈。

　　做一个网站需要多长时间分享企业网站建设和推广的基础知识，给大家提供一个思路分享给大家，欢迎交流！