你的朋友圈被网易刷屏过几次？

自从H5在微信大火，这两年露脸最多的H5广告当属腾讯和网易了。比如这两天网易改了个口号，从“有态度” 变成“各有态度”，又一下子推出几个H5，个个PV在百万上下！

然而，就在我们刚做完网易新闻的专访，昨晚（儿童节前夕）又双叒被网易的H5刷屏了……

这个H5叫《这是成年人不敢打开的童年》（二维码在下面！），是网易哒哒做的儿童节策划，现在刷屏之势越来越猛，给你截张小伙伴九点半的时候和主创之一宋欣蔚的对话，感受一下它的火热程度——

你会看到这个H5有很多绚丽的3D透视效果，它也是H5制作中耗时最长的部分。

当然，真正戳中我们的还是那些熟悉的动漫人物，灌篮高手、名侦探柯南、哆啦A梦...看到它们立体鲜活的样子，简直不能再感人了！

一、《滑 向 童 年》

采访对象：文处萄（网易哒哒统筹）

团队成员：

统筹——文处萄

策划——宋欣蔚、江圳强

设计——孙铭潞、刘静雯

前端——詹志祥、徐翔

动画——王锐、孟文斌

[注] 就在和她聊天的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，你可以做出很多好玩又好看的东西，比如：酷炫的个人主页（作品集、博客都可以）、提供优质内容的信息聚合平台、各种各样的信息系统（销售、图书管理）等等。

最近iH5推出的《H5营销宝典》，也是这样的网页小程序，实时更新H5案例、流畅的操作体验让很多用户好奇它的制作方法。

在外观上，这样的网页跟原生的新闻APP如出一辙，也是在后台直接导入数据进行更新，方便又快捷。

这样的H5，可以怎么用iH5进行制作？

三、将H5伪装成APP的关键交互实现

想要复现「网易新闻|各有态度」类的Web APP，最关键的在于设计动态变化的内容，也就是这个H5的文章展示部分。

这块的复现需要运用iH5 3.0版工具的新功能，主要是相对定位容器、数据单元、数据表这三个组件。

如果你对HTML5有一定了解，其实原理上就是利用FLEX布局做可伸缩的网页设计。

由于这个案例还涉及一些有趣的动效制作，为了让你能完全复现这个H5，下期将推送会放出完整版H5的制作教程！

最后，让我们来听听网易主创是怎么策划这次创意活动的，学几招？

四、精华：网易采访实录

（1）「网易新闻|各有态度」

受访者：杨媛媛（主创）

职务：网易新闻品牌部 高级品牌主管

Q：目前这个H5的效果如何？

A：它主要投放在站内，整体的效果还算不错，具体没看，但得到的反馈是大概几十万接近百万的PV数据。

这个H5本身设计的出发点是品牌内容作用大于传播作用，也就是说它不是以刷屏作为优先目的，而是为了当用户打开这个页面，能感知到网易新闻强调的品牌内容。

Q：作为一个Web APP形态的H5，耗时大概是？主要时间花哪里？

A：做了大概一个多月，主要耗在设计上。

这个H5的设计其实跟出街的广告是一脉相承的，包括海报和TVC。我们首先对产品背后的亮点进行Highlight（强化），再将已有的出街广告进行合理改造。

Q：为什么在已有原生APP的前提下，还要将H5做成内容聚合类的Web APP？

A：这个H5聚合了很多网易新闻选出的优秀内容，所以在推广这个Slogan的同时，能让大家看到网易新闻已经聚合了很多优秀的泛资讯内容，目的是为了让用户很鲜明地get到我们转型的信息。

Q：最后的落地页，都跳到了引导下载APP，是故意的吗？

A：不是，这不是故意的。

这是各新闻客户端的“通识”，在腾讯的新闻页面点击具体新闻，它也会跳转去APP Store提示下载APP，这是一样的道理。

Q：今年你们的H5产量越来越多，相对于搜索推广、软文、微博图文等类型广告，H5广告是处于什么位置？

A：我觉得对于新闻媒体或者做内容资讯的平台，这种以内容为首要目的的H5对我们来说，是传播自身内容的一种重要手段。

（2）「十万青年态度攻占北上广」

采访对象：杨柳（主创）

职务：网易新闻市场部 高级策划主管

Q：H5的落地耗时多久？

A：总耗时2周。

Q：《十万青年态度攻占北上广》H5一开始的创意方向是？为什么会选用跟贴的交互创意？

A：这个H5是承接我们线下同系列的涂鸦墙，所以H5的初始页采用了很鲜明的涂鸦风格。

其次跟贴原本就是网易新闻原有的特色之一，一万个人心中，就有一万个哈姆雷特。在网易新闻这个开放的平台，我们更主张大家能够留下自己的痕迹，即使对同一个问题，也能持有不同的看法。

目的在于将“十万青年态度攻占北上广”的Campaign信息，以及网易新闻的多元价值观，传递给更多网友。

Q：这个H5主要被投放在哪，现在取得了多少互动量？

A：主要投放在站内，它里面有5条可以跟贴表态的贴子，目前的跟贴数大概36.5万，而它的PV已经接近100万了。

Q：业内的人都说H5的文案要简洁，但这个H5第一页的文案有64个字，你怎么看？

A：H5的文案尽量应简洁，这个我是赞同的，但我觉得要看H5的类型。

如果这个H5的出发点是炫技，或者里面设了几个层级的交互，那么文案就应该尽量简练，这样才能捉住用户眼球。

如果这个H5的出发点是让用户感受某样东西，或者说明某种观点，文案就可稍微长一点。

看了这么多，你又有什么态度呢？

你也想玩一玩Web APP吗？

最后，祝各位宝宝

六一儿童节快乐吧！