京东超市H5：618拒绝套路，一起来套圈
扫描二维码，一起套圈开宝箱！
（数英网APP用户需点击放大二维码，长按识别）
项目背景
618年中营销狂欢到今年已经是第11个年头，直播、IP打榜、小游戏等在内的泛娱乐化的场景给用户提供了在大促期间更多的停留场所。无右团队受京东超市的邀请，为不同品类的十几个不同品牌通过“AR轻互动+社交裂变”的趣味玩法来提升频道流量，促进商品交易。在经历了“超市寻宝”、“遛狗大作战”、“假面狂欢舞会”等...一系列头脑风暴后，最后跟京东超市敲定了有趣又怀旧的套圈游戏——“京友请出圈”，少一些套路，多一些快乐。
用户旅程体验设计
发红包、领京豆、送商品优惠券，签到、做任务、邀请好友助力，这些“套路”背后潜藏的是羊毛党、刷数据、领权益，内容和体验是什么好像反而不重要了，当然我们认为这种“劣币驱逐良币”的现象不会长期存在，基本的权益和留存裂变设计本身没有问题，问题在于你是否有好的用户体验和内容“真正”的用户会为之买单。
01 用户初步接触-拉新
在此阶段我们主要考虑有两个问题，用户为什么点进来并且为什么愿意留在这里，为此我们设计了三个点 1）AR交互 2）套圈小游戏比赛 3）权益。
首先感谢京东AR团队为这次项目定制了又rocker，又很溜的手势来开启这次旅程，其实AR这块我认为必是未来一种很棒的交互方式，看下社交巨头Facebook在这上面的投入便知，相信之后还有更多除了手势以外更有意思的玩法会融入营销中。权益也不必多说，但我们设计的时候不会依靠它，这个阶段暂时忘记它的存在是最好的（没有利益还能吸引用户的体验才是好体验）。
这次的互动体验核心——套圈小游戏。国外有个非常好的概念“超休闲游戏”，简单释压就是这种类型的代名词：一切为了好玩，但也是一门学问。这四个步骤是一个循环的过程，当用户越沉迷于这个循环，那说明你的游戏设计对用户的吸引力越强。
开始我们的“上瘾”之旅之前，我们需要先了解一下本次项目的定位，我们内部经历了数轮的讨论，整理分析了大量国内外小游戏案例，最终游戏的形式选择了“套圈游戏”，从形式上调起Z时代受众的好奇心和新鲜感，让用户的情绪心流从初见之时便被充分的调动起来。市面上大多数的小游戏品质和画面效果比较粗糙，带来的娱乐感也因此大打折扣。
02 用户互动-留存促活
这里的设定很重要也很难，必须解决一个难题：通过怎么样好的体验设计让用户愿意每天都愿意进来，愿意去关注和浏览一些自己感兴趣的商品 1）合理的积分、任务、抽奖系统 2）趣味动图收集。
1）之所以叫系统，需要通过一个“数学模型”把宝箱、积分、游戏奖励、权益奖励、趣味钩子、每日任务、排行等信息通过一个经过计算的详细底层运行规则给核算出来，很多项目之所以体验设计得不好，就是这块没做，或者没有科学的做。这块如果用户体验不好，就会让用户发出以下抱怨：不公平、不好玩、搞不懂、为什么这样…
2）这次我们设定的一个重要钩子是想通过一些Z时代用户喜欢的搞笑“动效”来增加用户粘性，这个收到了用户的一直好评，很多朋友自发的去玩，就是因为很有趣、很可爱、想把他们集齐，不枉同事翻遍大小素材网站搜集而来。
03 用户转发-社交裂变
形成裂变根本动因不是在于权益、奖励游戏次数等基本操作，而是要在前面的“细节”上下足功夫，用户自己就能感受到，所以社交裂变只是做好了用户体验设计的一个结果。
项目制作
一、前言-内心戏
俗话说，提案一时爽，执行~~~，在我们项目创意阶段，对于形式、玩法，大家的状态是这样的。
当最终听说因为是年中大促，京东平台要求，需要提前一周完成整个项目，交付给平台内容进行审核知晓包含执行流程设计、视觉及程序制作一共只有25天时，执行同事心里想的顺利上线概率是这样的。
二、视觉
不仅是Z世代的喜欢高颜值，所有人都有对美的基本需求，大量的运营活动在这上面都不够“用心”，好看的东西总是能让人身心愉悦的。这次项目上精美度和氛围上我们做了足够的功课，结合母婴、食品酒水、个护清洁三大场景，以及大促的氛围，我们设计了以“梦幻”为主题的视觉主题。
感谢各位创作者贡献的版权模型原素材。
三、技术
技术上分析了目前市面所有套圈类型的游戏体验，最终选择了3D引擎Three.js进行开发。
出于加载速度等方面的综合考虑，我们选择了cannon-es物理引擎来进行效果的模拟，物理模拟中一个很重要的概念是物体的包围盒。在cannon-es中，包围盒是由立方体、球体和圆柱体等基本几何体组成。它的出现是为了简化物体之间的碰撞检测运算，如果物体的包围盒精细到与模型一模一样，那么随着模型面的增多，碰撞检测计算会变得极为复杂，相应的也可能会造成程序的卡顿。反之，包围盒如果设置不当，也会造成很多看似古怪的bug，比如游戏中常见的“穿模”。
项目中我们处理的手法是—在3D软件中建好模型，再通过程序转化为物体的包围盒，这样做的好处是方便后续对其进行调整。
关于视觉和技术的融合，我们的想法是——尽可能在网页端还原3D软件中的渲染效果。出于此目的，我们放弃了使用Threejs中的光照进行实时计算，转而采用烘焙贴图的方式对模型效果进行还原。简单来说就是在C4D中调整好光照和模型材质，效果满意后将模型上的效果烘焙到贴图上，再由程序将贴图应用到模型上即可。
项目总结
数据：此次活动用户平均停留时长达为135.3s，次日复访率达到了0.43，参与UV34w，数据亮眼。
流程的保障：从方案到原型、规则、设计、开发、测试直至交付，保证创意的顺利落地，其中项目管理是重中之重，就像电脑的CPU看不见，但很重要。
过程的取舍：创意是做加法的过程，执行是做减法的过程，后者往往更加痛苦，但也更需要智慧，需要守住内容呈现的底线，平衡交付与质量。
做事就要花心思：既要科学的花心思，让项目好的呈现能够有迹可循，有数据、有洞察、有逻辑、有思考。也需要在作品中添加感性的心思，用户才能感受到作品的真诚。
出品｜无右互动
策划｜欧阳、neeson
统筹｜哼哼、小芸
3D设计 ｜Jackie-CB
平面设计｜辉哥
技术前端｜世杰、大志
技术后端｜老易
专业评分
专业评分已截止
评论
评论
推荐评论
全部评论（10条）