H5匠人手册

这是一本关于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 是如何诞生的”工作坊，
从设计角度，全面、系统地讲解了 H5 的交互方法，视觉设计思路、表现手法，动效
的基础知识、作用和工具运用，吸引了众多设计师参与其中。我们的授课内容有幸
被清华大学出版社关注，并且我们的内容价值也得到了充分的认可，于是有了这本
《H5 匠人手册：霸屏 H5 实战解密》的诞生。
“他们心存理想，不是简单迎合或玩弄市场 , 而是根据自己的独特审美和专注精
神进行创新、创作，给市场带来许多影响力深远的产品和作品。”
这是网易集团的董事长兼 CEO 丁磊对匠人精神的解释。匠人精神既是消费升级
品牌创新的大时代要求，也是网易旗下各产品线一直标榜的核心理念，代表着我们
对作品精益求精的追求，我们也希望读者能从这本书中获益，以匠人精神要求自己，
成为一名优秀的复合型设计师。
在阅读本书之前，希望您能了解以下几个问题：Why、Who、What、How。

Why——我们为什么要做 H5
这是由移动传播特性决定的。纸媒时代，用户角色是单纯的读者，具有信息传
播单向、被动接受、近乎零互动等特点。PC 时代，用户可以通过跟帖等形式与媒体
进行简单互动。进入移动时代，微博、微信等社交媒体让用户从单一的读者变成读
者兼传播者，甚至是内容生产者，移动终端的便携性和移动网络的普及也彻底解放
了 PC 终端的桌面束缚。媒体传播形态也由单向传播变成了社交化传播。
H5 将图片、文字、视频、音频与交互、游戏化、用户 URC 等多种媒体形态完
美融合，与 App 相比，基于 Web 的产品形态决定了 H5 社交传播的可能性，具有
强互动、可监测、跨平台、易传播等优势，所以H5在2年时间内迅速得到互联网用户、
商家及业界的广泛认可，爆款 H5 对媒体品牌价值、商家产品调性都有很大的提升，
于是无论是网络媒体还是移动广告都对这种形式趋之若鹜。

Who——用户是谁
H5 以媒体渠道实现冷启动，在社交网络产生流量分发，最终达到爆发效应。以
网易新闻为例，核心型用户为 70 后至 85 后，成长型用户为 85 后至 95 后，潜力
型用户为 95 后至 00 后，我们的 H5 目标受众为 85 后至 00 后的成长型和潜力型用
户群体。在社交渠道，根据微信的相关报告显示，60% 的微信用户是年轻人（15~29
岁），每个年轻人平均有 128 个好友。所以，吸引这部分人的注意，并让其产生主
动传播欲望，就能在社交网络产生蝴蝶效应，引发爆款的产生。

What——优质 H5 的评判标准
一个成功的 H5 需要具备以下特质：主题具备一定的传播性，能够触及当下热点，
用户在看到标题后有点击欲，信息传播上及时有效，能激发用户的想象力；视觉层
面有表现力、有张力，移动环境下的浏览习惯具有碎片化、目的性不强等特点，视
觉感知往往是吸引用户停留的首要因素；产品形态及交互体验上有创新点，简单易用，
用户能快速理解交互逻辑，顺畅完整地完成全部交互过程，并且通过交互产生与用
户关联的个性化信息。以上三点最终形成用户精神体验上的获得感、愉悦感，产生
情感共鸣，进而形成社交分享意愿。
H5 的成功标准可归纳为三个逐层递进的层级：第一层级，信息传播准确有效到
达、交互顺畅舒适；第二层级，用户的参与感强，分享意愿强；第三层级，能够引
发用户情感共鸣，提升产品的品牌调性。

How——怎么做一个 H5
这是本书要为大家解决的核心问题，我们会从产品策划、用户心理、交互手段、
视觉渲染、动效运用、移动界面设计常识等方面来系统论述讲解，通过理论和案例
分析详细介绍提升 H5 设计质量的方法和一些实用性强的手段，同时帮助大家建立一
个更加完整的 H5 设计思维体系。
第 2 章在策划部分重点讲解如何利用“心流理论”控制阅读节奏和如何利用“Hook 理论”
控制交互节奏，引导用户完成整个浏览及操作，并从心理学和设计学的理论角度共
同论述交互框架的分类和选取、核心任务的提炼、合适交互模式的选取、常用的 H5
交互规范、移动交互原则、需要关注的核心问题、如何引导用户分享回流等。在梳
理完 H5 的工作流程、逻辑和框架后，在具体交互层面，我们讲解了产出的要求、细
节的完善、需要避免的常见错误。
第 3 章结合实例从创意的视觉表现出发，讨论视觉设计师应该如何进行有目的
的创意，总结分析了当下流行的几类 H5 视觉表现方式的优点，以及在使用这几类表
现手法时要规避的地方和要注意的一些问题。此外，还根据 H5 的内容形式进行分类，
对纯信息展示、游戏互动两类 H5 的视觉表现方法进行了分析，重点介绍了小游戏以
及插画这两类 H5 的视觉套路。
第 4 章解释了动效和动画的相同点和不同点，以及动效在 H5 中的加载、转场、
视觉引导、操作反馈等核心作用，并结合案例对动效的基本运动法则进行讲解。
本书将结合网易传媒设计中心以及其他友商制作的一些 H5 案例，总结成功或失
败的经验，并由此归纳一套行之有效的流程方法，分享给读者，希望能对读者起到
帮助。最后对本书的合作作者表示感谢：徐琳琳、李唯、马然、张天雨参与了第 1
章和第 2 章的编写；陈德进、谢斐、王彦淇、李志、张议文参与了第 3 章的编写；
王锐、孟帅、沈号参与了第 4 章的编写。

