作者 | 松濤 尚先 筱斌等

App引導是端上做心智建設的重要手段，我們嘗試了“劇本式”思維獲得了較好效果。在想法落地時，相關研發工作量較大，而且終端技術棧多樣化，需要做到“零代碼”和“技術棧無關”。最終我們通過“圖像匹配”與“標準協議”等核心方案實現了突破。本文將介紹該項目的思考過程，并會對關鍵技術方案進行剖析和解讀，希望能給從事相關開發工作的同學以啟發。

1. 項目目標
2. 收益測算邏輯
3. 面臨的挑戰

• 背景
• 現狀
• 目標與挑戰
• 整體設計
• 展示形式選擇
• 方案描述
• 部分技術方案剖析
• 基于視覺智能的區域定位方案
• 保證任務執行的健壯性
• 零代碼完成劇本創作與編輯
• 階段成果
• 能力建設
• 部分業務線上效果
• 總結與展望

背景

互聯網行業節奏偏快，App 的更新愈發頻繁，如何讓用戶跟上更新節奏，理解產品功能，完成認知迭代，是業務發展中不可忽視的一環。同時“低代碼/零代碼”的理念也逐步被大眾認可，相關調研報告指出“低代碼/零代碼”可以加速企業的數字化轉型。以美團到家事業群為例，在宅經濟再度升溫后，即時配送應用的增長速度高于其他配送時長的應用。大量新用戶的涌入既是機遇，也是挑戰。目前美團到家事業群已經涵蓋了醫藥、團餐、閃購、跑腿、團好貨、無人配送等 10+ 業務線。新的商業模式意味著新領域的嘗試，主業務外賣平均數日也會上線新的功能模塊，這些都需要關注用戶心智建設與效率提升。

現狀

在提升用戶心智，獲得服務認同方面，業界內也做了很多嘗試，包括豐富多樣的輕交互，也有“保姆式”的游戲引導教學。這些實現方式歸結到技術層面，都是 App 中的功能引導，它可以讓用戶在短時間內快速了解產品特色以及產品使用方式。相對于 “廣告投放”、“口號傳播”、“地推介紹”等傳統方案，App 中的功能引導，具備成本低、覆蓋準、可復用等特點。

常見的功能引導App 功能引導是用戶心智建設的“敲門磚”，只有讓用戶熟悉平臺操作、了解產品特色作為前提，才能進一步借助情感化、場景識別、運營技巧等手段來做用戶心智建設。隨著 App 功能的不斷迭代，在用戶中逐漸出現了“用不明白”的現象，這個現象在美團外賣商家客戶端尤為突出。

作為商家生產運營的主要工具，客戶端承載的業務功能復雜多樣，設置項更是品類繁雜，如果商家用不明白，就會對整個運營體系造成非常不利的影響。為了讓商戶“用得明白”，2021 年第一季度，美團外賣商家端在功能引導類需求層面耗費了大量人力，平臺產品側重點對商家進行了扶持，并試點了“情感化引導”等項目，雖然業務效果取得了正向收益，但由于后續的研發估時較大，空有想法卻難以落地。類似的營銷、廣告、商品、訂單等業務也由于快速迭代，也需要配套生產一系列產品功能的引導需求，也因為人力問題而一直處于積壓狀態。

部分引導類需求

目標與挑戰

基于上述背景與現狀，我們迫切需要提供一種解決方案，讓業務方可以更快捷地落地自己的想法，在控制好成本的情況下，更好地建設用戶心智。同時，解決目前積壓的業務任務，包括但不限操作教學、功能介紹、情感化、嚴肅化等等場景。于是 ASG（Application Scripted Guidance） 劇本式引導項目就應運而生了。

項目目標

我們的項目目標是搭建一套好用的劇本式引導工具，即便是非技術同學也能獨立完成生產與投放，并且相比傳統方案的成本更低、效果更好，目前主要應用在“操作引導”與“心智建設”等場景。

這里的“劇本”怎么理解？就是帶入一個實際場景，模擬一個期望達成的目標，帶領用戶為此目標而進行一系列的操作指引。用戶可感受整體流程以及其中的關聯與時序關系。也可以理解為，這是一個預先安排好的小節目，一步一步展示給用戶，可能需要交互也可能不需要。而劇本化的引導方式，之前在游戲類 App 應用比較常見，比如遇到了一個火屬性敵人，所以要去武器界面，選中某武器，換上水屬性寶石。近兩年，劇本化的引導逐步在展示類 App 與工具類 App 中也開始被使用起來。此前，美團外賣商家端的“開門營業”、“模擬接單”等引導需求就使用了類似的思想，這種方式更加先進，但開發成本較高，所以導致后續引導類需求的積壓。

