Von der Erstellung neuer Ordner bis zur Durchführung von Maowan – der Entwicklung der Nachtversion von Taobaos Homepage

Die Taobao-Homepage Bface, in der Geschäftssprache auch als Night Taobao bekannt (im Folgenden als BFace bezeichnet), ist ein brandneues Produkt, das auf der Grundlage der Bedürfnisse der Taobao-Benutzer nach langfristiger Freizeit und Unterhaltung entwickelt wurde. Es ist unsere Erkundung des Service von Taobao für Benutzer ' Lebensstile. In diesem Artikel werden das Design und die Entwicklung von BFace aus technischer Sicht vorgestellt.

Hintergrund

▐Was ist HomepageBFace?

Homepage BFace ist die B-Seite der Homepage. Es handelt sich um einen mysteriösen Bereich, der durch Klicken auf den Eingang in der oberen rechten Ecke der Taobao-Homepage betreten werden kann.

▐Warum möchtest du BFace/Night Taobao machen?

Einerseits steht der Sommer vor der Tür und Taobao ist in die Nebensaison eingetreten, andererseits ist es der erste lange Reiseurlaub nach der Epidemie, der sich auf die Aktivitäten vor Ort auswirkt. In diesem Zusammenhang möchten wir mit der inhärenten Wahrnehmung des Warenverkaufs nach Taobao brechen, bei der Organisation von Aktivitäten für Sommerinhalte zusammenarbeiten und ein brandneues Produkt schaffen.

Night Taobao ist unsere Untersuchung des Dienstes von Taobao für den Lebensstil der Benutzer. Die ursprüngliche Absicht besteht darin, die unterschiedlichen Lebensanforderungen der Benutzer nachts durch spezielle Inhaltsunterhaltung und kleine Programmdienste zu erfüllen, die sich von der Startseite A unterscheiden. Dies ist eine andere Möglichkeit, Taobao zu öffnen . Geist.

▐ Wie ist die Positionierung von BFace?

Lebe 24 Stunden am Tag auf Taobao (Seite A der Homepage ist Konsum, Seite B ist Leben). Indem wir uns auf die 24 Stunden des Benutzerlebens und LBS-Szenarien konzentrieren , können wir durch die Organisation und Bereitstellung lokaler, Freizeit- und Unterhaltungs-Live-Übertragungen, kurzer Videos, interaktiver Spiele und spezieller Lichtanwendungsdienste, die sich deutlich von der täglichen Version unterscheiden, die Anforderungen erfüllen mögliche aktuelle Lebensbedürfnisse von Menschen in verschiedenen Zeiträumen:

Nachts (20:00 bis 06:00 Uhr): Fokussierung auf die langfristigen Freizeit- und Unterhaltungsbedürfnisse der Benutzer , kombiniert mit LBS-Attributen, durch Live-Übertragungen in der Stadt, interaktive Spiele zum Thema Stadt, spezielle Lichtanwendungsdienste (Bücher/Lieder anhören, usw.), kurze Videos, spezielle Produkte und Gameplay, um den Unterhaltungsbedürfnissen der Benutzer gerecht zu werden
Tagsüber (6 bis 20 Uhr) : „Freizeitangeln“ als Einstiegspunkt zur Befriedigung der fragmentierten Freizeitunterhaltung der Benutzer, hauptsächlich durch interaktive Spiele, spezielle Lichtanwendungsdienste (Strategie, Management und andere Freizeitinteraktionen) sowie hochwertige Kurzvideos & Live-Inhalte erfüllen die Bedürfnisse der Nutzer nach kurzfristiger Unterhaltung während des Tages

▐Welche Rolle spielt es in Double Eleven?

BFace dient als Haupteingang für die Double Eleven Tmall Party. Voranmeldung + Reservierungsunterstützung, die Programmliste der Prominenten wird in Echtzeit am Eingang des Abends bekannt gegeben, und in Verbindung mit der mündlichen Anleitung des Gastgebers („Öffnen Sie Taobao und klicken Sie auf die obere rechte Ecke“) werden entsprechende Live-Übertragungsräume angezeigt. Kurze Videomaterialien, Interaktionen usw. werden in jedem Modul von BFace enthüllt.

Iteration von BFace

Am Anfang hatten wir nur das Konzept von Nacht-Taobao. Die in der ersten Phase entworfenen Produkte und Abläufe konzentrierten sich alle auf die Nacht, sodass der Homepage-Eingang von BFace nur jeden Abend von 20:00 Uhr bis 6:00 Uhr am nächsten Tag enthüllt wurde .

Es ist jedoch schwierig, den Geist der Benutzer für den BFace-Zugang zu kultivieren. Gleichzeitig ist der ursprüngliche Mitgliedschaftscode für Bar relativ schwach, daher haben wir im Laufe des Tages ein „Daily Taobao“ gestartet. Wir haben einige interaktive und tagsüber verfügbare Ankerpools hinzugefügt, und das war’s.

