H5页面创意设计（全彩慕课版）-图书-人邮教育社区

内容摘要

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

前言

随着移动互联网技术的不断发展，以及移动设备的不断普及，基于移动互联网技术和移动设备的H5开始被广泛应用于广告营销。H5是基于HTML5来实现的，而HTML5是第五代HTML的标准。通俗地讲，H5就是一个网页，它是可以放置文本、图片、音频和视频等多种媒体元素的文件。由于H5具有很强的传播性，许多企业都会使用H5对营销内容进行展示与传播，如企业文化宣传、广告宣传、活动通知、产品促销等。因此，无论是从事设计，还是营销工作，掌握H5页面设计与制作的方法都是非常有必要的。
本书内容全面，深浅适度。在第1章～第2章主要对H5的基础知识进行讲解，第3章～第6章主要对H5页面的设计基础、素材设计、动效设计、创意设计等进行讲解，第7章~第9章则通过3个综合案例讲解不同类型H5页面的设计与制作方法。本书在按照现代教学需要进行编写的基础上，突出了实用性和可操作性。本书不但对H5基础知识和常见设计规范及方法进行了介绍，还通过实例的形式，对不同的H5编辑工具进行了介绍。同时，为了帮助读者快速了解H5，掌握不同类型的H5页面的设计方法，本书在理论讲解环节结合典型案例进行分析。这些案例均来自于实际设计工作和典型行业应用，具有较强的参考性和指导性，可以帮助读者更好地梳理知识，掌握设计方法。
从体例结构上来看，本书采用“知识讲解+项目实训+实战演练”的讲解结构。“知识讲解”中穿插了大量的案例设计，让读者边学边做，快速上手。同时，每章都提供“高手点拨”等小栏目，可以拓宽读者的知识面，提高其应用技巧。“项目实训”板块中的每个项目中都给出了明确的项目目的、制作思路等，部分章节还给出了具体的操作步骤，以理论与实践结合的方式开展教学。每章最后“实战演练”中的练习题，帮助读者提高实操能力。本书在需要扩展讲解的内容处配有二维码，使用手机扫码即可查看学习。
此外，本书赠送丰富的配套资源和教学资源，需要的读者可以访问人邮教育社区网站（https://www.ryjiaoyu.com/），通过搜索本书书名进行下载。具体的资源如下。
（1）素材和效果文件：本书知识讲解、项目实训及实战演练中所有案例的相关素材和效果文件。
（2）MP4教学视频：书中实例操作步骤对应的视频文件。
（3）PPT等教学资源：与教材内容相对应的精美PPT、教学教案、教学大纲和教学题库软件等配套资源。
（4）大量设计资源：H5页面、动画、音效等设计素材，以及大量的拓展设计案例视频。
由于编者水平有限，书中难免存在不足之处，欢迎广大读者、专家给予批评指正。

部分案例集锦

海报

第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

读者评论

赶紧抢沙发哦！

我要评论

展示视频

出版信息

书　　名：H5页面创意设计（全彩慕课版）
执行编辑：本书的内容有任何问题，请联系王亚娜
出版日期：2021-09-01
书　　号：978-7-115-55258-7
作　　者： 邓嘉琳
定　　价：69.80 元
页　　数：210
印刷方式：彩色印刷
开　　本：16开
出版状态：上市销售

作者介绍

邓嘉琳，副教授,硕士，毕业于大连工业大学艺术设计学院,现任教于长沙民政职业技术学院,主要从事视觉传达设计领域的教学与研究工作;湖南省青年骨干教师，全国说课比赛“金教鞭”奖获得者，国家级视觉传播设计与制作专业资源库团队负责人及子课程“包装设计”、“传统纹样美学”主持人，省级精品在线开放课程“包装创意设计”主持人,指导学生获得国内外多项设计赛事奖项,在核心期刊发表专业及教学改革论文多篇。