通天塔页面搭建提效新工具:设计稿自动生成楼层

一、项目背景

通天塔搭建平台是大促、频道及日常活动页面搭建的平台,主要面向用户包括内部运营、采销、商家及设计师。在降本增效的趋势下,通天塔一直在思考如何打破固有的研发壁垒,不受限于平台提供的样式与功能,人人都可以成为楼层样式的生产者。在不断的创新和尝试后,通过打通设计与搭建的链路,以设计稿自动识别生成楼层的方式,使得楼层的生产效率在现有灵活画布的基础上得到了更进一步的提升。

通天塔页面搭建提效新工具:设计稿自动生成楼层

图一 通天塔楼层灵活搭建示例

二、什么是设计稿自动生成

设计稿自动识别生成楼层项目聚焦于设计稿一键生成楼层样式这一切入点,实现将Sketch等设计稿进行解析并直接生成通天塔楼层。通过该功能,设计师/运营不需要一边对照标注,一边从0开始搭建楼层还原设计稿,极大的降低了搭建成本,为业务带来更加智能化、多元化的楼层搭建新体验。

在项目一期落地后,以618大促会场作为首批支持的案例,实现由设计稿自动识别一键生成通天塔楼层并交付给业务进行页面搭建,效率提升达到40%。

通天塔页面搭建提效新工具:设计稿自动生成楼层

图二 设计稿自动识别案例

三、方案介绍

  1. 出发点

从设计稿出发,提升页面搭建效率,亟需解决的核心问题有:

  • 如何打通各平台的链路,减少搭建前期的操作步骤;

  • 如何优化搭建动线,升级交互体验,减少搭建时的学习成本和耗时;

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

2. 核心设计思想

本着充分利用现有资源的目的,以及保持用户的使用习惯,通过:

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

即可为业务打造兼顾效率和灵活性的搭建平台,下图是传统楼层搭建方式与本方案的对比,可以看出直接可以减少5步,搭建效率显著提升。

通天塔页面搭建提效新工具:设计稿自动生成楼层

图三 新旧搭建方式路径对比图

3. 核心功能流转链路

  • 设计软件中创作及上传设计稿。

  • RELAAAY平台采集设计稿元数据并同步通天塔。

  • 通天塔自动识别设计稿,并支持按需调整。

  • 长期可沉淀为样式、页面库复用。

通天塔页面搭建提效新工具:设计稿自动生成楼层

图四 全链路流转示意

四、写在最后

通过设计稿自动识别生成楼层能够明显提高搭建效率,产生更大的业务价值。除此之外,我们也会继续优化现有的搭建交互,提高画布的易用性,提供更丰富的物料池。在用户搭建个性化样式时,可以快速、灵活、准确的拖拽元素组合生成目标楼层,赋能更多的业务场景。

真心感谢RELAAAY团队、通天塔设计、产品、研发、测试团队对本项目的大力支持和贡献!更多内容可在通天塔继续探索~


本篇文章来源于微信公众号: 京东设计中心JDC

UI/UX

ISUX「十二月」行业设计趋势速递

2023-1-12 11:30:43

UI/UX

QQ-Studios Showreel 2022

2023-1-13 14:33:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索