H5火了 “吴亦凡即将入伍？！”创作团队讲述创意完整过程

        推荐两篇介绍“吴亦凡即将入伍”H5的创意的文章。

------------------------------------------------------------------------------------------------------------------------------------------------------

H5火了 “吴亦凡即将入伍？！”创作团队讲述创意完整过程

行内都在期待H5爆款出现的时候，微信朋友圈被一篇题为《吴亦凡即将入伍？！》的文章刷屏了。这则手游广告再一次将H5产业推到风口浪尖：原来H5还可以这样玩。

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

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

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

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

种种条件限制下，只能用巧劲解决问题，在悬念设计上需要有一个能抓住人的点，吴亦凡简短了头发风格变得犀利，全民突击又是一款军事题材的游戏，那参军入伍这件事情结合上述条件貌似巧妙的合情合理，在大众，特别是粉丝眼里，自己喜爱的明星参军这是一件大事，一定会引起关注和讨论。

确认这个概念之后，剩下就是形式的问题，一篇娱乐新闻一定会引起广泛的关注，所以我们提出用新闻页的形式，来做创意落地。

这个案例有趣的地方是：大部分人真的会用读一条新闻的心态来关注这个新闻，但突然动起来，并跑出画面的吴亦凡，一定会超出用户对内容的固有预期，于是创意中最重要的一个引爆点就此形成。

相信很多人转出来，都希望他的朋友也能够“吓一跳”（后来看到很多分析贴说鬼节当天出这个创意太犀利，其实我想说素材本来是打算在今天12点再发的，无奈有人提前在朋友圈做了曝光……）

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

刨去创意模块，其实在我看来更关键的还是执行，做到比想到更重要。TGideas内部临时组成了项目小队，由视觉、前端、开发、创意、多媒体的小伙伴快速开始就执行难点进行评估。

技术方面，视频如何流畅播放？HTML5在iOS、Android、微信、手Q、微博、腾讯新闻客户端打开时浏览器的兼容问题如何解决？大量技术问题，到现在我们的前端攻城狮们仍在优化解决。

设计方面，新闻页打开后什么时候让视频自动播放？整个体验过程如何能制造惊喜？如果用户再PC端看到这个消息，点开后的PC页面展示形式如何，能否依然有互动乐趣？我们的设计狮也还在迭代优化中。

素材筹备方面，为了让吴亦凡在1个小时内快速的完成素材的录制，TGideas的设计师亲自上阵，输出了完整交互原型之后，还输出了完整的互动demo，方便吴亦凡能够快速理解创意点，并在拍摄过程中全程跟进监制。整个过程中也有外部伙伴积极配合艺人拍摄的协调和执行，以及文案的最终润色。

原型稿的设计

TGideas设计师为了方便吴亦凡理解，自己表演输出了demo

创意同期输出PC版，确保多端体验

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

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

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

From: http://www.youxituoluo.com/88796.html

参考：腾讯游戏官方设计团队 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7105/m5723/201508/374060.shtml

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

“吴亦凡即将入伍”H5的解剖分析

近日一款关于名为“吴亦凡即将入伍”的H5广告，在朋友圈爆表的传播起来。本着对H5的热爱，着实研究了下他的生产过程，就是页面的元素和实现的方式。下面小编将给大家分页的来讲解这款H5的实现（PS：小编不是技术人员，不会去说解代码，只能从些非技术性角度来告诉大家如何实现，如有与实际不符请给小编红包， 小编好去报培训班。）

全局介绍

首先我们在回顾下H5， 下面是移动端的参与流程图。 如果没有看过的， 可以直接点击“吴亦凡即将入伍” 进行跳转欣赏。

H5的元素组成部分有：文字、图片、MP4格式的视频、MP3的音乐。

1第一页

页面模仿腾讯新闻版块布局，文字嵌入， 底部有其他相关的新闻介绍不过无法跳转只能是展示作用。中间则是视频，（点击此处跳转查看）限制了视频的展示区域的大小，并且视频是加载完了就会自动播放，不过视频文件大小才600多KB。所以完全不用在乎用户在任何网络加载的问题，视频播放完之后则会自动跳转到下一页。

2第二页

页面将视频全屏铺满（点击此处跳转查看），视频大小874 KB ，并且自动播放，如上一页视频一样，视频播放完毕，就会延生跳转到下一页。

3第三页

页面模仿微信语音通话页面，这种形式被大众多次使用模仿过，屡试屡爽，感觉像只要和微信相关的样子传播起来都会很火爆。并且页面会自动播放邀请通话的铃声。页面上面就只有一个接听是跳转按钮， 其他都则为展示效果。音乐大小只有69KB（点击此处可感受）点击接听之后， 音乐关闭播放，并且跳转下一个页面。

4第四页

和第二页形式一样，铺满的MP4格式的视频，视频大小970KB 也不足1M（地址请点击此处）自动加载播放。唯一有点不一样的，我们能看到页面下面会有一个假的拒绝按钮，当然点击是无效的。其实整个页面都是按钮，不管你点击那里，这个按钮都会被触发，一会消失一会出现。还好不是影响整体的体验。当动画自动播放完了，就会自动跳转到下一页。

5第五页

正式的广告开始了，腾讯游戏的广告。 页面上面会有2个按钮， 第一个按钮则会跳转到下载市场，当然会区分IOS 和安卓的区别。下面灰色的按钮则为弹出发分享蒙版。

From: http://mp.weixin.qq.com/s?__biz=MzA5MjEzNTA0OQ==&mid=211967365&idx=1&sn=2ee8c9b7f791238d22f5b538dfd02e5c#rd