恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
3个小时150万UV!网易的童年 H5刷屏了!
0.0°
2017-06-05 原创文章 经验/观点 举报 8673 18 24 0

Image title


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

 

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



Image title


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


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


Image title


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


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


一、《滑 向 童 年》


采访对象:文处萄(网易哒哒统筹)

团队成员:

统筹——文处萄

策划——宋欣蔚、江圳强

设计——孙铭潞、刘静雯

前端——詹志祥、徐翔

动画——王锐、孟文斌


Image title


[注] 就在和她聊天的5分钟,H5的社交渠道又涨了20万PV,今晚注定又是网易之夜了……


Q:你们这次多少人参与?主要耗时是?

 

A:策划2人,插画师2人,动画2人,前端2人。


主要耗时在前端技术部分,3D透视效果,这次找了网易的前端技术大神亲自操刀。


动画插画部分也花了很多时间,两个插画妹子一直加班赶。


Q:你们选这些动漫形象有什么标准吗?


Image title


A:这是选题会时拍的照片。


(标准是)先放粉丝群体大的动漫,还有比较燃的,所以第一个就是灌篮高手。


最初有十多个备选动漫,真正开始赶着时间做了一个月,本来想做6个动画,还有海贼王,但因为上线时间紧删掉了。


Q:这个时间节点(儿童节前夜),是计划好的?

 

A:是计划好的,7点钟开始上线发朋友圈。


目前仅在朋友圈社交渠道上线,网易新闻客户端明天上午推送。


网易哒哒的H5目前都是在客户端上线前,先朋友圈扩散,目的也是为了测试bug还有社交渠道传播效果。


Q:今晚这个H5传播得这么猛,你们有预料到吗?

 

A:我没料到效果会这么猛,可能大家对童年情怀还是很能被戳中的。


Image title


我现在一直看着数据,每5分钟数据上一个台阶。我再跟你聊半个小时,数据又涨了,这就是社交渠道传播的效果。


具体流量能达到多少,我现在也不敢预估。


二、「网易新闻|各有态度」


接下来,回到一开始(今天被刷屏之前)我们准备的另外一个H5,也是网易出品,虽然是另外一种形式的H5广告,也是好评如潮!


Image title


“各有态度”这个H5广告十分惊艳,因为它实在太像网易新闻的原生APP了。有酷炫有趣的动效和交互,又有以假乱真的网站频道,不知道的还以为进了网易的官网。

 

这种形态的H5,在业内有一个专业的名词形容它,那就是Web APP(网页程序)


本质上就是因为现在HTML5太强大了,强大到可以让网页替代APP,所以你下什么APP呢?明明打开个网页就可以解决的问题,你还不用下载。


Image title


    

将你的H5做成APP,你可以做出很多好玩又好看的东西,比如:酷炫的个人主页(作品集、博客都可以)、提供优质内容的信息聚合平台、各种各样的信息系统(销售、图书管理)等等。

 

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


Image title


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


这样的H5,可以怎么用iH5进行制作?


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

 

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


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


Image title


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


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


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


四、精华:网易采访实录


(1)「网易新闻|各有态度」

 

受访者:杨媛媛(主创)

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


Q:目前这个H5的效果如何?

 

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

 

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

 

Q:作为一个Web APP形态的H5,耗时大概是?主要时间花哪里?

 

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

 

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


Image title


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

 

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

 

Q:最后的落地页,都跳到了引导下载APP,是故意的吗?

 

A:不是,这不是故意的。


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

 

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

 

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


(2)「十万青年态度攻占北上广」


Image title


采访对象:杨柳(主创)

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


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吗?

最后,祝各位宝宝

六一儿童节快乐吧!

更新:2017-06-05

收藏

18人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 视觉逼格指南:几何抽象风格神器
  • 4月精品H5盘点,Top20

    猜你喜欢

      2017-06-05 原创文章 经验/观点 举报 8673 18 24 0

      3个小时150万UV!网易的童年 H5刷屏了!

      0.0°

      你确定要举报3个小时150万UV!网易的童年 H5刷屏了!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      24
      18
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录