网页优化带你探究HTML5页面的不同表现手法

发布时间:2015-07-17 编辑发布:迪麦互动

广州网站建设 广州UI设计外包 广州网页优化 带你一起带你探究HTML5页面的不同表现手法:

雷霆战机TVC HTML5 页面

文艺、走心的手绘风格

项目背景

雷霆战机周年庆,项目组为雷霆进行了拍摄了一部品牌短片,围绕整个影片策划了一个HTML5页面对其进行传播。

视频主要内容讲述几个小朋友从小心怀对星空的梦想,通过不断研究学习长大后当上了航天工作者完成了自己一直的梦想,来阐述如今繁华社会里仍有千千万万不断追随自己的内心的人。引发大家对天空的梦想的共鸣走情感路线。

前期构思

本次尝试了2套方向展现——围绕视频内容的静帧截图直接展示,主打宇宙情怀的手绘风格文艺的展示。

此前移动端上大多是以单页大长图+视频按钮进行宣传的方式,作为首个尝试试水两种方向对最终视频造成的转化率影响。

风格推导

风格一

视频元素提取:

根据其视频提取关键元素:收音机、天文望远镜、宇宙飞船、风铃。

整体氛围围绕四个关键词 科幻、复古、文艺和走心。

于是最终采用牛皮纸背景来展现复古+手绘主元素使科幻主题更添亲和力增添情怀,不同于以往的写实风。

为了在手机上更生动的展示,每一个元素搭配小动画来使手绘的物件更具有生命力(例收音机动画:打开天线——搜频——搜到声音)。一段描述性的文案搭配小动画增加画面故事的完整性,同时配合空灵的背景声效,让用户在体验HTML5 页面的时候,在符合移动端用户体验同时让用户在视觉、听觉上感受到情怀产生共鸣。



原文转载于优设官网。

分享至: