來源：FaceH5（Faceminds） | 作者：鵬少
原標(biāo)題：UP互娛的編年史，也是濃縮版的H5行業(yè)進(jìn)化史！

2013年是騰訊游戲的十周年

那一年里，騰訊游戲一枝獨秀，UP騰訊互娛發(fā)布會還叫「UP+騰訊游戲2013年度發(fā)布會」

那一年，F(xiàn)lash尚大行其道，網(wǎng)頁動效首選非它莫屬

騰訊推出PC端Flash體驗站回顧十年大事記！

2014年，“騰訊互動娛樂”首次作為品牌主體亮相，騰訊互娛元年正式開啟！

「UP騰訊互娛2014年度發(fā)布會」創(chuàng)新性的以“H5”的方式發(fā)出了一份邀請函，而這一年也是為H5行業(yè)的發(fā)展元年！

恰是從此階段起

Flash逐漸退出歷史舞臺~

H5拿到行業(yè)的接力棒，并開始一步步走向輝煌！

......

轉(zhuǎn)眼之間...2017年

作為文化娛樂產(chǎn)業(yè)的年度風(fēng)向標(biāo)，「UP2017騰訊互娛年度發(fā)布會」定檔本月20號

騰訊游戲、動漫、文學(xué)、影業(yè)以及“新入伍”的電競五大品牌組成全新泛娛樂業(yè)務(wù)生態(tài)，首度集體亮相。

騰訊上線官方預(yù)熱H5，并發(fā)布一組以“唯耐心不負(fù)所愛“的主題海報：說是海報，也可以說是一組H5的創(chuàng)意二維碼！

縱觀這幾年走來...

騰訊互娛歷經(jīng)從騰訊游戲一枝獨秀到游戲、動漫、文學(xué)、影業(yè)、電競五大業(yè)務(wù)并肩共生，走到泛娛樂的發(fā)展奇點。

> 期間多款明星IP被成功孵化、陸續(xù)改編為手游、電影、動漫等實現(xiàn)多領(lǐng)域共生，如《尸兄》《斗破蒼穹》《魂斗羅！歸來》《全職高手》等

> 更有創(chuàng)造30億月流水，8000萬DAU，一款皮膚日流水1.5億這些令人咋舌的商業(yè)數(shù)據(jù)，將陰陽師“踢下神壇”的國民級手游《王者榮耀》

而H5行業(yè)同樣經(jīng)歷了從標(biāo)準(zhǔn)敲定、脫離“拐杖”（Flash）摸索前行，到各類技術(shù)、交互、形式創(chuàng)新等不斷涌現(xiàn)，走到數(shù)字營銷發(fā)展的新起點；

> 期間刷屏爆款不斷，H5從最初的“翻頁P(yáng)PT”開始持續(xù)性創(chuàng)新：Canvas動畫、密室逃脫、場景模擬、變臉換妝、多屏互動、明星互動、互娛小游戲、VR全景、交互式視頻等

> 越來越多的團(tuán)隊依托其創(chuàng)作的H5而涌現(xiàn)于大眾視野，斬獲國內(nèi)外各類大獎，成為明星團(tuán)隊！越來越多行業(yè)開始采用H5媒介來做品牌營銷&內(nèi)容傳播！同樣越來越多的人才逐漸開始討論、學(xué)習(xí)、創(chuàng)作H5！

騰訊互娛與H5行業(yè)始終并轡前行！

國內(nèi)H5行業(yè)崛起的幾個關(guān)鍵時間點無一不被歷屆UP互娛發(fā)布會所出品的H5案例所見證，甚至引領(lǐng)！

UP互娛的編年史也是濃縮版H5行業(yè)進(jìn)化史！

本文即以歷屆UP互娛發(fā)布會為時間刻度，同大家聊一聊這濃縮版的H5行業(yè)進(jìn)化史！

「UP2017騰訊互娛年度發(fā)布會」

如何理解UP2017發(fā)布會的主題：“奇點·共生”？

首先，宇宙學(xué)中的奇點沒有大小，卻又能級無限大，具有形成宇宙中所有物質(zhì)的勢能！

其次，泛娛樂的核心是IP，IP源于人的想象力與情感，不分貴賤、不計大小。

任何一個IP只要能點燃粉絲的熱情，圍繞這個IP所有形態(tài)的娛樂體驗，都將快速跨界連接和融通共生，呈現(xiàn)星火燎原之勢，催生驚人的粉絲經(jīng)濟(jì)。

奇點：IP的形態(tài)和勢能與奇點具有驚人的相似性

共生：多領(lǐng)域共生則是明星IP孵化的必選路徑！

