一级目录：
项目一　初识 H5
项目二  H5 的设计流程与制作策略
项目三  H5 内容创意设计
项目四  H5 页面视觉设计
项目五  H5 页面影音设计
项目六  H5 页面动效设计
项目七  实现 H5 裂变传播

三级目录：
项目一　初识 H5
情景引入................................................... 1
任务一 什么是H5.................................... 2
一、了解H5的概念.............................2
二、剖析H5的优势.............................2
三、AIGC在H5设计中的应用................4
AI赋能：H5页面设计AI工具集.............5
实训任务：体验H5的作用与优势.........5
任务二 辨析H5的类型............................ 6
一、信息展示型................................6
二、场景模拟型................................6
三、动画交互型................................7
四、技术驱动型................................8
五、游戏互动型................................8
实训任务：体验不同类型H5的差异.....9
任务三 探索H5的应用场景................... 10
一、商业促销..................................10
二、互动活动..................................10
三、海报宣传..................................11
四、活动邀请..................................11
五、客户管理..................................12
六、公益宣传..................................12
实训任务：调研不同场景下H5的应用...13
任务四 认识H5的设计工具...................14
一、H5页面快速制作平台.................14
二、H5页面专业设计平台.................17
三、H5页面辅助设计工具.................19
实训任务：体验快速制作H5页面的平台功能.. 20
综合实训：解析品牌H5案例类型特点与营销价值.....21
课后习题.................................................22

项目二  H5 的设计流程与制作策略
情境引入................................................. 23
任务一 H5设计原则规范与实操技巧..... 24
一、运用H5页面设计原则................. 24
二、遵循H5页面设计规范................. 26
三、掌握H5页面设计技巧................. 27
实训任务：拆解优秀H5案例中设计原则的应用... 29
任务二 拆解H5页面制作流程................ 29
一、项目经理：统筹全局................. 30
二、策划人员：方案制作................. 30
三、设计人员：视觉设计................. 32
四、开发人员：技术开发、测试、上线、数据监控反馈... 32
实训任务：策划校园读书节H5流程方案.... 33
任务三 使用易企秀制作H5................... 34
一、制作H5的基本操作.................... 34
二、使用易企秀的编辑器组件.......... 46
三、使用易企秀H5营销获客组件....... 51
AI赋能：使用易企秀AI功能生成H5文案.... 59
实训任务：使用易企秀制作活动邀请函H5..... 60
综合实训：评析品牌H5案例设计原则与规范..... 61
课后习题................................................. 62

项目三  H5 内容创意设计
情境引入................................................. 64
任务一 创作富有情感的内容................. 65
一、深挖痛点.................................. 65
二、戳中泪点.................................. 66
三、激发共鸣.................................. 66
四、沉浸代入.................................. 67
实训任务：借助千问撰写服装品牌母亲节H5情感文案... 68
任务二 借助超级IP创意主题................. 69
一、借势人气公知IP创意主题.......... 69
二、提炼古文化IP元素创意主题....... 69
三、联动多元IP矩阵创意主题.......... 70
AI赋能：使用DeepSeek设计H5创意主题.. 70
实训任务：使用DeepSeek策划融入
古文化元素的H5创意主题................. 71
任务三 撰写H5创意文案....................... 72
一、确定主题.................................. 72
二、拟定标题.................................. 74
三、创意内容.................................. 75
实训任务：借助Kimi创作某手机新品发布会H5文案.... 76
任务四 设计H5创意玩法....................... 77
一、抽奖活动.................................. 78
二、抢红包活动.............................. 78
三、投票问卷.................................. 79
四、趣味小游戏.............................. 80
五、场景模拟.................................. 81
实训任务：使用豆包设计城市音乐节营销活动H5的互动玩法.. 82
任务五 策划爆款H5打造策略................ 83
一、充电增值.................................. 83
二、娱乐消遣..................................84
三、情感共鸣..................................84
四、利益驱使.................................. 85
五、自我展示.................................. 85
六、创意创新.................................. 86
七、热门话题.................................. 87
八、多样交互.................................. 87
实训任务：借助DeepSeek撰写文旅宣传H5策划.... 88
综合实训：撰写国民护肤品牌妇女节情感营销H5方案... 89
课后习题................................................. 90

