奇鱼微办公:地球1小时,关灯后,和我一起遇见更美的星空

2019-04-01 H5案例分享 H5案例分享
奇鱼微办公:地球1小时,关灯后,和我一起遇见更美的星空


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

识别图中二维码

地球1小时,关灯后,和我一起遇见更美的星空-查阅二维码

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


案例:地球1小时,关灯后,和我一起遇见更美的星空

品牌:奇鱼微办公

制作:设计运营团队和前端研发

亮点:

1、创意定位:是微办公推出的一个互动式H5,为响应“地球1小时”活动号召,并宣传产品更加节能环保的移动办公方式。

 

2、策划上:整个H5紧扣“地球1小时”关灯节能的主题,采用走心的文案配图,通过随处可见的加班场景,将当代人对星空的记忆和现实中的躁动迷失形成对比,唤醒忙碌工作中内心原有的宁静。

 

①进入后,文字提醒“地球1小时”关灯主题及时间这个重要背景,一段引语勾起童年关于星空的记忆;

②第二页勾勒出一个深夜办公室加班的年轻人的孤独的人物剪影,配合交互“点击关灯”button,闪现关灯后漆黑一片的效果,然后自然过渡到了室外星空,品牌logo浮现缓缓升空;

③第三页画面聚焦繁星璀璨的夜空,通过文案引导用户放空自己,静静欣赏。

④第四页升华主题:在繁华浮躁中也需要保持内心的平和踏实。画面中“小王子”般仰望星空的视觉体验,直触心底。

⑤最后进入尾页也是海报页,植入微办公品牌“节能环保「轻」办公”的特点,呼应“地球1小时”主题。页面添加两个button,用户可以点击生成slogan海报来应援关灯,也可以查看「轻」办公方式。值得注意的是,为了突出作品的公益性,尾页的文案强调生态自然,并未植入产品更多优势,同时呼吁用户节能环保做出行动。

 

整个h5构思上,为了凸显移动办公“轻”这一特点,选择加班场景来匹配职场用户群,进而最后插入微办公广告,立意清晰明了;生成带有活动二维码的slogan海报,传播形式更加多样化。

 

3、设计上:设计以深蓝深紫为主色调,体现关灯后的静谧和星空探索的神秘感;在动效转场上,页面转场增加“关灯”动效衔接,星空页面凸显北斗七星及流星闪烁的动效,提高H5的质感;

 

4、体验上:操作简单,整体流畅,重要交互“点击关灯”处做凸显处理,参与过程有强烈的场景代入感,关灯操作引发用户进行星空探索的好奇心和美的体验。



技术实现: html5 、css3、javascript、vue、vue-awesome-swiper



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

标签

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

相关推荐:

中国教育电视台:《报告》!我想跟总理聊聊..

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

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~