奇鱼微办公:地球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-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号