本书内容深浅适度。在形式上接近按照现代教学需要进行编写，较为适合实际教学，在内容上不但对H5基础知识和常见设计规范及方法进行了介绍，还通过实例的形式，对不同的H5编辑工具进行了介绍，使读者能够掌握不同H5编辑工具的使用方法，从而实现设计与理论的结合，具有较强的实用性。具体特点如下。
1.数媒拳头套系新书
2.全彩慕课版
3.资源非常丰富
4.案例多

随着移动互联网技术的日益普及和迅猛发展，“H5”这个新兴名词逐渐被更多的人认识和了解。本书从H5页面设计与制作的角度出发，以设计案例和项目实践相结合的方式，介绍了H5页面设计与制作的相关知识与操作技能。全书共9章内容，分别是认识H5、认识H5的设计规范和工具、H5页面的设计基础、H5页面的素材设计、H5页面的动效设计、H5页面的创意设计、活动运营H5页面的设计与制作、产品推广H5页面的设计与制作、企业招聘H5页面的设计与制作。各章都设有“学习引导”“项目实训”“实战演练”等模块，能帮助读者理解和掌握H5页面设计与制作的关键知识，开拓读者的设计思维，提高其实际操作能力。本书适合作为高等院校H5页面设计与制作类课程的教材，也可作为从事与H5页面设计与制作相关工作的从业人员的参考书。

第1章认识H51
1.1H5的基础知识2
1.1.1H5是什么2
1.1.2H5的类型3
1.1.3H5的风格7
1.1.4H5的优势与不足8
1.1.5H5页面设计的五大原则9
1.2如何学好H5设计10
1.2.1优秀的H5设计作品应具备的特点10
1.2.2H5设计人员应具备的能力13
1.3H5的设计与制作流程13
1.3.1明确设计目标14
1.3.2内容策划14
1.3.3页面设计15
1.3.4交互设计16
1.3.5H5的生成和发布17
1.4项目实训17
项目一旅游推广H5页面素材的搜集与制作17
项目二邀请函H5页面素材的搜集与制作18
实战演练19
第2章认识H5的设计规范和工具20
2.1H5的设计规范21
2.1.1浏览器的选择21
2.1.2H5的常用设计尺寸22
2.1.3H5页面的安全区22
2.2H5的元素设计工具23
2.2.1功能强大的设计工具——Photoshop23
2.2.2专业的矢量图绘制工具——Illustrator23
2.2.3酷炫视频特效制作工具——AfterEffects24
2.2.4音效设计制作工具——Audition25
2.3H5的设计生成制作工具25
2.3.1定制推广H5制作工具——MAKA25
2.3.2企业营销H5制作工具——易企秀26
2.3.3快速制作H5工具——兔展26
2.3.4微场景H5制作工具——人人秀27
2.3.5照片故事H5制作工具——初页27
2.4H5的创意开发工具28
2.4.1专业H5工具——意派Epub36028
2.4.2在线编辑H5工具——iH529
2.5H5的辅助设计工具30
2.5.1音视频压缩工具——格式工厂30
2.5.2手机预览设计稿——PSPlay31
2.5.3图片压缩工具——TinyPNG31
2.5.4二维码生成工具——草料二维码32
2.6项目实训33
项目一使用MAKA制作H5活动页面33
项目二使用格式工厂将JPG格式的图片转换为PNG格式34
实战演练35
第3章H5页面的设计基础36
3.1H5原型图37
3.1.1H5原型图是什么37
3.1.2H5原型图应具备的要素39
3.2色彩39
3.2.1认识色彩的三大要素39
3.2.2色彩决定情感41
3.2.3色彩决定氛围45
3.2.4H5页面的配色方法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.1H5页面的图片设计57
4.1.1H5页面图片素材的获取方法57
4.1.2H5页面图片的设计原则59
4.1.3设计案例裁剪H5页面的背景图片61
4.1.4设计案例调整H5页面的图片色彩63
4.1.5设计案例绘制H5页面的矢量人物66
4.1.6设计案例优化H5页面的图片效果69
4.2H5页面的文字设计73
4.2.1认识H5页面中的文字及字体73
4.2.2H5页面标题文字的设计技巧76
4.2.3H5页面正文文字的设计技巧77
4.2.4设计案例制作招聘H5页面文字78
4.2.5设计案例制作招聘H5页面长图文字81
4.3H5页面的音效设计84
4.3.1H5页面中音效设计的重要性84
4.3.2H5页面音效素材的获取方法84
4.3.3H5页面音效的选择与添加注意事项85
4.3.4设计案例使用Audition制作音效86
4.4项目实训88
项目一制作节气H5页面88
项目二制作抢红包H5页面89
实战演练90
第5章H5页面的动效设计91
5.1H5页面动效设计基础92
5.1.1H5页面动效的作用92
5.1.2H5页面的主要动效类型93
5.2H5页面的内页动效设计98
5.2.1内页动效的选择98
5.2.2内页动效的层级98
5.2.3设计案例制作微信红包H5页面的内页动效98
5.3H5页面的转场动效设计102
5.3.1设计转场动效的注意事项102
5.3.2设计案例制作微信红包H5页面的转场动效102
5.4项目实训105
项目一制作产品推广H5页面动效105
项目二制作招聘H5页面动效106
实战演练108
第6章H5页面的创意设计109
6.1H5页面的交互创意设计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.2H5页面的动态创意设计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章综合案例产品推广H5页面的设计与制作
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