第1章 认识H5　/ 1
1.1 H5的基础知识　/ 2
1.1.1 H5是什么　/ 2
1.1.2 H5的类型　/ 3
1.1.3 H5的风格　/ 7
1.1.4 H5的优势与不足　/ 8
1.1.5 H5页面设计的五大
原则　/ 9
1.2 如何学好H5设计　/ 10
1.2.1 优秀的H5设计作品应
具备的特点　/ 10
1.2.2 H5设计人员应具备的
能力　/ 13
1.3 H5的设计与制作流程　/ 13
1.3.1 明确设计目标　/ 14
1.3.2 内容策划　/ 14
1.3.3 页面设计　/ 15
1.3.4 交互设计　/ 16
1.3.5 H5的生成和发布　/ 17
1.4 项目实训　/ 17
项目一 旅游推广H5页面素材的
搜集与制作　/ 17
项目二 邀请函H5页面素材的
搜集与制作　/ 18
实战演练　/ 19
第2章 认识H5的设计规范和工具　/ 20
2.1 H5的设计规范　/ 21
2.1.1 浏览器的选择　/ 21
2.1.2 H5的常用设计尺寸　/ 22
2.1.3 H5页面的安全区　/ 22
2.2 H5的元素设计工具　/ 23
2.2.1 功能强大的设计
工具——Photoshop　/ 23
2.2.2 专业的矢量图绘制
工具——Illustrator　/ 23
2.2.3 酷炫视频特效制作
工具——After Effects　/ 24
2.2.4 音效设计制作工具——
Audition　/ 25
2.3 H5的设计生成制作
工具　/ 25
2.3.1 定制推广H5制作
工具——MAKA　/ 25
2.3.2 企业营销H5制作
工具——易企秀　/ 26
2.3.3 快速制作H5工具——
兔展　/ 26
2.3.4 微场景H5制作工具——
人人秀　/ 27
2.3.5 照片故事H5制作工具——
初页　/ 27
2.4 H5的创意开发工具　/ 28
2.4.1 专业H5工具——意派
Epub360　/ 28
2.4.2 在线编辑H5工具——
iH5　/ 29
2.5 H5的辅助设计工具　/ 30
2.5.1 音视频压缩工具——
格式工厂　/ 30
2.5.2 手机预览设计稿——
PS Play　/ 31
2.5.3 图片压缩工具——
TinyPNG　/ 31
2.5.4 二维码生成工具——
草料二维码　/ 32
2.6 项目实训　/ 33
项目一 使用MAKA制作H5活动页面　/ 33
项目二 使用格式工厂将JPG格式的图片
转换为PNG格式　/ 34
实战演练　/ 35
第3章 H5页面的设计基础　/ 36
3.1 H5原型图　/ 37
3.1.1 H5原型图是什么　/ 37
3.1.2 H5原型图应具备的
要素　/ 39
3.2 色彩　/ 39
3.2.1　/ 认识色彩的三大
要素　/ 39
3.2.2 色彩决定情感　/ 41
3.2.3 色彩决定氛围　/ 45
3.2.4 H5页面的配色方法　/ 46
3.2.5 案例分析 “跑步App”
H5页面的色彩分析　/ 47
3.3 版面　/ 48
3.3.1 认识H5版面类型　/ 48
3.3.2 创建画面焦点　/ 50
3.3.3 单页面视觉层级　/ 51
3.3.4 多页面视觉层级　/ 51
3.3.5 版面设计的原则　/ 52
3.3.6 案例分析 分析“2020
年度店长总结”H5页面
版面布局　/ 53
3.4 项目实训　/ 54
项目一 音乐H5页面的色彩与版面
鉴赏　/ 54
项目二 抽奖H5页面的色彩与版面
鉴赏　/ 54
实战演练　/ 55

第4章 H5页面的素材设计　/ 56
4.1 H5页面的图片设计　/ 57
4.1.1 H5页面图片素材的获取
方法　/ 57
4.1.2 H5页面图片的设计
原则　/ 59
4.1.3 设计案例 裁剪H5页面的
背景图片　/ 61
4.1.4 设计案例 调整H5页面的
图片色彩　/ 63
4.1.5 设计案例 绘制H5页面的
矢量人物　/ 66
4.1.6 设计案例 优化H5页面的
图片效果　/ 69
4.2 H5页面的文字设计　/ 73
4.2.1 认识H5页面中的文字及
字体　/ 73
4.2.2 H5页面标题文字的设计
技巧　/ 76
4.2.3 H5页面正文文字的设计
技巧　/ 77
4.2.4 设计案例 制作招聘H5
页面文字　/ 78
4.2.5 设计案例 制作招聘H5
页面长图文字　/ 81
4.3 H5页面的音效设计　/ 84
4.3.1 H5页面中音效设计的
重要性　/ 84
4.3.2 H5页面音效素材的获取
方法　/ 84
4.3.3 H5页面音效的选择与
添加注意事项　/ 85
4.3.4 设计案例 使用Audition
制作音效　/ 86
4.4 项目实训　/ 88
项目一 制作节气H5页面　/ 88
项目二 制作抢红包H5页面　/ 89
实战演练　/ /90