騰訊互娛官方預(yù)熱H5之內(nèi)有何亮點？

1、對移動端與PC端的完美適配

當(dāng)下業(yè)內(nèi)大談的H5，多是指在移動端進(jìn)行社交傳播的H5廣告，但想來不少朋友都忽略了H5的本質(zhì)其實是移動Web+。

此H5的難得之處便在于對移動與PC的完美適配！且PC端的體驗更加優(yōu)雅，更加細(xì)致！（PC網(wǎng)址：http://up.qq.com ）

2、優(yōu)雅的體驗與到位的創(chuàng)意

富有太空科技感的粒子隨用戶的操作而游散匯聚成各種元素，分別對應(yīng)騰訊互娛旗下五大業(yè)務(wù)（游戲、動漫、文學(xué)、影業(yè)、電競）以及 奇點。

細(xì)心的朋友還會有兩個獨到之發(fā)現(xiàn)：

    a.用鼠標(biāo)點擊PC端Web上的粒子可以彈出相應(yīng)內(nèi)容要素，如：愛樂之城、一人之下、狐妖小紅娘等！

   b. 順序的方式在各主體元素之間進(jìn)行切換，粒子散聚過渡流暢自然這并不足為奇！但若跳序切換將是對技術(shù)適配的絕對考驗！粒子散聚過度會否因此出現(xiàn)過度不自然？

跳序切換，粒子聚散依然十分流暢！

其實，這些粒子恰是對泛娛樂時代內(nèi)容IP的代指，粒子的聚散呼應(yīng)明星IP的多領(lǐng)域共生。

粒子可于任意兩主體間自然過度，則呼應(yīng)小說、動漫、游戲、影視均可能成為IP的孵化之始（小說、漫畫試錯成本更低），亦可成為IP孵化的衍生樞紐。

視覺細(xì)膩而深邃，體驗自然而優(yōu)雅；

深邃的粒子空間配以幽然的BGM或如浩瀚宇宙，正是泛娛樂生態(tài)最好的視覺呈現(xiàn)！

3、不刻意炫技，技術(shù)火候剛剛好

粒子聚散動效自然而流暢，而這些粒子元素與體驗動效均由canvas加以繪制、js+json完成技術(shù)實現(xiàn)；

H5內(nèi)只加載了一些不可或缺之元素如Logo、ICON等33張圖片，合計大小被控制在了270KB！

唯耐心不負(fù)所愛 系列海報/H5

泛娛樂的核心是明星IP，而IP的關(guān)鍵在于其創(chuàng)作者

騰訊互娛以作家、漫畫家、電影人、游戲制作人、電競玩家為主人公，發(fā)布一組以“唯耐心不負(fù)所愛“的主題海報；

海報以H5二維碼為主體，進(jìn)行圖案創(chuàng)意設(shè)計；

加以掃碼，你看到的H5

其實是5段展現(xiàn)創(chuàng)作者逐夢狀態(tài)的時間靜止視頻。

電競玩家 - 手都要抽筋了，還管不住自己

游戲制作者 - 死活不肯上床睡

作家 - 就為了120字重寫30多遍

畫家 - 被打80遍還要再來一遍

電影人 - 這么點事情竟然糾結(jié)一整晚

他們到底圖個啥？

「唯耐心..」系列H5內(nèi)嵌視頻是如何拍攝制作的？

H5內(nèi)嵌視頻采用時間靜止特效加以制作完成！

時間靜止視頻的制作其實并不復(fù)雜，關(guān)鍵點在于前期演員和后期特效。

前期拍攝時演員擺出動感夸張的POSE，并在此狀態(tài)下盡量保持不動~用攝像機(jī)環(huán)繞運動完成拍攝。

后期制作時，在視頻里用特效加入傳統(tǒng)觀念里肯定會動的東西，如：浮空的卡片；打翻的水杯等。

目前已曝光的UP2017互娛H5便是以上兩款

不過今年的UP互娛才剛開始預(yù)熱，想來最近一段時間內(nèi) UP2017主題H5還將不斷涌現(xiàn)~！屆時將進(jìn)行進(jìn)一步的解讀。

時光回溯...且?guī)Т蠹一仡^復(fù)盤下...

歷屆UP互娛發(fā)布會這幾個關(guān)鍵時間點！

「UP+騰訊游戲2013年度發(fā)布會」

那一年，騰訊游戲走過了整整十個年頭，在UP+發(fā)布會上一枝獨秀！

那一年，騰訊動漫名字還很長：「騰訊動漫原創(chuàng)發(fā)行平臺」，氪金之路尚未開始。

那一年，騰訊文學(xué)和騰訊電影+仍停留在程武的泛娛樂概念之中。

那一年，年度品牌主題：活出你的快樂！

那一年，F(xiàn)lash尚大行其道，網(wǎng)頁動效首選非它莫屬

騰訊推出PC端Flash體驗站回顧十年大事記！

（體驗地址：http://game.qq.com/up2013/tenyears/)

「UP騰訊互娛2014年度發(fā)布會」

2014年即可以說是騰訊互娛的發(fā)展元年！也可以說是H5行業(yè)的發(fā)展元年！

年度品牌主題：擁抱互動娛樂時代

騰訊創(chuàng)新性的以“H5”的方式發(fā)出了一份邀請函。

HTML5的萬維網(wǎng)標(biāo)準(zhǔn)最終敲定發(fā)布于2014年10月29日。

此邀請函上線于同年4月，故嚴(yán)格來講，它只能稱之為移動Web+，算不上H5。

邀請函的體驗與“翻頁P(yáng)PT”相近，以現(xiàn)在的標(biāo)準(zhǔn)來看可能略顯寒酸，但在當(dāng)時而言已屬移動體驗中的創(chuàng)新精品：重力感應(yīng)、視差滾動、transition動畫！

同時期上線的H5體驗基本都是以此類“翻頁P(yáng)PT”為主，如：爆款H5「Tesla特斯拉」

值得一提的是當(dāng)年UP互娛PC端的Web預(yù)熱站依然為Flash站。

（體驗地址：http://up.qq.com/2014/await/index_pc.shtml）

「UP騰訊互娛2015年度發(fā)布會」

2015年騰訊互娛旗下游戲、動漫、文學(xué)、影視四大業(yè)務(wù)首度集體亮相，開始真正圍繞明星IP的打造，做更系統(tǒng)和深入的探索。

年度品牌主題：讓想象力綻放！

騰訊圍繞“讓想象綻放”的品牌主題，推出了兩款H5用以品牌宣傳~

技術(shù)上，采用了當(dāng)時最新H5相關(guān)技術(shù)如：canvas、Zepto等；體驗上，這兩款H5即便以現(xiàn)在的標(biāo)準(zhǔn)來評判，也屬走心精品！

「致另一個“無用”的我」

此H5的創(chuàng)作形式與同年1月上線的爆款H5「我們之間就一個字」相近

其本質(zhì)是“翻頁P(yáng)PT”的升級版，從中我們依然可以看到14年UP互娛邀請函的影子！

不過通過視覺、音樂、文案等多維度的走心發(fā)力，用戶的感受不再是冰冷的資訊，H5的創(chuàng)作也由此階段開始向如何更好的抓住用戶情緒G點上發(fā)力；

業(yè)內(nèi)創(chuàng)作H5所融合元素也逐漸開始走向多元化：數(shù)據(jù)、技術(shù)、交互、視覺、動畫、影視、聲樂、游戲等。

「 生命之下，想象之上」

該H5的創(chuàng)作圍繞年度主題“讓想象綻放”進(jìn)行發(fā)散：

選擇富有想象力的小孩作為承載夢想的主角，2015UPKV的三角形元素作為核心元素；

設(shè)定出環(huán)環(huán)相扣的情節(jié)：起航—>翱翔—>墜落—>探索—>綻放，為故事增加跌宕起伏的情緒；

該H5是國內(nèi)最早一批將情節(jié)動畫融入H5創(chuàng)作之內(nèi)的案例！

動畫的實現(xiàn)方式選擇了Canvas技術(shù)，但節(jié)奏感的把控依然很棒~

在當(dāng)時4G剛興起、尚未太普及的時間，純Canvas動畫的加載速度要遠(yuǎn)遠(yuǎn)快于H5內(nèi)嵌視頻的方式！

上圖Via：TGideas

此外，H5借力埃舍爾的矛盾空間經(jīng)典畫作，來增加最初室內(nèi)場景的趣味性~

這種向經(jīng)典致敬的創(chuàng)作方式，后來被業(yè)內(nèi)普遍延用，并成功打造出多個爆款H5。如：

「淘寶年貨大街」致敬經(jīng)典畫作：清明上河圖

「年年壓歲 歲歲火影」、「一直挖空心思的行李箱」致敬日本藝術(shù)家Yusuke Oono的創(chuàng)意紙雕360°圣誕書；

不過，致敬經(jīng)典 對于度的把握非常重要！

玩得好打造一個爆款，玩砸了就是抄襲！

淘寶年貨大街業(yè)內(nèi)普遍稱贊，而一直挖空心思的行李箱則是毀譽(yù)參半；

更值得引以為誡的是：今年清明節(jié)前意外走紅的「此處故意留白」被曝抄襲法國游戲Phallaina，為此SIGMA官方發(fā)出道歉聲明，并下線H5。

「UP騰訊互娛2016年度發(fā)布會」

2016年，騰訊互娛旗下

游戲依然保持業(yè)界領(lǐng)先地位~

騰訊動漫也已成為中國旗艦動漫平臺！

閱文集團(tuán)更是占據(jù)了絕對主導(dǎo)的產(chǎn)業(yè)地位！

去年新成立的騰訊影業(yè)，也開始以IP為軸心，探索票房之外的更大價值。

泛娛樂逐步成為騰訊在“互聯(lián)網(wǎng)+文創(chuàng)產(chǎn)業(yè)”領(lǐng)域的發(fā)展思路。

年度品牌主題 ：每個人都有不可被辜負(fù)的天分 / “釋FUN你的想象”

騰訊圍繞年度主題，前后合計推出四款H5用以品牌宣傳&互動~

「2016，致另一個“無用”的我」

作為2015年的同名H5續(xù)作，傳承了系列的文案風(fēng)格：

精煉的語言描述現(xiàn)實生活的困境，走心的文案直戳觀者的內(nèi)心，極具帶入感~

隨即話鋒一轉(zhuǎn)：“我們停不下來「答題」的步伐，也習(xí)慣了做許多「無用」的事”

引出追漫畫、看小說、刷電影、玩游戲等「無用」的時光

選擇晴天娃娃作為第三視角下看到的“你”，

沉寂黑色著墨，從視覺上渲染來自爸媽、老同學(xué)、愛人、人潮等帶來的壓力！

而色彩上由黑至白的穿越，巧妙呼應(yīng)文案上的話鋒一轉(zhuǎn)！

用戶伴隨文、視、音的節(jié)奏，情緒切入沉浸于「無用」時光的愜意！

本質(zhì)上來講，此H5的創(chuàng)作形式同屬于“翻頁P(yáng)PT”，但體驗上很難看到它的影子~倒像是一段由用戶來掌控播放節(jié)奏的走心動畫！技術(shù)上的實現(xiàn)采用Canvas技術(shù)完成

恰是從這里我們最能看到這一年間行業(yè)的進(jìn)步！

「UP TO YOU 由你想“像”」

該H5通過”騰訊優(yōu)圖“在”人臉識別API“基礎(chǔ)上的創(chuàng)新突破，在行業(yè)內(nèi)首次將文學(xué)、動漫、游戲、影視等領(lǐng)域中被人熟知的二次元形象，和用戶真正連接在一起。

用戶只需要對著正臉拍一張或從相冊里選擇一張照片，“UP TO YOU”就可以自動判斷出照片中的人物與騰訊互娛產(chǎn)品中的誰“最相似”。

目前這個H5已下線。

不過不得不說，當(dāng)下依然非常流行的變臉換妝類H5（如：「我的小學(xué)生證件照」、「穿越三生三世」、「我被綁架了」）便是從那個階段開始的。

「要不是10年游戲老司機(jī)真玩不了這個」

打開這扇門，回到你那年青春之時的房間~七龍珠、科比、紅白機(jī)、諾基亞等這些青春專屬物件散落于房間各處！4個曾經(jīng)的記憶碎片齊聚方可獲得密碼打開門！

此H5開創(chuàng)了H5行業(yè)線索shou集 / 密室逃脫的創(chuàng)作形式

隨后這一年間的多個爆款H5，都有或多或少的采用此類形式，并加以創(chuàng)新。

「騰訊互娛發(fā)布會大新聞」

本H5采用報刊形式呈現(xiàn)UP互娛2016，將發(fā)布會內(nèi)容濃縮于7個版面之內(nèi)。

經(jīng)典的報紙版面+會動的照片，新聞能做成這樣，也是沒sei了~

今年兩會期間，騰訊新聞所出品的「一分鐘讀懂政府工作報告」延用了此類創(chuàng)作形式。

不過對比「互娛周末」采用序列幀這種相對比較麻煩的實現(xiàn)方式，今年的這款H5要更加簡單粗暴一些：采用了短視頻+翻頁的方式完成制作！

或是因4G更加普及、流量成本大大降低、加載速度不再特別受限于網(wǎng)絡(luò)環(huán)境的大背景。

以上分享即是UP互娛的編年史，更是濃縮版的H5行業(yè)進(jìn)化史！

期待「UP2017騰訊互娛年度發(fā)布會」期間會有更多走心的爆款H5涌現(xiàn)，屆時見~