网易H5团队终于出书了,帮你总结爆款打造秘诀

2018-09-19 H5案例分享 H5案例分享

近期,一场黑白色描绘的死亡在朋友圈里迅速蔓延。


她是谁?为何挣扎48小时后死去却无人知晓?

体验案例,请长按/扫描二维码 ->

识别图中二维码

 

这支由网易出品的H5《自白》,将濒危动物的处境移情到人类身上,直击内心深处,引起疯狂转发,短短24小时,PV逼近千万级,堪比一部畅销影视作品的触达率。

 

一时间,各种角度的解读和分析的文章也随之出现,这是Html5技术诞生6年后,在早已实现技术普及的前提下,每次刷屏案例,还是让无数创作者们热衷讨论其传播规律以及如何讨好用户。

 

而屡屡创新的网易,是如何保持这么多年的作品量,还不断刷新自己的记录?小编带着疑问,找到了网易H5制作团队——网易传媒设计中心。除了《自白》,他们还制作了《睡姿大比拼》《里约小人大冒险》《娱乐圈画传》《纪念哈利·波特20周年》《滑向童年》等诸多现象级的H5……

 

《睡姿大比拼》

体验案例,请长按/扫描二维码 ->

识别图中二维码

 

《纪念哈利·波特20周年》

体验案例,请长按/扫描二维码 ->

识别图中二维码

 

等等,what?网易大神们跟小编透露,他们出教程了!整个团队身经百战的经验和心血,全都凝练在这本《H5匠人手册:霸屏H5实战指南》里了! 不同于其他流于表面泛泛而谈的解说或指南,网易传媒设计中心在对实际案例进行详细解读的基础上,更加注重思路的总结和方法的实操性。因此清晰的结构和高度提炼的方法论是本书的一大特点。

 

 

好学的小编已经偷偷看完了全书,现在感觉每一个毛孔都充满了打造爆款H5的自信,忍不住要来剧透一番。

 

划重点1:全面的内容架构

全书共分为4章:第1章主要讲述H5的概念和发展,以及优秀H5应具备的6大特征;第2章详细剖析了H5的交互流程;第3章讲解了H5中有效的视觉套路;第4章则针对H5中的动效进行深入解读。书中的案例都可以扫码观看,更方便理解。

 

划重点2:清晰的结构

书中在讲到 “交互流程剖析”这一部分内容时,开篇就统领地告诉读者一个H5的诞生要经历以下阶段:项目沟通、策划评估、产出。当然,在每一个阶段中,还有不少细分的环节,如图所示。

 

以策划评估阶段为例,首先要在“动机”上做足文章,让用户在短时间内被吸引,直到完成整个H5的观看。为了达到这个目的,书中详细讲解了控制节奏的“心流理论”和引导用户的“HOOK理论”。

 

8区间心流体验模型图

Hook理论模型图

吸引用户的机制确定好之后,还需要选择合适的框架,即H5展现形式,使其符合策划主题。按照交互的复杂程度,书中将展现形式归纳为以下三类:展示型、引导型、操作型,并从5个维度分析各类形式的特点,帮助你在第一时间找到最佳方式。

 

划重点3:高度提炼的方法论

在探讨如何确定H5的主要内容和目标人群、并提炼核心任务时,书中提出了“头脑风暴之白三角”的方法,将主要内容和目标人群喜欢的东西直接拼在一起做配对,激发想象力。


以《穿越故宫来看你》为例,在H5中,皇帝穿越到现代,使用现代的沟通方式聊天、拍照、唱Rap等,产生的错位感让用户感到惊喜和冲击,从而引发用户主动分享。

体验案例,请长按/扫描二维码 ->

识别图中二维码

 

在利用“白三角”方法进行思考时,就可以这样操作:策划的主题是皇帝、太和殿、妃子、皇后、紫禁城等,右边的白三角再列出我们目标用户人群喜欢的元素,例如小鲜肉、表情包、VR、唱Rap、玩朋友圈、点赞等。这样两个白三角之间能产生怎样的奇妙关系呢?那就是本H5最后得出的皇后用VR、皇帝唱Rap、大臣玩朋友圈等。

 

 

这里需要强调一点,就是两个白三角产生的“化学反应”一定得是某种程度上有反差的,能让用户惊喜的,同时这个白三角也可以倒着推,可以先列出目标用户喜欢的东西,然后找能产生反差的主题元素。

 

除此之外,书中还全面地展示了各种视觉设计的创意套路,例如利用手绘插画、历史照片完成创意。设计师也现身说法,辅以案例,详细分析了项目中资料整理、方案优化、分镜及背景绘制的完整过程。

而在动效部分,不仅将动效与动画、电影、交互设计的渊源娓娓道来,还分析了动效在各大领域的运用,并重点结合具体案例讲解交互中的加载、转场、引导、反馈,让你充分了解动效的魔力,明白为何H5“无动效不欢”。

 

 

“所有说不清楚的问题都是因为缺乏维度”,《H5匠人手册》的可贵之处正是在于,从用户心流的起源、用户行为的引导、故事框架的构建、视觉吸引力的打造,到最后技术落地的实现,一步步拆分出维度与方法。让你学到的不仅仅是技能,更是策划和设计思维。

 

此书已在京东、当当、亚马逊、天猫等平台上架,搜索关键字“H5匠人手册”,就可以下单啦!Get网易同款H5,不如就从get网易同款霸屏秘诀开始。小编向你们保证:此书在手,H5你有。

 

如果还想了解网易更多H5经典案例,小编还有个好办法。在H5领域一路领行的“H5案例分享”官网(https://www.h5anli.com/),不但全面收录了网易的过往经典案例,还会第一时间更新全行业最新创意H5。不管想找啥样儿的案例,上网站一搜即得。同名微信公众号还会选取典型案例进行重点解读,专业解惑,让小编学了不少干货。

 

该安排的都安排上了,小编就坐等你的下一个H5来刷屏了!


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易:H5案例大汇总(干货精选)——2018大合集第4波

网易云音乐那些刷屏,和未刷屏的H5案例,你能总结到什么?

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

方式一:

通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿

方式二:

在电脑端,进入H5案例发布界面,自己编写

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~