收益測算邏輯

ASG 劇本式引導項目的收益測算邏輯是“降本增效”，這里的“效” 既指“效率”也指“效果”，結果數據測算公式為：提效倍數 x =（ 1  / ( 1 - 成本縮減比)）*（ 1 + 產品指標增長比），因此目標可拆解為如下兩個方向：

• 更低的生產成本，借助一些端能力和配置能力，通過簡易的交互，就可以讓產品與運營同學獨立上線劇本?！傲愦a”與“技術棧無關” 作為項目的核心競爭力。我們提供標準化的框架，并通過一些參數與類型的調配來應對不同的需求場景，在大框架中提供有限的定制能力。
• 更高的應用效果，相比于傳統的功能引導，劇本式引導可以更加生動，能夠融合更多元素（不僵硬的語音、恰逢時機的動效、和藹的IP形象），從而帶來沉浸式的體驗，增強用戶感知。更加關注與用戶的交互/互動，操作后的反饋最好是真實頁面的變化，加深用戶的理解。時機更加可控，在滿足規則后自動觸發，后臺可篩選特定特征的用戶（比如用不明白的用戶）定向下發劇本引導。

面臨的挑戰

1. 目前，Flutter/React Native/小程序/PWA等終端技術棧各有各的適用場景，App 大多數為幾種技術棧的組合，如何抹平差異，做到技術棧無關？（即容器無關性 Containerless）。
2. 劇本執行的成功率與健壯性如何保證？（MVP 版 Demo 的成功率僅達到 50%，穩定版目標要達到 99% 以上）。
3. 怎樣落實“零代碼”的劇本生產方案，以支持產運獨立發布？（之前類似單任務需要研發 20 ~ 50人日）。

整體設計

展示形式選擇

項目主體應該選擇基于什么樣的形式？我們的思路是先確定“好的效果”，再去嘗試在此形式下做到“更低的成本”。“好的效果”自然是期望體現在產品指標上，但是前期，在數據對比上不同的場景落地指標跨度較大，對于不同的形式也難以拉齊標準橫向比較。所以我們從“學的越多才能會的越多”的角度推演，通過平臺傳遞的信息能否更多的被用戶接受，來衡量最終產品效果。

我們選取了一些之前含視頻教學的業務數據，平均播放時長比例在 50% ~ 66% 左右，大多數用戶沒有看完整個視頻。我們分析后認為，因為用戶理解的速度有慢有快，稍長的視頻內容如果吸引力不夠大，或不能貼合用戶理解的節奏，就很難被看完。同時，視頻傳播是單向的，缺乏互動，且不是劇本式思路。于是我們與產品商議后，在一些引導需求上試點了基于真實頁面開發、帶有一定劇本、可交互的引導（左上角設有常駐按鈕，用戶可以隨時退出引導）。

試點的結果符合我們的預期。基于真實頁面開發且可交互的引導，的確可以更好地被用戶所接受。引導完成步數比例達到 76% ~ 83%，相比于平均，播放時長比例明顯更高。其實，常規的展示形式上還包括圖片組，這個基本是強制用戶點完才能進入該功能，可以應用于一些建議的引導場景，但對于一些中等復雜度及以上的引導案例，這里的數據就不具備參考意義了。 我們基于一些采集到的數據和基本認知，對以上三類做了一個對比，表格如下：

我們得到結論是：如果想要拿到更好的效果，想以用戶為中心設計一些更能被用戶所接受的引導，基于真實頁面研發有著明顯的優勢，但是這么做的缺點是開發成本較高。目前，簡易的試點已經獲得了不錯的提升效果，所以產研同學有信心在引入更多客戶端能力與調優后，整體效果還有更大的提升空間。

方案描述

ASG 劇本式引導項目的目標受眾是產品運營同學，我們嘗試從他們的角度思考了：怎樣才算是一個便捷且高效的“劇本式引導生產與投放工具”？

