书籍详情
H5页面创意设计（全彩慕课版）
作者：邓嘉琳 著
出版社：人民邮电出版社
出版时间：2021-09-01
ISBN：9787115552587
定价：¥69.80
购买这本书可以去
内容简介
随着移动互联网技术的日益普及和迅猛发展，“H5”这个新兴名词逐渐被更多的人认识和了解。本书从H5页面设计与制作的角度出发，以设计案例和项目实践相结合的方式，介绍了H5页面设计与制作的相关知识与操作技能。全书共9章内容，分别是认识H5、认识H5的设计规范和工具、H5页面的设计基础、H5页面的素材设计、H5页面的动效设计、H5页面的创意设计、活动运营H5页面的设计与制作、产品推广H5页面的设计与制作、企业招聘H5页面的设计与制作。各章都设有“学习引导”“项目实训”“实战演练”等模块，能帮助读者理解和掌握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
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
猜您喜欢
