京東超市H5：618拒絕套路，一起來(lái)套圈

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

收藏110 評(píng)論10

舉報(bào) 2021-06

掃描,分享朋友圈

京東超市H5：618拒絕套路，一起來(lái)套圈

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

項(xiàng)目背景

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

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

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

01 用戶(hù)初步接觸-拉新

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

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

項(xiàng)目制作

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

京東超市H5：618拒絕套路，一起來(lái)套圈

二、視覺(jué)

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

三、技術(shù)

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈

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

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

京東超市H5：618拒絕套路，一起來(lái)套圈