產品運營視角如上圖所示，我們提供給產品運營同學的交互僅有：錄制、編輯、預覽、發布等四個步驟，當產品運營同學需要在業務模塊上線引導時，只需擬定一個劇本，然后四步即可完成這個“需求”，整個流程幾乎不需要研發和設計同學的參與。在具體的執行方案中，我們對劇本引導進行了模板化的設計編排，將每個引導動作抽象成一個事件，多個事件組合形成一個劇本。同時為保證不同終端的兼容性，我們設計了一套標準且易擴展的協議描述劇本元素，運行時 PC 管理后臺和 App 可自動將劇本解析成可執行的事件（如坐標點擊、頁面導航、語音播放等）。核心的功能模塊在劇本的執行側。為了保證更高的應用效果，我們要求引導過程與用戶的交互，均操作在真實的業務頁面，播放展示的元素也要求是實時計算與繪制的，這對系統性能與準確性提出了更高的要求。系統的全景圖如下圖所示，由終端側、管理后臺與云服務三個部分組成：

系統全景圖終端側：包括兩個職能，既具備劇本的錄制能力，也具備劇本的播放能力，由四個功能模塊構成。預處理模塊負責劇本的資源下載、協議解析、編解碼等操作，是保障劇本成功執行的前置環節；實時計算模塊則通過屏幕捕獲、特征匹配、圖像智能，完成動態獲取劇本錨點元素的信息，保證了劇本引導的精準展示，是實現劇本引導技術棧無關的核心環節；任務調度模塊主要通過事件隊列的實現方式，保證劇本有序、正確的執行；多媒體模塊負責語音合成和動效繪制，在特定業務場景為劇本播放提供沉浸式的體驗。同時 PC 端在客戶端的基礎上進行了能力的擴展，對于常見的 React/Vue/Svelte 網頁應用都可以低成本地接入和使用。管理后臺：包括劇本編輯、導入和發布、權限控制、數據看板等功能模塊。其中劇本編輯模塊，承載了劇本協議的解析、編輯、預覽等關鍵功能，操作界面按功能劃分為以下區域：

• 事件流控制區域：以頁面幀的形式展示劇本流程中的事件，提供動態添加與刪除、調整頁面幀順序等編輯功能。
• 協議配置區域：依照劇本的標準協議，通過可視化頁面幀配置項，生成滿足需要的引導事件；同時提供豐富的物料，滿足心智類劇本的情感化創作。
• 劇本預覽區域：支持通過二維碼掃描，實現便捷、無差別地效果預覽，保證與最終呈現給用戶的引導效果一致。

管理后臺云服務：依賴美團的底層云服務平臺，在劇本編輯完成后，需要資源托管服務、CDN 等進行資源的管理及分發，完成劇本的下發及更新。業務中臺在端側 SDK 和后臺策略配置的共同作用下，提供了更細粒度的下發配置，更豐富的觸達時機，滿足業務側按時間、城市、賬號與門店、業務標簽等維度配置的訴求。

部分技術方案剖析

基于視覺智能的區域定位方案

在引導過程中，需要對關鍵路徑上目標區域設置高亮效果。在技術棧無關的前提下，基本思路是線下截取目標區域，線上運行時全屏截圖，通過圖像匹配算法，查找目標區域在全屏截圖中的位置，從而獲得該區域坐標，如下圖所示：高亮識別效果整體思路看起簡單，但在具體的實踐中卻面臨著諸多的挑戰：

1. 圓角類圖標的 UI 元素（RadioButton 、Switch）在邊緣區域能檢測到的特征點過少，導致匹配成功率低。
2. 小字體的區域，在低分辨率情況下無法檢測到足夠的特征點，放大分辨率可以提升匹配精度，但是耗時也會成倍增加。
3. 在不提供初始位置的條件下，只能做全圖檢測和暴力匹配，需要檢測和存儲的特征點數量太龐大，尤其是復雜畫面和高分辨率圖像，移動設備上性能和內存開銷無法接受。
4. 終端手機設備屏幕分辨率目前有幾十種，算法需要適配多種分辨率。
5. 端側部署，對算法庫的包大小、性能、內存占用都有要求，例如 OpenCV，即使經過精心的裁剪之后仍然有 10 ~ 15 MB，無法直接集成到線上 App 中。

