从新建文件夹到承接猫晚——夜间版淘宝首页的发展
背景
▐ 什么是首页BFace？
▐ 为什么要做BFace/夜淘宝？
一方面是暑期来临，淘宝进入正题淡季；另一方面是疫情后的第一个出游长假，影响站内活跃度。在这样的背景下，我们想打破淘宝之后卖货的固有认知，配合组织针对暑期内容的活动，打造一个全新的产品。
夜淘宝是我们对淘宝服务于用户生活方式的一个探索，初衷是希望通过和首页A面不同的特色内容娱乐、小程序的服务等，来满足用户夜间多样的生活诉求，是另一种打开淘宝的心智。
▐ BFace的定位是什么？
24小时生活在淘宝（首页A面是消费、B面是生活）。围绕用户生活的24小时以及LBS场景，通过与日常版有显著差异的本地、休闲娱乐直播、短视频、互动游戏、特色轻应用服务的组织投放，满足不同时段人群当下可能的生活类需求：
夜间（晚8点-早6点）：以用户长时间休闲娱乐需求为主，结合LBS属性，通过城市直播、城市主题互动游戏、特色轻应用服务（听书/听歌等）、短视频、特色货品及玩法承接用户娱乐需求
日间（早6点-晚8点）：以“休闲摸鱼”为切入点，满足用户闲暇碎片娱乐，主要通过互动游戏、特色轻应用服务（策略、经营等休闲互动）、优质短视频&直播内容承接用户日间短平快娱乐需求
▐ 在双十一中它承担了什么角色？
BFace作为双十一天猫晚会承接主入口。前期预告蓄水+支持预约，当晚入口实时透出明星节目单，配合晚会主持人口播引导（“打开淘宝点击右上角”），在BFace各个模块透出相应直播间、短视频素材、互动等。
BFace的迭代
最开始我们只有夜淘宝的概念，一期设计的产品和运营的内容都围绕夜晚展开，因此BFace的首页入口也只在每晚20点到次日6点透出。
但这样子难以养成用户对于BFace入口的心智，同时原本顶Bar的会员码相对疲软，因此在日间，我们搞了个“日淘宝”。增加了一些互动、日间开播的主播池，就这么上了。
在明确了日淘宝的目标用户、产品心智和核心策略（通过游戏大厅、“短快”的短视频供给，更好的承接用户在日间闲暇时段对于消磨时间、找找乐趣的需求）后，结合重构后的入口、轮播，我们重新上线的日淘宝效率明显提升，和夜淘宝一起成为了完整体的BFace。
▐ 技术选型
对于这一类新起页面的设计，首页有着多种技术选型：
切版形式：如长辈模式、新人模式等，整体技术架构不变，对于不同版本构造不同的方案，自研定制的组件和DX模板，通过顶Bar切版按钮和我淘版本设置进行切换。
海外形式：如海外版。首页服务端将海外相关的请求分发给海外首页应用进行承接处理。海外版拥有自己专属的首页容器，在试金石分流体系中，以更高维度的“场景”来和大陆版首页进行区分；客户端侧仅提供native容器。
订阅/直播tab形式：如顶Bar的关注tab。首页服务端仅在首页顶Bar组件中添加“订阅”/“直播”的tab按钮，对于点击后的事件不感知，订阅和直播拥有自己独立的mtop接口和对应的服务端服务。首页客户端团队只提供了新tab的接入能力和生命周期事件，业务在新tab内从前台表达到后台数据，有完全自主的开发能力，业务发展拥有足够充分的空间。
首页即会场形式：如“大促猫头”。通过浮层能力作为入口，端侧提供容器，承接会场前端页面。首页仅负责提供入口、容器和对应顶Bar氛围的变更。
快速迭代，低成本支持试错
考虑到夜淘宝也属于首页维护，且其交互形式要给用户首页B面的心智，因此切版、海外等形式过重。同时考虑到项目所需要的快速迭代和低成本试错需求，我们考虑在使用首页即会场形式的基础上，对其进行改造：
前端、客户端、服务端三端结合。
入口选择通过子容器透出在主容器顶Bar右上角位置，复用并升级首页即会场猫头的浮层能力。
B面整体通过复用首页组件式协议、复用首猜88主链路新建TPP场景来快速搭建服务端数据，通过自建跨容器参数来解决AB面切换时主容器不刷新和顶Bar切换的诉求。
基于客户端业务容器能力，前端自建PHA页面结合后端搭建来支持快速上线支持业务。相比于使用方舟、斑马等前端搭建工具，这一套选型能够更大程度地复用首页搭建投放体系的现有能力，对于快速迭代的夜淘宝来说也更灵活低成本。
▐ 可运营空间和运营效率的动态平衡
降低运营成本
BFace各大模块（入口、Banner、轮播、挂载等）均采用素材入驻和投放相分离的方式，这种方式的开发和初次上线配置相对更加复杂，但更有利于长期运营迭代。比如在活动期间通过Banner通告和轮播挂载两种形式的动态组合，来保证双十一期间金主的广告投放和实时的活动配置支持，做到了既和主模块轮播相关联，又不会让临时的变更耦合在一起。
支持细粒度运营的同时，提高运营效率
支持细粒度运营（模块->坑位->池子->内容ID/固定素材），但运营粒度越细也就意味着配置项越多，而全靠人工运营肯定是不现实的，因此一方面我们逐一设定合理的默认项；另一方面我们引入混排算法，对入口和页面的素材进行训练并作为主要的日常配置来源，后续将进一步扩展到轮播等主要模块，以进一步减少日常常规运营的人力。
减少人工配置的失误
为了减少人工配置的失误率，BFace通过主动冗余code的设计，来对素材code和相关属性进行注册。这么做一方面能够支持跨模块的投放动态可选项能力，减少了人工配置的笔误；另一方面确保大量注册业务的集中管理，便于进行跨模块素材的重名、是否唯一等校验。
▐ 跨容器传参
对于首页里的嵌套页面，绕不开的一个问题就是兼容顶Bar的氛围。而对于BFace来说，这一问题更加复杂，有如下这么几个原因：
BFace涉及日/夜维度的变换，且判定的时间条件会根据不同定投而变
Bface的氛围要求和入口、BFace页面内的日/夜强一致
进入BFace的时候仅涉及子容器到BFace容器的切换，不请求主容器
这就导致判定日/夜的结果必须同时给顶Bar和BFace入口/页面内进行使用而不是各自判定。
但顶Bar所在的主容器，和入口所在的子容器、BFace页面所在的BFace容器均不是同一个容器，通过常规的Passparms只能够来将子容器（入口）判定的日夜版本传递给Bface容器，但对主容器来说并没有时机去拿passParams里的版本信息重新渲染。
▐ 入口多模块所见所得&数科个性化设计
BFace的入口是整个B面引流的核心，也是承载特殊活动的关键宣导。因此在入口侧我们有着复杂而强大的构造逻辑。
全素材支持强运营，面向人群定投的定制化引流
针对不同业务，动态配置不同的数科or算法的计算结果表，争取推荐结果最优化
入口ID写入PassParams，结合对入口表更新的校验，实现离线链路下实现入口实时刷新的效果
入口ID所对应的素材也走试金石配置和算法表动态生成两条链路
在复杂的入口构造逻辑背后，BFace也有着相应强大的所见即所得承接能力，从Banner到轮播挂载到轮播主卡到互动卡，均支持入口的所见即所得承接。
▐ 可扩展性设计
而对于互动卡片这一类上限几十个、动辄新增业务接入的模块，我们设计了BFace互动SPI来避免逐一接入的成本和复杂度，通过泛化调用结合配置实现0代码接入新互动业务。
▐ 多级强运营&兜底
从页面->模块->坑位->业务->字段，都有相应的强运营、兜底逻辑，以应对各种异常或突发情况。比如明星头像临时要配死、节目时间拖堂了、指定直播间未开播等运营特殊情况，又或者首页接口限流、直播短视频等池子召回失败、素材补全接口超时等技术特殊情况，都能够通过上述各环节兜底来兜住。
对于猫晚这种瞬时峰值依赖主持人口播、难以准确预估流量峰值的大促场景来说，层层灵活兜底是兼顾机器水位和用户体验的重要保障。
成果
自7月上线、8月全时段全量开放以来，BFace夜淘宝传递给用户上淘宝看新鲜娱乐内容的心智逐步强化，并且陆续打造和承接了《封神》见面会、自制短剧《惊奇物语》、鉴宝大会等爆款内容，用户规模和留存明显提升，频道用户量较上线初期已实现3倍增长。
在此次双十一晚会，BFace对明星节目的预告-承接-回溯的全流程承接成效突出，频道用户规模及时长，较日常水平均有超过三倍的提升，且以年轻女性表现的兴趣偏好最为突出，也为接下来内容运营指明了一条方向，希望以后更多人也能在淘宝上尽兴~
▐ 针对首页
BFace可以作为首页快速构造二级页承接活动/新业务的模板，沉淀出一套首页快速搭建专项页面和入口的通用方案，提高首页对于后续这一类新业务、临时活动快速进行业务验证的能力。
▐ 针对BFace
一方面，在全链路更多地结合算法，做到非强运营业务的页面内混排、素材自动补全，来减少人工运营的成本、提高内容分发的效率；另一方面，强化入口/渠道与频道内承接的连续性与整体性，实现频道内全内容定向承接的灵活混排推荐能力，以更好地承接跨年晚会等活动。
首页作为淘宝门户，在内容化大潮中也要尝试适合自己的创新，BFace正是这样一个在寸土寸金的首页中孵化出来的创新业务，在未来我们也将进一步利用好BFace这个阵地，积极做更多的尝试。