中国邮政储蓄银行×网易新闻:绿色星球生活指南
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要3分钟
案例:绿色星球生活指南
品牌:中国邮政储蓄银行×网易新闻
技术实现: HTML5
亮点:
1.创意定位
中国邮政储蓄银行和网易新闻联合推出的公益环保创意H5案例,以“绿色星球生活指南”为主题,引导用户在“绿色星球”探索不同城市,收集能量,阅读绿色生活指南,最后生成“星球居住证”,从而形成品牌联合推广势能,达成更多的曝光。
2.策划逻辑
主题页 → 星球探索 → 输入昵称 → 过渡效果 → 星球居住证海报。
主题页:品牌露出——中国邮政储蓄银行|绿色让生活更美好。主题露出——绿色星球生活指南。点击“开始探索”,进入星球探索部分。
星球探索:首先,是半透明文案引导蒙层,大意是:欢迎阅读生活指南,收集能量,选一个心仪家园定居。点击“知道了”,弹出手势引导蒙层,可适当放大缩小旋转浏览,点击后,引导消失,来到一个三维星球,星球默认低速旋转,太空中有流星不时划过。星球上分四部分:乡村理想之森、海洋蔚蓝之境、城市未来之都、天空云海之城。每一部分有三张科普卡,点击阅读后,能获得20%的绿色能量,整体绿色能量值超过80%,就能得到绿色星球守护勋章。收集某一处能量后,都可以点击“在此定居”,点击后,弹出确认信息对话框,点击“就这了”,进入输入昵称环节。
输入昵称:昵称默认是用户的微信昵称,但可以编辑。点击“生成星球居住证”,进入过渡效果。
过渡效果:和H5的Loading效果一样,一个圆形的UFO向上飞升,显示“正在生成中”,之后,进入星球居住证海报。
星球居住证海报:以城市为背景,生成一张带有用户信息的身份信息卡——星球居住证。顶部有联合品牌的Logo露出,中部为绿星身份、能量收集、性格、居住地以及身份证ID等。点击“重新探索”,可以重新开始体验探索星球。点击“邀请好友一起探索”,弹出引导分享指示蒙层。
3.设计交互
整体页面为暗黑背景,蓝色星球,有中国邮政储蓄银行品牌绿植入。3D星球设计,用户可以放大、缩小、旋转、点击,让普通的平面文案,显得生动有趣。
4.用户体验
绿色三维可交互星球还是很赞的,可以放大、缩小、旋转、点击,在三维空间中,让人看到了更多可能。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号