这是一本关于H5设计方法和设计流程的书，作者为近年来佳作频出的网易传媒设计中心，其代表作品有《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。《H5匠人手册：霸屏H5实战解密》通过交互、视觉和动效三部分内容，从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行系统论述，通过理论讲解和案例分析，详细介绍了提升 H5 设计质量的方法和一些实用性强的手段，帮助读者建立起一个更加完整的 H5 设计思维体系。本书适合从事 H5 相关工作的交互设计师、视觉设计师、动效设计师阅读，也可供致力于 H5 设计的初学者和爱好者参考。

网易传媒设计中心拥有交互用研团队、视觉设计团队近30余人，各团队除了专注自身领域，又时时融合在一起，以科学的设计方法和流程打造高精尖产品。我们以“不断提升网易产品用户体验，带给用户极佳的使用感受”为目标而努力。目前设计中心服务的范围涵盖网易门户旗下所有内容部门，包括新闻、财经、体育、娱乐、科技、直播、原创等多条业务线，并从H5迅猛发展以来，打造出了多款页面浏览量上千万的H5产品，刷爆朋友圈， 例如《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。

行业背景 以 PC 为载体的门户网站时代渐行渐远，所幸网易传媒在移动端的布局较早， 与被迫转型的友商相比略显从容。但作为业务部门的我们所面临的转型压力丝毫未 减，设备终端、用户使用场景、交互手段乃至用户群体的突变，要求我们在业务形 态上也应当有快速的转变。 在传统 PC 时代，我们的业务主形态是各种趋于杂志化的专题，这种近乎纸媒 的传播形态移植到移动端显然不合时宜。2014 年 10 月 28 日，W3C 的 HTML 工 作组正式发布了 HTML5 的正式推荐标准（W3C Recommendation），HTML5 标准的确立让音视频脱离了播放器和插件的束缚，在 Web 中的呈现更加便捷。而在 PC 时代，低版本浏览器在很长一段时间都占据着较高的市场份额，Web 形态受制 于浏览器性能、标准、兼容性等综合因素，因此形态相对单一、简单。移动时代虽 然也存在类似问题，但用户终端的迭代速度与技术性能的提升步调相对一致，让更 多的交互和用户体验形态成为可能。于是 H5 这种移动传播形态在设备转换和技术革 新的双重催化下，应运而生。 成书历程 网易传媒设计中心于 2015 年开始 H5 业务的设计工作，在积累了大量的案例经 验之后，我们于 2016 年底，面向全公司的设计和编辑做了名为“如何做一个涨工 资的 H5”的系列培训，协同编辑、技术团队一起，从策划、交互、视觉、动效、前 端 5 个关键环节设计了主题化课程，在内部取得了不错的反响。2017 年 6 月，我 们在 IXDC 国际体验设计大会上做了“霸占社交媒体的 H5 是如何诞生的”工作坊...