导读： 前端与数据智能相结合，可以更好地服务于前端，提升端上用户体验和业务效果，同时也可以帮助前端开发者利用 AI 工具提升效能。本文将分享阿里是如何利用数据智能来优化端上消费者体验的。
主要包括以下几部分：
前端与数据智能 体验优化需求场景 关键技术 体验优化实践 未来展望分享嘉宾｜曹睿坤 阿里巴巴 前端技术专家
(资料图)
编辑整理｜康思迪
出品社区｜DataFun
01
前端与数据智能
1. 海量的互联网数据蕴含丰富价值
在过去 20 年，随着互联网行业的兴起，互联网公司积累了大量的数据，数据智能也随之迅猛发展，呈现爆炸式的增长，从互联网蔓延到各行各业。根据 Statista 的数据统计，2020 年，全球大数据储量约为 47ZB。
而随着 5G 的普及，元宇宙等新技术的发展，物联网等技术的普惠，可以预期全球的大数据规模仍将不断增长，数据智能也将随之渗入各领域不断改变我们的生活和工作。
如何在互联网数据爆炸式高速增长的背景下，挖掘、创造出海量数据的价值，也就成为了非常重要的研究课题。
2. 当前市场对前端与数据智能提出要求
数据智能在电商场景下的成熟应用已经有很多，一些典型的应用包括：商品推荐、智能客服、广告投放、智能物流等等，前端开发者在日常的业务迭代中也会涉及数据埋点、A/B Test、观察数据指标等与数据智能相关的工作，也运用了很多智能的能力。
从业务视角来看 ，在现阶段的业务场景下，技术同学中相对于服务端和算法，前端对于业务本身的参与感是比较弱的，很多时候都是业务方定好了需求，前端直接参与需求的技术评审（也就是能不能做），或者直接排期，缺乏对于前期需求决策的参与，以及需求上线后对于业务效果的追踪，更缺乏对于业务全局的洞悉，站在前端的视角发现业务当前的问题，从而推动业务核心指标，帮助业务发展。
同时对于前端技术平台和技术工具的运营，也需要有数据化指导迭代的能力，例如对于平台用户的运营，平台相关产出物的统计以及平台核心指标的同步和计算等。对于自身产品的打磨也对前端同学提出了拥有数据能力的更高要求。
同时从市场需求的角度来讲 ，在流量红利减弱与新增流量稀缺的当下，前端这个角色作为用户和产品最直接的桥梁，其实是可以通过数据的能力去直接的为业务提供增长支持的。比如可以通过数据去发现消费者在端上或者产品中的使用动向，或者交互方式，以及遇到了哪些问题，我们可以在哪些方面做改善，从而更好地服务于消费者。
上图的下方，展示了前端与数据智能的几种结合的场景：
① 第一种模式是前端为数据智能服务，典型的一个场景是数据可视化
例如蚂蚁的 AntV，就是将大数据通过前端的渲染高性能，易理解的展示出来。
② 第二种模式是数据智能为前端服务，典型的场景就是设计稿自动生成代码
我们内部的 imgcook 平台，通过设计稿的信息输入生成前端代码，从而为前端开发者的工作提升效率。
③ 第三种模式是前端与数据智能结合，优化消费者体验
通过数据智能在用户交互领域的应用去优化用户体验。比如前端在使用数据的工具或者能力去发现问题，然后数据本身再指导前端去进行体验的改进，从而提升消费者的体验。这也是今天分享的重点。
--
02
体验优化需求场景
在前端场景下，我们更关注的是用户交互体验，通过数据智能的应用，我们可以更精准地了解用户对 UI、功能、交互逻辑的需求，从而给用户提供更好的体验。下面介绍我们所做的一些探索。
1. 跳失预测
在业务场景中，我们希望能采取一定的策略对即将跳失的用户进行挽留，提高频道对用户的吸引力。
我们通过数据智能和端智能的能力，提炼形成对用户的跳失预测，对应给予策略，从而提升用户的留存率 。比如通过用户的行为序列，以及用户在端上的一些具体的交互的数据去预测得出，今天用户在这个频道浏览过程中有可能会在什么时机离开频道，对应的即可出一些承接策略，比如推荐一些他有兴趣的商品，或者是通过权益去提高频道对用户的吸引力，达到挽留用户的，塑造频道心智的目的。
2. 交互偏好
我们希望探索一个频道内的用户对频道功能的偏好情况，对不同偏好的客户，采用不同的承接策略。
我们通过数据分析的手段对用户人群进行划分，在业务上去采用不同的承接策略，让用户最容易地使用到自己想要的功能，而不必去花过多时间去关注他可能并不感兴趣的一些功能。
3. 智能 UI
根据用户对不同的内容展现形式的喜好，在端侧动态组织内容流，提高内容流的消费者体验。比如老年人可能更喜欢图文大一点的 UI 设计，高消费人群更喜欢一些简洁、高端的 UI 设计等等。
我们通过模型的推荐算法，来给用户推荐出他喜欢的 UI 风格，一定也是可以提升整个产品的消费者体验的。
--
03
关键技术
接下来具体介绍我们团队在运数据智能在前端的应用过程中使用到的一些关键的技术
1. 概要介绍
目前我们团队自研能力主要有以下三个部分：
（1）鲸幂——智能 UI
淘宝的前端内部很早就在前端智能化领域有一些探索和实践，也沉淀了一些解决方案。鲸幂智能 UI 平台，实现了千人千面、个性化的 UI 解决方案、推荐方案，来为业务增长提供更多可能性。
（2）DataCook
DataCook 是一个前端生态下的数据科学和机器学习的开源工具库，可以提供离线的数据分析和模型训练，也可进行终端部署和推理，帮助搭建更为个性化的应用。其整个体系基于纯 JS 生态，为前端开发提供便捷的机器学习的能力。
（3）PipCook
同样作为一个开源框架，PipCook 提供了可视化的数据分析和机器学习工作流解决方案，帮助用户快速接入数据，训练和评估模型，以及建立可视化的数据应用。整个工作流，包括数据接入、数据处理、模型训练、模型部署以及效果验证，要能够自动化完成，并且当某一个环节变动的时候，可以快速验证工作流是在正向去影响业务的，这就需要一个 CI/CD 的能力。PipCook 正是提供了这样一个解决方案，让前端开发者可以一个比较低的成本去使用数据智能的能力。
2. 系统化介绍
在淘宝营销频道内部使用的整个的技术大图如下：
① 能力基座
首先最底层的就是最基础的一些日志采集的链路，模型服务，以及MaxCompute——阿里云提供的大数据平台。在这些上面构建的就是刚才介绍的 PipCook，DataCook，和端侧工程服务：
PipCook 主要提供对数据和整个流程的编排和管理能力。 DataCook 为前端开发者提供了具体的工具方法，包含特征处理、模型训练评估，以及提供端上的推理能力等等。 端侧工程服务主要是一些相关的端上 SDK 基础设施。当我们需要大量地从端上上报用户交互数据时，为了实现更高性能、更准确地上报，则需要端侧工程去提供相应能力② 业务模型
在基础能力基座之上，结合具体的业务场景，梳理出一些业务模型，包括如浏览行为的预测，跳失预测，下一跳预测等等。
③ 承接策略
针对模型预测结果，还需要更多的前端的承接策略相结合，比如当预测出用户什么时候会跳失，就可以采用一些类似于利益点的透出，或者是商品的推荐来提升用户对频道的兴趣，从而挽留用户。
--
04
体验优化实践
下面通过具体案例来说明我们是如何将前端与数据智能结合的。
1. 数据智能实践流程
一般数据智能实践的流程可以概括为首先确定目标，再根据目标制定策略，最后度量优化后的效果。
第一个环节是问题定义：我们需要用数据解决的问题是什么。主要分为两个方面：
消费者洞察：即通过行为数据和用户数据切入去描绘用户画像，帮助我们更全面地洞察用户，从而更敏锐的感知消费者需求的变化。从这个角度出发，得到的数据的结论往往是指标性质的数据，可以用来观察或者判断业务的变化，得到业务侧需要分析的结果。 业务创新：通过数据来证明产品创新的价值，或者发现业务的优化方向，这部分往往是会和具体的业务迭代关联在一起的，是通过数据智能推动业务迭代的一个过程。第二个环节是数据采集：需要去确定获取数据的方法，以及获取哪些数据，分别需要获取多少数据量。这部分主要分为三个方面：
元数据：不需要通过具体的数据上报就可以知道的基础数据，比如用户的性别、年龄，这部分须结合消费者隐私设置，只能使用消费者授权同意去收集和使用的数据。 行为数据：即用户与我们的产品产生交互时所产生的具体的行为数据，比如页面的浏览、点击、跳转，以及浏览过程中一些更细节的行为，比如点了哪些功能，或者在某些地方滑动的速度更快等等，这部分也需要结合消费者隐私设置 关键结果：比如在电商领域比较典型的就是领券、下单、加购、支付等一些关键结果的业务数据指标。这三部分在数据采集的过程中与前端关联更紧密的就是行为数据，因为行为数据往往是用户端上与 UI 交互的过程中产生的数据，也是前端开发者更熟悉或者是经常在做上报的数据。
第三个环节是数据分析：针对我们采集到的数据，利用大数据引擎进行分析，主要通过以下几种方式去得到我们的目标数据：
数据统计：简单描述性的统计指标，比如电商领域比较常见的 GMV（订单总成交额），UV/PV（页面访问量）等。 数据可视化：对数据进行可视化，从而去发现数据中的规律，跟踪趋势变化，进行数据探查。 数据模型应用：对于一些更复杂的数据分析目标，就需要用到模型的能力了，可以使用聚类，分类，回归等模型深入挖掘数据中的规律。最后是数据应用：把分析之后的结论和策略真正落地到实际业务中去，最终通过度量复盘了解策略优化之后的业务效果。这部分是可以直接带来业务价值的环节，这个过程可以去支持整个用户生命周期的任何一个环节，比如调整营销策略、调整营销方案、优化产品体验，提升服务质量等等。就产品体验来讲，很多时候，当我们得出了一个分析结论时，往往需要验证我们的结论。在这个过程中，A/B Test实验则是必不可少的，其落地应用主要分为五个环节：
随机分桶：对人群进行随机分桶，保证测试时间段内分桶用户的一致性。 分桶验证：对分桶人群进行验证，确认 A/B 分桶内用户的数据指标是接近的。 实验投放：将需要比较的策略分别投放到 A/B 分桶。 数据收集监控：收集实验期间内 A/B 分桶的数据指标。 分析测试数据，得出测试结论：通过数据指标的对比分析，比较策略是否符合预期，并决定是否上线。2. 交互偏好分析实践
接下来结合淘宝的聚划算实践案例来具体讲解。
① 问题定义
消费者进入频道后，对频道内容的访问是否有一定的偏好或者规律？如果答案是肯定的，那么我们就可以根据每个消费者的访问模式实现更个性化的设计，提高用户满意度。
② 数据采集
我们把每个用户一次页面访问（PV）作为一次用户行为。也就是说，单次用户行为是由用户访问一次页面，在这期间和页面的交互构成的。
从频道的结构来看，消费者主要的交互形式是点击和滑动，而滑动和商品/功能模块的曝光是强相关的，所以我们将行为特征定义为频道内的不同功能版块的点击和曝光次数。
③ 数据分析
在采集了 3 天数据后，我们开始进行数据分析。由于数据量大，数据标签（偏好类型）的未知性，并不适合人工打标分类，因此我们选择了 DataCook 提供的 k-means 模型，通过聚类的方式分析特征数据。k-means 模型是一种基于欧氏距离的聚类算法，比较容易理解，因此模型的可解释性较强，另外，它在训练和预测时对性能的开销也比较小，适合在端上实时预测。它的缺点是需要人为设置聚类数量，且中心点的选取对聚类结果影响比较大。
由于 k-means 模型的原理是基于欧式距离的数据划分算法，均值和方差大的特征将对聚类结果产生决定性影响，如果我们直接把特征数据原始值进行聚类，那么由于商品流模块整体的点击和浏览数量往往会远大于其他模块，导致聚类结果出现偏差。因此我们在聚类前先要对数据进行归一化处理，让所有特征值保持在相同的数值范围内。然后通过肘图确定合理的 k 值（聚类数量）。
④ 数据验证
在验证了点击和浏览与行为分类之后的关系之后，我们得到了一个帮助我们进行 PV 分类的模型。接着我们继续收集了 30 天的行为数据，再用行为分类模型对这些数据进行分类，得到偏好概率表，再对这部分数据进行跟踪比对，验证其偏好概率的稳定性。
⑤ 数据应用
在数据分析环节得到了行为分类模型和最近一个月用户行为偏好概率表，然后通过云端结合的模式在用户访问页面的时候去拿到这样一个模型结果，基于端上的数据去对应，从而得到当前消费者的行为概率预测，然后结合端上的预测结果给不同客户以满足其偏好的承接策略，例如通过微动效、页面预加载等策略指引用户能够明确获得感兴趣商品页面的指引，然后通过点击率等指标进行验证，来证明策略是正确、成功的，通过观察和分析的结果去得到正向提升的结论，整体策略就可以真正的去上线了。
--
05
未来展望
1. WebNN：推动浏览器硬件加速的标准实现
首先是 WebNN，它是 W3C 发布的 web 标准的神经网络的 API，可以在浏览器里通过一个标准的 API 去实现神经网络，提供一些硬件加速的手段。目前设计也考虑到了一些人脸检测、人脸识别、超分、图像字幕，以及一些具体的应用案例，支持外部开发者使用神经网络的时候，可以更便捷的去开发出相应的模型，然后运行到浏览器里，并持续提升模型的性能。
2. WebGPU：面向浏览器的 GPU 接口
WebGPU 是下一代面向 Web 浏览器的一个图形的 API，可以在 Web 上获取高性能的图形能力。它封装了一些 native 3D 的渲染引擎，不用依靠浏览器的内核去实现 GPU 的加速能力,提供更高性能、更多硬件功能。这样就为在端上运行模型并提升运行速度提供了更多的可能性。
3. WASM：性能/加密/跨语言
WASM 可以提供更好的性能，同时，在隐私保护更加重要的今天，WASM 可以对数据和模型进行更好的加密，WASM 还具有跨语言的兼容能力，可以用 C++、C语言，或者 Rust 等语言去开发能运行在浏览器上面的模型。
今天的分享就到这里，谢谢大家。
｜分享嘉宾｜
曹睿坤｜ 阿里巴巴 前端技术专家
毕业于英国帝国理工学院，目前在阿里巴巴淘系技术担任前端技术专家，主要负责淘宝营销频道业务，使用大数据分析以及端智能的方式提升用户体验，为阿里开源的前端数据智能项目 PipCook 和 DataCook 维护者，参与和主导了前端大数据分析平台以及端智能工具库的研发和设计。
｜《数据智能知识地图》下载｜
上下滑动⬆️⬇️，查看《数据智能知识地图》 用户画像模块 ，完整版请 关注公众号“大话数智 ” 下载
｜DataFun新媒体矩阵｜
｜关于DataFun｜
专注于大数据、人工智能技术应用的分享与交流。发起于2017年，在北京、上海、深圳、杭州等城市举办超过100+线下和100+线上沙龙、论坛及峰会，已邀请超过2000位专家和学者参与分享。其公众号 DataFunTalk 累计生产原创文章900+，百万+阅读，16万+精准粉丝。
