在主流的電商平臺(tái)認(rèn)知里，京東通常以「品質(zhì)好，服務(wù)優(yōu)，價(jià)格高」著稱，相對(duì)于淘寶、拼多多等友商，其平臺(tái)調(diào)性與「下沉」相距甚遠(yuǎn)。因此，如何借助大促期間激增的流量，為平臺(tái)帶來(lái)更多下沉用戶與銷售額，便成為了下沉（超值特賣）會(huì)場(chǎng)的主要使命。

設(shè)計(jì)思路

1. 核心數(shù)據(jù)指標(biāo)定位

下沉?xí)?chǎng)在本次618之前，一共只做了兩期（19年雙11、20年年貨節(jié)）嘗試，相比主會(huì)場(chǎng)等傳統(tǒng)會(huì)場(chǎng)，還未形成成熟的結(jié)構(gòu)框架，因此，對(duì)于會(huì)場(chǎng)該怎么做，北極星指標(biāo)是什么，還處在探索階段。

關(guān)于北極星指標(biāo)：

作為售賣型會(huì)場(chǎng)，我們自然地在前兩次活動(dòng)中將GMV增長(zhǎng)（GMV=訂單量x客單價(jià)）作為下沉?xí)?chǎng)的北極星指標(biāo)，但對(duì)往期活動(dòng)的數(shù)據(jù)表現(xiàn)進(jìn)行復(fù)盤后，會(huì)發(fā)現(xiàn)下沉?xí)?chǎng)的客單價(jià)受盤品策略的影響較大，不利于設(shè)計(jì)策略的效果驗(yàn)證。因此，為了精準(zhǔn)定位設(shè)計(jì)發(fā)力方向，我們剔除了客單價(jià)這個(gè)變量，將訂單量增長(zhǎng)作為本次下沉?xí)?chǎng)的北極星指標(biāo)。

在明確了北極星指標(biāo)后，我們采用UGD數(shù)據(jù)拆解思路，將其拆分細(xì)化為「提升訂單轉(zhuǎn)化率」和「提升日均UV」兩個(gè)數(shù)據(jù)指標(biāo)，并圍繞這兩個(gè)數(shù)據(jù)指標(biāo)，進(jìn)行了如下數(shù)據(jù)提升策略探索。

2. 提升訂單轉(zhuǎn)化率——內(nèi)容吸引

下沉?xí)?chǎng)主要推薦低價(jià)商品，促銷玩法豐富，最大的賣點(diǎn)是「便宜」，基于這些特點(diǎn)，如何提升內(nèi)容吸引力及熱鬧氛圍，更好地傳達(dá)「低價(jià)」、「超值」等優(yōu)惠感知，進(jìn)而提升訂單轉(zhuǎn)化率，是首要解決的問(wèn)題。本次618，我們針對(duì)提升內(nèi)容吸引力做了以下嘗試。

降價(jià)曲線樣式創(chuàng)新，增強(qiáng)促銷氛圍

頭部主推單品是會(huì)場(chǎng)內(nèi)最優(yōu)質(zhì)的商品，它們降價(jià)力度大，屬于會(huì)場(chǎng)沖擊銷量的主力，在往期活動(dòng)的單品坑位樣式設(shè)計(jì)中，我們希望更多地展示利益點(diǎn)信息，并通過(guò)重形式的搶購(gòu)按鈕引導(dǎo)用戶點(diǎn)擊。但用研結(jié)論反饋，用戶通常只關(guān)注商品和往常相比是否真的更便宜?；诖耍诒敬?18中，我們只保留了價(jià)格信息，結(jié)合后臺(tái)到手價(jià)功能，通過(guò)曲線、箭頭等圖形化表達(dá)，將到手價(jià)格同日常價(jià)與往期最低價(jià)做了兩段價(jià)格錨點(diǎn)對(duì)比，突出最核心的「直降」屬性，以提升信任感。