經過理論研究與實踐試點，最終我們采用的是傳統 CV（Computer Vision）+ AI 的解決方案，大部分場景可以基于傳統 CV 的角點特征檢測和匹配得到結果，未命中的則繼續通過深度學習網絡的檢測和跟蹤來獲取結果。在工程部署方面也做了相應的優化。接下來將詳細介紹這個方案的實現。

圖像匹配流程概要

圖像匹配算法由信息提取、匹配準則兩部分組成。根據信息載體的二維結構特征是否保留，匹配算法可分為基于區域的信息匹配與基于特征的信息匹配，如下圖所示：圖像匹配流程概要基于區域的圖像匹配方法，采用原始圖片或域變化后的圖片作為載體，選取最小信息差異區域作為匹配結果，該方法對于圖像形變、噪聲敏感等處理不佳。而基于特征的圖像匹配方法，丟棄了圖像二維結構信息，提取圖片的紋理、形狀、顏色等特征及位置信息描述，進而得到匹配結果?；谔卣鞯乃惴敯粜院谩⑿畔⑵ヅ洳襟E速度快、適應性強，應用也更加廣泛。

基于傳統 CV 特征的圖像匹配

其實該項目的應用場景，屬于典型的 ROI（Region Of Interesting）區域檢測、定位，傳統 CV 算法針對不同的使用場景已經有很多比較成熟的算法，比如輪廓特征、連通區域、基于顏色特征、角點檢測等。角點特征是基于中心像素與周圍像素亮度差異變化劇烈，且基本不受旋轉、縮放、明暗等變化影響的特征點，經典的角點檢測有 SIFT、SURF、ORB 等，相關研究業界已經有很多。E Karami [5] 等人在 2017 年發表的一份對比研究結果（如下圖所示）表明：絕大多數情況下，ORB 最快，SIFT 匹配結果最好，ORB 特征點分布集中在圖像中心區域，而 SIFT、SURF、FAST 則分布在整張圖上。在美團到家的場景下，目標區域可能位于圖片的中心、四角等任何位置，所以 ORB 對于邊緣區域的目標區域匹配失敗的概率會偏大，需要特殊處理。

(a) SIFT (b) SURF (c) ORB 的匹配結果：不同強度（左）縮放（中）旋轉（右）總體來講，一個效果好的特征檢測匹配算法，需要同時具備：尺度不變性、旋轉不變性、亮度不變性，這樣才能適應更多的應用場景，具有較好的魯棒性。下面我們以 ORB 為例，來簡單闡述一下算法的計算過程（感興趣可以查閱更多的相關資料）。ORB = Oriented FAST + Rotated BRIEF （下文用 OFAST 與 rBRIEF 代替），ORB 融合了 FAST 特征檢測和 BRIEF 特征描述算法，并做了一些改進，即采用改進的 OFAST 特征檢測算法，使其具有方向性，并采用具有旋轉不變性的 rBRIEF 特征描述子。FAST 和 BRIEF 都是非?？焖俚奶卣饔嬎惴椒?，因此 ORB 獲得了比較明顯的性能提升。要想判斷一個像素點 p 是不是 FAST 特征點，只需要判斷其周圍 7x7 鄰域內的 16 個像素點中是否有連續 N 個點的灰度值與 p 的差的絕對值超出閾值。此外，FAST 之所以快，是因為首先根據上、下、左、右 4 個點的結果做判斷，如果不滿足角點條件則直接剔除，如果滿足再計算其余 12 個點，由于圖像中絕大多數像素點都不是特征點，所以這樣做的結果，用深度學習”煉丹師“的話來說，就是“基本不掉點”，且計算時間大大減少。對于相鄰的特征點存在重復的問題，可以采用極大值抑制來去除。

鄰域 16 個點的位置（左）；上、下、左、右 4 個點（右）改進后的 OFAST 會針對每個特征點計算一個方向向量。研究表明，通過從亮度中心至幾何中心連接的向量作為特征點的方向，會比直方圖算法和 MAX 算法有更好的效果。

