建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

火爆的“吴亦凡入伍”HTML5背后有哪些设计故事?

更新时间:2017-04-12整理编辑:建站学习网阅读:0

   早上一睁眼,朋友圈被吴亦凡入伍的H5刷屏,创意受到了广泛的关注,很多人开始找到我了解创作背景,有恭喜的,有质疑的,也有各种分析的。既然火到这个程度,我就借着热度还没有过去,说说团队创作这个H5创意的完整过程。

 

  创意永远是命题作文,项目初期团队了解到:

 

  吴亦凡签约全民突击将会是一个立体完整的Campaign,品牌团队希望TGideas在H5这个模块,通过出彩的创意引爆话题

 

  没有任何素材,吴亦凡只能在拍戏间歇给出1个小时的时间来录制一些内容

 

  因为这段时间吴亦凡在拍古装戏,他的头发没了……

 

  种种条件限制下,只能用巧劲解决问题,在悬念设计上需要有一个能抓住人的点,吴亦凡简短了头发风格变得犀利,全民突击又是一款军事题材的游戏,那参军入伍这件事情结合上述条件貌似巧妙的合情合理,在大众,特别是粉丝眼里,自己喜爱的明星参军这是一件大事,一定会引起关注和讨论。确认这个概念之后,剩下就是形式的问题,一篇娱乐新闻一定会引起广泛的关注,所以我们提出用新闻页的形式,来做创意落地。

 

  这个案例有趣的地方是:大部分人真的会用读一条新闻的心态来关注这个新闻,但突然动起来,并跑出画面的吴亦凡,一定会超出用户对内容的固有预期,于是创意中最重要的一个引爆点就此形成。相信很多人转出来,都希望他的朋友也能够“吓一跳“(后来看到很多分析贴说鬼节当天出这个创意太犀利,其实我想说素材本来是打算在今天12点再发的,无奈有人提前在朋友圈做了曝光…)

 

  至于视频通话的创意概念,其实并不是什么新鲜的玩法,在这之前这种形式的案例也非常多,这个模块的关键点在于:与明星面对面的沟通,这是一个很核心的粉丝向内容,喜欢吴亦凡的人一定会看着心爱的明星和自己近距离对话,所以这里就是用用户熟悉的形式,道出了广告内容的真像而已。

 

  刨去创意模块,其实在我看来更关键的还是执行,做到比想到更重要。

 

  TGideas内部临时组成了项目小队,由视觉,前端,开发,创意,多媒体的小伙伴快速开始就执行难点进行评估。

 

  技术方面,视频如何流畅播放?HTML5在IOS,Android,微信,手Q,微博,腾讯新闻客户端打开时浏览器的兼容问题如何解决?大量技术问题,到现在我们的前端攻城狮们仍在优化解决。设计方面,新闻页打开后什么时候让视频自动播放?整个体验过程如何能制造惊喜?如果用户再PC端看到这个消息,点开后的PC页面展示形式如何,能否依然有互动乐趣?我们的设计狮也还在迭代优化中。素材的筹备方面,为了让吴亦凡在1个小时内快速的完成素材的录制,TGideas的设计师亲自上阵,输出了完整交互原型之后,还输出了完整的互动demo,方便吴亦凡能够快速理解创意点,并在拍摄过程中全程跟进监制。整个过程中也有外部伙伴积极配合艺人拍摄的协调和执行,以及文案的最终润色。

 

  (图1,原型稿的设计)

  (图2,TGideas设计师为了方便吴亦凡理解,自己表演输出了demo)

  (图3,创意同期输出PC版,确保多端体验)

  移动互联网时代,优质的传播素材是核心引爆点,创意与技术有效结合,就会有奇妙的化学反应。

 

  回想起来,这次的吴亦凡入伍案例,就是以前PC端富媒体广告创意形式在移动终端上的巧妙再现而已。其实是一个严苛条件命题下执行比较到位的小聪明,想必行业里做互动的伙伴们一定也会这样认为。

 

  不过我想这个案例一定也会有一些价值,对于一只专注创意和设计的Inhouse团队来说,比起获奖,我们更关注和用户的有效沟通。很开心在移动端互动广告的模式里抛出了一个石子儿,期待他能够引起足够大的涟漪,让我们看到更多精彩的创意。

本文网址:https://www.dedexuexi.com/wysj/html5/2819.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
检测浏览器对HTML5和CSS3支持度的方法
« 上一篇2017年04月12日
聊聊年度最热门的那些HTML5案例
2017年04月12日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询