這一部分視覺(jué)聚焦于傳遞降價(jià)內(nèi)容信息，由于文案信息較多，我們所需要做的就是降噪，下沉用戶對(duì)于價(jià)格等促銷信息非常敏感，視覺(jué)會(huì)用最直接的方式放大價(jià)格，圖形化曲線及標(biāo)簽突出「直降」信息，整體用飽和度較高的暖色調(diào)劃分重點(diǎn)區(qū)域聚焦決策信息。

重點(diǎn)模塊延續(xù)雙11特殊化標(biāo)簽展示，突出優(yōu)惠信息

通常來(lái)說(shuō)，用戶打開(kāi)的頁(yè)面的首要想了解的內(nèi)容是「有多省錢？」「我為什么要買」，所以在視覺(jué)傳達(dá)上面需要更加簡(jiǎn)短有力，清晰直觀，讓用戶能夠快速接受核心權(quán)益。在氛圍營(yíng)造上結(jié)合頁(yè)面風(fēng)格，以及飽和度較高的暖色調(diào)吸引用戶。因此下沉?xí)?chǎng)在重點(diǎn)模塊側(cè)重突出「直降」利益點(diǎn)，特殊化箭頭標(biāo)簽形式帶給用戶一定的功能感知讓用戶對(duì)優(yōu)惠信息一目了然影響用戶決策。并結(jié)合搶購(gòu)引導(dǎo)按鈕，促進(jìn)用戶點(diǎn)擊。

與下沉熱鬧氛圍契合的創(chuàng)新包裝及主kv品牌視覺(jué)延續(xù)

整體延續(xù)主kv視覺(jué)風(fēng)格，塑造用戶對(duì)618一致的品牌認(rèn)知。同時(shí)契合下沉?xí)?chǎng)特性及用戶視覺(jué)表達(dá)差異性，進(jìn)行優(yōu)惠感、熱鬧氛圍及場(chǎng)景沉浸感氛圍傳遞。

下沉預(yù)售期：延續(xù)主kv熱愛(ài)如光主圖形結(jié)合彈幕元素同時(shí)突出場(chǎng)景沉浸感氛圍

在延續(xù)主kv熱愛(ài)如光圖形基礎(chǔ)上，會(huì)著力于結(jié)合主題（京選品質(zhì)、工廠直供、斗地主等），選擇契合的色彩及元素，用微場(chǎng)景氛圍的包裝形式給用戶傳達(dá)具有下沉?xí)?chǎng)特性的視覺(jué)形式，給用戶傳遞不一樣的熱鬧沉浸感受。

下沉專場(chǎng)期：延續(xù)主kv熱愛(ài)無(wú)限元素，主打品類呈現(xiàn)，營(yíng)造熱鬧賣貨氛圍

在延續(xù)主kv熱愛(ài)如光的基礎(chǔ)上融入無(wú)限符號(hào)的概念，重點(diǎn)突出利益點(diǎn)、品類及紅包熱鬧氛圍的傳達(dá)，結(jié)合不同主推品類定義契合的色彩，讓用戶能夠清楚的感知我們的熱鬧賣貨氛圍。

下沉高潮期：延續(xù)主會(huì)場(chǎng)光線呈迸發(fā)狀態(tài)，主打生日盛典氛圍

高潮期整體結(jié)合主kv迸發(fā)狀態(tài)的光線，6.16與6.18融合舞臺(tái)場(chǎng)景與生日元素，6.17當(dāng)天主推直播概念，分別營(yíng)造舞臺(tái)生日盛典及直播真實(shí)場(chǎng)景氛圍，給用戶帶來(lái)一定的場(chǎng)景沉浸感。

樓層形式感的下沉促銷概念傳達(dá)

以往下沉?xí)?chǎng)聚焦于商品本身的信息傳達(dá)，缺少對(duì)主題概念的包裝，從用戶認(rèn)知來(lái)說(shuō)缺乏特色，不夠吸引用戶，從主題概念傳達(dá)上來(lái)說(shuō)差異化體現(xiàn)較弱。為了更好的滿足業(yè)務(wù)訴求，提升用戶體驗(yàn)，基于現(xiàn)有問(wèn)題，我們結(jié)合主題內(nèi)容（京挑細(xì)選、京心助農(nóng)、京打細(xì)算、京心陪伴），運(yùn)用插畫(huà)形式，描述整體微場(chǎng)景概念，提升沉浸感氛圍表達(dá)。結(jié)合主題特性選擇契合的色彩及元素進(jìn)行設(shè)置，不同維度包裝商品，提升用戶認(rèn)知及體驗(yàn)。