OFAST 方向向量的計算ORB 算法的第二步是計算特征描述符。這一步采用的是 rBRIEF 算法，每個特征描述符是僅包含 1 和 0 的長度為 128 - 512 位的向量。得到特征點和特征描述符之后，就可以做特征匹配了。此外，特征匹配算法也比較多，為了簡化計算，我們這里采用了 LPM [6]算法。得到篩選后的特征對后，計算它們的外接矩形包圍框，反變換到原圖坐標系就可以得到目標的區域位置坐標。基于純傳統 CV 算法測試的結果表明，特征點數量對匹配的召回率有直接影響，特征點較少，召回率偏低無法滿足業務需求；特征點超過 10000 點則會嚴重影響算法性能，尤其是在移動端設備上的性能，高端機型上耗時在 1 秒以上。我們針對目標區域小圖和原圖設定不同特征點數量，然后做匹配，這樣可以兼顧性能和匹配精度。不同配置參數實測的特征點和匹配結果如下圖所示，針對大多數圖像、文字內容的區域，特征點在 5000 以上，匹配結果不錯，但還存在常見區域匹配失敗的情況；特征點在 10000 以上，除了一些特殊 Case，大多數場景匹配結果都比較滿意。如果不提供目標區域的大概的初始位置（真實情況），基本上大多區域需要 10000 ~ 20000 特征點才能匹配，端側性能就是個問題。

實測結果：匹配的召回率與特征點數量直接相關

基于深度學習的圖像匹配

基于傳統 CV 存在的弊端和一些無法解決的問題，我們需要具有更強圖像特征表達能力的算法來進行圖像匹配。近些年，深度學習算法取得了巨大的突破，同樣在圖像的特征匹配領域中也取得了較大的成功。在本應用場景中，我們需要算法在全屏截圖中快速定位一個子區域的具體位置，即需要一個模型通過一個區域中局部區域的特征快速定位其在全局特征中對應的位置。該問題看似可以使用目標檢測的相關算法進行求解，但是一般目標檢測算法需要目標的類別/語義信息，而我們這里需要匹配的是目標區域的表觀特征。針對該問題，我們采用了基于目標檢測的圖像跟蹤算法，即將目標區域視為算法需要跟蹤的目標，在全屏截圖中找到我們要跟蹤的目標。在具體實現過程中，我們使用類似于 GlobalTrack[7] 的算法，首先會提取目標區域對應的特征，并使用目標區域的特征來對全屏截圖的特征進行調制，并根據調制之后的特征來對目標區域進行定位。并根據移動端計算量受限的特性，我們在 GlobalTrack 的基礎上設計了一個單階段的目標檢測器來對該過程進行加速。GlobalTrack 示意圖由于我們直接使用目標區域的特征來引導目標檢測的過程，所以其能夠處理更為復雜的目標區域，比如純文本、純圖像或圖標、文字圖像混編等，凡是能在 UI 上出現的元素都可能是目標區域，如下圖所示的一些示例。

目標區域示例與包含不同尺寸類別組合的訓練數據結合業務場景，要求針對移動設備上 App UI 畫面的任何局部區域做到精確定位。如上述的分析，該問題既可以看作是一個目標檢測和匹配的問題，又可以看作是一個目標跟蹤問題。同時算法需要能夠適配不同內容的 ROI 區域、不同的屏幕分辨率、不同的移動設備。

我們選擇的方案

前文提到，我們采用的是 CV + AI 解決方案，這樣的優點是：一方面解決傳統 CV 檢測無法覆蓋全場景的問題；另一方面優化性能，減少移動端設備的耗時。在工程部署方面，我們采用純 C 實現檢測和匹配算法，并且對 ORB 算法做了一些定制化修改。此外，我們采用多線程、Neon 優化等手段提升性能，從 800 毫秒優化到 100 毫秒左右。最終的版本不依賴 OpenCV 及第三方庫，大大減小了算法庫的包大小。深度學習模型基于 MTNN 端側推理引擎獲得了最優的推理性能和精度。在中高端機型上，可以啟用異構硬件并行加速，CV 與 AI 并行計算，在 CPU 上執行特征檢測的計算，同時在 GPU 或 NPU 上執行模型推理，然后做融合，這樣可以在不增加 CPU 負載的情況下提升性能和準確率。

保證任務執行的健壯性

任務執行感知

傳統方案在做開發引導時，我們可以通過函數回調、廣播、組件變化等多種方式獲取任務執行狀態。但在技術棧無關前提下，感知引導過程失敗、感知用戶執行/點擊是否正確，相比之下就比較困難。同時還要精確甄別出錯誤類型，增加特定步驟的重試方案，盡可能保證劇本的執行通暢，在極少數遇到阻塞是錯誤時，需要及時確認，上報錯誤并退出引導，減少對用戶的影響。

