1. 畅销书全面改版，技术、体例系统升级 2. 对接新技术，融入AIGC工具在H5设计与运营中的应用 3. 项目任务式体例，设置丰富的实训，注重实践能力的培养 4. 配套PPT课件、教学方案、教学大纲、设计素材等数字资源

在数字营销迭代升级的当下，H5已成为企业连接用户、传递品牌价值的核心工具。AI 技术的快速发展正为H5设计与运营注入全新活力，推动行业迎来效率与创意的双重升级。本书系统地讲解了H5设计与运营的技巧，共有7个项目，分别是初识 H5、H5的设计流程与制作策略、H5内容创意设计、H5页面视觉设计、H5页面影音设计、H5页面动效设计，以及实现H5裂变传播。本书内容新颖，案例丰富，既可作为高等院校H5设计与制作相关课程的教材，也可作为H5设计从业者、企事业单位营销人员的参考用书。刘源，副教授，威海海洋职业学院数字媒体技术专业负责人。硕士毕业于哈尔滨师范大学美术学院设计艺术学专业，曾任职于联想（北京）设计院，参与联想LEPHONE、LEPAD、夏新系列产品研发与数字交互设计项目。黑龙江省艺术设计协会会员，一级全媒体运营师、Adobe国际认证设计师。先后主持省级重点基金项目1项、市厅及院级课题6项、参与省级教育改革课题8项、发表学术论文20余篇，主持专利5项，主编教材3本。曾获山东省技术能手、山东省职业院校技能大赛一等奖优秀指导教师、省级教学能力大赛二等奖2项、学院优秀教师、优秀共产党员等荣誉称号。廖晓文：重庆城市科技学院网络与新媒体系主任，副教授，主要研究方向为网络与新媒体、数字传播。项目一　初识 H5情景引入................................................... 1任务一 什么是H5.................................... 2一、了解H5的概念.............................2二、剖析H5的优势.............................2三、AIGC在H5设计中的应用................4AI赋能：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营销获客组件....... 51AI赋能：使用易企秀AI功能生成H5文案.... 59实训任务：使用易企秀制作活动邀请函H5..... 60综合实训：评析品牌H5案例设计原则与规范..... 61课后习题................................................. 62项目三 ?H5 内容创意设计情境引入................................................. 64任务一 创作富有情感的内容................. 65一、深挖痛点.................................. 65二、戳中泪点.................................. 66三、激发共鸣.................................. 66四、沉浸代入.................................. 67实训任务：借助千问撰写服装品牌母亲节H5情感文案... 68任务二 借助超级IP创意主题................. 69一、借势人气公知IP创意主题.......... 69二、提炼古文化IP元素创意主题....... 69三、联动多元IP矩阵创意主题.......... 70AI赋能：使用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六、设置文字装饰与文字层级.........120AI赋能：使用即梦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三、选择搜集音效素材的渠道........ 146AI赋能：使用蘑兔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全景动效............................ 172AI赋能：使用千问辅助策划景区宣传类H5创意动效设计方案... 173实训任务：分析H5案例采用的哪种创意动效...... 174综合实训：设计投票类H5页面动效.............. 175课后习题............................................... 176项目七 ?实现 H5 裂变传播情境引入............................................... 178任务一 理解裂变传播的本质与价值.... 179一、裂变传播的底层逻辑............... 179二、实现H5裂变的核心要素........... 179三、分析成功裂变H5的共性特征..... 181实训任务：拆解成功裂变H5的底层逻辑..... 182任务二 解析H5主流裂变模式.............. 183一、设计助力型裂变活动............... 183二、构建分销/团购裂变链条.......... 184三、策划互动测试与竞技活动........ 185四、运用红包与福利激励机制........ 185五、激发UGC共创与内容征集.......... 186AI赋能：使用Kimi辅助策划H5裂变模式裂变模式..... 188实训任务：借助AIGC工具策划线上投票活动H5.... 188任务三 构建H5裂变传播渠道矩阵...... 189一、深耕微信生态......................... 189二、布局跨平台流量.......................191三、联动合作渠道......................... 193四、线下渠道赋能......................... 195实训任务：规划知识付费课程H5微信生态裂变路径..... 196综合实训：策划城市公益马拉松H裂变方案....... 197课后习题............................................... 198