网易那个屡屡打造爆款H5的团队，终于出书了！
近期，一场黑白色描绘的死亡在朋友圈里迅速蔓延。
她是谁？为何挣扎48小时后死去却无人知晓？
点击查看案例详情：《网易新闻 | 哒哒：她挣扎48小时后死去，无人知晓...》
扫描二维码，倾听最后一个“人类”的独白
（数英 App 用户需点击放大二维码，长按识别）
这支由网易出品的 H5《自白》，将濒危动物的处境移情到人类身上，直击内心深处，引起疯狂转发，短短24小时，PV 逼近千万级，堪比一部畅销影视作品的触达率。
一时间，各种角度的解读和分析的文章也随之出现，这是 Html 5技术诞生6年后，在早已实现技术普及的前提下，每次刷屏案例，还是让无数创作者们热衷讨论其传播规律以及如何讨好用户。
而屡屡创新的网易，是如何保持这么多年的作品量，还不断刷新自己的记录？小编带着疑问，找到了网易 H5 制作团队——网易传媒设计中心。除了《自白》，他们还制作了《睡姿大比拼》、《里约小人大冒险》、《娱乐圈画传》、《纪念哈利·波特20周年》、《滑向童年》等诸多现象级的 H5……
《睡姿大比拼》 H5
扫描二维码，立即体验！
《纪念哈利·波特20周年》 H5
扫描二维码，立即体验！
等等，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 来刷屏了！
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
参与评论
参与评论
推荐评论
全部评论（8条）