第 1 章 铺垫
1.1 H5 的前身今世
1.1.1　H5 是什么
1.1.2　H5 的阶段性发展
1.1.3　我们为什么做 H5
1.2 怎样的 H5 才是好的 H5
1.2.1　情感共鸣 直击内心
1.2.2　构思新奇 有想象力
1.2.3　交互炫酷 有表现力
1.2.4　技术创新 新鲜有趣
1.2.5　加入鼓励 动力十足
1.2.6　反客为主 促进回流
第 2 章 H5 交互流程剖析
2.1 一个 H5 策划的开始，源于好的沟通
2.1.1 邀请参与者开会
2.1.2 明确项目背景
2.1.3 策划常见问题
2.2 策划评估 1：动机——是否能在短时间内吸引用户注意力并完成阅读
2.2.1 利用心流理论控制节奏
2.2.2　利用 Hook 理论引导用户
2.3 策划评估 2：框架——展现形式是否符合策划主题
2.3.1　展示型
2.3.2 引导型
2.3.3 操作型
2.4 策划评估 3：任务——是否提炼出核心任务
2.5 策划评估 4：交互——交互方式与策划是否匹配
2.6 策划评估 5：原则——是否符合移动端的交互原则
2.6.1 简化层级，结构扁平化
2.6.2 降低阅读门槛，减少认知成本
2.6.3 H5 要注意分享属性
2.6.4 一定要注意额外规范
2.7 产出 1：界面落实
2.7.1　快
2.7.2　细
2.8 产出 2：完善细节
2.8.1　关于分享控件与回流入口
2.8.2　文案配合专题
2.8.3　适当的提示
2.8.4　H5 的返回设置
2.8.5　H5 的分段设置
2.8.6　增加彩蛋
2.9 产出 3：沟通跟进，绕坑而行
2.9.1　加载与控制文件大小
2.9.2　避免手势冲突
2.9.3　输入框
2.9.4　播放器
2.9.5　手机适配（iPhone X）
2.9.6　其他设备端打开 H5
2.9.7　微信诱导分享
2.10 产出 4：测试上线与数据监测
2.11 常用交互手段
2.11.1　结合手势激发 H5 亮点
2.11.2　利用好硬件给 H5 添彩
2.11.3　新科技引领新体验
第 3 章 H5 视觉套路
3.1 制作一个 H5，视觉设计师要做什么
3.2 创意的视觉表现
3.2.1　要有目的的创意
3.2.2　创意形式千千万
3.2.3　没有灵感？没关系
3.3 执行——手头功夫很重要
3.3.1　要展示的信息量大怎么办
3.3.2　怎么搞定 H5 小游戏
3.4 万能的插画
3.4.1　做到表里如一
3.4.2　形式很重要
3.4.3　制造氛围
3.4.4　案例赏析 1
3.4.5　案例赏析 2
第 4 章 H5 动效解密
4.1 何为动效
4.1.1　动画与动效
4.1.2　MG 动画与动效
4.1.3　交互与动效
4.2 为何 H5“无动效不欢”
4.2.1　有趣加载治百病
4.2.2　丝滑柔顺的转场
4.2.3　一眼就看懂的引导
4.2.4　反馈动效很有必要
4.2.5　让人惊喜的动态视觉
4.2.6　动画的魅力
4.3 H5 必备的运动法则
4.3.1　基本运动规律
4.3.2　贝塞尔曲线那点事儿
4.3.3　不可忽视的反馈与夸张
4.3.4　情绪的重要性
4.3.5　空间感
4.3.6　节奏
4.4 H5 与电影
4.5 案例解析
4.5.1　《里约小人大冒险》
4.5.2　《2016 请回答》
4.5.3　《滑向童年》
4.5.4　《纪念哈利·波特 20 周年》
参考资料及延伸阅读

产品设计