Discovery探索频道×腾讯音乐:Discovery地球投资官

2022-08-11 H5案例分享 H5案例分享
Discovery探索频道×腾讯音乐:Discovery地球投资官


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

识别图中二维码

Discovery地球投资官-查阅二维码

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


案例:Discovery地球投资官

品牌:Discovery探索频道×腾讯音乐

技术实现: html5

亮点:

  1. 创意定位

Discovery探索频道在2022年4月22日世界地球日推出的创意H5作品,以“Discovery地球投资官”为主题,号召更多的人“投资”地球,关注地球生态及濒危物种,唤醒人们保护地球的意识,保护地球,人人有责。

 

  1. 策划逻辑

大致流程:Loading → 主题页 → AR交互 → 活动介绍 → 进入地球发展投资银行 → 成为投资官 → 生成投资官证书 → 领取种子卡/购买数字藏品。

 

Loading:Loading部分的界面跟主题页基本一致,只是把底部按钮的位置,换成了进度条和加载文案:地球发展投资银行欢迎您。

 

主题页:加载完成,页面下部的进度条变成按钮“进入地球发展投资银行”。顶部是品牌LOGO——Discovery 和 腾讯音乐。视觉第一重心内容突出主题:地球投资官——4月22日世界地球日,页面中部是一张卡片衬托的旋转像素地球,配合“地球发展投资银行”理念。

 

 AR交互:点击按钮“进入地球发展投资银行”,弹出交互提示:是否允许该H5调用您的摄像头?点击不同意,直接进入下一页,点击允许,则调起手机摄像头,摄像头前白线握拳伸展提示动画,当用户按提示拍摄自己握拳展开动画时,展开的手掌中由小变大出现一个三维地球。地球可以跟随用户的手掌轻微一动,再次握拳伸开,地球随即进入“活动介绍”页面。

 

活动介绍:守护生物多样性,成为地球投资官。这是一场由Discovery探索频道发起的以行动为资本的地球投资线上活动。我们重视每一种地球生物的价值与珍贵,并选取了十一种珍惜生物制作为数字藏品,让我们一起守护生物多样性,守护地球。活动时间:2022年4月20日-2022年4月27日。特别鸣谢腾讯音乐娱乐集团。点击“进入地球发展投资银行”按钮,进入“银行”内部。

 

进入地球发展投资银行:“银行”内部展示了11种珍惜生物的三维数字模型,可以通过左右滑动,切换不同生物。每种生物的名称及介绍,在模型的上方。包含:麋鹿、水松、中华穿山甲、鲸鲨、缅甸金丝猴、鹿角珊瑚、玳瑁、怀俄明蟾蜍、朱鹮、刺叶非洲苏铁、库氏砗磲。

 

成为投资官:点击“成为投资官”按钮,进入对应生物详情页,该生物的三维像素模型或站立或悬浮于一个立体拖台上,用户可以在水平方向360°滑动查看该动物,在垂直方向,也有一定角度可以翻动。每种动物还配有不同推荐官推荐的音乐作为页面背景,音乐可以暂停。点击右上方的“关闭”按钮,还能返回“地球发展投资银行”的列表选择页面。

 

 

生成投资官证书:点击“生成投资官证书”,生成一个用户选定的动物海报。海报包含品牌方的Logo、用户第xxx位地球投资官、选定的生物像素模型及动物名称。可以通过长按保存海报到手机相册。页面下方有两个按钮,让用户可以进一步参与活动——领取种子卡/购买数字藏品。

 

领取种子卡/购买数字藏品:点击“领取种子卡”按钮,弹出留资页面,用户需要输入自己的电话、地址,以及同意《隐私政策》条款,可以提交收件信息,参与活动。点击“购买数字藏品”按钮,会跳转官方TME数字藏品活动页面。

 

  1. 设计交互

以黑色为主背景,配合三维亮色可交互动物模型及托盘,让每种动物都悬空水平360°展示,视觉冲击,艺术表达,更让用户能具体、直观感受濒危物种的样子。

 

交互上,使用了AR(Augmented Reality 增强现实)交互,用户需要同意该H5调用手机的相机功能,根据动画提示,一只手握拳伸开,就有一个地球出现在掌心,地球可以随着用户的手移动,再次握拳打开,地球升起,进入下一个页面的预定位置,交互丝滑流畅。

 

  1. 体验上

这是小五近期看到的比较惊艳的H5作品啦,尤其是AR交互,虽然需要多一步授权,有一定的交互门槛,但这种技术创新带来的交互体验提升,还是值得去这么做的。内容创意也很赞,银行得存钱才能取钱,个人有付出才有回报,对待地球,必须靠大家投资保护,才能福及后世。

 





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

标签

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

相关推荐:

百度:别让它们只能活在搜索中

BOSS直聘:守护地球的姿势

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~