第1章 重新认识H5 13
1.1 H5是什么 14
1.1.1 H5真的就是手机PPT吗？ 14
1.1.2 原来H5只是一个“洋外号” 15
1.2 H5的各项特征 17
1.2.1 H5现阶段的应用领域 17
1.2.2 H5目前的应用形式 20
1.2.3 H5能实现的功能 21
1.2.4 H5的优势与不足 23
第2章 了解H5设计的工具和规范 29
2.1 H5设计要经历的流程 30
2.1.1 认真了解需求 31
2.1.2 做设计规划 31
2.1.3 有计划地设计 32
2.1.4 利用工具制作H5 33
2.1.5 体验与测试 33
2.1.6 总结分析数据 33
2.2 关于H5，你不可不知的工具 35
2.2.1 制作H5的常用工具 35
2.2.2 制作H5最常用软件 38
2.3 H5设计要特别注意的规范 41
2.3.1 选择浏览器 41
2.3.2 常用设计尺寸 42
2.3.3 H5响应式特征 43
2.3.4 页面“安全区” 45
第3章 怎么获得高质量的素材 49
3.1 H5案例素材在哪里找？ 50
3.1.1 资讯网站 50
3.1.2 资讯自媒体 53
3.2 获得图片与设计素材 53
3.2.1 综合类素材库 54
3.2.2 付费类素材库 54
3.2.3 国外素材库 54
3.2.4 图标类素材库 55
3.2.5 素材库的素材库 55
3.2.6 教你寻找图片出处 56
3.3 H5字体素材 57
3.3.1 优质字体素材 57
3.3.2 特殊字体素材 58
3.3.3 实用字体推荐 59
3.4 H5音效素材 61
3.4.1 云音乐搜索平台 61
3.4.2 免费音效素材库 62
3.4.3 版权音效素材库 63
第4章 H5的策划技巧 65
4.1 了解移动端用户习惯 66
4.1.1 画面尺寸差异 66
4.1.2 阅读习惯差异 66
4.1.3 场景习惯差异 67
4.2 根据用户心理设计H5内容 68
4.2.1 认同感 68
4.2.2 奖励 70
4.2.3 熟悉度 71
4.2.4 制造意外 72
4.3 根据项目特征选择对应形式 74
4.3.1 邀请函 74
4.3.2 个人简历 75
4.3.3 企业幻灯片 75
4.3.4 电子宣传册 76
4.3.5 促销广告 77
4.3.6 问卷、信息收集 77
第5章 页面设计技巧 81
5.1 绘制页面原型图 82
5.1.1 什么是原型图 82
5.1.2 H5设计的原型图 82
5.2 把握页面视觉氛围 84
5.2.1 色彩是决定氛围的关键 84
5.2.2 色彩的情感 85
5.2.3 色彩的4种风格 86
5.2.4 页面的3阶配色法 90
5.2.5 配色工具推荐 94
5.3 H5版面设计技巧 95
5.3.1 好的版式让内容更清晰 95
5.3.2 创造画面焦点 96
5.3.3 单个页面的层级 99
5.3.4 多个页面的层级 102
5.3.5 让H5更有节奏感 103
第6章 元素与文字设计技巧 107
6.1 H5的视觉设计技巧 108
6.1.1 图形永远好过文字 108
6.1.2 页面元素要尽量统一 108
6.2 H5的图片设计技巧 109
6.2.1 尽量使用全图 109
6.2.2 可营造空间感 110
6.2.3 多用特写图片 111
6.2.4 图片版式要统一 112
6.3 H5的标题设计技巧 113
6.3.1 标题的空间 113
6.3.2 标题的层级 115
6.3.3 标题与图形 116
6.3.4 标题与背景 116
6.4 H5的正文设计技巧 117
6.4.1 压缩内容量 118
6.4.2 控制字号 119
6.4.3 字体及其颜色 120
6.4.4 字体装饰 121
第7章 动态设计技巧 123
7.1 H5动态基本常识 124
7.1.1 正确理解动效的作用 124
7.1.2 动效要还原物理特征 125
7.2 内页动效设计 126
7.2.1 内容展示动态特征 126
7.2.2 运动样式的统一 128
7.2.3 动效展示的层级 129
7.3 转场动效设计 130
7.3.1 最实用的转场效果 130
7.3.2 转场效果的时间 131
7.4 功能动效设计 131
第8章 音效设计技巧 135
8.1 如何看待音效 136
8.1.1 听觉和视觉哪个更重要 136
8.1.2 声画对位关系 137
8.2 背景音效制作技巧 138
8.2.1 如何获得合适的音效 138
8.2.2 尽量不要使用歌曲 139
8.2.3 音乐要短小 139
8.2.4 加入“淡入”与“淡出”效果 140
8.2.5 学会采集音效 141
8.3 背景音效制作流程 142
8.3.1 用GarageBand制作音效 142
8.3.2 用Audition制作音效 147
第9章 H5数据分析与测试 153
9.1 你要了解的数据常识 154
9.1.1 常规数据概念 154
9.1.2 数据的作用 156
9.2 你也可以做的H5测试 157
9.2.1 好友、朋友圈和社群测试 158
9.2.2 公众号测试 160
第10章 H5设计案例全流程实战 161
10.1 翻页类H5-线下门店案例 162
10.1.1 项目素材（模拟案例） 162
10.1.2 项目主题与内容框架 162
10.1.3 H5原型和设计构思 164
10.1.4 H5制作过程 166
10.2 长图类H5-线下活动案例 176
10.2.1 项目素材 176
10.2.2 项目主题与内容框架 176
10.2.3 H5原型与设计思路 178
10.2.4 H5制作过程 179
10.3 数据类H5-模拟案例 186
10.3.1 项目素材（模拟案例） 186
10.3.2 项目主题与内容框架 186
10.3.3 H5原型和设计构思 188
10.3.4 H5制作过程 189
10.4 功能类H5-模版案例 197
10.4.1 投票模版类H5设计 197
10.4.2 抽奖模版类H5设计 204
10.4.3 小游戏模版类H5设计 209
第11章 H5的进阶学习 215
11.1 普通级H5与专业级H5的差别 216
11.2 H5的更多可能性 217
11.3 专业级H5工具推荐 220
11.3.1 可制作专业级H5的工具 220
11.3.2 工具的几个关键点 220