从新建文件夹到承接猫晚——夜间版淘宝首页的发展

淘宝首页Bface，业务上又称作夜淘宝（以下简称BFace），是结合淘宝用户以长时间休闲娱乐为主的需求而打造的一个全新产品，是我们对淘宝服务于用户生活方式的一个探索。

本文将从技术的视角，介绍BFace的设计和发展。

01 背景

什么是首页BFace？

首页BFace即首页B面，是通过点击淘宝首页右上角入口即可进入的神秘空间。

为什么要做BFace/夜淘宝？

一方面是暑期来临，淘宝进入正题淡季；另一方面是疫情后的第一个出游长假，影响站内活跃度。在这样的背景下，我们想打破淘宝之后卖货的固有认知，配合组织针对暑期内容的活动，打造一个全新的产品。

夜淘宝是我们对淘宝服务于用户生活方式的一个探索，初衷是希望通过和首页A面不同的特色内容娱乐、小程序的服务等，来满足用户夜间多样的生活诉求，是另一种打开淘宝的心智。

BFace的定位是什么？

24小时生活在淘宝（首页A面是消费、B面是生活）。

围绕用户生活的24小时以及LBS场景，通过与日常版有显著差异的本地、休闲娱乐直播、短视频、互动游戏、特色轻应用服务的组织投放，满足不同时段人群当下可能的生活类需求：

1. 夜间（晚8点-早6点）：以用户长时间休闲娱乐需求为主，结合LBS属性，通过城市直播、城市主题互动游戏、特色轻应用服务（听书/听歌等）、短视频、特色货品及玩法承接用户娱乐需求
2. 日间（早6点-晚8点）：以“休闲摸鱼”为切入点，满足用户闲暇碎片娱乐，主要通过互动游戏、特色轻应用服务（策略、经营等休闲互动）、优质短视频&直播内容承接用户日间短平快娱乐需求

在双十一中它承担了什么角色？

BFace作为双十一天猫晚会承接主入口。前期预告蓄水+支持预约，当晚入口实时透出明星节目单，配合晚会主持人口播引导（“打开淘宝点击右上角”），在BFace各个模块透出相应直播间、短视频素材、互动等。

02 BFace的迭代

最开始我们只有夜淘宝的概念，一期设计的产品和运营的内容都围绕夜晚展开，因此BFace的首页入口也只在每晚20点到次日6点透出。

但这样子难以养成用户对于BFace入口的心智，同时原本顶Bar的会员码相对疲软，因此在日间，我们搞了个“日淘宝”。增加了一些互动、日间开播的主播池，就这么上了。

但白天与夜晚相比，缺乏相对集中的氛围感和用户需求场景，且准备的内容太过于仓促，在内部“亲测”反馈较差，最终我们决定不再放量饱受争议的日淘宝，先上一个静态预告页面顶着，直至将日淘宝的内容打磨完成。

在明确了日淘宝的目标用户、产品心智和核心策略（通过游戏大厅、“短快”的短视频供给，更好的承接用户在日间闲暇时段对于消磨时间、找找乐趣的需求）后，结合重构后的入口、轮播，我们重新上线的日淘宝效率明显提升，和夜淘宝一起成为了完整体的BFace。

在双十一，夜淘宝有了更大的职责：承担天猫晚会。通过对入口、Banner重构、轮播挂载、直播品牌墙等一系列BFace组件的迭代，支持对猫晚整体的运营，包括猫晚金主的广告、猫晚实时直播的承接、明星节目的预告以及晚会后的热点回放等。

03 技术设计

技术选型

对于这一类新起页面的设计，首页有着多种技术选型：

1. 切版形式：如长辈模式、新人模式等，整体技术架构不变，对于不同版本构造不同的方案，自研定制的组件和DX模板，通过顶Bar切版按钮和我淘版本设置进行切换。
2. 海外形式：如海外版。首页服务端将海外相关的请求分发给海外首页应用进行承接处理。海外版拥有自己专属的首页容器，在试金石分流体系中，以更高维度的“场景”来和大陆版首页进行区分；客户端侧仅提供native容器。
3. 订阅/直播tab形式：如顶Bar的关注tab。首页服务端仅在首页顶Bar组件中添加“订阅”/“直播”的tab按钮，对于点击后的事件不感知，订阅和直播拥有自己独立的mtop接口和对应的服务端服务。首页客户端团队只提供了新tab的接入能力和生命周期事件，业务在新tab内从前台表达到后台数据，有完全自主的开发能力，业务发展拥有足够充分的空间。
4. 首页即会场形式：如“大促猫头”。通过浮层能力作为入口，端侧提供容器，承接会场前端页面。首页仅负责提供入口、容器和对应顶Bar氛围的变更。

快速迭代，低成本支持试错

考虑到夜淘宝也属于首页维护，且其交互形式要给用户首页B面的心智，因此切版、海外等形式过重。同时考虑到项目所需要的快速迭代和低成本试错需求，我们考虑在使用首页即会场形式的基础上，对其进行改造：

1. 前端、客户端、服务端三端结合。
2. 入口选择通过子容器透出在主容器顶Bar右上角位置，复用并升级首页即会场猫头的浮层能力。
3. B面整体通过复用首页组件式协议、复用首猜88主链路新建TPP场景来快速搭建服务端数据，通过自建跨容器参数来解决AB面切换时主容器不刷新和顶Bar切换的诉求。
4. 基于客户端业务容器能力，前端自建PHA页面结合后端搭建来支持快速上线支持业务。相比于使用方舟、斑马等前端搭建工具，这一套选型能够更大程度地复用首页搭建投放体系的现有能力，对于快速迭代的夜淘宝来说也更灵活低成本。

可运营空间和运营效率的动态平衡

• 降低运营成本

