CBU智能UI落地最佳实践

阿里巴巴 前端委员会智能化小组 @ 阿里巴巴

文/  阿里 CBU技术部 - 霸天

导购场景的商品列表已经做到个性化。得益于人和商品的精准匹配,我们的前台页面点击效率逐年提升。如今商品信息比以往任何时候都要丰富,用户的手机屏幕也越来越大,我们有更大的空间可以进行信息呈现。这种丰富的信息和超大的屏幕空间,给UI表达带来了新的挑战。因为在特定的场景中存在非常多的可用信息,有时候很难找到用户需要的信息,并提供出合理的UI方案。所以借助算法的能力,为用户的提供更智能的界面非常重要。

在这个需要将每一个用户都“精心呵护”的时代,我们希望在个性推商推品的基础上,通过智能UI的推荐,为业务带来业务的更多增长。经过去年一年的探索和产品化建设,鲸幂平台沉淀了,智能UI在物料生产,配置实验,以及实验消费的能力。并且在双十一等大促中为业务带来了业务增值转化。

image

我们希望通过落地CBU,产出最佳实践,将现有的产品化能力给到更多的BU。通过对接尝试,我们将现有的物料生产实验配置的能力开放出来供大家对接。详细的对接方案见下方的CBU最佳实践

最佳实践整体大图

在开始看详细的对接流程之前,先来了解下我们当前对接流程的大图。鲸幂目前提供了,lowcode物料生产,物料托管,实验配置的能力。

  1. 首先通过上传sketch的方式快速生产物料
  2. 将生产好的物料注册到鲸幂平台上(自动化)
  3. 配置实验组合
  4. 对接自己的算法策略和消费容器组件,来串联智能UI的整体链路。

image.png

详细的技术对细节大图如下,目前我们已经提供了布局和物料的lowcode可视化生产流程,前端同学可以通过倒入sketch的方式来实现物料的生产和注册,及实验的配置。

image.png

最佳实践操作指南

第一步 设计智能UI方案

设计师需要按照我们先有的智能UI的约定,产出智能UI的布局及物料的设计规范,例如CBU的设计物料,在布局中区分物料坑位,并标注出坑位的间距,及每个坑位中的物料方案。

image.png

第二步:生产物料

我们提供了lowcode的物料生产方式,对 sketch 设计稿中的物料 group 统一加上前缀,在平台导入(或则使用 imgcook 插件导出物料描述,在 lowcode 平台上导入)。自动解析并创建物料的开发空间,开发同学只需要配置响应的数据字段,发布就可以得到物料包。

image.png

第三部 注册布局

通过前端配置 json 的方式来描述布局的样式及布局中间坑位的间距,也可以在平台上通过拖拽的方式进行布局的生产。后续,我们能通过 sketch 导出的方式直接生产,正在迭代中。

通过JSON生产

image.png

通过低代码拖拽生产

image.png

第四步 注册在布局中关联物料

有了布局和物料,我们就需要关联坑位和物料的关系。

image.png

第五步 选择实验方案

到这一步,我们就已经把我们的物料和布局全都注册好了,通在鲸幂平台上配置实验方案,选择布局和物料,点击保存,将我们的实验入库供BU内的算法同学消费。

image.png

第六步 对接通用数据源

CBU 目前已经对接了一个通用的多楼层数据源供大家使用,非CBU的同学按照以下步骤进行数据源对接

通过将ODPS表中的实验组合同步给算法,根据自己的业务算法策略,从实验方案中产出一个吐出。从数据中心中获取推品所需的字段返回给前端,完成一个通用的智能UI推品数据源对接。

image.png

第七步 开发实验消费容器

我们为CBU的同学提供了一套通用的多楼层交互容器,配置完实验的同学,只需要在CBU搭建平台上进行实验数据配置,就可以快速使用鲸幂提供的智能UI能力。针对多楼层的交互,我们封装了物料的动态加载容器,一次开发多次使用。在接下来的时间里,我们会继续提供其他类型交互的容器。同时我们为非CBU的同学提供了统一的渲染物料的SDK包

image.png

第八步 搭建投放

通过在搭建平台上配置我们的智能UI组件,完成智能UI最后一步,上线投放观测数据。CBU的同学在组件的搭建平台上配置页面,其他BU的同学在自己BU的搭建平台上搭建

image.png

鲸幂未来的建设规划🍅

如上所见,我们通过对接鲸幂的能力,完成了智能UI链路的串联,在对接过程中,物料生产,数据源对接及实验消费目前都还有优化的空间,后续我们会对物料生产注册流程及实验容器对接链路进行优化,给大家更好的对接体验,同时我们在调研和实践物料数字化相关的内容,通过对物料的业务特征和UI特征进行打标,将上线后的实验结果结合物料的打标特征进行数据沉淀,在未来更精准的给用户推荐智能UI。

写在最后

欢迎大家来了解,落地智能UI的事宜,我们会全力配合&支持。也欢迎大家来一起参与集团智能化重点方向智能场景项目的共建,让我们更快,更好,更高效的支持业务。项目内容涵盖智能UI、智能搭建、智能图片等领域,项目致力于通过设计及搭建经验的沉淀、针对不同人群的洞察,让场景的表达更加个性化,从而提升场景的转换,项目是个交叉领域,涉及UED、前端、算法、投放,搭建,欢迎更多同学参与共建,有意者请联系 伐薪 妙净 霸天 欣余。

文章分类
前端
文章标签