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