项目1 认识H5页面　/ 1
项目引导　/ 2
1.1 H5页面的基础知识　/ 2
1.1.1 H5是什么　/ 2
1.1.2 H5页面的类型　/ 3
1.1.3 H5页面的风格　/ 5
1.1.4 H5页面的优势与不足　/ 7
1.1.5 H5页面设计的五大原则　/ 8
1.1.6 AI时代下的H5页面设计趋势　/ 9
1.2 如何学好H5页面设计　/ 9
1.2.1 优秀的H5页面设计作品应具备的特点　/ 9
1.2.2 H5页面设计人员应具备的能力　/ 11
1.3 H5页面的设计与制作流程　/ 12
1.3.1 明确设计目标　/ 12
1.3.2 内容策划　/ 12
1.3.3 页面设计　/ 13
1.3.4 交互设计　/ 16
1.3.5 H5页面的发布　/ 16
1.4 项目实训　/ 16
实训一 利用AI收集旅游推广H5页面素材　/ 17
实训二 制作旅游推广H5页面　/ 17
实战演练　/ 18
项目2 H5页面设计的注意事项和工具　/ 19
项目引导　/ 20
2.1 H5页面设计注意事项　/ 20
2.1.1 浏览器的选择　/ 20
2.1.2 H5页面的常用设计尺寸　/ 21
2.1.3 H5页面的安全区　/ 21
2.2 H5页面元素设计工具　/ 22
2.2.1 功能强大的设计工具——Photoshop　/ 22
2.2.2 专业的矢量图绘制工具——Illustrator　/ 22
2.2.3 视频特效制作工具——After Effects　/ 23
2.2.4 音效设计制作工具——Audition　/ 24
2.3 H5页面的设计与制作工具　/ 24
2.3.1 定制推广H5页面制作工具——MAKA　/ 24
2.3.2 微场景H5页面制作工具——人人秀　/ 25
2.3.3 专业H5页面制作工具——意派Epub360　/ 25
2.3.4 在线编辑H5页面工具——iH5　/ 26
2.4 H5页面的辅助设计工具　/ 27
2.4.1 图片、音视频压缩工具——格式工厂　/ 27
2.4.2 二维码生成工具——草料二维码　/ 27
2.4.3 手机预览设计稿工具——PS Play　/ 28
2.5 AI创意设计工具　/ 28
2.5.1 文本生成工具——DeepSeek、文心一言　/ 28
2.5.2 图像生成工具——Midjourney　/ 29
2.5.3 视频生成工具——即梦AI　/ 30
2.5.4 视频制作工具——剪映　/ 31
2.5.5 音频生成工具——讯飞智作、网易天音　/ 32
2.5.6 创意设计工具——墨刀、Pixso　/ 32
2.6 项目实训　/ 34
实训一 使用文心一言生成中文网站中秋节H5活动方案　/ 34
实训二 使用即梦AI和MAKA制作中秋节H5活动页面　/ 35
实战演练　/ 36
项目3 H5页面的设计基础　/ 38
项目引导　/ 39
3.1 原型图　/ 39
3.1.1 原型图是什么　/ 39
3.1.2 原型图应具备的要素　/ 41
3.2 色彩　/ 41
3.2.1 认识色彩的三大要素　/ 41
3.2.2 色彩决定情感　/ 43
3.2.3 色彩决定氛围　/ 48
3.2.4 H5页面的配色方法　/ 49
3.2.5 设计案例： AI生成“你的24小时AI健身管家”H5页面的色彩方案　/ 50
3.3 版面　/ 50
3.3.1 认识H5页面版面类型　/ 50
3.3.2 创建画面焦点　/ 52
3.3.3 单页面视觉层级　/ 53
3.3.4 多页面视觉层级　/ 53
3.3.5 版面设计的原则　/ 54
3.3.6 案例分析：分析“云游北京中轴线”H5页面版面布局　/ 55
3.4 项目实训　/ 56
实训一 使用AI规划与生成H5页面设计方案　/ 56
实训二 使用AI一键生成原型图　/ 57
实战演练　/ 57
项目4 H5页面的素材设计　/ 59
项目引导　/ 60
4.1 H5页面的图片设计　/ 60
4.1.1 H5页面图片素材的获取方法　/ 60
4.1.2 H5页面图片的设计原则　/ 62
4.1.3 设计案例：裁剪H5页面的景图片　/ 64
4.1.4 设计案例：使用AI调整H5页面图片色彩　/ 66
4.1.5 设计案例：绘制H5页面的矢量人物图像　/ 67
4.1.6 设计案例：优化H5页面图片效果　/ 71
4.2 H5页面的文字设计　/ 73
4.2.1 认识H5页面中的文字内容及字体　/ 73
4.2.2 H5页面标题文字的设计技巧　/ 76
4.2.3 H5页面正文文字的设计技巧　/ 77
4.2.4 设计案例：使用AI生成风华国乐标题文字　/ 78
4.2.5 设计案例：制作中秋H5页面文字　/ 79
4.2.6 设计案例：制作招聘H5页面长图文字　/ 81
4.3 H5页面的音效设计　/ 84
4.3.1 H5页面中音效设计的重要性　/ 84
4.3.2 H5页面中音效设计要点与注意事项　/ 84
4.3.3 设计案例：使用Audition制作多轨混音　/ 85
4.3.4 设计案例：使用AI制作配音　/ 87
4.4 项目实训　/ 88
实训一 使用佐糖和Photoshop制作节气H5页面　/ 88
实训二 使用Photoshop制作活动H5页面　/ 89
实战演练　/ 90
项目5 H5页面的动效设计　/ 92
项目引导　/ 93
5.1 H5页面动效设计基础　/ 93
5.1.1 H5页面动效的作用　/ 93
5.1.2 H5页面动效的主要类型　/ 94
5.2 H5页面的内页动效设计　/ 98
5.2.1 内页动效的选择　/ 98
5.2.2 内页动效的层级　/ 98
5.2.3 设计案例：制作微信红包H5页面的内页动效　/ 99
5.3 H5页面的转场动效设计　/ 101
5.3.1 设计转场动效的注意事项　/ 102
5.3.2 设计案例：制作微信红包H5页面的转场动效　/ 102
5.4 项目实训——使用MAKA制作招聘H5页面动效　/ 105
实战演练　/ 106
项目6 H5页面的创意设计　/ 107
项目引导　/ 108
6.1 H5页面的交互创意设计　/ 108
6.1.1 使用H5+720°全景技术查看全景画面　/ 108
6.1.2 使用H5+人脸识别技术让内容更有趣　/ 109
6.1.3 使用H5+物理引擎技术创建虚拟世界　/ 110
6.1.4 使用H5+重力感应技术让用户的互动体验更好　/ 111
6.1.5 使用H5+手指跟随技术让操作更生动　/ 111
6.1.6 设计案例：使用凡科微传单制作全景H5页面　/ 112
6.2 H5页面的动效创意设计　/ 119
6.2.1 使用H5+快闪广告提升浏览体验　/ 119
6.2.2 使用H5+粒子特效提升视觉体验　/ 120
6.2.3 使用H5+视频提升内容的展现效果　/ 121
6.2.4 使用H5+多屏互动提升营销的娱乐性　/ 122
6.2.5 使用H5+GIF动画让画面更生动　/ 123
6.2.6 设计案例：制作快闪广告H5页面　/ 124
6.3 项目实训——制作元旦GIF动画　/ 130
实战演练　/ 131
项目7 综合案例：活动运营H5页面的设计与制作　/ 133
项目引导　/ 134
7.1 制作元宵节活动H5页面的前期准备　/ 135
7.1.1 使用AI构思元宵节活动H5页面　/ 135
7.1.2 使用AI生成元宵节活动H5页面原型图　/ 137
7.1.3 搜集元宵节活动H5页面材　/ 137
7.2 元宵节活动H5页面的计　/ 139
7.2.1 设计元宵节活动标题页　/ 139
7.2.2 设计元宵节活动内容页　/ 143
7.2.3 设计元宵节活动红包页　/ 147
7.2.4 设计元宵节活动介绍页　/ 149
7.3 元宵节活动H5页面的动效、音效添加发布　/ 151
7.3.1 为元宵节活动H5页面添加动效　/ 151
7.3.2 为元宵节活动H5页面添加音效　/ 158
7.3.3 发布元宵节活动H5页面　/ 159
7.4 项目实训　/ 160
实训一 制作活动邀请H5页面　/ 161
实训二 制作活动邀请H5页面动效　/ 162
实战演练　/ 163
项目8 综合案例：产品推广H5页面的设计与制作　/ 165
项目引导　/ 166
8.1 制作产品推广H5页面的前期准备　/ 167
8.1.1 使用AI构思产品推广H5页面　/ 167
8.1.2 使用AI绘制产品推广H5页面原型图　/ 168
8.1.3 搜集产品推广H5页面素材　/ 169
8.2 产品推广H5页面的设计　/ 171
8.2.1 设计产品介绍首页　/ 171
8.2.2 设计产品产地信息介绍页　/ 173
8.2.3 设计制茶工艺介绍页　/ 173
8.2.4 设计产品冲泡介绍页　/ 174
8.2.5 设计产品推广H5页面尾页　/ 175
8.3 产品推广H5页面的动效、音效添加与发布　/ 177
8.3.1 为产品推广H5页面添加动效　/ 177
8.3.2 为产品推广H5页面添加音效　/ 182
8.3.3 发布产品推广H5页面　/ 182
8.4 项目实训　/ 184
实训一 制作口红推广H5页面　/ 184
实训二 制作口红推广H5页面动效　/ 186
实战演练　/ 188
项目9 综合案例：企业招聘H5页面的设计与制作　/ 189
项目引导　/ 190
9.1 制作企业招聘H5页面的前期准备　/ 191
9.1.1 使用AI生成企业招聘H5页面设计构思　/ 191
9.1.2 使用AI制作企业招聘H5页面原型图　/ 192
9.1.3 整理企业招聘内容并搜集素材　/ 193
9.2 企业招聘H5页面设计　/ 195
9.2.1 导入企业招聘H5页面素材　/ 195
9.2.2 制作一镜到底企业招聘H5页面首页　/ 196
9.2.3 制作企业招聘H5页面内页　/ 198
9.3 企业招聘H5页面的动效、音效添加与发布　/ 203
9.3.1 为企业招聘H5页面添加动效　/ 203
9.3.2 为企业招聘H5页面添加音效　/ 206
9.3.3 发布企业招聘H5页面　/ 206
9.4 项目实训——制作招聘简章H5页面　/ 207
实战演练　/ 209