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

雷霆战机TVC HTML5 页面

文艺、走心的手绘风格

项目背景

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

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

前期构思

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

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

风格推导

风格一

视频元素提取：

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

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

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

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

原文转载于优设官网。