度小满:测测你的荣耀段位

2022-03-17 H5案例分享 H5案例分享
度小满:测测你的荣耀段位


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

识别图中二维码

测测你的荣耀段位-查阅二维码

完整欣赏此案例大约需要2分钟


案例:测测你的荣耀段位

品牌:度小满

技术实现: HTML5

亮点:

1.创意定位

度小满借2022年315消费者权益保护日推出的“第一届小满杯消费者金融知识大赛”——测测你的荣耀段位,通过金融知识问答,普及一些消费金融相关的知识,最后生成荣誉段位海报,方便用户传播。

 

2.策划逻辑

主要流程:微信授权 → Loading → 主题露出页 → 测试答题 → 输入昵称 → 生成海报。

 

微信授权:主要获得H5调取微信用户的头像和昵称的授权,最后,海报环节才能出现用户的微信头像和昵称。如果用户不允许,就无法正常继续。

 

Loading:素材预加载过程,小飞机缓缓飞过,露出品牌:度小满和度小满消保中心,加载百分比,缓解用户的等待焦虑。

 

主题露出页:露出主题和交互按钮。第一届小满杯消费者金融知识大赛——测测你的荣耀段位,点击“开始测试”,即进入测试答题部分。

 

测试答题部分:采用场景平移的方式,在多个场景上设置交互点,引导用户点击,用户点击后,弹出问答题,一般2-3个选项,共7题,涉及:XX贷、消费贷、买保险、买理财、征信等问题。答完后,点击查看你的成绩。

 

输入昵称:输入昵称后,点击生成海报。

 

生成海报:根据答题结果,成绩证书包含成绩荣誉称号、用户昵称、头像,长按可以保存海报。还可以点击“再来一次”,再次答题测试;点击“马上分享”,弹出分享引导蒙层。

 

3.视觉交互

 

以品牌Logo的蓝红为主色调,视觉饱满清晰,场景左右滑动,答题选项靠点击,昵称为输入,最后的海报可以长按保存。每种交互方式都有相应的提醒和引导。

 

4.体验上

 

趣味性和知识性并举,很多跟消费金融相关的知识,真的需要科普和传播,提高人们的“避坑”能力。





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

标签

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

相关推荐:

百度:百度输入法

百度大脑X银河补习班:我的老年生活

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~