荣耀HONOR:新年荣耀勇气扭蛋机

2021-02-01 H5案例分享 H5案例分享
荣耀HONOR:新年荣耀勇气扭蛋机


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

新年荣耀勇气扭蛋机-查阅二维码

完整欣赏此案例大约需要1分40秒


案例:新年荣耀勇气扭蛋机

品牌:荣耀HONOR

技术实现: HTML5 + CSS + Swiper + VelocityJS + Velocity.ui

亮点:

1、创意定位:

充满挑战的2020已经过去 ,为了让所有人更加有信心面对未知的2021,荣耀了打造一台将陌生人连接在一起、互相鼓励、打气的勇气扭蛋机,通过交换答案的形式,进行一场陌生人社交实验,用传递勇气的正能量,打造全新的品牌形象。

 

2、策划上:

a、扭蛋机结合了“树洞”+“漂流瓶”的体验,用户可以将自己不敢问出口、发在朋友圈的问题,输入问题扭蛋,等待陌生网友回答;也可以通过随机扭一个扭蛋,回答陌生网友提出的问题,以此累计勇气值,进行抽奖;

b、用户可以在【我的问题】页面,实时查看网友留下的回复,开启陌生人给予的答案,增强体验感和仪式感;

 

c、用户完成提问、回答后,系统根据计数自动生成含有勇气值、勇气宣言的扭蛋海报,用户可通过长按保存分享至朋友圈;

 

d、抽奖环节的设置同样具有可玩性,照消耗积分的不同,分为三个不同奖池,每个奖池里最大奖品金额不同,用户可以通过选择想要的奖品点击不同的礼盒抽取,增加了抽奖环节的趣味性。

 

3、设计上:

为了保持高级简洁的质感,同时结合年货节特色&牛年元素,设计页面以抽象色块+牛元素作为整体视觉呈现;

loading页以奔跑的牛拉开帷幕作为动画效果,寓意2021牛气十足,勇敢去闯;

首页模拟扭蛋机动效,触发屏幕后扭蛋机滚动,牛头、牛角、 牛尾配合进行不同动效,更加真实还原扭蛋机体验,高级而不失活泼。

 

4、体验上:

向陌生人提问、收获陌生人回复的功能简单却具有可玩性,增强了页面重复打开率,走出“网抑云”的丧,原来网友各个都是神回复高手,收到的答案或搞笑、或暖心,对于提问者来说都是一种鼓励和祝福,收获陌生人的善意,治愈内心的不勇敢。





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

华为HONOR life:生活与你 一起升级

王者荣耀:属于你的英雄传承-王者荣耀官网

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~