與往期對(duì)比：

整體視覺(jué)呈現(xiàn)：

微動(dòng)效嘗試

對(duì)標(biāo)友商動(dòng)效存在的頁(yè)面狀態(tài)，我們希望能夠運(yùn)用動(dòng)效提升畫(huà)面的熱鬧活波氛圍，重點(diǎn)內(nèi)容突出，吸引用戶關(guān)注度。因此我們?cè)陬^圖樓層使用光暈呼吸和流星劃過(guò)的背景動(dòng)效增加整個(gè)樓層的視覺(jué)吸引力，使用蛋糕的主體來(lái)突出618是京東生日的節(jié)日氛圍，然后圍繞蛋糕主體加上浮動(dòng)的商品增加大促的氛圍感知，整體達(dá)到吸引用戶眼球的目的。

動(dòng)效解構(gòu)

動(dòng)效按覆蓋層級(jí)分為背景、主體、前景三種。背景為氛圍光線，例如金色氛圍光、劃過(guò)的流星等；主體為動(dòng)效的主體，例如蛋糕臺(tái)；前景為需要浮動(dòng)的元素，例如紅包和商品圖等。

背景動(dòng)效實(shí)現(xiàn)

背景分為四個(gè)部分：

• 背景圖片：去掉所有動(dòng)效元素的背景圖片，固定展示在最底部；
• 光暈：一張光暈的整圖，初始大小為圖片的一半，初始透明度50%，然后在1.5秒內(nèi)過(guò)渡到正常的大小和100%透明度，之后又在1.5秒內(nèi)過(guò)渡到初始狀態(tài)，以此往復(fù)，在蛋糕臺(tái)等主體的遮蓋下達(dá)到呼吸一般淡入淡出的效果；
• 光線：將所有固定位置展示的光線切成一張整圖，初始透明度為0%，然后在1.5秒內(nèi)過(guò)渡到100%透明度，之后又在1.5秒內(nèi)過(guò)渡到初始狀態(tài)，以此往復(fù)，達(dá)到與光暈同步出現(xiàn)隱藏的效果；
• 流星：將每個(gè)流星單獨(dú)切圖，根據(jù)視覺(jué)稿放在特定位置，使蛋糕臺(tái)等主體可以完全遮蓋住流星的初始位置，然后在1.5秒內(nèi)將流星過(guò)渡到在初始位置的基礎(chǔ)上加（向右運(yùn)動(dòng)）或者減（向左運(yùn)動(dòng)）兩倍寬度和兩倍高度的位置，且透明度過(guò)渡到0%，之后再過(guò)1.5直接回到初始狀態(tài)，以此往復(fù)，達(dá)到流星和光暈同步劃過(guò)的效果。

主體動(dòng)效實(shí)現(xiàn)

主體只有蛋糕臺(tái)一個(gè)部分：去掉所有動(dòng)效元素的主體整圖，固定展示在背景部分之上，作用為凸顯主題和遮擋背景動(dòng)效初始狀態(tài)雜亂的部分。

前景動(dòng)效實(shí)現(xiàn)

前景部分由多個(gè)位置不同的紅包還有商品圖片組成，動(dòng)效實(shí)現(xiàn)的方式相同：將前景物品單獨(dú)切圖，放到設(shè)計(jì)稿上相同位置，然后設(shè)置在0.5秒內(nèi)向上過(guò)渡7個(gè)像素，之后在1秒內(nèi)過(guò)渡到初始位置下面7個(gè)像素，再在0.5秒內(nèi)過(guò)渡到初始位置，以此往復(fù)，達(dá)到單個(gè)前景物品上下擺動(dòng)的效果，多個(gè)前景物品設(shè)置開(kāi)始運(yùn)動(dòng)的時(shí)間不同，達(dá)到錯(cuò)落有致的擺動(dòng)效果。