Im Vergleich zu Tag und Nacht mangelt es jedoch an relativ konzentrierten Atmosphären- und Benutzeranforderungsszenarien, die vorbereiteten Inhalte sind zu voreilig und das interne Feedback zum „persönlichen Test“ ist schlecht. Am Ende haben wir uns entschieden, dies nicht zu erhöhen Band des umstrittenen Ri Taobao, erster Die vorherige statische Vorschauseite wird beibehalten, bis der Inhalt des japanischen Taobao verfeinert ist.

Nachdem wir die Zielbenutzer, die Produktphilosophie und die Kernstrategien von Ri Taobao geklärt haben (durch Spielhallen und „kurzfristiges“ kurzes Videoangebot können wir die Bedürfnisse der Benutzer, die Zeit totzuschlagen und tagsüber Spaß zu haben, besser erfüllen), In Kombination mit dem rekonstruierten Eingang und Karussell wurde die Effizienz unseres neu eingeführten Daily Taobao deutlich verbessert und zusammen mit Night Taobao ist es zu einem vollständigen BFace geworden.

Bei Double Eleven hat Ye Taobao eine größere Verantwortung: die Tmall-Party zu übernehmen. Durch die Iteration einer Reihe von BFace-Komponenten wie Eingang, Bannerrekonstruktion, Karussellmontage und Live-Markenwand wird der Gesamtbetrieb von Maowan unterstützt, einschließlich der Werbung für Maowan-Sponsoren, der Durchführung von Maowan-Echtzeit-Liveübertragungen, und die Werbung für Promi-Programme. Vorschauen und Hot-Spot-Wiederholungen nach der Party usw.

Technisches Design

▐Technische Auswahl

Für die Gestaltung einer solchen neuen Seite stehen der Homepage vielfältige technische Möglichkeiten zur Verfügung:

Schnittformen: wie Elder-Modus, Newcomer-Modus usw. Die gesamte technische Struktur bleibt unverändert. Für verschiedene Versionen werden unterschiedliche Lösungen erstellt. Selbstentwickelte benutzerdefinierte Komponenten und DX-Vorlagen können über die Schnittschaltfläche in der oberen Leiste und die Wotao-Versionseinstellungen umgeschaltet werden.
Übersee-Formular: z. B. Übersee-Version. Der Homepage-Server verteilt Auslandsanfragen zur Verarbeitung an ausländische Homepage-Anwendungen. Die Überseeversion verfügt über einen eigenen exklusiven Homepage-Container. Im Touchstone-Umleitungssystem wird ein höherdimensionales „Szenario“ verwendet, um es von der Homepage der Festlandversion zu unterscheiden; auf der Clientseite werden nur native Container bereitgestellt.
Abonnement-/Liveübertragungs-Tab-Format: Wie der Follow-Tab von Ding Bar. Der Homepage-Server fügt nur die Registerkartenschaltfläche „Abonnieren“/„Live-Übertragung“ in der oberen Leistenkomponente der Homepage hinzu und erkennt Ereignisse nach dem Klicken nicht. Abonnement und Live-Übertragung verfügen über eigene unabhängige MTOP-Schnittstellen und entsprechende Serverdienste . Das Homepage-Client-Team stellt nur die Zugriffsfunktionen und Lebenszyklusereignisse des neuen Tabs bereit. Das Geschäft wird von der Rezeption bis zu den Hintergrunddaten im neuen Tab ausgedrückt. Es verfügt über völlig unabhängige Entwicklungsfunktionen und bietet ausreichend Platz für die Geschäftsentwicklung.
Die Homepage ist das Format des Veranstaltungsortes: zum Beispiel „Big Sale Cat Head“. Unter Verwendung der Floating-Layer-Funktion als Eingang wird an der Endseite ein Container bereitgestellt, der die Vorderseite des Veranstaltungsortes übernimmt. Für Änderungen am Eingang, Container und entsprechendem Top-Bar-Ambiente ist die Homepage lediglich verantwortlich.

Schnelle Iteration und kostengünstige Unterstützung durch Versuch und Irrtum

Wenn man bedenkt, dass Night Taobao auch zur Homepage-Pflege gehört und seine interaktive Form den Benutzern das mentale Erlebnis der B-Seite der Homepage ermöglichen soll, sind Formatierung, Übersee und andere Formen zu schwer. Gleichzeitig erwogen wir unter Berücksichtigung der für das Projekt erforderlichen schnellen Iteration und kostengünstigen Versuch-und-Irrtum-Anforderungen eine Umgestaltung auf der Grundlage der Verwendung der Homepage als Veranstaltungsortformat:

