中国邮政储蓄银行×网易新闻:绿色星球生活指南

2022-06-11 H5案例分享 H5案例分享
中国邮政储蓄银行×网易新闻:绿色星球生活指南


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

识别图中二维码

绿色星球生活指南-查阅二维码

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


案例:绿色星球生活指南

品牌:中国邮政储蓄银行×网易新闻

技术实现: HTML5

亮点:

1.创意定位

中国邮政储蓄银行和网易新闻联合推出的公益环保创意H5案例,以“绿色星球生活指南”为主题,引导用户在“绿色星球”探索不同城市,收集能量,阅读绿色生活指南,最后生成“星球居住证”,从而形成品牌联合推广势能,达成更多的曝光。

 

2.策划逻辑

主题页 → 星球探索 → 输入昵称 → 过渡效果 → 星球居住证海报。

 

主题页:品牌露出——中国邮政储蓄银行|绿色让生活更美好。主题露出——绿色星球生活指南。点击“开始探索”,进入星球探索部分。

 

 

星球探索:首先,是半透明文案引导蒙层,大意是:欢迎阅读生活指南,收集能量,选一个心仪家园定居。点击“知道了”,弹出手势引导蒙层,可适当放大缩小旋转浏览,点击后,引导消失,来到一个三维星球,星球默认低速旋转,太空中有流星不时划过。星球上分四部分:乡村理想之森、海洋蔚蓝之境、城市未来之都、天空云海之城。每一部分有三张科普卡,点击阅读后,能获得20%的绿色能量,整体绿色能量值超过80%,就能得到绿色星球守护勋章。收集某一处能量后,都可以点击“在此定居”,点击后,弹出确认信息对话框,点击“就这了”,进入输入昵称环节。

 

输入昵称:昵称默认是用户的微信昵称,但可以编辑。点击“生成星球居住证”,进入过渡效果。

 

 

过渡效果:和H5的Loading效果一样,一个圆形的UFO向上飞升,显示“正在生成中”,之后,进入星球居住证海报。

 

星球居住证海报:以城市为背景,生成一张带有用户信息的身份信息卡——星球居住证。顶部有联合品牌的Logo露出,中部为绿星身份、能量收集、性格、居住地以及身份证ID等。点击“重新探索”,可以重新开始体验探索星球。点击“邀请好友一起探索”,弹出引导分享指示蒙层。

 

3.设计交互

整体页面为暗黑背景,蓝色星球,有中国邮政储蓄银行品牌绿植入。3D星球设计,用户可以放大、缩小、旋转、点击,让普通的平面文案,显得生动有趣。

 

4.用户体验

绿色三维可交互星球还是很赞的,可以放大、缩小、旋转、点击,在三维空间中,让人看到了更多可能。





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

标签

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

相关推荐:

中国邮政储蓄银行:美好生活 美好瞬间

网易新闻X毛铺 草本年份酒:毛铺和文化号启程ing

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~