效果展示

3. 提升日均UV——挽留機(jī)制

玩法優(yōu)化：拓展挽留鏈路，降低體驗(yàn)影響

20年年貨節(jié)我們?cè)谙鲁習(xí)?chǎng)引入了挽留機(jī)制，用戶當(dāng)天首次離開(kāi)會(huì)場(chǎng)時(shí)，會(huì)觸發(fā)視頻（招商廣告）挽留彈窗，用戶觀看完視頻后可領(lǐng)取京豆、優(yōu)惠券等獎(jiǎng)勵(lì)，業(yè)務(wù)希望通過(guò)看視頻領(lǐng)獎(jiǎng)的形式，以達(dá)到提升用戶停留時(shí)長(zhǎng)，促進(jìn)回訪與轉(zhuǎn)化的目的，但上線后數(shù)據(jù)表現(xiàn)并不理想，未達(dá)到預(yù)期效果。

因此在本次設(shè)計(jì)之前，我們對(duì)20年年貨節(jié)挽留機(jī)制的用戶體驗(yàn)路徑進(jìn)行了分析， 發(fā)現(xiàn)在每個(gè)觸點(diǎn)中存在以下問(wèn)題。

針對(duì)這些問(wèn)題，結(jié)合促進(jìn)用戶回訪與轉(zhuǎn)化的目標(biāo)，我們對(duì)玩法做了一次全面升級(jí)：不再局限于用戶離開(kāi)時(shí)這一觸點(diǎn)，在用戶進(jìn)入、瀏覽、離開(kāi)會(huì)場(chǎng)等行動(dòng)觸點(diǎn)，通過(guò)紅包、低價(jià)單品等內(nèi)容吸引用戶每日參與并刺激轉(zhuǎn)化。

優(yōu)化后的挽留機(jī)制，極大減少了用戶看視頻做任務(wù)的參與成本，次日回訪率對(duì)比20年年貨節(jié)，提升了8倍之多。

前端實(shí)現(xiàn)

用戶在app內(nèi)每日第一次進(jìn)會(huì)場(chǎng)觸發(fā)領(lǐng)取紅包彈窗，第一次離開(kāi)會(huì)場(chǎng)觸發(fā)挽留彈窗。因?yàn)闆](méi)有后臺(tái)資源支持，因此怎樣記錄和獲取用戶當(dāng)天的活動(dòng)狀態(tài)，根據(jù)狀態(tài)來(lái)判斷中獎(jiǎng)彈窗或挽留彈窗的展示，就成了最大的問(wèn)題。

針對(duì)這些問(wèn)題，我們對(duì)需求進(jìn)行了解構(gòu)分析并高效落地：

判斷用戶在app環(huán)境下的登錄狀態(tài)

• app內(nèi)判斷：jm-common移動(dòng)端基礎(chǔ)js庫(kù)提供isApp方法判斷當(dāng)前環(huán)境是否為特定app，isApp('jd')返回為true即在app內(nèi)
• 已登錄判斷：復(fù)合查詢接口入?yún)"type": "loginState", "mapTo": "timeline"}，返回結(jié)果response.data.timeline.login的值true即為已登錄，但在測(cè)試過(guò)程中發(fā)現(xiàn)由于紅包接口返回的數(shù)據(jù)保留在app本地，用戶更換賬號(hào)登錄后展示的還是之前的賬號(hào)領(lǐng)取的紅包，因此還需要獲取用戶的信息進(jìn)行校驗(yàn)；使用myMultiNumInfo接口可查詢到用戶的昵稱，返回結(jié)果response.code的值為0則為已登錄，response.userMultiInfo.nickName的值即為用戶昵稱，使用此接口替代復(fù)合查詢接口查詢登錄狀態(tài)可解決更換賬號(hào)數(shù)據(jù)展示有誤的問(wèn)題。

進(jìn)入會(huì)場(chǎng)判斷當(dāng)天未領(lǐng)取紅包且紅包未領(lǐng)完則請(qǐng)求紅包接口

