带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（10）https://developer.aliyun.com/article/1340413?groupCode=taobaotech
动画模块
我们对动画模块的设计要求有以下三点原则：
- 足够简单，仅支持一般常见动画；
- 足够合理，能保障三端均可实现一致的动画效果；
- 足够灵活，能满足弹窗域多变的简易动画需求；
最终，基于以上原则，我们确定了动画描述 DSL 规范。使弹窗元素具备快速添加动画的能力，除此之外，我们还与端侧同学合作，获得端侧用户行为感知能力，可以使弹窗感知到，用户在端内的滑动，切换 Tab 等行为，通过为不同的用户行为绑定对应的动画效果，我们有能力为弹窗带来更细腻的视觉和交互体验。
下面展示一些具有代表性的事例：
2021年双十一购物车开奖提醒弹窗：该弹窗本来采用静态图片方式呈现后，上线后发现点击数据不佳，后决定添加摇一摇动效，由于该动效在之前的业务中已沉淀为可复用的动画模块，因此此次迭代只需数分钟便可完成上线。动效弹窗上线后，促使弹窗点击率提升3.6个百分点。
淘宝二楼飘条：通过将滑动感知与动画模块相结合，我们可以根据用户的滑动轨迹触发弹窗对应的动效，从而给用户带来更细腻的体验：
承接页到达率优化
除了想方设法提升弹窗的曝光率，弹窗的业务目标最终是否实现，还是要落在用户是否有效点击弹窗上。因此，弹窗域要解决的另一个核心问题在于如何提升弹窗点击率。
为此，我们的探索方向是多维度的，主要包含以下几个层面：
除了从弹窗曝光率，点击率入手以期为业务带来更大价值外。在团队同学的建议下，我们还开辟了弹窗域可探索的新场景：弹窗承接页的到达率优化。还用发传单的例子，我们之前所做的事情是在尽可能低成本地印刷对目标用户有吸引力的传单，并尽可能在更多场合，向目标用户稳定派送，而「承接页到达率优化」则是在用户拿到弹窗，产生兴趣，但是由于目标地点太远正在犹豫不决时，将用户瞬间传送至目标地点，直接打消用户的顾虑，减少犹豫和等待中可能的用户流失。
为了实现承接页到达率优化，我们借用会场预加载能力，在弹窗曝光时对页面进行「预加载」，待用户点击后，便能直接看到加载好的页面。
基于该技术原理，我制定了两期的项目迭代计划：
一期迭代：快速跑通技术链路，线上验证业务价值本期迭代包含以下内容：
- 端侧打通 POP 预加载接口；
- 在 xEditor，xRender 上集成预加载相关功能；
- 推动承接页埋点改造；
- 梳理对齐全流程埋点，通过 A/B 实验测试技术方案的业务效果；
一期迭代的核心在于通过完整的设计，将会场预加载方案与 POP-承接页技术体系相融合，并确定整条链路的数据如何串联，与核心关注指标，保障数据科学性。通过团队内部的反复讨论，我们最终通过约定 URL 参数标识的方式完整串联整个数据链路，整个数据链路和核心指标如下图所示：
POP 承接页预加载数据链路图
通过清晰定义数据的串联方式和核心关注指标，我们可以很高效的与数据团队对接，快速，准确地衡量，评估这次技术改造所带来的业务价值。
通过选取一周的线上业务 A/B 实验数据证明，POP 承接页预加载功能促使页面到达率提升约 12.58pt，促使页面可视耗时平均降低 1.76 秒，并间接提升承接页点击 UV 2.47pt。
基本符合预期，达成承接页秒开效果，获得了正向的业务收益。
带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（12）https://developer.aliyun.com/article/1340411?groupCode=taobaotech
