文/ 阿里 CBU技术部 - 霸天

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

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

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

最佳实践整体大图

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

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

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

最佳实践操作指南

第一步设计智能UI方案

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

第二步：生产物料

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

第三部注册布局

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

通过JSON生产

通过低代码拖拽生产

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

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

第五步选择实验方案

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

第六步对接通用数据源

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

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

第七步开发实验消费容器

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

第八步搭建投放

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

鲸幂未来的建设规划🍅

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

写在最后

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