人民日报新媒体×36Kr:我的中秋探月之旅

2021-09-22 H5案例分享 H5案例分享
人民日报新媒体×36Kr:我的中秋探月之旅


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

识别图中二维码

我的中秋探月之旅-查阅二维码

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


案例:我的中秋探月之旅

品牌:人民日报新媒体×36Kr

技术实现: HTML5

亮点:

1.创意定位

人民日报新媒体和36Kr联合在神舟十二号返回和中秋之际,以“我的中秋探月之旅”为主题,通过“布置场景”的方式,以地球为背景,让用户布置宇宙飞船舱内、舱外物品,生成探月海报,为中国航天加油,为中国探月工程加油。

 

2.策划逻辑

① Loading → ② 确认函 → ③ 过场动画 → ④ 场景布置(舱内+舱外) → ⑤ 海报落地页。

 

① Loading:品牌方、主题露出和加载进度。顶端是人民日报新媒体×36Kr联合品牌的露出,上部是“我的中秋探月之旅”的主题,下部是加载进度条,加载完成,进度条处变为交互按钮“立即启程”,点击后进入“确认函”。

 

② 登月确认函。文案引导+用户访问编号。点击“确定”,进入“过场动画”。

 

③ 过场动画。一个带有中国国旗的飞船,直奔月球的动画。可以点击右下角的“跳过”动画。

 

④ 场景布置。分两部分:布置舱外、布置舱内。舱外可布置的元素包含飞船壳、月球车、宇航员、运输车等在内的25个部件。舱内可以布置的元素包含月饼、鱼缸、宠物、机器人、乒乓等在内的15个部件。不管舱内、舱外,至少选择一样部件布置,然后可以点“完成”,进入海报落地页。

 

⑤ 海报落地页。根据第④个环节布置生成的海报,包含品牌方、主题、访问次数和布置的太空舱图片。长按可以保存海报到相册,还可以点击“再试一次”,进行再次体验。

 

 

3.视觉交互

 

整体视觉为“卡通+写实”风格,飞船的广寒宫、月饼舱样式,很可爱;枸杞、老干妈、月饼等实际生活用品,都让人瞬间产生共鸣。交互上,主要以点击、双指拖拽、旋转、长按保存等交互方式,交互清晰。

 

4.用户体验

整体体验流畅、无歧义,如果在场景布置场景,能够单指放大、缩小和旋转,体验就更棒了。





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

标签

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

相关推荐:

人民日报新媒体 x 中国移动 x 咪咕:东京奥运会 金牌大挑战

36Kr X 北极光创投:北极光带你看见未来的世界

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~