组件可视化编辑器

需求背景 #

营销云，一款为地产开发商提供营销服务的数字化平台，以小程序为载体，其中线上展厅则是专为企业打造的官方营销入口，用于满足购房者的线上看房体验需求。随着业务需求呈爆发式增长，产品对接的企业服务商数量日趋增多，线上展厅的定制化需求使得前端资源和设计资源越来越捉襟见肘。

业务场景 #

企业在首次创建小程序时，或在某些特殊活动开展前，企业管理业务人员或本公司负责项目管理人员，需要对小程序产品界面进行针对性的设计并快速上线。

需求痛点 #

但对于研发团队：企业服务商众多，内外部需求量大，任务紧，需求堆积，无法做到及时响应。对于设计团队：产品需求任务多，与需求方沟通需要消耗较多时间，沟通成本较高，导致设计方案重复修改，影响整体上线进度。

如何解决 #

了解到以上问题之后，我们计划通过构建一款可视化编辑器，利用已经搭建好的设计规范和组件资源，来解放前端工程师以及设计师的双手，降低人力资源投入，同时满足多端平台统一开发的需求，提高页面搭建和开发效率。

设计目标 #

基于上述问题的分析并结合实际的业务流程，在前期我们将产品使用角色定义为本公司的项目管理员，并为此产品方案制定了以下设计目标。

产品洞察 #

通过竞品分析，我们对比了凡科网、微盟、有赞等小程序建站服务的编辑器功能，为产品设计提供参考依据和方向。经过分析对比发现，大部分编辑器都遵循【创造—调整—再创造】循序渐进式的设计模式，符合用户在使用编辑器时的心智模型以及自然习惯。因此，我们将用户在使用组件可视化编辑器时的工作流程抽象为4个步骤：输入——调整——预览——输出。

将其归纳到产品设计上，就有了以下主要流程。

框架布局 #

在布局设计上规划出 4 大板块，分别是控件版块、内容版块、画布版块、菜单版块。控件件版块提供搭建页面所需的组件元件，用户可进行拖拉拽的交互动作，也即为工作流程中的的“创建”。内容版块则是在编辑状态下可对组件元件进行调整的操作面板，包括连接页面数据，即为工作流程中的“调整”。画布版块即为可视化面板，展示页面组件，所见即所得，即工作流程中的“预览”。菜单面板则承载者包含最高层级的操作，包括在小程序页面上的预览和发布至小程序。

模块化设计 #

根据过往与服务商的对接经验，企业对于定制化需求较多的集中在首页和详情页两大主要页面，我们将页面分为 “通栏” 和 “卡片” 两大类型，但本质上都是模块化处理的方式，更有利于做信息的分层和聚合处理。

以首页为例，我们经过调研市面上具备新房服务背景的移动端产品，穷举了每种模块类型的设计形态和布局方式，并归纳为设计模版，以此满足企业的多种需求，提供更多的设计样式选择。例如：房源信息模块 设计上展示更全面的楼盘信息，突出楼盘利益点，激发购房者兴趣，提高转化效率。资讯类模块 主要采用 「图片+标题」 的形式，引导用户浏览查看；多功能模块 则能够满足企业的营销设计的需要，更加灵活多变。

有了丰富的模块化的模版，业务人员就可根据企业需要，像搭积木一样，选择所需模块进行拼装，快速完成界面搭建。

编辑器默认状态下展示画布设置模块，点击页面设置按钮或触碰背景区域时弹出画布设置模块，选中模块时则自动收起，切换为内容版块。画布右上角为分享设置，修改的是小程序分享的全局属性。

在内容版块中，业务人员可以针对某一模块进行单独调整，为模块添加交互数据以及对模块基础样式做进一步的修改。

模块触点都支持配置点击跳转，因为考虑到管理后台有多处类似的交互流程，我们统计出所有可跳转类型并将其设计并开发成 弹窗组件 ，之后在管理后台中复用。

设计成果 #

在通用能力方面，为低代码或无代码平台的搭建提供开发和设计基础，降低了产品、设计师、研发等开发人员的投入成本，同时也提升了用户界面快速搭建的能力，达到降本增效的目标。在服务质量方面，编辑器为客户提供更多定制化设计服务，做到没有技术背景的业务人员也可完成应用搭建，极大提升业务响应效率。

对于非专业用户，即使编辑器能够带来更加灵活的页面搭建服务，但对产品结构不熟悉的普通用户也未必能快速完成。对此，我们经过设计打磨，为产品界面增加了不同类型的预制模版，业务员只要通过选择符合企业品牌调性的模版就能快速完成一套完整的产品界面搭建，降低新手用户的使用门槛。同时，设计模版的搭建为产品设计团队提供了价值输出的方向，结合业务营销需求持续的沉淀优质模版，未来可将优质的设计模版形成付费体系，实现设计赋能。