背景
▐HomepageBFaceとは何ですか？
▐なぜBFace/Night淘宝をやりたいのですか？
夏が近づき、タオバオはオフシーズンに入った一方で、流行後初めての長期旅行休暇となり、サイトの活動に影響が出ている。この文脈で、私たちはタオバオの後に商品を販売するという固有の認識を打ち破り、夏のコンテンツの企画活動に協力し、まったく新しい製品を作成したいと考えています。
ナイトタオバオは、ユーザーのライフスタイルに合わせたタオバオのサービスを我々が模索したもので、本来の目的は、ホームページAとは異なる特別なコンテンツエンターテインメントと小さなプログラムサービスを通じて、ユーザーの夜の多様な生活需要を満たすことであり、タオバオを開くもう一つの方法です。。心。
▐ BFaceの位置付けは何ですか？
タオバオで 1 日 24 時間ライブします (ホームページの A 面は消費、B 面は生活です)。24 時間のユーザー ライフと LBS シナリオに焦点を当て、日常バージョンとは大きく異なるローカル、レジャー、エンターテイメントのライブ ブロードキャスト、ショート ビデオ、インタラクティブ ゲーム、および特別なライト アプリケーション サービスの編成と配信を通じて、さまざまな時代の人々の現在の生活ニーズの可能性:
夜間 (午後 8 時から午前 6 時まで): 都市ライブ放送、都市をテーマにしたインタラクティブ ゲーム、特別なライト アプリケーション サービス (本を聴く/歌を聴く、など）、ショートビデオ、特別な製品やゲームプレイなど、ユーザーのエンターテイメントニーズを満たす
日中（午前6時から午後8時まで）：「レジャー釣り」を入り口として、主にインタラクティブゲーム、特殊なライトアプリケーションサービス（戦略、管理およびその他のレジャーインタラクション）、高品質のショートビデオを通じて、ユーザーのレジャーの断片的なエンターテイメントを満足させます。 & ライブコンテンツは、日中の短期間のエンターテイメントに対するユーザーのニーズを満たします
▐ダブルイレブンではどのような役割を果たしていますか？
BFaceはダブルイレブン天猫パーティーのメインエントランスの役割を果たします。事前アナウンス+予約サポート、夜の入り口で有名人の番組リストがリアルタイムで公開され、ホストの口頭ガイダンス（「タオバオを開いて右上隅をクリック」）と連動して、対応するライブブロードキャストルーム、短いビデオ素材、インタラクションなどが BFace の各モジュールで公開されます。
BFaceの反復
当初は夜のタオバオというコンセプトしかなく、第一フェーズで設計した商品や運営はすべて夜を中心としたものであったため、BFaceのホームページ入口は毎晩20時から翌日の6時までしか公開されていませんでした。 。
しかし、BFaceの入り口はユーザーの心を育てるのが難しく、同時にBarのオリジナル会員コードが比較的弱いため、日中に「デイリータオバオ」を立ち上げました。インタラクティブな日中アンカー プールをいくつか追加しました。これで終わりです。
リータオバオのターゲットユーザー、製品哲学、核心戦略を明確にした後（ゲームホールと「短期」ショートビデオの提供を通じて、ユーザーの日中の暇つぶしや楽しみのニーズをより適切に満たすことができます）、再構築されたエントランスとカルーセルと組み合わせることで、再起動したデイリータオバオの効率が大幅に向上し、ナイトタオバオと合わせて完全なBFaceになりました。
▐技術選定
このタイプの新しいページをデザインするために、ホームページにはさまざまな技術的なオプションがあります。
カッティングフォーム: 年長者モード、新参者モードなど 全体的な技術構造は変更されていません バージョンごとに異なるソリューションが構築されています 自社開発のカスタマイズされたコンポーネントと DX テンプレートは、トップバーのカッティング ボタンと Wotao のバージョン設定を通じて切り替えることができます
海外形式：海外版など。ホームページサーバーは、海外関連のリクエストを海外のホームページアプリケーションに振り分けて処理します。海外版は独自の専用ホームページコンテナを持っていますが、試金石転用システムでは本土版ホームページと区別するために高次元の「シナリオ」を用いており、クライアント側ではネイティブコンテナのみを提供しています。
サブスクリプション/ライブブロードキャストタブの形式: Ding Bar のフォロータブなど。ホームページ サーバーは、ホームページの上部バー コンポーネントに「購読」/「ライブ ブロードキャスト」タブ ボタンを追加するだけであり、クリック後のイベントは認識されません。購読とライブ ブロードキャストには、独自の独立した mtop インターフェイスと対応するサーバー サービスがあります。 。ホームページクライアントチームは、新しいタブのアクセス機能とライフサイクルイベントのみを提供し、フロントデスクからバックグラウンドデータまでのビジネスを新しいタブで表現し、完全に独立した開発能力を持ち、ビジネス開発に十分なスペースを持っています。
ホームページは会場形式：「大売り出し猫頭」など。フローティングレイヤーの機能を入り口としてエンド側にコンテナを設け、会場のフロントエンドページを引き受けます。ホームページは、入り口、コンテナ、および対応するトップバーの雰囲気に変更を提供することのみを担当します。
迅速な反復と低コストのサポートの試行錯誤
ナイトタオバオもホームページのメンテナンスに属し、そのインタラクティブなフォームはユーザーにホームページのB面の精神的な経験を提供する必要があることを考慮すると、フォーマット、海外、その他のフォームは重すぎます。同時に、プロジェクトに必要な迅速な反復と低コストの試行錯誤の要件を考慮して、会場形式としてホームページを使用することをベースにプロジェクトを変換することを検討しました。
フロントエンド、クライアント、サーバーが結合されます。
入口の選択は、メイン コンテナの上部バーの右上隅にあるサブコンテナを通じて明らかにされ、会場の猫の頭であるホームページのフローティング レイヤー機能を再利用およびアップグレードします。
B 側全体では、ホームページ コンポーネント プロトコルと最初の推測 88 メイン リンクを再利用して新しい TPP シナリオを作成することで、サーバー データを迅速に構築し、AB の実行時にメイン コンテナが更新されず、トップ バーが切り替わらない問題を解決します。コンテナ間のパラメータを自己作成することでサイドを切り替えます。
クライアントのビジネスコンテナ機能に基づいて、フロントエンドの自社構築PHAページとバックエンド構築を組み合わせて、迅速なオンラインビジネスサポートをサポートします。Ark や Zebra などのフロントエンド構築ツールを使用する場合と比較して、このオプション セットは、ホームページの既存の機能を再利用して、配信システムを大幅に構築できます。イェタオバオ。
▐操作可能スペースと操作効率の動的バランス
運用コストの削減
BFace のすべての主要なモジュール (エントランス、バナー、カルーセル、マウントなど) は、マテリアルの入力と配信を分離する方法を採用しています。この方法の開発と初期のオンライン構成は比較的複雑ですが、長期的な運用に役立ちます。操作の繰り返し。たとえば、イベント中は、バナー アナウンスとカルーセル マウントの動的な組み合わせを使用して、スポンサーの広告とダブル イレブン期間中のリアルタイムのイベント設定サポートを確保しました。そのため、メイン モジュールのカルーセルと関連付けられているだけでなく、独立したモジュールにも関連付けられています。 of 一時的な変更を結合できるようにします。
業務効率を向上させながらきめ細かい業務をサポート
細かい操作（モジュール -> ピット -> プール -> コンテンツ ID/固定マテリアル）をサポートしますが、操作の粒度が細かいほど設定項目が多くなり、手動操作だけに依存するのは明らかに非現実的です。合理的なデフォルト項目を 1 つずつ設定する一方、シャッフル アルゴリズムを導入してポータルとページの素材をトレーニングし、それらを毎日の構成の主なソースとして使用します。カルーセルとして日常業務をさらに削減します。
手動構成エラーを減らす
手動構成のエラー率を減らすために、BFace はアクティブな冗長コードの設計を通じてマテリアル コードと関連属性を登録します。これにより、モジュール間で動的なオプションを提供できる機能がサポートされ、手動構成での事務的エラーが削減される一方で、多数の登録サービスの集中管理が保証され、重複した名前と相互登録サービスの一意性の検証が容易になります。 -モジュールマテリアル。
▐コンテナ間でパラメータを転送する
ホームページ上のネストされたページの場合、トップバーの雰囲気との互換性は避けられない問題です。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这个阵地，积极做更多的尝试。
本文分享自微信公众号 - 大淘宝技术（AlibabaMTT）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。