若請(qǐng)求了紅包接口返回了紅包金額或者返回的信息為紅包已經(jīng)搶光的話，使用localstorage本地存儲(chǔ)將紅包接口返回的數(shù)據(jù)存儲(chǔ)在app本地，并使用日期和用戶昵稱拼接的字符串標(biāo)記該數(shù)據(jù)；打開(kāi)會(huì)場(chǎng)的時(shí)候，使用日歷和用戶昵稱拼接的字符串從localstorage中獲取紅包信息，如果沒(méi)有獲取到信息，則請(qǐng)求紅包接口，如果有獲取到信息，則展示紅包金額或已搶光。

領(lǐng)到紅包后點(diǎn)左上角返回按鈕則出現(xiàn)挽留彈窗

京東app提供導(dǎo)航欄返回事件自定義api，可以使用這個(gè)api達(dá)到返回事件攔截的效果，但僅支持app左上角返回按鈕點(diǎn)擊攔截，不支持物理按鍵或屏幕右滑的返回方式攔截；郵件申請(qǐng)攔截域名白名單，然后在頁(yè)面加載完成后向原生發(fā)起申請(qǐng)攔截返回事件的請(qǐng)求，以注冊(cè)返回?cái)r截事件，若攔截請(qǐng)求成功，用戶點(diǎn)擊app左上角返回按鈕后，原生不再執(zhí)行真正的返回功能，而是調(diào)用H5內(nèi)指定方法執(zhí)行，如果需要返回上級(jí)頁(yè)面，則可以調(diào)用api提供的方法通知原生返回。

中途離開(kāi)會(huì)場(chǎng)則當(dāng)天不出現(xiàn)挽留彈窗

調(diào)用紅包接口獲取到紅包金額的時(shí)候，往紅包數(shù)據(jù)中加入一個(gè)firstBack字段值為true存儲(chǔ)到localstorage中；為document綁定visibilitychange事件監(jiān)聽(tīng)，當(dāng)離開(kāi)頁(yè)面的時(shí)候，則將localstorage中當(dāng)天該昵稱對(duì)應(yīng)紅包數(shù)據(jù)中的firstBack字段的值改為false；用戶點(diǎn)擊app左上角返回按鈕的時(shí)候，獲取localstorage中當(dāng)天該昵稱對(duì)應(yīng)的紅包數(shù)據(jù)，若紅包數(shù)據(jù)中有紅包金額，且firstBack字段的值為true，則展示挽留彈窗，否則直接返回上級(jí)頁(yè)面。

項(xiàng)目成果

1. 頁(yè)面展示

2. 數(shù)據(jù)表現(xiàn)

本次活動(dòng)上線后的訂單量數(shù)據(jù)，無(wú)論是全時(shí)期還是日均，環(huán)比19年雙11與20年年貨節(jié)均有顯著提升，北極星指標(biāo)達(dá)成效果較好。

3. 用戶調(diào)研反饋

預(yù)熱期和專場(chǎng)期兩期調(diào)研顯示，無(wú)論是對(duì)下沉用戶還是非下沉用戶，下沉?xí)?chǎng)的優(yōu)惠感傳遞較佳。

△ 截圖引自：2020年618大促用戶調(diào)研報(bào)告

總結(jié)

本次618，我們?cè)谙鲁習(xí)?chǎng)踐行了大促活動(dòng)的產(chǎn)品化迭代思路，在前期與業(yè)務(wù)側(cè)就核心目標(biāo)與北極星指標(biāo)達(dá)成一致后，無(wú)論是在方案推動(dòng)以及最后的上線效果來(lái)看，都比往期有了長(zhǎng)足進(jìn)步。未來(lái)，在延續(xù)往期已驗(yàn)證策略，保證會(huì)場(chǎng)基礎(chǔ)產(chǎn)出效果的前提下，如何結(jié)合行業(yè)、用戶趨勢(shì)的變化，打造具有京東品牌印記的大促下沉?xí)?chǎng)，將會(huì)是我們持續(xù)探索的發(fā)力方向。

更多京東實(shí)戰(zhàn)案例：

歡迎關(guān)注「JellyDesign」的小程序：