重磅 | 我们和网易主创们聊了聊昨天刷屏的两个H5!

原创文章 分类: 经验/观点 版权:
5482 46 60 16
2016-12-30
43.0
首页推荐

昨天打招呼的方式大概是:Hi,你被网易的H5刷屏了吗?两个哟!


网易新闻前晚推了两个H5,分别是娱乐、哒哒出品,都在一夜之间刷屏!妥妥地把今年出品故宫RAP、薛之谦动漫大招的TGideas给截胡了:“看我一出手就是两个大招!”


你可能也发现了这么一个神奇的规律,H5做得好的,企业发展也不错。回顾2016,我们被淘宝、腾讯、网易的不同H5花式刷屏,百度却大体寂寂无声,分别对应——

  • 百度(B)被各种负面缠身
  • 阿里巴巴(A)没多少创新但双11双12也能刷刷存在感
  • 腾讯(T)的微信小程序
  • 网易(W)的阴阳师大热无休。

2017年,BAT三大巨头可能要洗个牌了,换TAW怎么样?

 

这当然关我们鸟事。H5那么火,赶紧好好学学!


Image title


屏住呼吸,好戏上演了,以下隆重揭秘这两个H5的创意实现和制作方法——


注:文末有实访彩蛋(嗯,赵四跟小伙伴有幸勾搭到了网易主创)。


1、二零一六年娱乐圈画传

Image title

Image title


  • 出品方:网易娱乐
  • 制作团队:7人
  • 筹备时间:两个星期
  • 打开人数:100万+(推出不到一天时)
  • 创意鼻祖:《变焦》(By 伊斯特万.巴尼亚伊)

 

“问世间是否此山最高?或者另有高处比天高。”一曲《世间始终你好》气势恢宏,顺带调侃了今年五花八门的娱乐事件。


这是网易娱乐第三年用H5做娱乐画传,每次都能把狗血的八卦写得特文艺(可能因为总策划&网易娱乐主编陈志亮还是个诗人),画还画得颇具古风(小李子夺金那幅画那么穿越,亏他们想得出来),背景配乐还是发布前半小时定的……

 

更带感的是,H5用“变焦动画”的手法回溯历年热点,画面动感极强。当你长按屏幕时镜头不断拉远,你就会看见画面1突然变成了画面2的一个布景,画面2又变成了画面3的背景墙,往复循环……

 

这个创意,网易不是首创。“画中画”,最早来自作家伊斯特万.巴尼亚伊的无字绘本图书《变焦》(1995年),下一页的故事永远包含上一页的画面,无休无止。


Image title


于是,今年9月万达发布的H5《探索神奇手绘,发现美好时光》借用这种手法,成功吸引大众眼球,点击量高达200多万。后来,道里创意还通过iH5的时间轴和翻页功能实现了这种动画,在中秋推出《满院月光都是家的故事》


有意思的是,这几天上海看看新闻也在筹备用“画中画”的形式做年终总结,今天才发布的《2016魔都时光机即将起航!》,但慢了网易一天……

 

其实H5的交互形式到现在已经没有太大变化了。但我们需要注意的是,即便是早已存在的创意,经过内容的创新再度搬到大家面前,同样可以刷屏。

 

试想这样的年终总结,如果改用一篇文章分析“马蓉出轨”、“宝强休妻”、“亦凡情海生波”、“师徒撕逼拼文笔”等的个中缘由,会有什么结果?

 

一个字:俗。


Image title

《满院月光都是家的故事》(by道里创意) http://868c4c21992c.ih5.cn/idea/V9M_0ya#p1
《2016魔都时光机即将起航!》(by看看新闻)http://01c5ebab5ab1.ih5.cn/idea/u0WeW0k#p1


2、我猜,你的2016在这里

Image title

Image title

  • 出品方:网易哒哒
  • 制作团队:10人
  • 筹备时间:1个月
  • 打开人数:暂时保密(渠道还没铺完)


“我在2016留下的回忆是:「初心」你呢?”

 

你就是被这些话刷屏的吧?“梦见、嗨、一个人、咸鱼、初心、月半、释怀、匆匆、扯”,每个关键词都对应一个交互场景,长按就可以切换场景。颇具巧思的是,这个H5的个性化分享很有特色,每个人转发后出现的标题会对应你所选的词。

 

在各类PC端HTML5网站和移动H5广告中浸染多时的行业人士,大概会在其中认出一些国外大牛的影子。


网易哒哒巧妙地化用了不同的交互创意,最后在盘点的同时给大家带来一场沉浸式的体验,正如他们所说,打的就是年轻人的牌。


3、“画中画”的关键交互实现


想要复现网易娱乐画报H5,关键在于用时间轴控制素材的放缩,同时采取翻页或图像隐藏的方式,控制不同画面的切换。


(1)时间轴控制素材


Image title


通过分析网易娱乐画报的图像素材,可以看到实现一个镜头的放缩需要三张图片切换,而每张图片宽度高达1875像素。

实际上就是在让这个画面缩小到完整的时候,在图片外侧添加一个底板进行吻合,让图片和底板同步缩小,直到切换新的图片时把上一个场景的图片隐藏。


因此,想复现这个效果在iH5用时间轴组件,使用一个简单的长按事件触发时间轴的播放就行。


Image title

Step1:在舞台下新增时长为20S的时间轴


Step2:上传素材1、2至时间轴分别添加轨迹,先隐藏素材1


从整体画面上看,素材2是素材1的底板(素材1的位置还得看素材2),所以为了方便控制,我们需要先调整好素材2的坐标、宽高等属性,在以此作为参考调整素材1的伸缩位置。

Image title

  1. 0秒处添加Add关键帧
  2. 选中0秒关键帧设大宽高、坐标,让画面效果跟素材1相似(此时宽高可能高达数千)
  3. 在X秒处设置关键帧(X值越大,实际变换的过程越持久)
  4. 选中X秒关键帧,调小宽高、坐标等属性,让画面大小恢复正常

Step3:显示素材1,根据素材2设置

  1. 选中素材1,同样在X秒处设置Add关键帧(X为上一步骤设定的值)
  2. 选中X秒关键帧,缩小素材1的大小,调整坐标,直至与素材2的右上角重合

Image title

Step4:时间轴X+0.1秒处隐藏素材1

  1. 在X+0.1秒处添加Add
  2. 选中Add将素材1透明度设为0

Image title

温馨提示:

  • 前面先隐藏素材1设置素材2,目的在于照顾新手。如果熟练使用时间轴,不必先设置素材2,可以按照素材的顺序来。 
  • X值的设置,目的在于同步伸缩比例。在同一时间轴下,只要时间间隔一致,伸缩比例就能同步。
  • 当你设置好一个画面时,最好先预览一次,看看效果是否理想。发现不足尽早修正,避免后序素材堆砌完成才去修正的话,容易导致牵一发而动全身的窘境。


(2)长按触发机制


这部分十分简单,透明按钮+图标+事件即可轻松搞定!

  1. 在舞台下上传一个透明按钮
  2. 上传长按的提示图标
  3. 透明按钮大小、位置盖住图标
  4. 在图标下添加两个事件

Image title

长按如果出现“保存图标”提示,解决方法有二——

  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爱好者,定期安利H5交互教程

983粉丝/7关注

春节创作指南:这里有五个魔性的H5玩法!2016年度H5最全报告:原来这行水这么深(含数据分析)

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,定期安利H5交互教程

小U妹文章推荐
换一换

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by © 2008-2017 UI.CN