Frontend, Client und Server sind vereint.
Die Eingangsauswahl wird durch den Untercontainer in der oberen rechten Ecke der oberen Leiste des Hauptcontainers angezeigt, wodurch die Floating-Layer-Fähigkeit der Homepage, bei der es sich um den Cat-Head des Veranstaltungsortes handelt, wiederverwendet und aktualisiert wird.
Die B-Seite als Ganzes erstellt schnell Serverdaten, indem sie das Homepage-Komponentenprotokoll und den ersten erratenen 88-Hauptlink wiederverwendet, um ein neues TPP-Szenario zu erstellen. Dadurch wird das Problem gelöst, dass der Hauptcontainer nicht aktualisiert wird und die obere Leiste wechselt, wenn der AB Die Seite wird durch selbsterzeugende, behälterübergreifende Parameter umgeschaltet. Anforderungen.
Basierend auf den Business-Container-Funktionen des Kunden wird die selbst erstellte Front-End-PHA-Seite mit der Back-End-Konstruktion kombiniert, um eine schnelle Online-Geschäftsunterstützung zu unterstützen. Im Vergleich zur Verwendung von Front-End-Konstruktionstools wie Ark und Zebra können mit diesem Optionssatz die vorhandenen Funktionen der Homepage für den Aufbau eines Bereitstellungssystems in größerem Umfang wiederverwendet werden. Außerdem ist es flexibler und kostengünstiger für die schnelle Iteration Ye Taobao.

▐Dynamisches Gleichgewicht zwischen nutzbarem Raum und betrieblicher Effizienz

Reduzieren Sie die Betriebskosten

Alle Hauptmodule von BFace (Eingang, Banner, Karussell, Montage usw.) verwenden die Methode der Trennung von Materialeingabe und -lieferung. Die Entwicklung und die anfängliche Online-Konfiguration dieser Methode sind relativ komplizierter, aber langfristig förderlicher Operationsiteration. Während der Veranstaltung wurde beispielsweise eine dynamische Kombination aus Bannerankündigungen und Karussellhalterungen verwendet, um die Werbung des Sponsors und die Unterstützung der Eventkonfiguration in Echtzeit während Double Eleven sicherzustellen, sodass es nicht nur mit dem Hauptmodulkarussell verbunden, sondern auch unabhängig war von Ermöglicht die Verknüpfung temporärer Änderungen.

Unterstützen Sie fein abgestimmte Abläufe und verbessern Sie gleichzeitig die betriebliche Effizienz

Unterstützt feinkörnige Vorgänge (Modul -> Grube -> Pool -> Inhalts-ID/festes Material), aber je feiner die Granularität der Vorgänge, desto mehr Konfigurationselemente bedeuten, und es ist definitiv unrealistisch, sich ausschließlich auf manuelle Vorgänge zu verlassen, also auf den einen Einerseits legen wir nacheinander vernünftige Standardelemente fest, andererseits haben wir einen Mischalgorithmus eingeführt, um die Materialien des Portals und der Seiten zu trainieren und sie als Hauptquelle für die tägliche Konfiguration zu verwenden. Später werden wir sie weiter auf Hauptmodule erweitern, z B. Karussells, um die täglichen Routinen weiter zu reduzieren. Operative Arbeitskräfte.

Reduzieren Sie manuelle Konfigurationsfehler

Um die Fehlerquote bei der manuellen Konfiguration zu reduzieren, registriert BFace Materialcodes und zugehörige Attribute durch die Gestaltung aktiver redundanter Codes. Einerseits kann dies die Fähigkeit unterstützen, dynamische Optionen modulübergreifend bereitzustellen und Schreibfehler bei der manuellen Konfiguration zu reduzieren; andererseits gewährleistet es eine zentrale Verwaltung einer großen Anzahl von Registrierungsdiensten und erleichtert die Überprüfung doppelter Namen und die Eindeutigkeit von Kreuzen -Modulmaterialien.

▐Parameter über Container hinweg übertragen

Bei verschachtelten Seiten auf der Homepage ist die Kompatibilität mit der Top-Bar-Atmosphäre ein unvermeidbares Problem. Für BFace ist dieses Problem aus mehreren Gründen komplizierter:

Bei BFace geht es um die Transformation der Tag-/Nachtdimension, und die Zeitbedingungen für die Bestimmung ändern sich je nach festen Wetten.
Die Atmosphärenanforderungen von Bface stimmen mit der Tag-/Nachtintensität im Eingangsbereich und auf der BFace-Seite überein.
进入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这个阵地，积极做更多的尝试。

团队介绍

我们是来自淘天集团-内容&社区技术团队，目前负责阿里电商核心淘宝首页，淘宝信息流，淘宝逛逛，推荐智能业务的业务开发和平台建设。每天服务数亿用户，每秒响应海量请求，工作涉及全链路端到端性能优化，流量效率提升、用户体验、提高商家及达人参与淘宝的积极性，优化商业生态运行机制。这里是淘宝导购的第一线，可以满足你对高并发大规模分布式系统练手的畅想；这里有最前沿的算法应用场景；可以玩转各种智能创新；这里有最严苛的系统指标要求，可以让你感受到优化复杂系统化的快感；我们不断拓展业务边界并将核心业务指标一次次踩在脚下。

招聘持续火热进行中，如果有兴趣可将简历发至[email protected]，期待您的加入！

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

本文分享自微信公众号 - 大淘宝技术（AlibabaMTT）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。