蚂蚁集团:反诈高手落谁家?H5题目试一下!

2022-12-29 H5案例分享 H5案例分享
蚂蚁集团:反诈高手落谁家?H5题目试一下!


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

识别图中二维码

反诈高手落谁家?H5题目试一下!-查阅二维码

完整欣赏此案例大约需要1min30s


案例:反诈高手落谁家?H5题目试一下!

品牌:蚂蚁集团

技术实现: html5

制作:亿众互动

亮点:

为了响应国家号召,宣传《反诈法》,使电信反诈法律宣传深入人心,帮助更多人识别、逃离电信骗局,蚂蚁集团联合公安部推出了反诈测试H5。此支H5以测试问答的形式,将7道题包装在安全学院的答题测试过程中,通过引导用户完成7道选择题,向用户科普法律条文,达到宣传普法的目的。

 

作为宣传科普类的H5内容,答题测试是非常合适的形式,在紧张刺激的答题中,用户的注意力是高度集中的,不管作出怎样的回答,相应的提示反馈都会二次加深其对相应法律的印象。同时,答题这种趣味形式也可以在一定程度上减少科普的枯燥感,寓教于乐,更易于使用户接受,使其在娱乐竞赛的过程中学到知识~

 

一、策划逻辑:

1、loading页:充满科技感的进度条在由0和1组成的代码背景中向前加载,有一种象征未来的技术氛围,也与H5主题电信反诈紧密相关。

2、首页:闪动入目的标题文案直点主题,“测一测你对《反诈法》了解有多少?”一目了然,让用户清楚明确此支H5的内容形式。从电子屏幕中冲出的警察和浮动的安全小卫士体现了一种守护的威严感和安全感,契合主题。

3、答题页:7道题目在活页笔记本中呈现,营造了一种答题的场景感,每道题目选择后会出现及时的反馈,答对选项变绿,打上对勾,答错选项变红,标记错号,清晰明了。同时,题目文字嵌入到不同的场景插画中,丰富有趣,使用户更有代入感,用户在男孩和女孩的引导下作答,回答后收获相应的反馈,如答对后人物会说“很棒,有良好的《反诈法》常识!”,打错后会弹出与题目对应的法律科普弹窗,这样的知识型情感互动使体验过程更加生动,趣味十足。

4、海报页:根据用户答对的题目数不同,给与其不同的称号,文案的落脚点也都是正向正能量的,如果分数低,就鼓励用户再接再厉,要是分数高,就赞美用户“学富五车”,这样高唤醒情绪氛围的营造,使用户更愿意去进行二次体验或是分享给其他好友,文案与插图的配合也相对独立,海报视觉上的丰富创意也更易于引发用户自发进行分享传播。

 

二、视觉设计:

1、H5的主视觉颜色是充满科技感与未来感的深蓝色,与网络、技术、电信等名词拥有相契合的视觉感受,营造了一种数字空间雾里看花的氛围,巧妙体现了H5“反电信诈骗法律宣传”的主题。

2、设计细节丰富,充满巧思。深蓝色背景中嵌入的“0”和“1”代码排列组合,使用户在体验中更有身处数字空间的感受,警察人物IP、摞起来的金钱金币、从屏幕中伸出来的数码手等设计元素的排布背后意涵深刻,一只破屏而出的数码手伸向金币,寓意电信诈骗,而飞冲而来的警察奋力制止这一惨剧的发生,则象征着公安系统和法律守护用户的电信安全,视觉语言精准有趣。

 

三、转场、动效及音效:

1、转场:转场丝滑,模拟了撕页的效果进行题目的切换,不打断用户体验流程的同时,这样的转场设计也更加具有场景感,仿佛用户在置身处地地在纸页上答题。
2、动效:不管是首页浮动的警察和安全小卫士,还是答题过程中题目插图上的人物反馈,如女孩轻微甩动的头发、点赞的大拇指,这些巧妙且微小的反馈动效无不使整支H5更加生动灵巧。

3、音效:背景音乐是专门为反诈宣传创作的歌曲,声音甜美,内容丰富,让用户不禁想多停留几秒仔细听听歌词,可谓是把反诈宣传渗透进了每一环节,光是从听觉这一个感官渠道就能让用户受益匪浅。其次,用户在点选选项后会有及时的小的反馈音效,可以减轻体验过程中的烦躁感。

 

四、互动体验

交互简单,操作简洁,提示明确,用户点选选项或根据交互按钮提示进行操作即可,降低用户的操作成本。

 

在趣味答题过程中,我们不仅能收获法律知识,还能通过测试结果海报的分享,吸引更多人一起测试,宣传普法,通过短平快的H5传递庞大的正能量~快来和小伙伴一起测测,究竟谁才是隐藏的反诈高手!





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

标签

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

相关推荐:

网易新闻×luckin coffee:态度饮咖 新年瑞幸

网易新闻×luckin coffee:态度饮咖 新年瑞幸

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~