任務執行流程圖首先，比較優雅的“黑盒”方案是使用圖像相似度對比技術，此能力模型在視覺智能中比較基礎，在通過跳轉來到目標頁面后，會截圖與目標特征進行比較，進行快速容錯。根據線下的大量測試數據，去除一些極端情況，我們發現在不同的閾值下是有規律的：

• 相似度 80% 以上的區間，基本可以確定目標頁面準確，受一些角標或圖片區塊加載的影響沒達到更高。
• 相似度 60% ~ 80% 的區間，是在一些列表樣式或背景圖、Banner圖有些許差異導致的，可以模糊判定命中（上報數據但不用上報異常）。
• 相似度 40% ~ 60% 的區間，大概率遇到了對應模塊的 UI 界面改版，或者有局部彈窗，這時就需要進行一些重試策略適時上報異常。
• 相似度 40% 以下，基本確定跳轉的是錯誤頁面，可以直接終止引導流程，并上報異常。

圖片相似度部分 Case 實測效果同時，我們在端側也有一些判定規則來輔助圖像對比的決策，比如容器路由 URL 比對，當圖像對比不匹配但容器路由 URL 準確時，會有一些策略調整并進行重試邏輯。在確認頁面準確后，才會進行高亮區域尋找以及后續的繪制邏輯。最后兜底可以通過超時失敗的方式自然驗證，一個劇本關鍵幀的完整判定流程，我們設置了 5 秒的超時策略。

關于尺度與旋轉不變性

為了在尺度上具有更好的健壯性，計算過程首先會對圖像做高斯模糊，去除噪聲的影響，并且對圖像做下采樣生成多層圖像金字塔，對每一層都做特征檢測，所有特征點集合作為檢測到的特征點結果輸出，參與后續特征匹配計算。為了應對圖像旋轉的情況，可以加入 rBRIEF，rBRIEF 從給定特征點的 31 x 31 鄰域內（稱為一個 Patch）隨機選擇一個像素對。下圖展示了采用高斯分布采樣隨機點對的方法，藍色正方形像素，是從以關鍵點為中心的高斯分布中抽取的一個像素，標準偏差 σ；黃色正方形的像素，是隨機對中的第二個像素，它是從以藍色正方形像素為中心的高斯分布中抽取的像素，標準偏差為 σ/2，經驗表明，這種高斯選擇提高了特征匹配率。當然也有其它選擇方式，我們這里就不一一列舉了。首先，根據特征點方向向量構造旋轉矩陣，并對 N 個點對做旋轉變換，使得每個點對與該特征點的主方向一致，然后再根據點對來計算特征向量。因為特征向量的主方向與特征點一致，意味著 rBRIEF 可以在朝著任何角度旋轉的圖像中檢測到相同的特征點。

圖rBRIEF 隨機像素對的選擇（左）；圖像金字塔（右）

其他容錯處理

對于頁面中存在多個相同或類似元素的場景，不能草率地選擇任意一個區域。因此在進行目標區域定位時，我們需要在檢索目標區域的基礎上，結合目標周圍信息，提供一個參考區域。運行時，提供目標區域圖像信息及參考區域圖像信息，查詢到多個目標結果后，再查詢參考區域所在位置，通過計算，離參考區域最近的目標區域則為最終目標區域。對于頁面中出現的不同技術棧彈窗場景，由于出現時機也不確定，一旦出現，容易對目標區域造成遮擋，影響整個引導流程，需要對各類彈窗進行過濾和攔截。針對 Native 技術棧，我們通過對統一彈窗組件進行攔截，判斷執行過程中禁止彈窗彈出，引導過程中業務認為非常重要的彈窗則通過加白處理。在 Flutter 上則采用全局攔截 ??NavigatorObserver ??中的??didPush ??過程，攔截及過濾 Flutter 的各類 ??Widget ??、??Dialog ??及 ??Alert ??彈窗。關于 Web 上的處理，由于 Web 彈窗業務方比較多，沒有特別統一的彈窗規范，特征比較難??；目前是在 Web 容器中注入一段 JavaScript 代碼，給部分有彈窗特征和指定類型的組件設置隱藏，考慮到拓展性，JavaScript 代碼設置成可動態更新。對于部分頁面元素復雜導致加載時間稍長的場景，劇本播放時也會基于錄制側提供的 delayInfo 字段，進行一些延遲判定策略。基于前面的努力，劇本的執行鏈路成功率（如下圖所示）基本可以達到 98% 以上，部分成功率較低的劇本可以根據維度下鉆，查詢具體的異常原因。

