深度剖析 | UP互娱的编年史，也是浓缩版的H5行业进化史！
来源：FaceH5（Faceminds） | 作者：鹏少
原标题：UP互娱的编年史，也是浓缩版的H5行业进化史！
2013年是腾讯游戏的十周年
那一年里，腾讯游戏一枝独秀，UP腾讯互娱发布会还叫「UP+腾讯游戏2013年度发布会」
那一年，Flash尚大行其道，网页动效首选非它莫属
腾讯推出PC端Flash体验站回顾十年大事记！
2014年，“腾讯互动娱乐”首次作为品牌主体亮相，腾讯互娱元年正式开启！
「UP腾讯互娱2014年度发布会」创新性的以“H5”的方式发出了一份邀请函，而这一年也是为H5行业的发展元年！
恰是从此阶段起
Flash逐渐退出历史舞台~
H5拿到行业的接力棒，并开始一步步走向辉煌！
......
转眼之间...2017年
作为文化娱乐产业的年度风向标，「UP2017腾讯互娱年度发布会」定档本月20号
腾讯游戏、动漫、文学、影业以及“新入伍”的电竞五大品牌组成全新泛娱乐业务生态，首度集体亮相。
腾讯上线官方预热H5，并发布一组以“唯耐心不负所爱“的主题海报：说是海报，也可以说是一组H5的创意二维码！
纵观这几年走来...
腾讯互娱历经从腾讯游戏一枝独秀到游戏、动漫、文学、影业、电竞五大业务并肩共生，走到泛娱乐的发展奇点。
> 期间多款明星IP被成功孵化、陆续改编为手游、电影、动漫等实现多领域共生，如《尸兄》《斗破苍穹》《魂斗罗！归来》《全职高手》等
> 更有创造30亿月流水，8000万DAU，一款皮肤日流水1.5亿这些令人咋舌的商业数据，将阴阳师“踢下神坛”的国民级手游《王者荣耀》
而H5行业同样经历了从标准敲定、脱离“拐杖”（Flash）摸索前行，到各类技术、交互、形式创新等不断涌现，走到数字营销发展的新起点；
> 期间刷屏爆款不断，H5从最初的“翻页PPT”开始持续性创新：Canvas动画、密室逃脱、场景模拟、变脸换妆、多屏互动、明星互动、互娱小游戏、VR全景、交互式视频等
> 越来越多的团队依托其创作的H5而涌现于大众视野，斩获国内外各类大奖，成为明星团队！越来越多行业开始采用H5媒介来做品牌营销&内容传播！同样越来越多的人才逐渐开始讨论、学习、创作H5！
腾讯互娱与H5行业始终并辔前行！
国内H5行业崛起的几个关键时间点无一不被历届UP互娱发布会所出品的H5案例所见证，甚至引领！
UP互娱的编年史也是浓缩版H5行业进化史！
本文即以历届UP互娱发布会为时间刻度，同大家聊一聊这浓缩版的H5行业进化史！
「UP2017腾讯互娱年度发布会」
如何理解UP2017发布会的主题：“奇点·共生”？
首先，宇宙学中的奇点没有大小，却又能级无限大，具有形成宇宙中所有物质的势能！
其次，泛娱乐的核心是IP，IP源于人的想象力与情感，不分贵贱、不计大小。
任何一个IP只要能点燃粉丝的热情，围绕这个IP所有形态的娱乐体验，都将快速跨界连接和融通共生，呈现星火燎原之势，催生惊人的粉丝经济。
奇点：IP的形态和势能与奇点具有惊人的相似性
共生：多领域共生则是明星IP孵化的必选路径！
腾讯互娱官方预热H5之内有何亮点？
1、对移动端与PC端的完美适配
当下业内大谈的H5，多是指在移动端进行社交传播的H5广告，但想来不少朋友都忽略了H5的本质其实是移动Web+。
此H5的难得之处便在于对移动与PC的完美适配！且PC端的体验更加优雅，更加细致！（PC网址：http://up.qq.com ）
2、优雅的体验与到位的创意
富有太空科技感的粒子随用户的操作而游散汇聚成各种元素，分别对应腾讯互娱旗下五大业务（游戏、动漫、文学、影业、电竞）以及 奇点。
细心的朋友还会有两个独到之发现：
a.用鼠标点击PC端Web上的粒子可以弹出相应内容要素，如：爱乐之城、一人之下、狐妖小红娘等！
b. 顺序的方式在各主体元素之间进行切换，粒子散聚过渡流畅自然这并不足为奇！但若跳序切换将是对技术适配的绝对考验！粒子散聚过度会否因此出现过度不自然？
跳序切换，粒子聚散依然十分流畅！
其实，这些粒子恰是对泛娱乐时代内容IP的代指，粒子的聚散呼应明星IP的多领域共生。
粒子可于任意两主体间自然过度，则呼应小说、动漫、游戏、影视均可能成为IP的孵化之始（小说、漫画试错成本更低），亦可成为IP孵化的衍生枢纽。
视觉细腻而深邃，体验自然而优雅；
深邃的粒子空间配以幽然的BGM或如浩瀚宇宙，正是泛娱乐生态最好的视觉呈现！
3、不刻意炫技，技术火候刚刚好
粒子聚散动效自然而流畅，而这些粒子元素与体验动效均由canvas加以绘制、js+json完成技术实现；
H5内只加载了一些不可或缺之元素如Logo、ICON等33张图片，合计大小被控制在了270KB！
唯耐心不负所爱 系列海报/H5
泛娱乐的核心是明星IP，而IP的关键在于其创作者
腾讯互娱以作家、漫画家、电影人、游戏制作人、电竞玩家为主人公，发布一组以“唯耐心不负所爱“的主题海报；
海报以H5二维码为主体，进行图案创意设计；
加以扫码，你看到的H5
其实是5段展现创作者逐梦状态的时间静止视频。
电竞玩家 - 手都要抽筋了，还管不住自己
游戏制作者 - 死活不肯上床睡
作家 - 就为了120字重写30多遍
画家 - 被打80遍还要再来一遍
电影人 - 这么点事情竟然纠结一整晚
他们到底图个啥？
「唯耐心..」系列H5内嵌视频是如何拍摄制作的？
H5内嵌视频采用时间静止特效加以制作完成！
时间静止视频的制作其实并不复杂，关键点在于前期演员和后期特效。
前期拍摄时演员摆出动感夸张的POSE，并在此状态下尽量保持不动~用摄像机环绕运动完成拍摄。
后期制作时，在视频里用特效加入传统观念里肯定会动的东西，如：浮空的卡片；打翻的水杯等。
目前已曝光的UP2017互娱H5便是以上两款
不过今年的UP互娱才刚开始预热，想来最近一段时间内 UP2017主题H5还将不断涌现~！届时将进行进一步的解读。
时光回溯...且带大家回头复盘下...
历届UP互娱发布会这几个关键时间点！
「UP+腾讯游戏2013年度发布会」
那一年，腾讯游戏走过了整整十个年头，在UP+发布会上一枝独秀！
那一年，腾讯动漫名字还很长：「腾讯动漫原创发行平台」，氪金之路尚未开始。
那一年，腾讯文学和腾讯电影+仍停留在程武的泛娱乐概念之中。
那一年，年度品牌主题：活出你的快乐！
那一年，Flash尚大行其道，网页动效首选非它莫属
腾讯推出PC端Flash体验站回顾十年大事记！
（体验地址：http://game.qq.com/up2013/tenyears/)
「UP腾讯互娱2014年度发布会」
2014年即可以说是腾讯互娱的发展元年！也可以说是H5行业的发展元年！
年度品牌主题：拥抱互动娱乐时代
腾讯创新性的以“H5”的方式发出了一份邀请函。
HTML5的万维网标准最终敲定发布于2014年10月29日。
此邀请函上线于同年4月，故严格来讲，它只能称之为移动Web+，算不上H5。
邀请函的体验与“翻页PPT”相近，以现在的标准来看可能略显寒酸，但在当时而言已属移动体验中的创新精品：重力感应、视差滚动、transition动画！
同时期上线的H5体验基本都是以此类“翻页PPT”为主，如：爆款H5「Tesla特斯拉」
值得一提的是当年UP互娱PC端的Web预热站依然为Flash站。
（体验地址：http://up.qq.com/2014/await/index_pc.shtml）
「UP腾讯互娱2015年度发布会」
2015年腾讯互娱旗下游戏、动漫、文学、影视四大业务首度集体亮相，开始真正围绕明星IP的打造，做更系统和深入的探索。
年度品牌主题：让想象力绽放！
腾讯围绕“让想象绽放”的品牌主题，推出了两款H5用以品牌宣传~
技术上，采用了当时最新H5相关技术如：canvas、Zepto等；体验上，这两款H5即便以现在的标准来评判，也属走心精品！
「致另一个“无用”的我」
此H5的创作形式与同年1月上线的爆款H5「我们之间就一个字」相近
其本质是“翻页PPT”的升级版，从中我们依然可以看到14年UP互娱邀请函的影子！
不过通过视觉、音乐、文案等多维度的走心发力，用户的感受不再是冰冷的资讯，H5的创作也由此阶段开始向如何更好的抓住用户情绪G点上发力；
业内创作H5所融合元素也逐渐开始走向多元化：数据、技术、交互、视觉、动画、影视、声乐、游戏等。
「 生命之下，想象之上」
该H5的创作围绕年度主题“让想象绽放”进行发散：
选择富有想象力的小孩作为承载梦想的主角，2015UPKV的三角形元素作为核心元素；
设定出环环相扣的情节：起航—>翱翔—>坠落—>探索—>绽放，为故事增加跌宕起伏的情绪；
该H5是国内最早一批将情节动画融入H5创作之内的案例！
动画的实现方式选择了Canvas技术，但节奏感的把控依然很棒~
在当时4G刚兴起、尚未太普及的时间，纯Canvas动画的加载速度要远远快于H5内嵌视频的方式！
上图Via：TGideas
此外，H5借力埃舍尔的矛盾空间经典画作，来增加最初室内场景的趣味性~
这种向经典致敬的创作方式，后来被业内普遍延用，并成功打造出多个爆款H5。如：
「淘宝年货大街」致敬经典画作：清明上河图
「年年压岁 岁岁火影」、「一直挖空心思的行李箱」致敬日本艺术家Yusuke Oono的创意纸雕360°圣诞书；
不过，致敬经典 对于度的把握非常重要！
玩得好打造一个爆款，玩砸了就是抄袭！
淘宝年货大街业内普遍称赞，而一直挖空心思的行李箱则是毁誉参半；
更值得引以为诫的是：今年清明节前意外走红的「此处故意留白」被曝抄袭法国游戏Phallaina，为此SIGMA官方发出道歉声明，并下线H5。
「UP腾讯互娱2016年度发布会」
2016年，腾讯互娱旗下
游戏依然保持业界领先地位~
腾讯动漫也已成为中国旗舰动漫平台！
阅文集团更是占据了绝对主导的产业地位！
去年新成立的腾讯影业，也开始以IP为轴心，探索票房之外的更大价值。
泛娱乐逐步成为腾讯在“互联网+文创产业”领域的发展思路。
年度品牌主题 ：每个人都有不可被辜负的天分 / “释FUN你的想象”
腾讯围绕年度主题，前后合计推出四款H5用以品牌宣传&互动~
「2016，致另一个“无用”的我」
作为2015年的同名H5续作，传承了系列的文案风格：
精炼的语言描述现实生活的困境，走心的文案直戳观者的内心，极具带入感~
随即话锋一转：“我们停不下来「答题」的步伐，也习惯了做许多「无用」的事”
引出追漫画、看小说、刷电影、玩游戏等「无用」的时光
选择晴天娃娃作为第三视角下看到的“你”，
沉寂黑色着墨，从视觉上渲染来自爸妈、老同学、爱人、人潮等带来的压力！
而色彩上由黑至白的穿越，巧妙呼应文案上的话锋一转！
用户伴随文、视、音的节奏，情绪切入沉浸于「无用」时光的惬意！
本质上来讲，此H5的创作形式同属于“翻页PPT”，但体验上很难看到它的影子~倒像是一段由用户来掌控播放节奏的走心动画！技术上的实现采用Canvas技术完成
恰是从这里我们最能看到这一年间行业的进步！
「UP TO YOU 由你想“像”」
该H5通过”腾讯优图“在”人脸识别API“基础上的创新突破，在行业内首次将文学、动漫、游戏、影视等领域中被人熟知的二次元形象，和用户真正连接在一起。
用户只需要对着正脸拍一张或从相册里选择一张照片，“UP TO YOU”就可以自动判断出照片中的人物与腾讯互娱产品中的谁“最相似”。
目前这个H5已下线。
不过不得不说，当下依然非常流行的变脸换妆类H5（如：「我的小学生证件照」、「穿越三生三世」、「我被绑架了」）便是从那个阶段开始的。
「要不是10年游戏老司机真玩不了这个」
打开这扇门，回到你那年青春之时的房间~七龙珠、科比、红白机、诺基亚等这些青春专属物件散落于房间各处！4个曾经的记忆碎片齐聚方可获得密码打开门！
此H5开创了H5行业线索shou集 / 密室逃脱的创作形式
随后这一年间的多个爆款H5，都有或多或少的采用此类形式，并加以创新。
「腾讯互娱发布会大新闻」
本H5采用报刊形式呈现UP互娱2016，将发布会内容浓缩于7个版面之内。
经典的报纸版面+会动的照片，新闻能做成这样，也是没sei了~
今年两会期间，腾讯新闻所出品的「一分钟读懂政府工作报告」延用了此类创作形式。
不过对比「互娱周末」采用序列帧这种相对比较麻烦的实现方式，今年的这款H5要更加简单粗暴一些：采用了短视频+翻页的方式完成制作！
或是因4G更加普及、流量成本大大降低、加载速度不再特别受限于网络环境的大背景。
以上分享即是UP互娱的编年史，更是浓缩版的H5行业进化史！
期待「UP2017腾讯互娱年度发布会」期间会有更多走心的爆款H5涌现，届时见~
参与评论
参与评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）