BFace各大模块（入口、Banner、轮播、挂载等）均采用素材入驻和投放相分离的方式，这种方式的开发和初次上线配置相对更加复杂，但更有利于长期运营迭代。比如在活动期间通过Banner通告和轮播挂载两种形式的动态组合，来保证双十一期间金主的广告投放和实时的活动配置支持，做到了既和主模块轮播相关联，又不会让临时的变更耦合在一起。

• 支持细粒度运营的同时，提高运营效率

支持细粒度运营（模块->坑位->池子->内容ID/固定素材），但运营粒度越细也就意味着配置项越多，而全靠人工运营肯定是不现实的，因此一方面我们逐一设定合理的默认项；另一方面我们引入混排算法，对入口和页面的素材进行训练并作为主要的日常配置来源，后续将进一步扩展到轮播等主要模块，以进一步减少日常常规运营的人力。

• 减少人工配置的失误

为了减少人工配置的失误率，BFace通过主动冗余code的设计，来对素材code和相关属性进行注册。这么做一方面能够支持跨模块的投放动态可选项能力，减少了人工配置的笔误；另一方面确保大量注册业务的集中管理，便于进行跨模块素材的重名、是否唯一等校验。

跨容器传参

对于首页里的嵌套页面，绕不开的一个问题就是兼容顶Bar的氛围。而对于BFace来说，这一问题更加复杂，有如下这么几个原因：

1. BFace涉及日/夜维度的变换，且判定的时间条件会根据不同定投而变
2. Bface的氛围要求和入口、BFace页面内的日/夜强一致
3. 进入BFace的时候仅涉及子容器到BFace容器的切换，不请求主容器

这就导致判定日/夜的结果必须同时给顶Bar和BFace入口/页面内进行使用而不是各自判定。

但顶Bar所在的主容器，和入口所在的子容器、BFace页面所在的BFace容器均不是同一个容器，通过常规的Passparms只能够来将子容器（入口）判定的日夜版本传递给Bface容器，但对主容器来说并没有时机去拿passParams里的版本信息重新渲染。

因此我们定义了每个容器的跨容器参数，并在主接口的后置链路，也就是各容器构造完成后，对跨容器参数进行递归地合并和重新赋值，来实现对时机无依赖的跨容器传参。

入口多模块所见所得&数科个性化设计

BFace的入口是整个B面引流的核心，也是承载特殊活动的关键宣导。因此在入口侧我们有着复杂而强大的构造逻辑。

1. 全素材支持强运营，面向人群定投的定制化引流
2. 针对不同业务，动态配置不同的数科or算法的计算结果表，争取推荐结果最优化
3. 入口ID写入PassParams，结合对入口表更新的校验，实现离线链路下实现入口实时刷新的效果
4. 入口ID所对应的素材也走试金石配置和算法表动态生成两条链路

在复杂的入口构造逻辑背后，BFace也有着相应强大的所见即所得承接能力，从Banner到轮播挂载到轮播主卡到互动卡，均支持入口的所见即所得承接。

可扩展性设计

在设计时，我们将各类型数据源抽象、与上层业务形态解耦，以支持上层卡片灵活变动。比如轮播额外支持短视频，又或者双十一临时新增直播品牌墙来支持猫晚广告位，都是基于这种设计来快速实现直播/短视频卡片定坑透出，仅需要按照新卡片协议组装一下即可。

而对于互动卡片这一类上限几十个、动辄新增业务接入的模块，我们设计了BFace互动SPI来避免逐一接入的成本和复杂度，通过泛化调用结合配置实现0代码接入新互动业务。

多级强运营&兜底

从页面->模块->坑位->业务->字段，都有相应的强运营、兜底逻辑，以应对各种异常或突发情况。比如明星头像临时要配死、节目时间拖堂了、指定直播间未开播等运营特殊情况，又或者首页接口限流、直播短视频等池子召回失败、素材补全接口超时等技术特殊情况，都能够通过上述各环节兜底来兜住。

对于猫晚这种瞬时峰值依赖主持人口播、难以准确预估流量峰值的大促场景来说，层层灵活兜底是兼顾机器水位和用户体验的重要保障。

04 成果

自7月上线、8月全时段全量开放以来，BFace夜淘宝传递给用户上淘宝看新鲜娱乐内容的心智逐步强化，并且陆续打造和承接了《封神》见面会、自制短剧《惊奇物语》、鉴宝大会等爆款内容，用户规模和留存明显提升，频道用户量较上线初期已实现3倍增长。

在此次双十一晚会，BFace对明星节目的预告-承接-回溯的全流程承接成效突出，频道用户规模及时长，较日常水平均有超过三倍的提升，且以年轻女性表现的兴趣偏好最为突出，也为接下来内容运营指明了一条方向，希望以后更多人也能在淘宝上尽兴~

05 未来发展

针对首页

BFace可以作为首页快速构造二级页承接活动/新业务的模板，沉淀出一套首页快速搭建专项页面和入口的通用方案，提高首页对于后续这一类新业务、临时活动快速进行业务验证的能力。

针对BFace

一方面，在全链路更多地结合算法，做到非强运营业务的页面内混排、素材自动补全，来减少人工运营的成本、提高内容分发的效率；另一方面，强化入口/渠道与频道内承接的连续性与整体性，实现频道内全内容定向承接的灵活混排推荐能力，以更好地承接跨年晚会等活动。

首页作为淘宝门户，在内容化大潮中也要尝试适合自己的创新，BFace正是这样一个在寸土寸金的首页中孵化出来的创新业务，在未来我们也将进一步利用好BFace这个阵地，积极做更多的尝试。

本文由微信公众号大淘宝技术原创，哈喽比特收录。
文章来源：https://mp.weixin.qq.com/s/rULHBGO3wOpvN7xXzY2u5w