部分鏈路指標監控

零代碼完成劇本創作與編輯

把一個劇本的生命周期劃分為“生產”和“消費”兩個階段，“生產”階段對應的是劇本錄制完成并上傳至管理后臺進行編輯的過程，“消費”階段則對應下發與播放。如果說前兩個挑戰主要聚焦在“消費”，那么這里的挑戰則主要聚焦在“生產”方面。接下來，我們將從“錄制端側賦能”與“標準協議設計”兩個方面進行詳細的介紹。

錄制端側賦能

集成錄制 SDK 在移動端受限于屏幕尺寸，不易進行精細化創作，所以它的定位是進行基礎劇本框架的創作與錄制。在此過程中，錄制 SDK 首先要記錄用戶的操作信息和頁面的基礎信息，信息錄入者在使用錄制功能時，錄制 SDK 會同步記錄當前頁面信息及與之相對應的音頻錄入，形成一個關鍵幀，后續錄制以此類推，當所有信息錄入完成之后，生成的多個關鍵幀會組成關鍵幀序列，結合一些基本信息，形成一個劇本框架，上傳至服務器，便于錄制者在后臺進行精細化的創作。同時錄制 SDK 需要主動推斷用戶意圖，減少錄入者編輯。我們將關鍵幀的錄入，按照是否產生頁面跳轉分為兩種類型，對應不同類型，自動生成相異的路徑。當錄入者的操作產生頁面跳轉時，錄制 SDK 在確定該操作的分類同時，主動將該處的語音輸入標記為下一關鍵幀的描述，以減少錄制者的操作。錄制全程，每個頁面的打開時間也被作為關鍵幀的一部分記錄下來，作為參考信息，幫助錄入者調整劇本節奏。

劇本錄制側示意圖

標準協議設計

標準協議作為 “零代碼” 的基石串聯了錄制到編輯的整個過程。當前 App 中，操作類引導場景有數十種，我們通過傳輸模型和視圖模型的結合，將核心字段提取，冗余字段剝離。在保證標準化與兼容性的前提下，將數十種場景抽象為四種通用事件類型，為關鍵幀的編排及業務場景的覆蓋提供了便利。對心智類劇本而言，會隨著用戶的交互操作不斷產生新的分支，最終成為一個復雜且冗余的二叉樹結構。我們在設計此類協議時，將二叉樹節點進行拍平，存儲為一個 HashMap，兩個關鍵幀的銜接可以以 id 為標識。用戶在使用 App 時，在某些需求指引下，會產生心智類和操作類劇本引導交替出現的情況。例如，商家（用戶）打開推廣頁面后，出現一個心智類劇本——小袋動畫伴隨著語音：“老板好，小袋發現您開店 3 個月了，還沒有使用過門店推廣功能呢，請問您是不會操作還是擔心推廣效果不明顯呢？”屏幕中會伴隨兩個按鈕選擇（1）不會操作；（2）擔心推廣效果。此時，如果用戶點擊了1，會轉向“操作類”劇本，所以我們在設計協議時，要尤為關注兩種劇本的銜接。在這里，我們將協議進行了細化，將基礎能力協議與展示類協議進行拆分。兩種劇本共用一套基礎能力協議，防止出現兼容性的問題。

部分協議節點設計管理后臺的編輯器引擎解析劇本協議后，完成內置邏輯的初始化，以及引導劇本中事件關鍵幀的渲染。編輯器引擎內部基于事件機制實現了可訂閱的能力，當關鍵幀觸發插入、編輯、調整順序等事件時，所有其他的關鍵幀都可以訂閱以上核心事件，實現完整的聯動效果。編輯加工后的劇本協議，通過接入美團統一的動態下發平臺，實現劇本的灰度、全量、補丁的動態化發布能力。編輯器內建完整的生命周期，在操作的不同階段暴露完整的事件勾子，支持良好的接入和擴展能力。

階段成果

能力建設

