項目背景

我的專屬會場作為大促期間的固化功能型會場，一直以來的定位都是滿足用戶與「我」相關的需求，核心目標是通過高效導購方式來促進購買轉，以輔助帶動大盤GMV的提升。

在今年618中，我的專屬會場除了承載它長線的個性化導購目標之外，為了配合平臺實現大促期間對京東服務業務的推廣，也將承載提升服務曝光、帶動服務增長的業務訴求，因此，在這次618我的專屬會場設計定位中，以轉化率為北極星指標，服務新用戶增長&服務轉化率為重點關注指標，并以優化導購維度提升導購效率、挖掘與「我」相關的服務需求為核心發力點。

關于北極星指標：

設計思路

1. 打造「與我相關」的瀏覽動線

經過多年大促的驗證以及沉淀，我的專屬會場已形成一定固化的用戶心智，即與「我」強相關，且與大促優惠強相關，因此基本框架可以概括為「功能區」與「推薦區」兩大部分。

功能區的主要目的是讓用戶快速中識別是我的專屬頁面，并滿足用戶在大促期間主動找尋固定功能的訴求，推薦區則以專屬個性化的導購維度來滿足用戶逛頁面的訴求。

在具體的動線設計上，除了遵循以上的基礎原則，這次也重點延續了產品化迭代的思路，根據去年618及雙11的數據效果進行了動線優化，并結合本次服務拉新的挑戰目標，將服務內容與用戶相關的需求進行融合，適當的給予更多了曝光強化。

2. 容層面提升專屬感

減少功能層級，提升專屬內容曝光優先級

根據過往數據來看，功能區一直屬于頁面高點擊和高轉化模塊，在去年雙11嘗試將部分入口信息展開后，數據更是提升明顯，因此在本次618中，我們繼續強化了符合用戶需求的功能價值并減輕功能層級，將「我的優惠」、「我的足跡」信息展開，并新增符合用戶需求的新功能「我的常購」，同時推動上游功能接口，拉取了專屬感信息，如優惠券臨期提醒、常購次數等；固定功能入口也按照數據效果進行了展示順序的優化，并強化了信息更新提醒，增加整個區域的吸引力。

迭代專屬推薦維度

在推薦區的迭代中，首先是將高價值維度的進行延續，優化設計細節。例如，針對身份定投模塊進行原子層面的迭代，通過身份標簽的強化和區分來突顯不同的用戶專屬感；針對常逛品類則進行了AB測試，驗證不同優惠表達對用戶的吸引度。

其次是低價值維度的弱化淘汰以及對新維度的挖掘。例如，根據年貨節常試的新維度數據效果發現，場景維度及會場維度數據表現一般，綜合BI類的導購魔方表現較好，尤其標簽、榜單類素材，因此本次新增以標簽和榜單為主的專屬推薦樓層，并根據用戶身份標簽生成個性化文案，以打造與我相關的專屬感氛圍，而針對一直效果平平但由于戰略支持需要呈現的附近門店模塊，則與榜單標簽進行了整合，以縮減樓層高度，提升整體瀏覽效果。

3. 利用「情感化「氛圍與用戶溝通

品牌延續

整體視覺延續主會場主題「熱愛如光」與主KV保持一致。「我的」會場是與用戶自我相關的一個主要會場，貫穿全時期的整個時間線，視覺形式上需要做到契合預售期和非預售期的整個主線視覺樣式，「我的專屬」主打智能服務，也將承載提升服務曝光、帶動服務增長的業務訴求所以在整體視覺上采用了預售期的「彈幕」圖形元素和非預售期的「周年慶嘉年華」圖形元素保證與全時期主KV視覺風格保持一致，同時整個會場采用科技藍的色調，營造科技、智能、趣味去打造整體調性，以達到增加服務的曝光、帶動提升服務業務的增長率。

身份專屬的氛圍營造

整個「我的專屬」會場，定投用戶的身份與用戶的信息息息相關，視覺需要打造與用戶強相關的氛圍，讓用戶在「我的專屬」里找到歸屬感，而這次我們主KV的圖形為「彈幕」所以啟發了在頭圖上想傳達的目的，以彈幕形式營造「情感化」氛圍嘗試與用戶溝通，根據不同身份用戶打造不同視角氛圍，具體如下：

普通用戶：通過分析用戶行為，制定身份關鍵詞，彈幕氛圍結合前端技術以彈幕氣泡的動畫效果給用戶呈現驚喜感，讓用戶感知「京東一直在默默的關心你」。

PLUS用戶：為了凸顯PLUS的特別，在頭像的外框置入了PLUS的品牌色，在彈幕氛圍上置入PLUS用戶在618的專屬優惠信息，傳達給plus用戶的貼心服務