第5章 H5页面的动效设计　/ 91
5.1 H5页面动效设计基础　/ 92
5.1.1 H5页面动效的作用　/ 92
5.1.2 H5页面的主要动效
类型　/ 93
5.2 H5页面的内页动效设计　/ 98
5.2.1 内页动效的选择　/ 98
5.2.2 内页动效的层级　/ 98
5.2.3 设计案例 制作微信红包H5
页面的内页动效　/ 98
5.3 H5页面的转场动效
设计　/ 102
5.3.1 设计转场动效的注意
事项　/ 102
5.3.2 设计案例 制作微信
红包H5页面的
转场动效　/ 102
5.4 项目实训　/ 105
项目一 制作产品推广H5页面动效　/ 105
项目二 制作招聘H5页面动效　/ 106
实战演练　/ /108
第6章 H5页面的创意设计　/ 109
6.1 H5页面的交互创意
设计　/ 110
6.1.1 使用H5+720度全景技术
查看全景画面　/ 110
6.1.2 使用H5+人脸识别技术让
内容更有趣　/ 111
6.1.3 使用H5+物理引擎技术
创建虚拟世界　/ 112
6.1.4 使用H5+重力感应
技术让用户的互动
体验更强　/ 113
6.1.5 使用H5+手指跟随技术让
操作更生动　/ 114
6.1.6 设计案例 使用凡科微传
单制作全景H5页面　/ 114
6.2 H5页面的动态创意
设计　/ 122
6.2.1 使用H5+快闪广告提升
浏览体验　/ 122
6.2.2 使用H5+粒子特效提升
视觉体验　/ 124
6.2.3 使用H5+视频提升内容的
展现效果　/ 124
6.2.4 使用H5+多屏互动提升
营销的娱乐性　/ 125
6.2.5 使用H5+GIF动画让画面
更生动　/ 126
6.2.6 设计案例 制作快闪广告
H5页面　/ 127
6.3 项目实训 制作元旦GIF
动画　/ 132
实战演练　/ /133
第7章 综合案例 活动运营H5页面的设计与制作　/ 135
7.1 制作元宵节活动H5页面的前期准备　/ 137
7.1.1 元宵节活动H5页面设计
构思　/ 137
7.1.2 绘制元宵节活动H5页面
原型图　/ 138
7.1.3 搜集元宵节活动H5页面
素材　/ 138
7.2 元宵节活动H5页面的
设计　/ 139
7.2.1 设计元宵节活动
标题页　/ 139
7.2.2 设计元宵节活动
内容页　/ 42
7.2.3 设计元宵节活动
红包页　/ 146
7.2.4 设计元宵节活动
介绍页　/ 148
7.3 元宵节活动H5页面的动效
制作与发布　/ 151
7.3.1 为元宵节活动H5页面
添加动效　/ 151
7.3.2 为元宵节活动H5页面
添加音效　/ 157
7.3.3　/ 发布元宵节活动H5
页面　/ 158
7.4 项目实训　/ 159
项目一 制作会议邀请函H5页面　/ 159
项目二 制作会议邀请函H5页面
动效　/ 160
实战演练　/ /162

8.1 制作产品推广H5页面的
前期准备　/ 165
8.1.1 产品推广H5页面设计
构思　/ 165
8.1.2 绘制产品推广H5页面
原型图　/ 166
8.1.3 搜集产品推广H5页面
素材　/ 167
8.2 产品推广H5页面的
设计　/ 168
8.2.1 设计产品推广H5
首页　/ 168
8.2.2 设计产品推广H5
内页　/ 170
8.2.3 设计产品推广H5
尾页　/ 172
8.3 产品推广H5页面的动效
制作与发布　/ 174
8.3.1 为产品推广H5页面添加
动效　/ 174
8.3.2 为产品推广H5页面添加
音效　/ 179
8.3.3 发布产品推广H5
页面　/ 180
8.4 项目实训　/ 181
项目一 制作红酒推广H5页面　/ 182
项目二 制作红酒推广H5页面
动效　/ 183
实战演练　/ /186
第9章 综合案例 企业招聘H5页面的设计与制作　/ 187
9.1 制作企业招聘H5页面的
前期准备　/ 189
9.1.1　/ 企业招聘H5页面设计
构思　/ 189
9.1.2 绘制企业招聘H5页面
原型图　/ 190
9.1.3 整理招聘内容并搜集
素材　/ 191
9.2 企业招聘H5页面的
设计　/ 192
9.2.1 导入企业招聘H5页面
素材　/ 192
9.2.2 设计一镜到底企业招聘
H5页面首页　/ 193
9.2.3 设计企业招聘H5页面
内页　/ 195
9.3 企业招聘H5页面的动效
制作与发布　/ 202
9.3.1 为企业招聘H5页面添加
动效　/ 202
9.3.2 为企业招聘H5页面添加
音效　/ 205
9.3.3　/ 发布企业招聘H5
页面　/ 206
9.4 项目实训 制作招聘简章
H5页面　/ 207
实战演练　/ /210