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