京東超市H5：618拒絕套路，一起來套圈

數(shù)英評(píng)分

收藏110 評(píng)論10

舉報(bào) 2021-06

掃描,分享朋友圈

京東超市H5：618拒絕套路，一起來套圈

掃描二維碼，一起套圈開寶箱！
（數(shù)英網(wǎng)APP用戶需點(diǎn)擊放大二維碼，長按識(shí)別）

項(xiàng)目背景

618年中營銷狂歡到今年已經(jīng)是第11個(gè)年頭，直播、IP打榜、小游戲等在內(nèi)的泛娛樂化的場景給用戶提供了在大促期間更多的停留場所。無右團(tuán)隊(duì)受京東超市的邀請，為不同品類的十幾個(gè)不同品牌通過“AR輕互動(dòng)+社交裂變”的趣味玩法來提升頻道流量，促進(jìn)商品交易。在經(jīng)歷了“超市尋寶”、“遛狗大作戰(zhàn)”、“假面狂歡舞會(huì)”等...一系列頭腦風(fēng)暴后，最后跟京東超市敲定了有趣又懷舊的套圈游戲——“京友請出圈”，少一些套路，多一些快樂。

用戶旅程體驗(yàn)設(shè)計(jì)

發(fā)紅包、領(lǐng)京豆、送商品優(yōu)惠券，簽到、做任務(wù)、邀請好友助力，這些“套路”背后潛藏的是羊毛黨、刷數(shù)據(jù)、領(lǐng)權(quán)益，內(nèi)容和體驗(yàn)是什么好像反而不重要了，當(dāng)然我們認(rèn)為這種“劣幣驅(qū)逐良幣”的現(xiàn)象不會(huì)長期存在，基本的權(quán)益和留存裂變設(shè)計(jì)本身沒有問題，問題在于你是否有好的用戶體驗(yàn)和內(nèi)容“真正”的用戶會(huì)為之買單。

01 用戶初步接觸-拉新

在此階段我們主要考慮有兩個(gè)問題，用戶為什么點(diǎn)進(jìn)來并且為什么愿意留在這里，為此我們設(shè)計(jì)了三個(gè)點(diǎn) 1）AR交互 2）套圈小游戲比賽 3）權(quán)益。

京東超市H5：618拒絕套路，一起來套圈

首先感謝京東AR團(tuán)隊(duì)為這次項(xiàng)目定制了又rocker，又很溜的手勢來開啟這次旅程，其實(shí)AR這塊我認(rèn)為必是未來一種很棒的交互方式，看下社交巨頭Facebook在這上面的投入便知，相信之后還有更多除了手勢以外更有意思的玩法會(huì)融入營銷中。權(quán)益也不必多說，但我們設(shè)計(jì)的時(shí)候不會(huì)依靠它，這個(gè)階段暫時(shí)忘記它的存在是最好的（沒有利益還能吸引用戶的體驗(yàn)才是好體驗(yàn)）。

這次的互動(dòng)體驗(yàn)核心——套圈小游戲。國外有個(gè)非常好的概念“超休閑游戲”，簡單釋壓就是這種類型的代名詞：一切為了好玩，但也是一門學(xué)問。這四個(gè)步驟是一個(gè)循環(huán)的過程，當(dāng)用戶越沉迷于這個(gè)循環(huán)，那說明你的游戲設(shè)計(jì)對用戶的吸引力越強(qiáng)。

京東超市H5：618拒絕套路，一起來套圈

開始我們的“上癮”之旅之前，我們需要先了解一下本次項(xiàng)目的定位，我們內(nèi)部經(jīng)歷了數(shù)輪的討論，整理分析了大量國內(nèi)外小游戲案例，最終游戲的形式選擇了“套圈游戲”，從形式上調(diào)起Z時(shí)代受眾的好奇心和新鮮感，讓用戶的情緒心流從初見之時(shí)便被充分的調(diào)動(dòng)起來。市面上大多數(shù)的小游戲品質(zhì)和畫面效果比較粗糙，帶來的娛樂感也因此大打折扣。

京東超市H5：618拒絕套路，一起來套圈

02 用戶互動(dòng)-留存促活

這里的設(shè)定很重要也很難，必須解決一個(gè)難題：通過怎么樣好的體驗(yàn)設(shè)計(jì)讓用戶愿意每天都愿意進(jìn)來，愿意去關(guān)注和瀏覽一些自己感興趣的商品 1）合理的積分、任務(wù)、抽獎(jiǎng)系統(tǒng) 2）趣味動(dòng)圖收集。

京東超市H5：618拒絕套路，一起來套圈

