Lavali：早上一睜眼，朋友圈被吳亦凡入伍的H5刷屏，創(chuàng)意受到了廣泛的關(guān)注，很多人開始找到我了解創(chuàng)作背景，有恭喜的，有質(zhì)疑的，也有各種分析的。既然火到這個程度，我就借著熱度還沒有過去，說說團隊創(chuàng)作這個H5創(chuàng)意的完整過程。

創(chuàng)意永遠是命題作文，項目初期團隊了解到：

1. 吳亦凡簽約全民突擊將會是一個立體完整的Campaign，品牌團隊希望TGideas在H5這個模塊，通過出彩的創(chuàng)意引爆話題
2. 沒有任何素材，吳亦凡只能在拍戲間歇給出1個小時的時間來錄制一些內(nèi)容
3. 因為這段時間吳亦凡在拍古裝戲，他的頭發(fā)沒了......

種種條件限制下，只能用巧勁解決問題，在懸念設(shè)計上需要有一個能抓住人的點，吳亦凡簡短了頭發(fā)風(fēng)格變得犀利，全民突擊又是一款軍事題材的游戲，那參軍入伍這件事情結(jié)合上述條件貌似巧妙的合情合理，在大眾，特別是粉絲眼里，自己喜愛的明星參軍這是一件大事，一定會引起關(guān)注和討論。確認這個概念之后，剩下就是形式的問題，一篇娛樂新聞一定會引起廣泛的關(guān)注，所以我們提出用新聞頁的形式，來做創(chuàng)意落地。

這個案例有趣的地方是：大部分人真的會用讀一條新聞的心態(tài)來關(guān)注這個新聞，但突然動起來，并跑出畫面的吳亦凡，一定會超出用戶對內(nèi)容的固有預(yù)期，于是創(chuàng)意中最重要的一個引爆點就此形成。相信很多人轉(zhuǎn)出來，都希望他的朋友也能夠“嚇一跳”（后來看到很多分析貼說鬼節(jié)當(dāng)天出這個創(chuàng)意太犀利，其實我想說素材本來是打算在今天12點再發(fā)的，無奈有人提前在朋友圈做了曝光...）

至于視頻通話的創(chuàng)意概念，其實并不是什么新鮮的玩法，在這之前這種形式的案例也非常多，這個模塊的關(guān)鍵點在于：與明星面對面的溝通，這是一個很核心的粉絲向內(nèi)容，喜歡吳亦凡的人一定會看著心愛的明星和自己近距離對話，所以這里就是用用戶熟悉的形式，道出了廣告內(nèi)容的真像而已。

刨去創(chuàng)意模塊，其實在我看來更關(guān)鍵的還是執(zhí)行，做到比想到更重要。

TGideas內(nèi)部臨時組成了項目小隊，由視覺，前端，開發(fā)，創(chuàng)意，多媒體的小伙伴快速開始就執(zhí)行難點進行評估。

技術(shù)方面，視頻如何流暢播放？HTML5在IOS，Android，微信，手Q，微博，騰訊新聞客戶端打開時瀏覽器的兼容問題如何解決？大量技術(shù)問題，到現(xiàn)在我們的前端攻城獅們?nèi)栽趦?yōu)化解決。設(shè)計方面，新聞頁打開后什么時候讓視頻自動播放？整個體驗過程如何能制造驚喜？如果用戶再PC端看到這個消息，點開后的PC頁面展示形式如何，能否依然有互動樂趣？我們的設(shè)計獅也還在迭代優(yōu)化中。素材的籌備方面，為了讓吳亦凡在1個小時內(nèi)快速的完成素材的錄制，TGideas的設(shè)計師親自上陣，輸出了完整交互原型之后，還輸出了完整的互動demo，方便吳亦凡能夠快速理解創(chuàng)意點，并在拍攝過程中全程跟進監(jiān)制。整個過程中也有外部伙伴積極配合藝人拍攝的協(xié)調(diào)和執(zhí)行，以及文案的最終潤色。

（圖1，原型稿的設(shè)計）

（圖2，TGideas設(shè)計師為了方便吳亦凡理解，自己表演輸出了demo）

（圖3，創(chuàng)意同期輸出PC版，確保多端體驗）

移動互聯(lián)網(wǎng)時代，優(yōu)質(zhì)的傳播素材是核心引爆點，創(chuàng)意與技術(shù)有效結(jié)合，就會有奇妙的化學(xué)反應(yīng)。

回想起來，這次的吳亦凡入伍案例，就是以前PC端富媒體廣告創(chuàng)意形式在移動終端上的巧妙再現(xiàn)而已。其實是一個嚴苛條件命題下執(zhí)行比較到位的小聰明，想必行業(yè)里做互動的伙伴們一定也會這樣認為。

不過我想這個案例一定也會有一些價值，對于一只專注創(chuàng)意和設(shè)計的Inhouse團隊來說，比起獲獎，我們更關(guān)注和用戶的有效溝通。很開心在移動端互動廣告的模式里拋出了一個石子兒，期待他能夠引起足夠大的漣漪，讓我們看到更多精彩的創(chuàng)意。

【走在時代前列的騰訊HTML 5精品好文】

DNF實戰(zhàn)總結(jié)好文！
《騰訊游戲?qū)崙?zhàn)！DNF浴火新生H5項目總結(jié)》

優(yōu)化HMTL 5頁面的6個技巧！
《騰訊精品文！六大奇招帶你優(yōu)化HTML5移動頁面》

H5頁面設(shè)計實戰(zhàn)總結(jié)！
《春雨先知！騰訊移動端H5頁面設(shè)計實戰(zhàn)分享》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量100萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com