我們抽象了如上圖兩種標準樣式的劇本，線上使用較多的是操作引導類劇本，大多是之前積壓的任務。目前，我們已經迭代出了一種標準化形態，接入方便，一般在新模塊的提測期間，產運快速為此需求安排操作引導劇本跟隨需求同步上線。也可以針對現有復雜模塊設置引導，默認藏在 導航欄的 “?” 圖標里，在合適的時機進行觸發。

同時，用戶心智建設不僅僅是常規的產品操作引導，我們也提供了心智類劇本（也叫概念類劇本），可以應用在需要“理念傳遞”或“概念植入”的場景里。在合適業務場景以擬人化的方式給用戶傳遞平臺的制度與規范，讓用戶更容易接受平臺的理念進而遵守經營的規范；比如可以在商家閱讀差評時，執行一個情感化劇本（大概內容為差評是普遍現象，每 xx 條訂單就容易產生一條差評，所以不用過于擔心，平臺也有公正的差評防護與差評申訴規則）；如果商家出現違規經營，也可以執行一個概念強化的嚴肅類劇本（大概內容為平臺非常公正且有多重檢查措施，不要試圖在申訴中上傳不實材料僥幸過關）。值得一提的是，在這個過程中產出的圖像特征定位、去Alpha通道的視頻動畫等能力也完成了技術儲備，可以提供給其他場景使用。前文核心技術內容也申請了兩項國家發明專利。

部分業務線上效果

• 新店成長計劃，是劇本式引導應用的首個大需求。支撐新店成長計劃項目順利上線，目前的結果非常正向。ASG 支撐了整個項目 78.1% 的引導播放量，單個劇本開發成本 < 0.5d。綜合觀測指標“商家任務完成度”同比觀測周期內，從 18% 提升至 35.7%，其他過程指標也有不同程度的提升。
• 超值換購，提供了心智類指引，是指導商家用最優的方式創建換購活動，結合過程數據預估訪購率從 4% 提升至 5.5%，活動商家訂單滲透率從 2.95% 提升至 4%，均有 35% 左右的漲幅。
• 配送信息任務引導，優化配送信息任務整體流程的行動點引導，避免引起商家行為阻塞，降低了用戶操作成本與理解成本，提升商家在開門營業階段滿意度，同時提升商家對配送服務的認知度水平。
• ...

自 2021 年 11 月上線以來，ASG 已經支撐了新店、活動、營銷、廣告等多個業務，在美團超過 20 個業務場景中進行了落地?？傮w看來，ASG 劇本式引導相比于傳統引導方案，粗略估計的話，可以用約先前 1 / 10 的成本來提升約 20% 的效果。帶入之前的結果測算公式，提效倍數（x = ( 1 /（1 - 90%）) * (1 + 20%) ）就是12倍。從最終的結果來看，成本的降低，遠比效果提升更加明顯，所以本文對前者的論述篇幅明顯多于后者。目前，在效果提升層面，我們主要是對一些端能力比較基礎的組合使用，對于效果提升我們并不擔心，業內前沿的創新技術還有很多可以探索的可能，我們也會逐步跟進，使劇本效果更具有同理心、更加沉浸化。

總結與展望

本文介紹了美團外賣終端團隊在用戶心智建設領域的探索與實踐。從業務現狀與劇本式思維的思考出發，談到了終端加管理后臺的一站式設計，簡化劇本接入門檻。后續，我們還談到了傳統 CV 與深度學習在劇本執行上起到的關鍵作用。整體看來，這個項目是基于終端能力拓展的一次大膽嘗試，我們體會業務視角，通過不設限的跨團隊的協作，完成對非技術人員的賦能。結合目前的階段性成果，我們驗證了之前方向的正確性，下一步我們會繼續從“更低的生產成本”與“更高的應用效果”兩個角度進行深耕（例如組合元素劇本的易用性、劇本更新成本優化、引導時機結合規則引擎與意圖猜測、折疊與再次喚醒邏輯等），以支撐更多類似場景的需求。并且，我們欣喜地看到終端的“容器無關性”收益杠桿明顯，接下來還有很大的發揮空間。歡迎大家跟我們一起探討交流。

作者簡介

松濤、尚先、成浩、張雪、慶斌等，來自美團到家研發平臺/外賣技術部；筱斌、民欽、德榜等，來自美團基礎研發平臺/視覺智能部。