昨天打招呼的方式大概是：Hi，你被网易的H5刷屏了吗？两个哟！
网易新闻这两天推了两个H5，分别是娱乐、哒哒出品，都在一夜之间刷屏！妥妥地把今年出品故宫RAP、薛之谦动漫大招的TGideas给截胡了：“看我一出手就是两个大招！”
屏住呼吸，好戏上演了，以下隆重揭秘这两个H5的创意实现以及网易创作团队的幕后故事——
1、二零一六年娱乐圈画传
出品方：网易娱乐
制作团队：7人
制作时间：两个星期
打开人数：100万+（推出不到一天时）
创意鼻祖：《变焦》（By 伊斯特万.巴尼亚伊）
“问世间是否此山最高？或者另有高处比天高。”一曲《世间始终你好》气势恢宏，顺带调侃了今年五花八门的娱乐事件。
这是网易娱乐第三年用H5做娱乐画传，每次都能把狗血的八卦写得特文艺（可能因为总策划&网易娱乐主编陈志亮还是个诗人），画还画得颇具古风（小李子夺金那幅画那么穿越，亏他们想得出来），背景配乐还是发布前半小时定的……
更带感的是，H5用“变焦动画”的手法回溯历年热点，画面动感极强。当你长按屏幕时镜头不断拉远，你就会看见画面1突然变成了画面2的一个布景，画面2又变成了画面3的背景墙，往复循环……
这个创意，网易不是首创。“画中画”，最早来自作家伊斯特万.巴尼亚伊的无字绘本图书《变焦》（1995年），下一页的故事永远包含上一页的画面，无休无止。
于是，今年9月万达发布的H5《探索神奇手绘，发现美好时光》借用这种手法，成功吸引大众眼球，点击量高达200多万。
后来，道里创意还通过H5制作工具iH5的时间轴和翻页功能实现了这种动画，在中秋推出《满院月光都是家的故事》。
有意思的是，这几天上海看看新闻也在筹备用“画中画”的形式做年终总结， 昨天才发布的《2016魔都时光机即将起航！》，但慢了网易一天……
其实H5的交互形式到现在已经没有太大变化了。但我们需要注意的是，即便是早已存在的创意，经过内容的创新再度搬到大家面前，同样可以刷屏。
试想这样的年终总结，如果改用一篇文章分析“马蓉出轨”、“宝强休妻”、“亦凡情海生波”、“师徒撕逼拼文笔”等的个中缘由，会有什么结果？
一个字：俗。
2、我猜，你的2016在这里
出品方：网易哒哒
制作团队：10人
筹备时间：1个月
打开人数：暂时保密（渠道还没铺完）
“我在2016留下的回忆是：「初心」你呢？”
你就是被这些话刷屏的吧？“梦见、嗨、一个人、咸鱼、初心、月半、释怀、匆匆、扯”，每个关键词都对应一个交互场景，长按就可以切换场景。颇具巧思的是，这个H5的个性化分享很有特色，每个人转发后出现的标题会对应你所选的词。
在各类PC端HTML5网站和移动H5广告中浸染多时的行业人士，大概会在其中认出一些国外大牛的影子。
网易哒哒巧妙地化用了不同的交互创意，最后在盘点的同时给大家带来一场沉浸式的体验，正如他们所说，打的就是年轻人的牌。
3、“画中画”的关键交互实现
网易《二零一六娱乐圈画传》H5是开发的，想要复现的话可以利用一些H5的制作工具。
这里以ih5.cn为例，可以利用工具里面的时间轴组件，来控制素材的放缩，同时采取翻页或图像隐藏的方式，控制不同画面的切换，来达到画中画的效果。
通过分析网易娱乐画报的图像素材，可以看到实现一个镜头的放缩需要三张图片切换，而每张图片宽度高达1875像素。实际上就是在让这个画面缩小到完整的时候，在图片外侧添加一个底板进行吻合，让图片和底板同步缩小，直到切换新的图片时把上一个场景的图片隐藏。
而长按这个交互形式，只需要利用ih5的按钮加事件，长按触发时间轴的播放就行。
用安卓机的朋友可能会发现，网易这个H5在长按时，会出现一些诸如“保存图标”或“打开浏览器”的提示，非常影响用户体验，如果是用ih5.cn制作的话，是可以解决的。方法有二：
1：在舞台下设置一个舞台大小的透明按钮，将两个事件剪切到透明按钮下（盖住图片，形成上下层关系）
2：设置一个尺寸适大的透明按钮，同样剪切事件，在按钮和图片中间添加“层”功能即可~
PS：网易另外一支H5《我猜，你的2016在这里》，灵活地运用了微信自定义分享标题的机制。
这个机制用iH5也可以实现，只需把各个码好字的文本字段绑定不同的变量，设置变量值分别为a、b、c....接着在舞台下设置一个微信设定标题的事件，值为$a、b、c即可（值的填写需对应文本字段）。
4、采访对话实录——你所好奇的都在这里
（1）网易娱乐主创团队
受访者：陈志亮（主策）、周柯如彦
团队成员：策划——陈志亮；统筹——周柯如彦；制作——黄丹霞，孙睿，李志，黄晓宇，王震
Q：《网易娱乐画报》H5放了什么渠道，反响怎么样？
网易娱乐：只在网易新闻客户端上推送，推出不到一天，100万+UV。
Q：筹备这个H5花了多少时间？
网易娱乐：集中制作时间差不多两个星期。
主要是画画时间比较久。年底工作多，因此采用设计和前端同时进行的双线工作方式。设计画几张，前端就制作几张。而编辑的工作在画师动笔之前就基本完成了，大概就是梳理本年度最热门的娱乐事件，依次筛出影响力最大的12件事，再将事件背景交给设计，帮助设计师进行创作。
Q：设计上做了多少版？
网易娱乐：基本上是一次过，没有大改，只有细节微调。
Q：用时两个礼拜做出这么精致的H5，有什么秘诀？
A：主要是默契加上准备工作充足吧。设计去年合作过一次，很有默契。编辑前期准备工作比较足，提供的素材比较丰富，所以这次效果出来很快。再加上我们整个team都比较有娱乐精神，思维很活跃，做事也很细致，沟通起来很顺畅，感觉一气呵成。
Q：为什么会采用这种画风?
网易娱乐：画风的初衷是考虑反差感。将古典与娱乐现代相结合，形成反差感。另外，这种H5娱乐属性比较强，有金瓶梅画风。网易一直被外界戏谑为黄易，这个H5的调性和黄易很像，哈哈~
Q：为什么会选择“画中画”这种交互创意？
网易娱乐：娱乐画报H5我们从2014年底开始做，第一年是简单翻页的形式，但是因为画得好，反响比较大。第二年的形式没有变，反响比较小。本来事不过三，想不到好的形式，我们就不做了。
但是当时正好是一个假人挑战流行，我们就想说做一个一镜到底，画中画的形式。一镜到底不新鲜，所以决定用画中画。而画中画之前主要是视频形态，交互式体验不好，这次我们全部用H5技术实现，用长按来控制播放，让网友有参与感。再配上音画，基本就成功了。
Q：连续3年都在做，初衷变了吗？
网易娱乐：没变化。2014年底开始做娱乐圈画传，开始做的想法是“强传播属性”，从画风到形式，都是为传播服务，而且是移动化的传播。
做出来的东西阅读门槛要低，通俗易懂，但是制作水平要保持一流精细，所以我们采用这种方式，好玩，简单，雅俗共赏。
调性、风格、品质感也一直没变，但呈现形式不断创新，就是想每年都给大家带来不一样的新意。如果细心的用户其实可以看到我们画里面处处有玄机，很有内涵的。
（2）网易哒哒主创团队
受访者：宋欣蔚（主策）
团队成员：策划——宋欣蔚，江圳强，刘玲玲；前端——周江，贺精淼，陈晓祎，王震；动效——王锐；设计——孙铭潞，白鹤
Q：H5《我猜，你的2016在这里》需要多少人去筹备，你在里面承担的角色是？
网易哒哒：我是这个项目的主策，另外还有两位策划，四位前端，两位设计，和一位动效。
Q：你们一开始的目标和创意方向是？
网易哒哒：设计初衷一方面是想满足年轻人重新审视、总结自己一年来的经历的欲望，另一方面也宣传了哒哒工作室关注青年文化的理念和态度。
Q：“梦见、嗨、一个人、咸鱼、初心、月半、释怀、匆匆、扯”这些关键词是怎么确定的？
网易哒哒：根据年轻人的生活状态、生活趣味以及生活感受设计的，每一个词都比较容易引发用户的共鸣。
像月半这个词的初衷，大多数女生都管不住自己的嘴，甚至男生也会。在这个页面中，改造吃豆人这个创意既涵盖了年轻人的情怀，又有一点日式冷幽默的感觉，上线之后有用户评价说：玩到停不下来，超想吃甜甜圈。
再比如“一个人”这个页面，会让很多年轻人表达自己孤独的状态。年轻人的孤独并不一定是负面的，一个人也可以绽放出不一样的烟火。
每一个词的选择，每一个交互细节，每一个设计细节都是精心打磨过的，都有它想去表达的意义，期待着用户去发现。
Q：这次内容推出后，投放渠道和反响怎么样？
网易哒哒：内容首发是网易新闻客户端，其他一些渠道还在铺。H5在网易新闻上线以后，我的同事们只是转发了一下，H5就传开了。大家都很喜欢转发，得到的反响都是各种好评！
Q：网易哒哒在奥运时出过《用你的洪荒之力，画一个小人》，二者有联系吗？
网易哒哒：这两个H5的风格与定位不太一样。《小人》是跟热点走的，而《请回答2016》是哒哒的年终策划。小人是诙谐一些的感觉，而这个是让每个人可以联想到自己与自己本身有个对话，形式上新颖、有质感，且充满趣味性。
Q：我有注意到你们交互上的创意有借鉴一些国外网站？
网易哒哒：我们先确定了选题，想做一个引发年轻人思考，回顾自己在2016的经历和成长的内容。
在策划的过程中，我们确实注意到了一些国外网站，是启发灵感的一个来源。但我们在这个基础上有了自己的创造和发挥，比如说怎样把策划和交互的内容合理的结合在一起。
我们想更多融入年轻人的这一年的生活状态和情感，考虑人可能会有的共情。比如难以坚持的初心，比如痛苦的蜕变，比如对生活很"扯"的调侃。
最后，前端老师在这次的策划中也非常给力，我们期待实现的效果基本都实现了，非常感谢他们的付出。
评论