京東如何做好特賣會場設計？來看我的項目總結

在主流的電商平臺認知里，京東通常以「品質好，服務優，價格高」著稱，相對于淘寶、拼多多等友商，其平臺調性與「下沉」相距甚遠。因此，如何借助大促期間激增的流量，為平臺帶來更多下沉用戶與銷售額，便成為了下沉（超值特賣）會場的主要使命。

設計思路

1. 核心數據指標定位

下沉會場在本次618之前，一共只做了兩期（19年雙11、20年年貨節）嘗試，相比主會場等傳統會場，還未形成成熟的結構框架，因此，對于會場該怎么做，北極星指標是什么，還處在探索階段。

關于北極星指標：

作為售賣型會場，我們自然地在前兩次活動中將GMV增長（GMV=訂單量x客單價）作為下沉會場的北極星指標，但對往期活動的數據表現進行復盤后，會發現下沉會場的客單價受盤品策略的影響較大，不利于設計策略的效果驗證。因此，為了精準定位設計發力方向，我們剔除了客單價這個變量，將訂單量增長作為本次下沉會場的北極星指標。

在明確了北極星指標后，我們采用UGD數據拆解思路，將其拆分細化為「提升訂單轉化率」和「提升日均UV」兩個數據指標，并圍繞這兩個數據指標，進行了如下數據提升策略探索。

2. 提升訂單轉化率——內容吸引

下沉會場主要推薦低價商品，促銷玩法豐富，最大的賣點是「便宜」，基于這些特點，如何提升內容吸引力及熱鬧氛圍，更好地傳達「低價」、「超值」等優惠感知，進而提升訂單轉化率，是首要解決的問題。本次618，我們針對提升內容吸引力做了以下嘗試。

降價曲線樣式創新，增強促銷氛圍

頭部主推單品是會場內最優質的商品，它們降價力度大，屬于會場沖擊銷量的主力，在往期活動的單品坑位樣式設計中，我們希望更多地展示利益點信息，并通過重形式的搶購按鈕引導用戶點擊。但用研結論反饋，用戶通常只關注商品和往常相比是否真的更便宜。基于此，在本次618中，我們只保留了價格信息，結合后臺到手價功能，通過曲線、箭頭等圖形化表達，將到手價格同日常價與往期最低價做了兩段價格錨點對比，突出最核心的「直降」屬性，以提升信任感。

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

重點模塊延續雙11特殊化標簽展示，突出優惠信息

通常來說，用戶打開的頁面的首要想了解的內容是「有多省錢？」「我為什么要買」，所以在視覺傳達上面需要更加簡短有力，清晰直觀，讓用戶能夠快速接受核心權益。在氛圍營造上結合頁面風格，以及飽和度較高的暖色調吸引用戶。因此下沉會場在重點模塊側重突出「直降」利益點，特殊化箭頭標簽形式帶給用戶一定的功能感知讓用戶對優惠信息一目了然影響用戶決策。并結合搶購引導按鈕，促進用戶點擊。

與下沉熱鬧氛圍契合的創新包裝及主kv品牌視覺延續

整體延續主kv視覺風格，塑造用戶對618一致的品牌認知。同時契合下沉會場特性及用戶視覺表達差異性，進行優惠感、熱鬧氛圍及場景沉浸感氛圍傳遞。

下沉預售期：延續主kv熱愛如光主圖形結合彈幕元素同時突出場景沉浸感氛圍

在延續主kv熱愛如光圖形基礎上，會著力于結合主題（京選品質、工廠直供、斗地主等），選擇契合的色彩及元素，用微場景氛圍的包裝形式給用戶傳達具有下沉會場特性的視覺形式，給用戶傳遞不一樣的熱鬧沉浸感受。

下沉專場期：延續主kv熱愛無限元素，主打品類呈現，營造熱鬧賣貨氛圍

在延續主kv熱愛如光的基礎上融入無限符號的概念，重點突出利益點、品類及紅包熱鬧氛圍的傳達，結合不同主推品類定義契合的色彩，讓用戶能夠清楚的感知我們的熱鬧賣貨氛圍。

下沉高潮期：延續主會場光線呈迸發狀態，主打生日盛典氛圍

高潮期整體結合主kv迸發狀態的光線，6.16與6.18融合舞臺場景與生日元素，6.17當天主推直播概念，分別營造舞臺生日盛典及直播真實場景氛圍，給用戶帶來一定的場景沉浸感。

樓層形式感的下沉促銷概念傳達

以往下沉會場聚焦于商品本身的信息傳達，缺少對主題概念的包裝，從用戶認知來說缺乏特色，不夠吸引用戶，從主題概念傳達上來說差異化體現較弱。為了更好的滿足業務訴求，提升用戶體驗，基于現有問題，我們結合主題內容（京挑細選、京心助農、京打細算、京心陪伴），運用插畫形式，描述整體微場景概念，提升沉浸感氛圍表達。結合主題特性選擇契合的色彩及元素進行設置，不同維度包裝商品，提升用戶認知及體驗。

與往期對比：

整體視覺呈現：

微動效嘗試