生日用戶：對于在6月1日-18日生日的用戶我們在頭圖氛圍上貼上了「生日快樂」的標簽，在彈幕氛圍上也把最真誠的祝福語融入到彈幕氣泡上來表達對生日用戶的關懷。

專屬禮包

這次的618分以三個時期為活動節點，在不同時期分發三個專屬禮包，為了展示用戶不同的的專屬特點，在視覺樣式和氛圍上融入了時期的特點以及身份標簽。

專享禮包：針對于專場期的用戶不同身份定投給用戶的優惠券禮包，為了更突出優惠信息，背景氛圍在這個禮包里降級地去弱化，讓優惠券的身份信息和優惠信息更突出，加強點擊感。

618超級大禮包：高潮期是整個活動的頂峰，所以高潮期的禮包視覺會與主會場相呼應，主題的氛圍烘托也會更熱鬧，在主題樣式中加入了禮盒、京豆、優惠券等插畫物體去營造整個嘉年華氛圍，讓用戶深刻去感知年中逛歡優惠力度大的感知。

生日禮包：本次特別為在6.1-6.18與京東同生日的用戶投放的一個貼心禮包，生日用戶初次打開禮包會有禮盒包彈出來抖動打開禮盒，如此設計是為了給生日的用戶帶來神秘感和驚喜感，打開禮盒之后是我們的生日券禮包，在生日券禮包里我們以蛋糕為主體，同時與前端技術結合使生日蠟燭的火光在搖晃，想達到一個真實的慶生場景，用視覺嘗試與用戶溝通-你的重要日子京東都陪著你。

4. 通過技術為頁面增加吸引力

我的專屬會場，承載的是我的各種身份，其他內容不多，整體結構比較簡單，那么如何用前端優化使進入頁面的用戶能夠迅速感受這種「專屬身份」的氛圍呢？如何豐富頁面的內容展現呢？我們從以下幾個方面進行了實踐。

頭圖身份元素動畫

頭部是整個頁面氛圍最重要的部分，用戶進入頁面首先看到的就是頭部的身份標識，所以我們要做的就是吸引用戶在此停留，查看其專屬的信息，于是我們嘗試給頭圖的身份元素增加一些動畫效果，來留住用戶的目光。首先我們來看看實際成品：

主要優化點：

• SVG環形漸變實現。由于目前沒有比較好的辦法能夠實現環形的漸變，我們采用了一種曲線救國的方案，實現方法是使用2層SVG，一層是完整的徑向漸變，一層是裁剪50%的徑向漸變，最終疊加成環形漸變；
• PLUS銘牌高光動畫。PLUS銘牌是身份的標識，我們使用了背景動畫來實現高光的效果，體現一種尊貴感；

禮包氛圍優化

本地會場主推的促銷方案是各種身份禮包，包括生日禮包、專享禮包、618大禮包。各種禮包會有不同的彈出效果，在設計稿定稿之后，我們認為生日禮包是我們的主推促銷方案，但是如果只是簡單的彈窗，沒有給生日用戶驚喜感，于是我們決定給彈窗增加一些氛圍的優化，在與視覺同學討論方案后，決定模仿真實禮物盒打開，并且增加蠟燭燃燒的效果，使用戶產生參與感，展現效果如下：

樓層標題小動畫

由于頁面本身結構比較簡單，導致頁面從瀏覽角度比較單調，于是我們從前端的角度思考，如何能夠用上一點比較有「技術意義」的實踐呢？最近observe這個特性很有意思，那我們就簡單試試好了。

我們給所有的樓層增加了一個observe監聽，當觸發enter事件的時候，執行動畫。使用這個特性的原因是我們發現observe的兼容性非常好，且不用像以往一樣，頻繁觸發scroll，觸發條件也相對更準確。經過測試，我們發現效果非常好，省去了scroll方法還需要阻斷的情況，而且這個小優化，讓運營和產品也覺得非常眼前一亮。

項目成果

1. 頁面展示

這一次的視覺在氛圍上更注重情感化去塑造打造氛圍，區別于以往偏功能化的特點，自身在禮包和頭圖的物件塑造上顏色更柔和、造型更細膩，以科技感和專屬感通過定投身份給用戶帶來情感化上的共鳴。

基于運營策略的不同，對比于往期的「我的」頁面這一次更注重強調專屬感和點擊感去輔助京東服務業務曝光以及引流。

2. 數據表現

本次會場的北極星指標目標達成，轉化率與服務新用戶增長環比19年雙11均有了較大的增長，在設計策略與運營策略配合優化下，也帶動了整點引單和點擊的大幅提升。

通過產品化迭代思路，避免了每次活動都從零開始，思路的迭代和沉淀除了帶來設計效果上的提升，也能夠真正利用數據思路驅動每一次活動都能穩定的增長，以發揮設計和業務的價值。

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