1）之所以叫系統(tǒng)，需要通過一個(gè)“數(shù)學(xué)模型”把寶箱、積分、游戲獎(jiǎng)勵(lì)、權(quán)益獎(jiǎng)勵(lì)、趣味鉤子、每日任務(wù)、排行等信息通過一個(gè)經(jīng)過計(jì)算的詳細(xì)底層運(yùn)行規(guī)則給核算出來，很多項(xiàng)目之所以體驗(yàn)設(shè)計(jì)得不好，就是這塊沒做，或者沒有科學(xué)的做。這塊如果用戶體驗(yàn)不好，就會(huì)讓用戶發(fā)出以下抱怨：不公平、不好玩、搞不懂、為什么這樣…

2）這次我們設(shè)定的一個(gè)重要鉤子是想通過一些Z時(shí)代用戶喜歡的搞笑“動(dòng)效”來增加用戶粘性，這個(gè)收到了用戶的一直好評(píng)，很多朋友自發(fā)的去玩，就是因?yàn)楹苡腥?、很可愛、想把他們集齊，不枉同事翻遍大小素材網(wǎng)站搜集而來。

京東超市H5：618拒絕套路，一起來套圈

03 用戶轉(zhuǎn)發(fā)-社交裂變

形成裂變根本動(dòng)因不是在于權(quán)益、獎(jiǎng)勵(lì)游戲次數(shù)等基本操作，而是要在前面的“細(xì)節(jié)”上下足功夫，用戶自己就能感受到，所以社交裂變只是做好了用戶體驗(yàn)設(shè)計(jì)的一個(gè)結(jié)果。

項(xiàng)目制作

一、前言-內(nèi)心戲

俗話說，提案一時(shí)爽，執(zhí)行~~~，在我們項(xiàng)目創(chuàng)意階段，對于形式、玩法，大家的狀態(tài)是這樣的。

京東超市H5：618拒絕套路，一起來套圈

當(dāng)最終聽說因?yàn)槭悄曛写蟠?，京東平臺(tái)要求，需要提前一周完成整個(gè)項(xiàng)目，交付給平臺(tái)內(nèi)容進(jìn)行審核知曉包含執(zhí)行流程設(shè)計(jì)、視覺及程序制作一共只有25天時(shí)，執(zhí)行同事心里想的順利上線概率是這樣的。

京東超市H5：618拒絕套路，一起來套圈

二、視覺

不僅是Z世代的喜歡高顏值，所有人都有對美的基本需求，大量的運(yùn)營活動(dòng)在這上面都不夠“用心”，好看的東西總是能讓人身心愉悅的。這次項(xiàng)目上精美度和氛圍上我們做了足夠的功課，結(jié)合母嬰、食品酒水、個(gè)護(hù)清潔三大場景，以及大促的氛圍，我們設(shè)計(jì)了以“夢幻”為主題的視覺主題。

京東超市H5：618拒絕套路，一起來套圈

感謝各位創(chuàng)作者貢獻(xiàn)的版權(quán)模型原素材。

三、技術(shù)

技術(shù)上分析了目前市面所有套圈類型的游戲體驗(yàn)，最終選擇了3D引擎Three.js進(jìn)行開發(fā)。

出于加載速度等方面的綜合考慮，我們選擇了cannon-es物理引擎來進(jìn)行效果的模擬，物理模擬中一個(gè)很重要的概念是物體的包圍盒。在cannon-es中，包圍盒是由立方體、球體和圓柱體等基本幾何體組成。它的出現(xiàn)是為了簡化物體之間的碰撞檢測運(yùn)算，如果物體的包圍盒精細(xì)到與模型一模一樣，那么隨著模型面的增多，碰撞檢測計(jì)算會(huì)變得極為復(fù)雜，相應(yīng)的也可能會(huì)造成程序的卡頓。反之，包圍盒如果設(shè)置不當(dāng)，也會(huì)造成很多看似古怪的bug，比如游戲中常見的“穿?！薄?/p>

京東超市H5：618拒絕套路，一起來套圈

項(xiàng)目中我們處理的手法是—在3D軟件中建好模型，再通過程序轉(zhuǎn)化為物體的包圍盒，這樣做的好處是方便后續(xù)對其進(jìn)行調(diào)整。

關(guān)于視覺和技術(shù)的融合，我們的想法是——盡可能在網(wǎng)頁端還原3D軟件中的渲染效果。出于此目的，我們放棄了使用Threejs中的光照進(jìn)行實(shí)時(shí)計(jì)算，轉(zhuǎn)而采用烘焙貼圖的方式對模型效果進(jìn)行還原。簡單來說就是在C4D中調(diào)整好光照和模型材質(zhì)，效果滿意后將模型上的效果烘焙到貼圖上，再由程序?qū)①N圖應(yīng)用到模型上即可。

京東超市H5：618拒絕套路，一起來套圈