拜耳、生命时报:屠击癌症恶龙,等你出战!

2022-10-25 H5案例分享 H5案例分享
拜耳、生命时报:屠击癌症恶龙,等你出战!


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

识别图中二维码

屠击癌症恶龙,等你出战!-查阅二维码

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


案例:屠击癌症恶龙,等你出战!

品牌:拜耳、生命时报

技术实现: HTML5

制作:亿众互动

亮点:

1.项目背景及定位

当提到儿童,你会想到什么?明媚灿烂、朝阳初升、希望萌发?可当癌症与儿童相遇时,我们又能否在狭小闭塞的角落看到“明媚”,能否在漫漫长夜后盼来一轮朝阳?那抹人生最初无限大的希望,能否被妥善守护?

 

亿众互动为生命时报及拜耳打造了一款剧情向问答轻互动类H5,以战胜癌症恶龙的全线剧情带领用户置身其中,科普儿童抗癌知识,呼吁全社会关注儿童肿瘤。

快来陪儿童一起屠击恶龙,打赢这场战役!

 

2.策划亮点:

① 节奏感强,吸引注意:动画剧情编排节奏感强,动画与互动交织出现,既能完整呈现内容,又能通过答题点击等轻互动操作使体验过程变得不枯燥,避免用户注意力流失。

② 趣味科普,沉浸感强:将儿童抗癌知识编织在剧情中,使用户在趣味性情节性强的体验过程中,掌握到单调枯燥的知识内容。

③ 专属海报,促进分享:用户在携手屠龙少年战胜癌症恶龙后获得海报,并亲自为其上色,不仅会有一种成就感和所属感,还会使用户拥有一种关爱儿童肿瘤的身份标签,塑造其热心公益的社交形象,使该海报成为其愿意分享的社交名片。

 

3.策划逻辑:

loading页:少年在黑暗空间中坚定地向前走去,进度随之加载,他留下的一串串脚印在安宁深沉的背景音配合下,令人遐想无限,心跳与节奏共振,屠龙故事徐徐展开……加载完毕自动进入【首页】。

 

首页:一句单独文案铺展在黑色背景中,简介又契合剧情地向用户迅速交代任务,在操作指引的引导下,用户进入【动画一】。

 

动画一:一只恶龙咆哮着盘旋在空中,钻入亮着灯的居民楼窗中,一个蜷缩在床上抱着癌症通知书瑟瑟发抖,令人不由得生出同情,动画播放完毕后进入【问答一】。

 

问答一:用户选择自己的身份(疗愈使者、药剂精灵、儿童族人和正义侠客)后,从门中走入,贴在告示板上的信息提示让人清晰易懂地明确任务,将整个剧情体验完美串联。选择不同身份后,可以赠与屠龙儿童不同的守护物品,内容丰富,给人惊喜感的同时增强了体验的沉浸感,比如选择药剂精灵的身份后,可以赠予精准灵丹或者是威力药水。

 

动画二:屠龙少年逆行而上,坚定勇敢地走向恶龙,在NPC与剧情文案的提示配合下,向用户普及了儿童抗癌知识,比如遇到老者NPC时,会有文案科普儿童癌症的治愈难度更大,在少年攀登高山寻龙时,走在布满荆棘的路上,文案科普道“全世界20%的儿童青少年癌症患者,因未能接受标准推荐的治疗而死于致命的癌症。”结合剧情走向的科普沉浸感十足。

 

问答二:“面对心生犹豫的儿童,您想如何帮助他?”在动画播放完毕后再引导用户进行答题,及时将其注意力召回。

 

动画三:屠龙少年拿起利剑,向恶龙挥去,几回合下来少年精疲力尽,泪水夺眶而出;

 

问答四:在少年气馁之时,再次弹出问题,若用户选择劝少年就此放弃则直接显示“屠龙失败”,游戏重开;若选择“号召更多人”则继续播放动画。

 

动画四:儿童在众人力量的集结下,受到鼓励给予恶龙最终的致命一击,在用户点击致命一击后为用户科普近年来治疗儿童肿瘤的医学进展,最终,少年战胜了恶龙,自动跳转至【填色页】。

 

填色页:用户根据引导为屠龙海报上色,可自由选择喜欢的颜色,充分给予了用户选择权,让其体验到DIY的快乐后,对所生成的海报更加有一种归属感和获得感,在完成屠龙任务后获得的海报,也会使用户更有成就感,增强其分享欲望。

 

4.视觉设计:

① 整体的视觉风格偏暗色调,在黑暗夜晚中进行剧情体验,与少年战胜癌症恶龙的艰险旅程相契合,营造了一种时而难过悲痛,时而紧张刺激的氛围。

② 文案的提示采用白色及黄色等亮色,在暗调的映衬下,视觉上更加凸显,易于阅读,抓人眼球。

 

5.动效及音效:

① 背景音乐与剧情完美配合,在刚踏上屠龙征途时,音乐沉重紧张,使用户迅速沉浸在剧情中;在上山屠龙时,音乐变得慷慨激昂;在取得胜利后,又响起喜悦宏大的音乐,充分调动用户的体验情绪。

② 动效细节丰富,无论是老者身上发出的光圈、恶龙咆哮的闪电,还是滚落的碎石,都体现出动效的丰富与细腻,使H5的场景感更强,用户更易沉浸在其中。

 

6.互动及转场:

① 交互简单,操作简洁,用户通过点击推动剧情走向,在引导用户点击时,画面中会出现一个小手,提示明确,降低用户的理解成本。

② 转场丝滑,与整个剧情相契合,不会让用户有跳脱感,比如在开场时,用户选择身份之后,走进墙上打开的穿越之门,画面旋转转场,直接踏上屠击恶龙的征程,连贯流畅。

 

这场屠龙战役不止是一个人的战斗,关注儿童肿瘤,与他们携手,共同征战!





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

标签

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

相关推荐:

生命时报&亿众互动:拒绝野味

亿众互动:我的2021专属拜年表情包

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~