作者 | 松濤 尚先 筱斌等

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

1. 項目目標
2. 收益測算邏輯
3. 面臨的挑戰(zhàn)

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

背景

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

現(xiàn)狀

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

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

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

部分引導(dǎo)類需求

目標與挑戰(zhàn)

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

項目目標

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

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

收益測算邏輯

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

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

面臨的挑戰(zhàn)

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

整體設(shè)計

展示形式選擇

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

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

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

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

方案描述

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

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

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

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

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

部分技術(shù)方案剖析

基于視覺智能的區(qū)域定位方案

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

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

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

圖像匹配流程概要

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

基于傳統(tǒng) CV 特征的圖像匹配

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

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

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

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

實測結(jié)果：匹配的召回率與特征點數(shù)量直接相關(guān)

基于深度學習的圖像匹配

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

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

我們選擇的方案

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

保證任務(wù)執(zhí)行的健壯性

任務(wù)執(zhí)行感知

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

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

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

圖片相似度部分 Case 實測效果同時，我們在端側(cè)也有一些判定規(guī)則來輔助圖像對比的決策，比如容器路由 URL 比對，當圖像對比不匹配但容器路由 URL 準確時，會有一些策略調(diào)整并進行重試邏輯。在確認頁面準確后，才會進行高亮區(qū)域?qū)ふ乙约昂罄m(xù)的繪制邏輯。最后兜底可以通過超時失敗的方式自然驗證，一個劇本關(guān)鍵幀的完整判定流程，我們設(shè)置了 5 秒的超時策略。

關(guān)于尺度與旋轉(zhuǎn)不變性

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

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

其他容錯處理

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

部分鏈路指標監(jiān)控

零代碼完成劇本創(chuàng)作與編輯

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

錄制端側(cè)賦能

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

劇本錄制側(cè)示意圖

標準協(xié)議設(shè)計

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

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

階段成果

能力建設(shè)

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

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

部分業(yè)務(wù)線上效果

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

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

總結(jié)與展望

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

作者簡介

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