项目四  H5 页面视觉设计
情境引入................................................. 93
任务一 了解H5页面风格....................... 93
一、水墨风格.................................. 93
二、插画风格.................................. 94
三、手绘风格...................................94
四、科技感风格............................... 95
五、扁平化风格............................... 95
六、简约风格................................... 96
实训任务：鉴别经典H5页面案例的页面风格...97
任务二 设计H5页面色彩........................98
一、设计H5页面配色方案..................98
二、制定H5页面色彩设计策略.........102
三、运用H5配色工具......................104
实训任务：借助AIGC工具设计H5网页配色方案..106
任务三 设计H5页面版式......................106
一、层级分明，元素统一................106
二、排版整齐，视觉舒适................107
三、内容呈现，清晰易读................109
四、适当留白，引导视线............... 110
五、布局合理，视觉平衡............... 110
实训任务：借助AIGC工具设计H5版式..111
任务四 H5页面图片设计......................111
一、优化图版率............................ 112
二、适配图片................................ 112
三、选用图标................................ 113
四、压缩图片................................ 115
实训任务：借助AIGC工具制作H5封面页.. 115
任务五 H5页面文本设计......................116
一、标题设计................................ 116
二、正文撰写................................ 117
三、设置字体................................ 118
四、设置字号与字体颜色............... 119
五、设置间距与对齐方式............... 119
六、设置文字装饰与文字层级.........120
AI赋能：使用即梦AI生成创意文字....122
实训任务：借助AIGC工具设计文旅宣传类H5的文本内容..123
任务六 实战案例——制作“鲜果上市”促销H5页面..124
一、使用即梦AI生成背景图.............125
二、使用Photoshop制作促销H5首页....126
三、将PSD文件导入H5页面..............128
实训任务：使用即梦AI生成品牌发布会邀请函H5页面..130
综合实训：设计企业年会邀请函H5
首页..............................................131
课后习题................................................133

项目五  H5 页面影音设计
情境引入............................................... 134
任务一 设计H5动画/视频.................... 135
一、H5动画/视频制作策略.............. 135
二、运用H5动画/视频制作工具....... 136
三、实战案例——使用剪映专业版制作新能源H5宣传视频片头..... 137
实训任务：借助豆包生成六一儿童节H5开场视频.......144
任务二 设计H5背景音乐/音效............. 145
一、了解H5背景音乐/音效的作用.... 145
二、制作背景音乐/音效的技巧....... 145
三、选择搜集音效素材的渠道........ 146
AI赋能：使用蘑兔AI生成H5背景音乐..... 148
四、实战案例——使用剪映专业版制作H5背景音乐.. 149
实训任务：为六一儿童节H5开场视频添加音频.......151
综合实训：制作香水商品展示H5视频.........151
课后习题............................................... 153

项目六  H5 页面动效设计
情境引入............................................... 154
任务一 实现H5页面动效方法.............. 155
一、视频动画................................ 155
二、CSS3动画................................ 156
三、JavaScript.............................. 156
四、SVG动画................................. 156
五、Canvas动画............................. 157
六、Animate CC动画转Canvas......... 157
实训任务：体验H5案例页面及整体动效...... 158
任务二 优化H5页面动效..................... 159
一、翻页动效................................ 159
二、页面元素动效......................... 160
三、功能性动效.............................161
四、线性运动动效......................... 162
五、元素的形变动效...................... 163
六、平移与缩放动效...................... 163
实训任务：体验不同H5制作平台的动效设置功能..... 165
任务三 案例实战——使用兔展设置H5页面常规动效... 165
实训任务：使用易企秀为元旦放假通知H5设计动效.... 169
任务四 设置H5页面创意动效.............. 170
一、一镜到底动效......................... 170
二、手指跟随动效..........................171
三、VR全景动效............................ 172
AI赋能：使用千问辅助策划景区宣传类H5创意动效设计方案... 173
实训任务：分析H5案例采用的哪种创意动效...... 174
综合实训：设计投票类H5页面动效.............. 175
课后习题............................................... 176

项目七  实现 H5 裂变传播
情境引入............................................... 178
任务一 理解裂变传播的本质与价值.... 179
一、裂变传播的底层逻辑............... 179
二、实现H5裂变的核心要素........... 179
三、分析成功裂变H5的共性特征..... 181
实训任务：拆解成功裂变H5的底层逻辑..... 182
任务二 解析H5主流裂变模式.............. 183
一、设计助力型裂变活动............... 183
二、构建分销/团购裂变链条.......... 184
三、策划互动测试与竞技活动........ 185
四、运用红包与福利激励机制........ 185
五、激发UGC共创与内容征集.......... 186
AI赋能：使用Kimi辅助策划H5裂变模式裂变模式..... 188
实训任务：借助AIGC工具策划线上投票活动H5.... 188
任务三 构建H5裂变传播渠道矩阵...... 189
一、深耕微信生态......................... 189
二、布局跨平台流量.......................191
三、联动合作渠道......................... 193
四、线下渠道赋能......................... 195
实训任务：规划知识付费课程H5微信生态裂变路径..... 196
综合实训：策划城市公益马拉松H裂变方案....... 197
课后习题............................................... 198