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

2022-03-18 10:38来源：H5案例分享

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

识别图中二维码

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

案例：测测你的荣耀段位

品牌：度小满

技术实现： HTML5

亮点：

1.创意定位

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

2.策划逻辑

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

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

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

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

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

输入昵称：输入昵称后，点击生成海报。

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

3.视觉交互

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

4.体验上

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

会员登录