亲历者说!火爆的“吴亦凡入伍”Html5背后有哪些设计故事?

2015/08/28 19300

wu-yifan-html5-design-story-1

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

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

  1. 吴亦凡签约全民突击将会是一个立体完整的Campaign,品牌团队希望TGideas在H5这个模块,通过出彩的创意引爆话题
  2. 没有任何素材,吴亦凡只能在拍戏间歇给出1个小时的时间来录制一些内容
  3. 因为这段时间吴亦凡在拍古装戏,他的头发没了……

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

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

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

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

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

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

(图1,原型稿的设计)

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

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

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

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

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

【走在时代前列的腾讯HTML 5精品好文】

DNF实战总结好文!
《腾讯游戏实战!DNF浴火新生H5项目总结》

优化HMTL 5页面的6个技巧!
《腾讯精品文!六大奇招带你优化HTML5移动页面》

H5页面设计实战总结!
《春雨先知!腾讯移动端H5页面设计实战分享》

原文地址:tgideas.qq
作者:Lavali

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量100万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/wu-yifan-html5-design-story

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里