你的朋友圈被网易刷屏过几次？
自从H5在微信大火，这两年露脸最多的H5广告当属腾讯和网易了。比如这两天网易改了个口号，从“有态度” 变成“各有态度”，又一下子推出几个H5，个个PV在百万上下！
然而，就在我们刚做完网易新闻的专访，今天(儿童节)又双叒被网易的H5刷屏了……
这个H5叫《这是成年人不敢打开的童年》，是网易哒哒做的儿童节策划，现在刷屏之势越来越猛，给你截张我昨晚九点半的时候和主创之一宋欣蔚的对话，感受一下它的火热程度——
你会看到这个H5有很多绚丽的3D透视效果，它也是H5制作中耗时最长的部分。
当然，真正戳中我们的还是那些熟悉的动漫人物，灌篮高手、名侦探柯南、哆啦A梦...看到它们立体鲜活的样子，简直不能再感人了！
一、《滑 向 童 年》
采访对象：文处萄(网易哒哒统筹)
这次H5的团队成员：
统筹——文处萄
策划——宋欣蔚、江圳强
设计——孙铭潞、刘静雯
前端——詹志祥、徐翔
动画——王锐、孟文斌
注：就在我和他聊天的5分钟，H5的社交渠道又涨了20万PV……
Q：你们这次多少人参与？主要耗时是？
A：策划2人，插画师2人，动画2人，前端2人。
主要耗时在前端技术部分，3D透视效果，这次找了网易的前端技术大神亲自操刀。
动画插画部分也花了很多时间，两个插画妹子一直加班赶。
Q：你们选这些动漫形象有什么标准吗？
A：这是选题会时拍的照片。
(标准是)先放粉丝群体大的动漫，还有比较燃的，所以第一个就是灌篮高手。
最初有十多个备选动漫，真正开始赶着时间做了一个月，本来想做6个动画，还有海贼王，但因为上线时间紧删掉了。
Q：这个时间节点(儿童节前夜)，是计划好的？
A：是计划好的，7点钟开始上线发朋友圈。
目前仅在朋友圈社交渠道上线，网易新闻客户端明天上午推送。
网易哒哒的H5目前都是在客户端上线前，先朋友圈扩散，目的也是为了测试bug还有社交渠道传播效果。
Q：今晚这个H5传播得这么猛，你们有预料到吗？
A：我没料到效果会这么猛，可能大家对童年情怀还是很能被戳中的。
我现在一直看着数据，每5分钟数据上一个台阶。我再跟你聊半个小时，数据又涨了，这就是社交渠道传播的效果。
具体流量能达到多少，我现在也不敢预估。
二、「网易新闻|各有态度」
接下来，回到一开始(今天被刷屏之前)我们准备的另外一个H5，也是网易出品，虽然是另外一种形式的H5广告，也是好评如潮！
“各有态度”这个H5广告十分惊艳，因为它实在太像网易新闻的原生APP了。有酷炫有趣的动效和交互，又有以假乱真的网站频道，不知道的还以为进了网易的官网。
这种形态的H5，在业内有一个专业的名词形容它，那就是Web APP(网页程序)。
本质上就是因为现在HTML5太强大了，强大到可以让网页替代APP，所以你下什么APP呢？
将你的H5做成APP，你可以做出很多好玩又好看的东西，比如：酷炫的个人主页(作品集、博客都可以)、提供优质内容的信息聚合平台、各种各样的信息系统(销售、图书管理)等等。
比如最近我们做了一个《H5营销宝典》，也是这样的网页小程序，实时更新H5案例、流畅的操作体验让很多用户好奇它的制作方法。
在外观上，这样的网页跟原生的新闻APP如出一辙，也是在后台直接导入数据进行更新，方便又快捷。
三、怎么制作这样的H5？
这里提到的两个H5，效果不同，制作原理也不大一样。不过你可能不知道的是，这两个H5原型都是网站。
比如《滑 向 童 年》，其实借鉴了国外Roberta Di Camerino的官网。想要复现，可以使用iH5的滑动时间轴功能制作，教程可参照前段时间我们写的《怎么做出昨天爆火的“此处故意留白”？》
而「网易新闻|各有态度」类的Web APP，最关键的在于设计动态变化的内容，也就是这个H5的文章展示部分。
这块的复现需要运用iH5 3.0版工具的新功能，主要是相对定位容器、数据单元、数据表这三个组件。
如果你对HTML5有一定了解，其实原理上就是利用FLEX布局做可伸缩的网页设计。
下面有两个教学视频，非常详细地介绍了这种网页程序的制作方法，可以看看——
由于这个案例还涉及一些有趣的动效制作，为了让你能完全复现这个H5，我们下期会放出完整版H5的制作教程！
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