對標友商動效存在的頁面狀態，我們希望能夠運用動效提升畫面的熱鬧活波氛圍，重點內容突出，吸引用戶關注度。因此我們在頭圖樓層使用光暈呼吸和流星劃過的背景動效增加整個樓層的視覺吸引力，使用蛋糕的主體來突出618是京東生日的節日氛圍，然后圍繞蛋糕主體加上浮動的商品增加大促的氛圍感知，整體達到吸引用戶眼球的目的。

動效解構

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

背景動效實現

背景分為四個部分：

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

主體動效實現

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

前景動效實現

前景部分由多個位置不同的紅包還有商品圖片組成，動效實現的方式相同：將前景物品單獨切圖，放到設計稿上相同位置，然后設置在0.5秒內向上過渡7個像素，之后在1秒內過渡到初始位置下面7個像素，再在0.5秒內過渡到初始位置，以此往復，達到單個前景物品上下擺動的效果，多個前景物品設置開始運動的時間不同，達到錯落有致的擺動效果。

效果展示

3. 提升日均UV——挽留機制

玩法優化：拓展挽留鏈路，降低體驗影響

20年年貨節我們在下沉會場引入了挽留機制，用戶當天首次離開會場時，會觸發視頻（招商廣告）挽留彈窗，用戶觀看完視頻后可領取京豆、優惠券等獎勵，業務希望通過看視頻領獎的形式，以達到提升用戶停留時長，促進回訪與轉化的目的，但上線后數據表現并不理想，未達到預期效果。

因此在本次設計之前，我們對20年年貨節挽留機制的用戶體驗路徑進行了分析， 發現在每個觸點中存在以下問題。

針對這些問題，結合促進用戶回訪與轉化的目標，我們對玩法做了一次全面升級：不再局限于用戶離開時這一觸點，在用戶進入、瀏覽、離開會場等行動觸點，通過紅包、低價單品等內容吸引用戶每日參與并刺激轉化。

優化后的挽留機制，極大減少了用戶看視頻做任務的參與成本，次日回訪率對比20年年貨節，提升了8倍之多。

前端實現

用戶在app內每日第一次進會場觸發領取紅包彈窗，第一次離開會場觸發挽留彈窗。因為沒有后臺資源支持，因此怎樣記錄和獲取用戶當天的活動狀態，根據狀態來判斷中獎彈窗或挽留彈窗的展示，就成了最大的問題。

針對這些問題，我們對需求進行了解構分析并高效落地：

判斷用戶在app環境下的登錄狀態

• app內判斷：jm-common移動端基礎js庫提供isApp方法判斷當前環境是否為特定app，isApp('jd')返回為true即在app內
• 已登錄判斷：復合查詢接口入參{"type": "loginState", "mapTo": "timeline"}，返回結果response.data.timeline.login的值true即為已登錄，但在測試過程中發現由于紅包接口返回的數據保留在app本地，用戶更換賬號登錄后展示的還是之前的賬號領取的紅包，因此還需要獲取用戶的信息進行校驗；使用myMultiNumInfo接口可查詢到用戶的昵稱，返回結果response.code的值為0則為已登錄，response.userMultiInfo.nickName的值即為用戶昵稱，使用此接口替代復合查詢接口查詢登錄狀態可解決更換賬號數據展示有誤的問題。

進入會場判斷當天未領取紅包且紅包未領完則請求紅包接口

若請求了紅包接口返回了紅包金額或者返回的信息為紅包已經搶光的話，使用localstorage本地存儲將紅包接口返回的數據存儲在app本地，并使用日期和用戶昵稱拼接的字符串標記該數據；打開會場的時候，使用日歷和用戶昵稱拼接的字符串從localstorage中獲取紅包信息，如果沒有獲取到信息，則請求紅包接口，如果有獲取到信息，則展示紅包金額或已搶光。

領到紅包后點左上角返回按鈕則出現挽留彈窗

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

中途離開會場則當天不出現挽留彈窗

調用紅包接口獲取到紅包金額的時候，往紅包數據中加入一個firstBack字段值為true存儲到localstorage中；為document綁定visibilitychange事件監聽，當離開頁面的時候，則將localstorage中當天該昵稱對應紅包數據中的firstBack字段的值改為false；用戶點擊app左上角返回按鈕的時候，獲取localstorage中當天該昵稱對應的紅包數據，若紅包數據中有紅包金額，且firstBack字段的值為true，則展示挽留彈窗，否則直接返回上級頁面。

項目成果

1. 頁面展示

2. 數據表現

本次活動上線后的訂單量數據，無論是全時期還是日均，環比19年雙11與20年年貨節均有顯著提升，北極星指標達成效果較好。

3. 用戶調研反饋

預熱期和專場期兩期調研顯示，無論是對下沉用戶還是非下沉用戶，下沉會場的優惠感傳遞較佳。

△ 截圖引自：2020年618大促用戶調研報告

總結

本次618，我們在下沉會場踐行了大促活動的產品化迭代思路，在前期與業務側就核心目標與北極星指標達成一致后，無論是在方案推動以及最后的上線效果來看，都比往期有了長足進步。未來，在延續往期已驗證策略，保證會場基礎產出效果的前提下，如何結合行業、用戶趨勢的變化，打造具有京東品牌印記的大促下沉會場，將會是我們持續探索的發力方向。

更多京東實戰案例：

歡迎關注「JellyDesign」的小程序：