双11会场的智能UI应用
NO.1
背景
拿淘系电商业务来讲，随着移动互联网和推荐系统的发展，人和商品的精准匹配为业务带来了效率的大幅提升。但当流量增长逐步到达瓶颈，已经无法依靠流量的跳跃式增长来促进业务快速发展，越来越多的精细化手段逐渐应用于个性化推荐领域，比如场景化推荐、人群定投技术等。另一方面，商品的信息比以往任何时候都要丰富（丰富的买家秀，品牌背书，无忧购服务等），用户的手机屏幕也越来越大，我们有更大的空间可以进行信息呈现。这种丰富的信息和超大的屏幕空间，给信息表达带来了新的挑战。在特定的场景中存在非常多的可用信息，有时候很难找到用户需要的信息，并提供出合理的UI方案。本文将介绍如何在双11大促中借助算法的能力，为用户提供更友好的UI，通过智能UI激发用户兴趣，提高流量分发效率。
NO.2
什么是智能UI
智能UI是一个比较大的概念，它可以包含UI的智能化生成，UI的千人千面，UI的智能化适配等。只要UI是智能化可调控的，都可以称之为智能UI。目前在淘系会场中应用的智能UI狭义上是指：借助AI提供界面千人千面的解决方案。项目的最早期，我们通过AB实验直接定量测试，对不同方案的数据效果进行了价值论证，明确了相同的UI方案在不同的场景会产生差异，不同的UI方案在相同场景下也会产生差异。也就是说，针对不同场景使用不同方案是有意义的。基于早期的AB实验结论，我们在天猫会场上做出第一次智能UI尝试：针对“天猫行业猜你喜欢”会场模块提供2套UI方案；通过系统对页面埋点日志分析，分析出每个方案的人群偏好；当用户访问会场时，搭建系统根据决策信息完成模块替换，实现UI的个性化展示。
NO.3
双11应用
智能UI在前面2年在淘系内部就有所应用，但应用更多是一种技术方向的探索，还未形成标准化的流程。如今我们要把这种技术在双11期间变成一种可大规模复制生产和发布的能力，就要解决更多之前没有遇到过的问题。首先第一点要提升智能UI供给的能力，通过提高生产效率实现更高的投入产出比。因为智能UI的模块需要开发多套UI样式，这会增加前台模块的研发成本。第二点要提升智能UI带来的业务上的效果。关于如何“降本提效”，我们从如下几个方面入手：
统一UI数字化协议，减少各角色（前端/设计师/算法/后端）沟通协作成本；
采用多物料一体化研发，增加UI方案的供给能力，大量的UI方案保证推荐算法有足够发挥空间；
推进UI推荐算法建设，充分利用服务端算法+客户端行为特征共同决策；
做好UI方案数据可视化，完成数据中心建设。
UI数字化协议
通常来说，设计数据由于难以结构化的问题，一直很难应用到实际场景中。但随着网络购物习惯的培养，电商场景下的许多常用模块，都是可以逐渐结构化的。因为这些模块的功能目的、形态和表现形式都形成了一定的事实标准。通过对大量线上页面的研究，智能UI设计团队总结并提出了描述电商模块设计方案的模型GDM。GDM包含了界面的栅格、布局、样式信息等，具体定义见下图。
通过GDM模型，可以将电商模块的设计数据进行结构化，让这些数据贯穿页面的生产消费全过程，最终可以被积累、归因和分析。在实际应用中GDM被我们拆成几个部分分别进行描述，拿区块部分为例，下图智能UI的商品模块视觉稿，被我们划分为5个区块，分别为:封面/标题/卖点/营销活动/价格，每个区块有唯一的编码，每个区块内部还包含多个物料元素（下图视觉稿最大方案个数为5个区块乘积：32831=144）。前端开发时根据算法接口返回的唯一编码把对应物料渲染到对应区块位置。
//区块全部描述信息[{:,:,:[,,]},{"name":"标题区","code":"B","children":["1","2"]},{"name":"卖点区","code":"C","children":["1","2","3","4","5","6","7","8"]},{"name":"营销活动区","code":"D","children":["1","2","3"]},{"name":"价格区","code":"E","children":["1"]}]
多物料一体化开发
基于对模块内区域元素的拆解，前端开发时产出小粒度的物料，渲染SDK再把物料拼装在一起实现一个前台模块。由于物料被拆解的足够细，单个物料非常小巧，只需要处理UI样式和简单的业务逻辑。这种简单的物料非常适合借助imgcook实现批量生产。这次双11我们升级了智能 UI 的研发链路，使用imgcook可视化研发承接智能 UI 的批量化生产。设计师上传视觉稿，imgcook从视觉稿中解析出 UI 物料。所有UI物料在同一个画布上开发编辑，最后将物料批量发布。借助物料的一体化研发链路，前端生产过程高效了很多。
【智能 UI Imgcook 可视化研发动线】
自建算法（云+端）
为了更好的提升推荐效果，今年双11我们决定自建推荐算法进行方案推荐。以往我们与搜索推荐算法团队合作时采用的算法模型是根据方案实时点击情况进行排序打分。基于实时点击排序的算法模型根据不同UI方案点击情况进行好坏的评判，本质上是一个基于实时数据进行未来方案点击率预测的模型。算法并没有理解到不同UI的差异性，哪个UI方案好，为什么好，也没办法进行归因分析。而且在流量较少的情况下很容易出现效果的大幅度波动。当我们从前端开发者的角度重新思考智能UI推荐算法时，我们的思路是要让算法能够理解UI。所以我们自建算法的初衷是想要增强算法对于UI和用户行为的理解。基于模型对UI和用户的理解进行相关方案的推荐。自建智能UI推荐算法区别于普通推荐算法的两个点：
一是将端上行为数据（用户实时行为包含：点击次数，浏览深度，滑动频次，停留时长等）加入到了模型中，根据用户在APP内的实时行为对用户进行初步分类，然后结合云端算法数据综合性判断应该展示哪种UI。
二是增加了物料的UI属性输入，通过UI属性的输入可以让算法模型建立不同物料间的联系。这样可以让算法更好的理解不同物料间的差异性和关联性，在低流量场景下也可以推荐出相对优质的方案。
【UI个性化推荐算法】
数据中心建设
智能UI的应用主要产出两种数据，生产要素数据 和方案效果数据。前者在生产方案集合时产生、后者则在业务上线时通过对页面状态进行收集和分析得出。两种数据对于不同的角色有着不同的意义，两种数据都很重要。两种数据的结合可以形成设计稿到页面运行时的数据小闭环。为了完成数据中心建设这个目标，需要对业务接入、方案生产、方案决策和数据回收进行完整的设计，这是一条漫长的链路。目前我们已经完成了数据中心方案效果数据部分的建设。若想查看智能UI应用情况，可以在数据中心创建一个应用，圈选页面集合，设置起止时间，然后进行数据采集分析。DataWorks任务会定时从日志中清洗出选中的数据，进行汇总展现。
【数据中心部分截图】
NO.4
落地结果
2020年双11大促我们采用智能UI方案落地了多个前端模块（猜你喜欢模块，商品模块，店铺模块），这些模块覆盖了双11的预售和正式开卖阶段，算法工程链路承受了流量洪峰的考验，为业务带来了稳定的增长。覆盖的300多个会场，最高的会场PV点击率相对提升10%+。智能UI逐渐成为流量精细化运营不可或缺的新能力。
【猜你喜欢模块部分截图】
NO.5
未来展望
推荐算法
想要提升推荐算法的准确性本质上就是帮助消费者找到信息表达更准确的UI，更符合大家审美的UI。目前智能UI推荐算法是基于模块区块内元素进行个性化推荐，当前台模块区块划分不变的情况下，只调整样式时算法模型是不能够感知到界面发生了变化的，换句话讲就是算法对于UI的理解还不够深入。所以为了让算法可以更精准的感知UI信息，我们正在尝试通过图像识别技术提取前台UI特征输入给算法，来增加算法对于UI的了解。算法模型理解了UI，下一步就是要想办法理解面对UI的人。未来推荐算法部分我们会围绕这几个方面重点建设：UI的数字化沉淀、用户注意力分析、信息的有效表达、用户UI偏好分层。相信算法真正理解了UI和用户的偏好，推荐的效果可以再上一个台阶。
智能生成
智能UI线上应用时会产生很多有价值的埋点数据，从中可以挖掘出UI方案的曝光点击信息。目前这部分数据应用在推荐算法模型的训练中，同时这部分数据也可以帮助设计稿归因迭代，对于设计稿的反哺能力目前我们还在探索。未来我们期待智能UI体系内可以形成这样的闭环：设计师根据智能UI推荐的行业趋势产出视觉稿；视觉稿自动还原成页面物料；运营选择使用物料进行批量方案拼装；算法推荐合理方案；前端渲染SDK根据方案进行渲染并回流数据；数据中心沉淀设计元素的点击数据；设计师根据数据调整视觉稿，再次进行物料生产上线环节。
当我们有了完整的智能UI数据化闭环，我们接下来会和设计团队一起探索智能生成的落地。旨在将AI等新技术引入设计行业，透过机器学习，将预设的UI组件、UI模版等UI设计素材，根据设计规则、展现逻辑、用户数据和算法模型进行排列组合，从而获取符合业务需求和设计审美的规模化UI方案的方式，以达到为用户提供个性化的浏览界面的最终目标。要达到设计表达智能生成的目标，有两个重要方面：第一，提炼智能生成规则。将设计效果抽象成机器能够理解的规则，通过深度学习，完成设计数字化的转变。设计效果包含页面结构、商品素材、描述字段、风格样式等因素。第二，构建智能生成模型，建立生成规则、用户行为、场景需求和数据结果之间的映射关系。这就需要建立“生成规则-用户行为-场景需求-数据结果”的数据模型，为每个用户、 内容和UI表达之间进行权重打分，透过用户点击、停留时间、浏览转化、下单成交等行为来评价用户对推荐内容和呈现界面的满意度之后，再通过机器学习去训练，最后为每个用户都提供专属的、个人化的浏览界面。
欢迎关注东半球最大的前端团队