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

案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分40秒
案例:新年荣耀勇气扭蛋机
品牌:荣耀HONOR
技术实现: HTML5 + CSS + Swiper + VelocityJS + Velocity.ui
亮点:
1、创意定位:
充满挑战的2020已经过去 ,为了让所有人更加有信心面对未知的2021,荣耀了打造一台将陌生人连接在一起、互相鼓励、打气的勇气扭蛋机,通过交换答案的形式,进行一场陌生人社交实验,用传递勇气的正能量,打造全新的品牌形象。
2、策划上:
a、扭蛋机结合了“树洞”+“漂流瓶”的体验,用户可以将自己不敢问出口、发在朋友圈的问题,输入问题扭蛋,等待陌生网友回答;也可以通过随机扭一个扭蛋,回答陌生网友提出的问题,以此累计勇气值,进行抽奖;
b、用户可以在【我的问题】页面,实时查看网友留下的回复,开启陌生人给予的答案,增强体验感和仪式感;
c、用户完成提问、回答后,系统根据计数自动生成含有勇气值、勇气宣言的扭蛋海报,用户可通过长按保存分享至朋友圈;
d、抽奖环节的设置同样具有可玩性,照消耗积分的不同,分为三个不同奖池,每个奖池里最大奖品金额不同,用户可以通过选择想要的奖品点击不同的礼盒抽取,增加了抽奖环节的趣味性。
3、设计上:
为了保持高级简洁的质感,同时结合年货节特色&牛年元素,设计页面以抽象色块+牛元素作为整体视觉呈现;
loading页以奔跑的牛拉开帷幕作为动画效果,寓意2021牛气十足,勇敢去闯;
首页模拟扭蛋机动效,触发屏幕后扭蛋机滚动,牛头、牛角、 牛尾配合进行不同动效,更加真实还原扭蛋机体验,高级而不失活泼。
4、体验上:
向陌生人提问、收获陌生人回复的功能简单却具有可玩性,增强了页面重复打开率,走出“网抑云”的丧,原来网友各个都是神回复高手,收到的答案或搞笑、或暖心,对于提问者来说都是一种鼓励和祝福,收获陌生人的善意,治愈内心的不勇敢。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号