昨天打招呼的方式大概是：Hi，你被网易的H5刷屏了吗？两个哟！
网易新闻前晚推了两个H5，分别是娱乐、哒哒出品，都在一夜之间刷屏！妥妥地把今年出品故宫RAP、薛之谦动漫大招的TGideas给截胡了：“看我一出手就是两个大招！”
你可能也发现了这么一个神奇的规律，H5做得好的，企业发展也不错。回顾2016，我们被淘宝、腾讯、网易的不同H5花式刷屏，百度却大体寂寂无声，分别对应——
2017年，BAT三大巨头可能要洗个牌了，换TAW怎么样？
这当然关我们鸟事。H5那么火，赶紧好好学学！
屏住呼吸，好戏上演了，以下隆重揭秘这两个H5的创意实现和制作方法——
注：文末有实访彩蛋（嗯，赵四跟小伙伴有幸勾搭到了网易主创）。
1、二零一六年娱乐圈画传
“问世间是否此山最高？或者另有高处比天高。”一曲《世间始终你好》气势恢宏，顺带调侃了今年五花八门的娱乐事件。
这是网易娱乐第三年用H5做娱乐画传，每次都能把狗血的八卦写得特文艺（可能因为总策划&网易娱乐主编陈志亮还是个诗人），画还画得颇具古风（小李子夺金那幅画那么穿越，亏他们想得出来），背景配乐还是发布前半小时定的……
更带感的是，H5用“变焦动画”的手法回溯历年热点，画面动感极强。当你长按屏幕时镜头不断拉远，你就会看见画面1突然变成了画面2的一个布景，画面2又变成了画面3的背景墙，往复循环……
这个创意，网易不是首创。“画中画”，最早来自作家伊斯特万.巴尼亚伊的无字绘本图书《变焦》（1995年），下一页的故事永远包含上一页的画面，无休无止。
于是，今年9月万达发布的H5《探索神奇手绘，发现美好时光》借用这种手法，成功吸引大众眼球，点击量高达200多万。后来，道里创意还通过iH5的时间轴和翻页功能实现了这种动画，在中秋推出《满院月光都是家的故事》。
有意思的是，这几天上海看看新闻也在筹备用“画中画”的形式做年终总结，今天才发布的《2016魔都时光机即将起航！》，但慢了网易一天……
其实H5的交互形式到现在已经没有太大变化了。但我们需要注意的是，即便是早已存在的创意，经过内容的创新再度搬到大家面前，同样可以刷屏。
试想这样的年终总结，如果改用一篇文章分析“马蓉出轨”、“宝强休妻”、“亦凡情海生波”、“师徒撕逼拼文笔”等的个中缘由，会有什么结果？
一个字：俗。
《满院月光都是家的故事》（by道里创意） http://868c4c21992c.ih5.cn/idea/V9M_0ya#p1
《2016魔都时光机即将起航！》（by看看新闻）http://01c5ebab5ab1.ih5.cn/idea/u0WeW0k#p1
2、我猜，你的2016在这里
“我在2016留下的回忆是：「初心」你呢？”
你就是被这些话刷屏的吧？“梦见、嗨、一个人、咸鱼、初心、月半、释怀、匆匆、扯”，每个关键词都对应一个交互场景，长按就可以切换场景。颇具巧思的是，这个H5的个性化分享很有特色，每个人转发后出现的标题会对应你所选的词。
在各类PC端HTML5网站和移动H5广告中浸染多时的行业人士，大概会在其中认出一些国外大牛的影子。
网易哒哒巧妙地化用了不同的交互创意，最后在盘点的同时给大家带来一场沉浸式的体验，正如他们所说，打的就是年轻人的牌。
3、“画中画”的关键交互实现
想要复现网易娱乐画报H5，关键在于用时间轴控制素材的放缩，同时采取翻页或图像隐藏的方式，控制不同画面的切换。
（1）时间轴控制素材
通过分析网易娱乐画报的图像素材，可以看到实现一个镜头的放缩需要三张图片切换，而每张图片宽度高达1875像素。
实际上就是在让这个画面缩小到完整的时候，在图片外侧添加一个底板进行吻合，让图片和底板同步缩小，直到切换新的图片时把上一个场景的图片隐藏。
因此，想复现这个效果在iH5用时间轴组件，使用一个简单的长按事件触发时间轴的播放就行。
Step1：在舞台下新增时长为20S的时间轴
Step2：上传素材1、2至时间轴分别添加轨迹，先隐藏素材1
从整体画面上看，素材2是素材1的底板（素材1的位置还得看素材2），所以为了方便控制，我们需要先调整好素材2的坐标、宽高等属性，在以此作为参考调整素材1的伸缩位置。
Step3：显示素材1，根据素材2设置
Step4：时间轴X+0.1秒处隐藏素材1
温馨提示：
（2）长按触发机制
这部分十分简单，透明按钮+图标+事件即可轻松搞定！
长按如果出现“保存图标”提示，解决方法有二——
PS：网易另外一支H5《我猜，你的2016在这里》，灵活地运用了微信自定义分享标题的机制。
这个机制在iH5实现，只需把各个码好字的文本字段绑定不同的变量，设置变量值分别为a、b、c....接着在舞台下设置一个微信设定标题的事件，值为$a、b、c即可（值的填写需对应文本字段）。
4、彩蛋：采访对话实录
因为前晚被两个H5都刷屏了，这次的报道都是成双成对的，真是“便宜”你们了，这里应该有你们好奇的，一次性看个够吧！
（1）网易娱乐主创团队
受访者：陈志亮（主策）、周柯如彦
团队成员：策划——陈志亮；统筹——周柯如彦；制作——黄丹霞，孙睿，李志，黄晓宇，王震
Q：《网易娱乐画报》H5放了什么渠道，反响怎么样？
网易娱乐：只在网易新闻客户端上推送，推出不到一天，100万+UV。
Q：筹备这个H5花了多少时间？
网易娱乐：集中制作时间差不多两个星期。主要是画画时间比较久。年底工作多，因此采用设计和前端同时进行的双线工作方式。
设计画几张，前端就制作几张。而编辑的工作在画师动笔之前就基本完成了，大概就是梳理本年度最热门的娱乐事件，依次筛出影响力最大的12件事，再将事件背景交给设计，帮助设计师进行创作。
Q：设计上做了多少版？
网易娱乐：基本上是一次过，没有大改，只有细节微调。
Q：用时两个礼拜做出这么精致的H5，有什么秘诀？
网易娱乐：主要是默契加上准备工作充足吧。设计去年合作过一次，很有默契。编辑前期准备工作比较足，提供的素材比较丰富，所以这次效果出来很快。
再加上我们整个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的经历和成长的内容。
在策划的过程中，我们确实注意到了一些国外网站，是启发灵感的一个来源。但我们在这个基础上有了自己的创造和发挥，比如说怎样把策划和交互的内容合理的结合在一起。
我们想更多融入年轻人的这一年的生活状态和情感，考虑人可能会有的共情。比如难以坚持的初心，比如痛苦的蜕变，比如对生活很"扯"的调侃。
最后，前端老师在这次的策划中也非常给力，我们期待实现的效果基本都实现了，非常感谢他们的付出。
再次感谢网易娱乐、网易哒哒主创团队的极力配合，希望明年能涌现出更多佳作~
各位拜了个拜~
咱们明年见！
世界大奇，保持好奇心，才有乐趣。H5爱好者。
27
作品
2292
粉丝
8
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册