本文将介绍淘宝直播后端团队为提高业务访问效率而设计的零代码弹窗动态解决方案。
商业背景
众所周知，产品有三宝：弹窗、红点、引导。 在淘宝直播业务中，每当有新功能、活动邀请、系统消息、奖励领取等干扰时，我们通常会通过弹窗的方式及时告知目标用户。 可见，弹窗是一种非常重要的接入手段，打通了平台与主播之间的信号传输通道。
为了高效、快速地向主播传递信息，我们必须牺牲弹窗的视觉效果和敏捷性。 因此，过去的弹窗基本上都是由纯文本或单个图像组成：
图1 传统纯文本或图片弹窗
当然，由纯文本或单一图像组成的弹窗往往缺乏视觉张力，阻碍用户在短时间内阅读和理解弹窗内容，导致触达效率下降。 另外，由于未能定制业务逻辑，主播无法对弹窗做出及时的反馈动作，导致用户体验和触达效率进一步提升。
因此，为了在后端开发资源有限的前提下，提供更加美观、灵活的弹窗，提高业务触达效率，淘宝直播后端团队设计了零代码弹窗动态解决方案（无- 代码动态弹出）。
计划探索
为了让弹窗的视觉效果更加多样化，交互更加灵活，需要将后端引入到每个需求的开发流程中，而不依赖于客户端版本。 因此，我们从后端角度对弹窗场景进行了技术方案督导。
选项 1：传统开发流程
我们首先能想到的就是按照传统需求交付SOP来开发弹窗。 当然，我们在早期阶段确实采用了这些流程，并在去年初推出了最初的几个 H5 弹窗。
图2 传统开发流程图
如图2所示，传统的产研流程需要将弹窗从其父需求中拆解出来，因为弹窗一般不是一个独立的需求，而是附属于某个功能迭代、Activity/任务更新等需要。 拆解完毕，需求审核后，设计师会设计弹窗的视觉稿，然后步入各端的开发和联调阶段。
客户端已经有现成的H5弹性层容器（WebViewLayer），无需投入开发； 服务器也有成熟的配置方案（疲劳、优先级等）并且需要返回后端的数组并不多，所以工作量也较小。 不大。
由于缺乏相关基础设置，后端需要将弹性层当成一个页面，从头开始投入，包括项目初始化、视觉稿还原（视口开发）、业务逻辑实现、Mock数据、界面联调、smoke测试等。 这一系列“组合拳”至少需要1.5到2天的开发时间。 它位于交付过程中的“关键路径”。 如果出现任何问题，都可能影响整个需求的交付。 所以我们需要找到更敏捷的解决方案。
选项 2：斑马结构
众所周知，集团有一个强大的工具“斑马构建”，它是一个页面构建平台。 提供文字、图片、热区链接等基础组件，让用户以“积木”的形式快速搭建促销、活动页面。 在淘宝直播中，斑马建设在素材中心的素材制作环节也发挥了重要作用。
但在弹窗场景下直播网站程序源码，如果使用zebra来构建，会带来以下问题：
搭建平台功能有限，无法与Sketch、Photoshop等专业绘图工具相比，限制了设计师制作中间视觉效果；
给设计师带来额外的学习成本和工作量；
交互逻辑有限，不足以满足直播弹层的业务需求。
上述第1点和第2点比较容易理解。 斑马构造无法像Sketch、Photoshop等绘图工具那样实现复杂的效果。 因此，设计人员需要使用其他绘图软件进行设计，然后将图纸剪切并导出到Zebra，这无疑降低了设计成本。 。
为了让用户及时响应，我们需要在弹窗上实现一些复杂的业务逻辑。 例如点击按钮调用Mtop接口，通过toast将结果反馈给用户。 这种方法的业务逻辑很难通过Zebra来实现，这就是问题3所在。
方案三：imgcook智能分析
Zebra的构建给我们提升弹窗效率带来了很好的启发，但我们发现imgcook可以更好的服务于直播弹窗的场景。 据官方宣传资料显示，imgcook利用计算机视觉、深度学习等智能技术，智能解析视觉稿并生成H5页面，赋能后端开发。
这听起来很神奇，但通过检查我们也发现了imgcook的痛点：
生成的代码可维护性较差，不利于后续迭代；
生成的页面存在适配问题；
要实现自定义的业务逻辑，仍然依赖于代码入侵。
不过，快闪业务也有其特殊性，它们巧妙地抵消了上述痛点1和2：
生命周期短，一个弹窗通常不会有后续迭代；
尺寸固定，无需考虑不同规格屏幕下的适配问题。
因此，我们可以利用imgcook的优势，即能够还原视觉草稿，然后在直播弹窗场景中实现NoCode弹窗生成方案。
图3 imgcook的标志
如何实现弹出自由
目标
借助成熟的后端智能技术，打造淘宝直播弹窗领域无代码解决方案，解放后端开发，赋能业务在线，提升业务触达效率。
生产侧流程
我们知道，完整的后端开发流程可以简化为视图层和逻辑层的编码，弹窗场景也是如此。 通过对上述方案的探索，我们了解到imgcook可以很好的覆盖视图层的工作量，但是我们还需要实现一个基于直播弹窗业务的平台来处理制作流程的逻辑层部分，即直播Pop-up生成器。
图4 简化版后端开发流程
下图是动态弹窗制作链接：
图5 新方案流程图
首先，设计者将弹窗的视觉稿上传到imgcook工作台。 任何不准确的视觉还原都可以通过工作台的图形界面进一步调整。
在imgcook内部，会通过一段数据进行结构化的描述。 这些数据从设计工具（如Sketch、PhotoShop）导出开始直播网站程序源码，经过一系列数据处理环节，最后生成模块产生代码。 这种结构化的数据信息描述称为模式。
图6 智能分析视觉稿
解析视觉草稿后，您需要移动到实时弹出窗口生成器（当前位于第二个工作台中）。 生成器首先会要求配置弹窗的基本信息，比如弹窗名称、大小、SPM等。
图7 配置弹出信息
由于弹窗具有不需要迭代的特殊性，所以我们不需要imgcook来帮我们生成最终的代码，我们只需要提供结构化的描述信息即可。 在生成器的第二步中，我们需要导出imgcook生成的schema。 您可以在右侧的预览屏幕中看到渲染结果。 当然，这只是为了恢复模型中的静态效果。
图8 导入Schema
为了实现弹窗的动态化，我们需要将视觉稿中对应的元素替换为socket发送过来的图片或者文案，同时减少一些简单的交互逻辑。 我们总结弹窗中的动态逻辑如下：
动态文本（如主播名称、奖励流量数）
动态图片（如头像、评级标志）
动作要点（如跳转H5、唤起Native页面）
发起mtop请求（比如下发任务组）
发起埋藏报告
通过循环生成一个简单的列表
直接关闭弹窗
我们封装了上述可枚举业务逻辑，并基于图形界面实现了数组映射和事件绑定能力。 如下图所示，该工具由两个模块组成：静态预览和动态绑定模块。 我们可以在预览模块中选择一个元素，选择需要的动态类型，然后完成左侧数组或风暴的绑定操作，让静态弹窗“动起来”。
图9 动态弹窗
自去年5月初推出动态弹窗以来，我们已经基于此推出了多个业务弹窗。 特别是去年618大促期间，我们推出了618主播任务弹窗，目的是吸引用户参加大促，赋能主播成长、升级。
但在查看业务数据时，我们可以明显看到任务采集率并不高。 通过对投放效果的分析，发现根本原因是弹窗点击率低。 许多用户在弹出窗口出现后直接将其关闭。 原因可能是由于注意力不集中或思维惯性造成的。
为了解决弹窗停留时间短、用户点击率低的问题，我们从视觉效果入手，通过华丽的弹窗开启动画来吸引用户的眼球，从而达到提升用户点击率和业务触达效率。 动效的具体实现方式有lottie和CSS动画，lottie作为弹出背景动画，CSS实现弹出前景动画。 动画效果可以扩展。
图10 动画效果配置
通过智能解析视觉草稿，我们获得了描述页面视图层的结构化数据（Imgcook Schema）； 在弹窗生成器上，我们产生了包括弹窗规格、SPM、动画的配置信息（Configuration Data）以及使静态元素动态化的映射数据（Mapping Data）。
将以上两者结合起来就得到了最终产品：Popup DSL，这是我们最终的交付和发布文件。
消费者端流程
目前，在淘宝直播供给端，主播工作台、主播APP、PC控制台、小程序均设有弹窗触达需求。 为了统一四个终端弹窗的表现，我们实现了一个H5容器，在消费端渲染动态弹窗。
如上所述，生产端最终交付的是一个 Popup DSL 描述文件，因此弹出窗口容器的主要工作就是解析这个文件并渲染它。
无论是移动端还是PC端，我们都会在应用启动时查询弹窗信息。 如果是，则接口将返回Popup DSL文件以及对应的业务数据结构。
在移动端，我们通过WebView加载弹出容器，通过JS Bridge传入DSL和业务数据； 在Web端，我们通过iframe加载弹出容器，并通过Post Message进行通信。
弹窗容器收到底层发来的DSL描述文件后，首先会解析出视图层描述信息，即imgcook schema。 然后通过这个描述信息生成HTML结构和CSS层叠样式表，并加载前台层对应的DOM节点，此时弹窗的静态部分就被渲染出来了。
当静态部分渲染完成后，容器会解析出映射数据（Mapping Data），依次将wave绑定到前景层的元素上。 同时，点击绑定的背景图层将会关闭风暴。
如果弹窗配置了动画，则前台会应用CSS动画，后台会播放lottie动画。
图11 弹出窗口的层次信息
实际案例
今年3月至今，淘宝直播供给侧采用了动态弹窗方案，零代码制作上线了十余个弹窗案例。 虽然每个产生的弹窗只能降低有限的开发成本，但随着需求数量的不断下降，总体上可以形成较大的利润。 同时，动画效果上线后，弹窗点击率从45%提升至45%，触达效率进一步提升。
下图列出了一些动态弹窗案例：
图12 动态弹窗案例
情怀
作为业务后端，我们要避免将自己定位为一个不加思考就满足需求的“剪图人”。 我们要积极总结日常工作中重复的部分，发散思维，看能否沉淀出一套通用的方法论，让我们从机械重复中解放出来；
需求上线后，我们就不能忽视了。 我们要经常回顾业务数据，找出不好的地方，用我们的后端大脑给出合适的解决方案，让业务下滑；
在选择技术时，我们要善于利用各种工具的优势，找到解决其痛点的巧妙方法。
团队介绍
我们是天猫的内容后端团队。 我们主要负责天猫的内容业务（直播、图文、短视频）以及内容平台的建设。 通过平台的形式支撑阿里系其他内容业务，包括饿了么、盒马、优酷、闲鱼、飞猪等24个BU、160个业务场景。 内容是一个相对较新的战场。 整个后端团队在多媒体、机器学习、播放器、视频编辑、LowCode等技术领域有更多的挖掘和技术应用。
延伸阅读
作者|谭鹏程（翊琨）
编辑| 橘子君
