提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
昨天打招呼的方式大概是: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的经历和成长的内容。
在策划的过程中,我们确实注意到了一些国外网站,是启发灵感的一个来源。但我们在这个基础上有了自己的创造和发挥,比如说怎样把策划和交互的内容合理的结合在一起。
我们想更多融入年轻人的这一年的生活状态和情感,考虑人可能会有的共情。比如难以坚持的初心,比如痛苦的蜕变,比如对生活很"扯"的调侃。
最后,前端老师在这次的策划中也非常给力,我们期待实现的效果基本都实现了,非常感谢他们的付出。
再次感谢网易娱乐、网易哒哒主创团队的极力配合,希望明年能涌现出更多佳作~
各位拜了个拜~
咱们明年见!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册