如何主导一站式设计还原工具-神奇盒魔刀平台 UI/UX 21年5月25日 编辑 58UXD 取消关注 关注 私信 写在开始 在不断寻求通过提效而带动业务增长的路上，我们从未放慢脚步，同时也在放眼远方。所谓的“远方”就是与设计紧密相连，但又有一道工序相隔的网页制作流程。 在之前分享的一篇文章《神奇盒创意模板库平台——提效从它的诞生开始》中，讲解了该平台通过提供可配置化模板消弭客户雇主品牌页面需求与设计开发成本之间的巨大鸿沟。但是该平台依然依托于设计与前端团队，不断产出优质化的雇主页面以交付优质企业的雇主品牌宣传服务后持续进行页面补充。而在这个页面设计、素材切图、网页搭建的过程中，存在着频繁的沟通与细节调整、繁重的工作与交付成本。 那么接下来进入提效 season two看一看，我们在践行之路上落地的另一款工具——神奇盒魔刀平台。它延续提高人效为本的思路，聚焦在页面制作流程上各类工作效率的优化。以设计与前端充分沟通明确配合流程为出发点，将人工智能技术结合可编辑平台结合，让页面的生成变得轻轻松松。 01 神奇盒魔刀平台背景及目标 魔刀平台背景 集团内前端同学承担大量页面切图开发工作，此类需求往往是图文混排形式，虽然现有的搭建服务可以通过可视化编辑器、组件库大幅提升项目的开发上线效率，但是切图步骤作为效率瓶颈，使得单个项目制作时间仅可以从之前平均3天缩短至现在的1.5天左右。魔刀平台的诞生就是在致力于通过加强设计和前端的协同效应、提升切图效率这个背景之下的。 魔刀平台目标 魔刀平台当前要实现的核心功能是为前端同学提供切图+页面搭建服务，我们期望魔刀平台能够利用智能化手段，即运用机器学习、图像识别等人工智能技术，实现零开发，秒级别制作上线。在特定场景下使得页面开发效率大幅提升到小时级别，预计未来60%甚至更多的页面切图工作将通过魔刀平台构建。达到切实释放前端生产力，让其关注更具有挑战性的事情上！ 02 神奇盒魔刀平台介绍 魔刀平台核心功能 神奇盒魔刀平台作为设计和前端合力开发创建的一款提效工具，本平台已于1月31日上线一期内容并投入使用。魔刀一期专注以静态设计稿作为输入，通过人工智能技术一键生成可维护的前端代码，其中核心技术通过利用yolov5、opencv 实现。 关于神奇盒魔刀平台的核心功能，您可以通过下面这个视频来进行更直观的了解——简简单单的3步完成所需工作：一键还原静态设计稿 -> 可视化编辑 -> 生成代码。 1、一键还原静态设计稿 在神奇盒魔刀平台中直接新建项目-新建页面-上传静态设计文件，魔刀平台会解析图片文件信息直接还原到编辑器中。 静态设计稿中各个元素自动被标记，如：图片元素——会自动把该区域图片切下来并上传到服务器，同时记录该图片元素对应的类型、位置、大小等信息；文字元素——通过调用文字识别服务，自动将文字类图片转化为汉字并记录该文字元素的内容、大小、位置等信息。如此类推，魔刀平台会识别出图片上每一个元素以及读取到每一个元素的信息，这样利用绝对定位布局我们就完全可以绘制出一个html页面。 2、可视化编辑 在神奇盒魔刀可视化编辑器中，可以看到生成好的页面，每个元素均可进行可视化编辑，支持样式、属性修改。如：文字添加修改删除、字体字号编辑、图片修改替换、位置改变等等。 3、生成代码 发布上线 对于编辑好的页面，在预览模式下检查没有问题后需要先点击「保存」，保存后点击「代码」即可查看。页面发布上线前，需要将绝对定位布局转化为流式布局（在此感谢集团内毕加索团队在对绝对定位布局转化流式布局上的技术支持），转化为流式布局后，需要在发布前配置页面埋点信息，生成最终代码并发布上线。另外，目前对于静态图片文件不能完全保证100%还原，神奇盒魔刀平台还提供了手动标记、校准等功能，可以配合智能识别一起使用，以便达到更精准还原。 魔刀平台编辑器使用 魔刀平台编辑器总体框架主要分为四个功能区域，如下图所示： ·顶部工具栏——提供页面在搭建过程中的快捷操作能力，例如设计模式切换、图像缩放、返回及发布等等。让使用者更容易对当前编辑的页面数据在全局上有清晰了解。 ·左侧工具栏——提供元素及组件内容以及编辑等功能。目前已经将页面制作中所需的绝大多数元素与组件置入平台中，之后的优化也会逐步实现部分复杂组件。 ·可视化编辑区——编辑器的主体设计区，所见即所得地展示页面，提供编辑、修改等交互方式帮助用户进行页面搭建。主编辑区是交互优化的重点，通过对市面上大多数类似工具调研结合设计前端同事的使用习惯进行了重点设计。 ·右侧工具栏——提供选中模块的属性配置能力，分为样式、属性、事件及数据四个面板分别对应模块四个不同维度的属性配置。 魔刀平台价值总结 魔刀平台在实际使用中能做到由效果图一键智能生成代码 – 自由切图 精准还原 – 识别文字 智能提取 – 在线编辑 即使发布 – 资源共享 便捷操作 自平台上线以来已有10+企业定制项目通过使用该平台进行交付，开发效率明显得到了提升，从原本的总计30/人天缩短了到了12/人天。并且项目上线后会自动沉淀到资源中心并支持复用功能，这样就进一步增加了页面的使用延展性并提高人效。 03 神奇盒魔刀平台规划 魔刀平台后续目标 高效切图，高效搭建（自动识别 精度还原 通过拖拽 快速搭建）——将是未来神奇盒魔刀平台持续优化的目标。 ·UI设计师——解放双手 提高工效 ·开发工程师——识别文字 自助标注 ·设计师/开发——资源共享 实时预览 ·团队协作——在线编辑 便捷项目管理 魔刀平台二期功能 ·打通sketch——打通sketch链路，由于静态图片文件识别受限于某些设计稿场景在人工智能训练覆盖不到的情况，故此平台下一步重点是打通sketch链路； ·动画组建——增加多种动态交互设计，如：悬停效果、滚动视差、预设动画等，以此来提高网站用户体验及页面的精美度； ·合并模板平台——未来考虑与神奇盒模板平台合并，通过拖拽，可以快速搭建页面的同时使得神奇盒魔刀平台更加强大。 有别于神奇盒模板平台的成长通过客户的使用与反馈进行优化，神奇盒魔刀平台是切实的为团队内部同学提供的便捷工具，因此我们相信它会让大家在越来越频繁使用下飞速成长，每一位同学的关心，每一次热心的反馈都是它成长的动力，也希望它在今后的时间里会给大家带来更多的便利与惊喜。 ?一起聊设计 ?♂️ 高质量，学知识的设计行业群 设计行业一手资料 设计大厂最直接内推 定期大咖直播 0门槛扫码进群！ 期待与更多优秀设计师一起成长? 本篇文章来源于微信公众号:58UXD 58UXD
