“绿水青山就是金山银山”，只有一个好的环境，才能创造出更宝贵的财富，人类才能可持续发展下去。所以为了将绿色地球的理念更加深入人心，中国邮储推出了一款公益环保创意H5案例。

一、活动背景

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

二、活动内容

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

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

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

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

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

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

三、设计交互

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

四、活动体验

整个H5页面的内容并不多的，但绿色三维可交互星球还是非常出彩的，用户可以放大、缩小、旋转、点击，在三维空间中，让人们看到了H5制作的更多可能。

五、案例赏析