随着移动互联网技术的日益普及和迅猛发展，“H5”这个新兴名词逐渐被更多的人认识和了解。本书从H5页面设计与制作的角度出发，以设计案例和项目实践相结合的方式，介绍了H5页面设计与制作的相关知识与操作技能。全书共9章内容，分别是认识H5、认识H5的设计规范和工具、H5页面的设计基础、H5页面的素材设计、H5页面的动效设计、H5页面的创意设计、活动运营H5页面的设计与制作、产品推广H5页面的设计与制作、企业招聘H5页面的设计与制作。各章都设有“学习引导”“项目实训”“实战演练”等模块，能帮助读者理解和掌握H5页面设计与制作的关键知识，开拓读者的设计思维，提高其实际操作能力。
本书内容深浅适度。在形式上完全按照现代教学需要进行编写，较为适合实际教学，在内容上不但对H5基础知识和常见设计规范及方法进行了介绍，还通过实例的形式，对不同的H5编辑工具进行了介绍，使读者能够掌握不同H5编辑工具的使用方法，从而实现设计与理论的结合，具有较强的实用性。具体特点如下。
1.数媒拳头套系新书
2.全彩慕课版
3.资源非常丰富
4.案例多
作者多年从事计算机教育工作,有着丰富的教学经验,参与企业项目制作,有着丰富的实践经验,主编过多部教材,得到老师们的认可。作者专注于计算机教材以及教辅资源研发，为学校提供全套完整的教学方案。
第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
书单推荐
