《H5匠人手册：霸屏H5实战解密》通过交互、视觉和动效三部分内容，从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行系统论述，通过理论讲解和案例分析，详细介绍了提升H5设计质量的方法和一些实用性强的手段，帮助读者建立起一个更加完整的H5设计思维体系。本书适合从事H5相关工作的交互设计师、视觉设计师、动效设计师阅读，也可供致力于H5设计的初学者和爱好者参考。

网易传媒设计中心出书啦！封面是这样子的。

这是一本什么样的书

世界杯陪伴大家度过了一个特别的夏天，虽已落幕，但看球时激动的心情和欢聚、熬夜、啤酒、烧烤等各种因素共同浇灌的记忆，注定值得人回味。而这期间，相信大家的朋友圈也被不少关于世界杯的H5刷屏了。

它们有的勾起我们个人对世界杯的记忆，感慨时代变迁和足球这项体育事业拥有的凝聚力；有的则通过好玩的小游戏，将本届世界杯各种元素混搭，生成专属“幸运足球”，参与感十足；还有的H5“穿越”地将世界杯和古代宫廷联系在一起，通过碰撞擦出火花，让人捧怀。

观看之余，你是否会好奇这些生动有料、趣味十足的H5是怎样做出来的呢？

本书就是针对这个问题进行“解密”。全书共分为4章，第1章主要讲述H5的概念、阶段性发展等基础知识，以及优秀H5应具备的6大特征；第2章剖析H5交互流程；第3章讲解H5设计的视觉套路；第4章则针对H5中的动效进行深入解读。

书中的案例还可以扫码观看，理论和实例结合讲解，方便理解。

第2章的开篇引领全文，告诉你一个H5的诞生要经历以下阶段：项目沟通、策划评估、产出。当然，在每一个阶段中，还有不少细分的环节，如图所示。

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

8区间心流体验模型图

Hook理论模型图

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

确定展现形式之后，则需要找到H5的主要内容和目标人群，提炼核心任务。在此，书中更是提出了“白三角”的方法，将主要内容和目标人群喜欢的东西直接拼在一起做配对，激发想象力。

最后，还要注意匹配交互方式和遵循交互原则。例如，为了适应移动端最好做到结构扁平化，而书中提出得以下几招能帮你减少层级：利用切换并列、设置模态化浮层弹窗、一镜到底等。

以上还只是第2章“交互流程剖析”的部分内容。在第3章中，书中会向你展示各种视觉设计的创意套路，例如利用手绘插画、历史照片完成创意。

设计师也现身说法，辅以案例，详细分析了项目中资料整理、方案优化、分镜及背景绘制的完整过程。

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

当然，有趣的动效背后，一定也是遵守了物体固有的物理法则，如受力规律、波形曲线运动规律等，只有掌握了基本运动规律，才能制作出流畅又合理的动效。例如在《心灵复苏大保健》这个H5项目中，多处动效都使用了贝塞尔曲线。结合案例的讲解，让这些理论知识不那么枯燥，简明易学。

阅读完全书，你会从交互、视觉、动效三大方面全面提高设计效能，掌握提升H5设计质量的方法，建立起更加完整的H5设计思维体系。

关于作者

网易传媒设计中心拥有交互用研团队、视觉设计团队近30余人，各团队除了专注自身领域，又时时融合在一起，以科学的设计方法和流程打造高精尖产品。从H5迅猛发展以来，团队打造出了多款页面浏览量上千万的H5产品，刷爆朋友圈， 例如《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。

《里约小人大冒险》

《滑向童年》

《二零一七娱乐圈画传》

为什么要写这本书

网易传媒设计中心于2015年开始H5业务的设计工作，在积累了大量的案例经验之后，于2016年底，面向全公司的设计和编辑做了名为“如何做一个涨工资的H5”的系列培训，协同编辑、技术团队一起，从策划、交互、视觉、动效、前端5个关键环节设计了主题化课程，在内部取得了不错的反响。

2017年6月，团队在IXDC国际体验设计大会上做了“霸占社交媒体的H5是如何诞生的”工作坊，全面、系统地讲解了H5的交互、视觉、动效的方法和应用，吸引了众多设计师参与其中。工作坊的授课内容有幸被清华大学出版社关注，于是有了这本《H5匠人手册：霸屏H5实战解密》的诞生。

这本书适合哪些人

本书适合从事H5相关工作的交互设计师、视觉设计师、动效设计师阅读，也可供致力于H5设计的初学者和爱好者参考。

如何买到本书

可前往京东商城搜索“H5匠人手册”进行购买

写在最后

“他们心存理想，不是简单迎合或玩弄市场 , 而是根据自己的独特审美和专注精神进行创新、创作，给市场带来许多影响力深远的产品和作品。”这是网易集团董事长兼CEO丁磊先生对匠人精神的解释。

希望我们以匠人之心呈现的这本书，能够为读者带来收获。我们也希望读者能从这本书中获益，以匠人精神要求自己，成为一名优秀的复合型设计师！