H页面创意设计（AI协同）（全彩慕课版）（第3版） 教案全套

教学教案教学教案Premiere+AIGC数字视频编辑与制作（微课版）Premiere+AIGC数字视频编辑与制作（微课版）第教学教案教学教案（学年第学期）（学年第学期）开课专业：开课专业：授课班级：授课教师：XXX学校XXX学校课时内容认识H5页面授课时间135分钟课时3教学目标掌握H5相关核心概念了解AI时代H5设计趋势掌握H5标准设计与制作流程教学重点H5的概念、类型、风格H5页面设计的原则AI时代H5设计趋势H5的设计与制作流程教学难点H5优势与不足；优秀H5作品特征；H5设计人员能力要求教学设计教学思路：（1）通过对H5的概念、类型、风格、优势与不足、设计原则以及AI时代H5设计趋势的讲解，建立对H5页面设计的基础认知；（2）围绕优秀H5作品特点、设计人员必备的能力展开教学，明确学习方向；（3）系统讲解H5页面设计目标、内容策划、页面设计、交互设计、页面发布的全流程；（4）依托教材项目实训模块，完成AI素材收集与H5页面制作实操；（5）通过实战演练巩固知识，提升动手与设计应用能力。教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣。教学资料及要求：除教材中讲解的知识，可以通过其他渠道了解更多H5相关知识，加以学习。教学内容讨论问题：1.是什么？AI时代下的H5页面设计有哪些变化？2.H5设计需具备哪些能力？3.的设计流程是怎样的？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1H5页面的基础知识1.1.1H5是什么1.1.2H5页面的类型1.1.3H5页面的风格1.1.4H5页面的优势与不足1.1.5H5页面设计的五大原则1.1.6AI时代下的H5页面设计趋势1.2如何学好H5页面设计1.2.1优秀的H5页面设计作品应具备的特点1.2.2H5页面设计人员应具备的能力1.3H5页面的设计与制作流程1.3.1明确设计目标1.3.2内容策划1.3.3页面设计1.3.4交互设计1.3.5H5页面的发布1.4项目实训实训一利用AI收集旅游推广H5页面素材实训二制作旅游推广H5页面1.5实战演练小结了解H5的基础知识。掌握如何学好H5设计。掌握H5的设计与制作流程。实战演练搜集邀请函H5页面的素材，然后在Photoshop中整合素材，并输入文字内容，制作完整的H5页面，最后使用MAKA进行交互设计。

课时内容H5页面设计的注意事项和工具授课时间180分钟课时4教学目标掌握H5页面设计的注意事项与常用尺寸规范熟练使用H5元素设计工具、页面制作工具、辅助设计工具以及AI创意设计工具能够根据设计需求合理选择并组合使用工具教学重点H5页面常用设计尺寸与安全区规范Photoshop、Illustrator、AfterEffects、Audition等元素设计工具MAKA、人人秀、意派Epub360、iH5等H5制作平台文心一言、Midjourney、即梦AI等AI创意工具的功能与应用教学难点不同类型工具的搭配使用逻辑AI工具在H5设计全流程中的落地应用方法教学设计教学思路：（1）先讲解浏览器选择、设计尺寸、安全区等H5设计核心注意事项；（2）依次讲解元素设计工具、H5制作工具、辅助设计工具，明确各工具适用场景；（3）重点讲解AI文本、图像、视频、音频、创意协作类工具，贴合教材AI协同理念；（4）通过项目实训完成AI方案生成与H5页面制作；（5）以实战演练强化工具搭配应用能力。教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对重点内容进行着重讲解。教学资料及要求：准备各工具操作界面截图、H5平台账号、AI工具使用方法，要求学生熟悉工具基本操作。教学内容知识回顾：前面介绍了H5页面的基础知识，以及H5设计与制作的流程等内容。讨论问题：1.H5页面设计常用尺寸与安全区要求是什么？2.如何搭配传统设计工具与AI工具完成H5制作？3.H5辅助工具主要解决哪些设计问题？内容大纲：具体可结合本章的PPT课件进行配合讲解。2.1H5页面设计注意事项2.2H5页面元素设计工具2.2.4音效设计制作工具——Audition2.3H5页面的设计与制作工具2.3.1定制推广H5页面制作工具——MAKA2.3.2微场景H5页面制作工具——人人秀2.3.3专业H5页面制作工具——意派Epub3602.3.4在线编辑H5页面工具——iH52.4H5页面的辅助设计工具2.4.1图片、音视频压缩工具——格式工厂2.4.2二维码生成工具——草料二维码2.4.3手机预览设计稿工具——PSPlay2.5AI创意设计工具2.5.1文本生成工具——DeepSeek、文心一言2.5.2图像生成工具——Midjourney2.5.3视频生成工具——即梦AI2.5.4视频制作工具——剪映2.5.5音频生成工具——讯飞智作、网易天音2.5.6创意设计工具——墨刀、Pixso2.6项目实训实训一使用文心一言生成中秋节H5活动方案实训二使用即梦AI和MAKA制作中秋节H5活动页面2.7实战演练小结掌握H5页面设计规范与尺寸要求。熟练使用各类H5设计工具与AI创意工具。能够完成AI辅助下的H5页面基础制作。课后练习（1）使用DeepSeek生成一篇关于“欢乐‘吸一吸’美味饮品”的H5广告文案，并尝试通过调整提示词来生成不同语言风格（如正式、轻松、风趣等）的文案。（2）使用提供的素材在人人秀中制作H5页面，要求完成后的效果美观且能动态显示。课时内容H5页面的设计基础授课时间135分钟课时3教学目标理解原型图的概念与核心要素掌握色彩三要素、色彩情感与配色方法掌握H5页面版面类型、视觉层级与布局原则能够使用AI完成H5原型与色彩方案设计教学重点原型图的核心要素与绘制逻辑色彩情感表达与常用配色方法H5版面类型、视觉焦点与层级设计原则教学难点色彩情感与主题氛围的匹配版面视觉焦点营造与多页面层级统筹AI工具在原型与色彩规划中的应用教学设计教学思路：（1）先讲解原型图是什么、H5原型图应具备的要素，让学生掌握原型图的基础知识；（2）通过介绍色彩的三大要素、色彩决定情感、色彩决定氛围、H5页面的配色方法，让学生掌握色彩的相关知识；（3）通过讲解H5版面类型，以及创建画面焦点、单页面视觉层级、多页面视觉层级、让版面设计的原则，让学生掌握版面的相关知识；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对重点内容进行着重讲解。教学资料及要求：提供原型模板、配色参考、优秀H5版面案例，要求学生完成基础布局练习。教学内容知识回顾：前面讲解了H5设计要求及各种设计工具等。讨论问题：1.原型图应包含哪些核心要素？2.如何用色彩传递H5的主题情感？3.怎样构建清晰的H5页面视觉层级？内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1原型图3.1.1原型图是什么3.1.2原型图应具备的要素3.2色彩3.2.1认识色彩的三大要素3.2.2色彩决定情感3.2.3色彩决定氛围3.2.4H5页面的配色方法3.2.5设计案例：AI生成“你的24小时AI健身管家”H5页面的色彩方案3.3版面3.3.1认识H5页面版面类型3.3.2创建画面焦点3.3.3单页面视觉层级3.3.4多页面视觉层级3.3.5版面设计的原则3.3.6案例分析：分析“云游北京中轴线”H5页面版面布局3.4项目实训实训一使用AI规划与生成H5页面设计方案实训二使用AI一键生成原型图3.5实战演练小结掌握H5原型图的基础知识。掌握色彩、版面的相关知识。实战演练（1）随着夏天的到来，某家电品牌准备使用DeepSeek规划和生成主题为“夏日清凉碰一碰”的H5页面设计方案，要求先生成多个设计方案，再从中选择一个合适的方案，并使用墨刀生成原型图。（2）鉴赏下图所示的“时光候车站”H5页面，分析该页面中的色彩、版面等方面，并阐述其展现方式。课时内容H5页面的素材设计授课时间135分钟课时3教学目标掌握H5图片素材获取、处理与设计原则掌握标题文字与正文文字的设计技巧掌握H5音效设计要点与制作方法能够使用AI优化与生成图片、文字、音效素材教学重点H5图片设计原则与处理方法标题与正文文字设计技巧音效设计要点Audition混音与AI配音制作教学难点文字视觉表现力提升音效节奏与画面匹配AI生成素材的风格统一适配教学设计教学思路：（1）首先讲解H5页面图片素材的获取方法、H5页面图片的设计原则，然后通过设计案例进行理论与实践的结合学习；（2）接着认识H5页面中的文字及字体，讲解H5页面标题文字的设计技巧、H5页面正文文字的设计技巧等知识，再通过招聘H5页面文字的制作进行综合提升；（3）然后讲解H5页面中音效设计的重要性、H5页面音效素材的获取方法、H5页面音效的设计要点与注意事项等知识，并通过Audition音效制作和AI制作配音巩固学习；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对重点内容进行着重讲解。教学资料及要求：提供字体库、音效素材、参考图片，要求学生完成原创素材设计。教学内容知识回顾：在前面讲解了原型图、色彩、版面等H5页面设计的基础知识。讨论问题：1.H5图片设计应遵循哪些原则？2.如何让H5标题文字更具吸引力？3.H5音效设计需要注意什么？内容大纲：具体可结合本章的PPT课件进行配合讲解。4.1H5页面的图片设计4.1.1H5页面图片素材的获取方法4.1.2H5页面图片的设计原则4.1.3设计案例：裁剪H5页面的背景图片4.1.4设计案例：使用AI调整H5页面图片色彩4.1.5设计案例：绘制H5页面的矢量人物图像4.1.6设计案例：优化H5页面图片效果4.2H5页面的文字设计4.2.1认识H5页面中的文字内容及字体4.2.2H5页面标题文字的设计技巧4.2.3H5页面正文文字的设计技巧4.2.4设计案例：使用AI生成风华国乐标题文字4.2.5设计案例：制作中秋H5页面文字4.2.6设计案例：制作招聘H5页面长图文字4.3H5页面的音效设计4.3.1H5页面中音效设计的重要性4.3.2H5页面中音效设计要点与注意事项4.3.3设计案例：使用Audition制作多轨混音4.3.4设计案例：使用AI制作配音4.4项目实训实训一使用佐糖和Photoshop制作节气H5页面实训二使用Photoshop制作活动H5页面4.5实战演练小结能够独立完成H5图片、文字、音效素材设计。熟练使用AI工具提升素材质量与效率。掌握素材与H5页面风格统一的设计方法。实战演练（1）使用美图设计室和Photoshop处理图片颜色和多余物品。由于拍摄的风光图片偏暗，不能直接使用，要求先使用美图设计室中的AI工具优化色彩，提升图片美观度，同时使用污点修复画笔工具、修补工具等，去除多余动物。（2）使用Midjourney和Photoshop制作中秋节H5页面。在制作时先绘制背景，然后使用AI搜集月饼、玉兔等主要素材，最后输入文字。（3）使用美图设计室和Photoshop制作阅读H5页面。在制作时先使用美图设计室对阅读素材进行调色，然后使用Photoshop添加文字，制作出最终的阅读H5页面。课时内容H5页面的动效设计授课时间135分钟课时3教学目标理解H5动效的作用与类型掌握内页动效选择与层级设计掌握转场动效设计要点能够在H5平台完成流畅的动效与转场制作教学重点H5动效的作用与主要类型内页动效选择、层级设置，转场动效设计的注意事项与实操方法教学难点动效节奏控制转场流畅度优化动效与内容、设计需求的匹配教学设计教学思路：（1）通过介绍H5页面动效的作用、H5页面的主要动效类型，让学生了解H5页面动效设计的基础；（2）先介绍内页动效的选择、内页动效的层级，再通过微信红包H5页面的内页动效设计案例，让学生学会如何设计内页动效；（3）先介绍设计转场动效的注意事项，再通过微信红包H5页面的动效转场设计案例，让学生掌握转场动效的设计方法；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对重点内容进行着重讲解。教学资料及要求：提供动效参考案例、平台操作步骤，要求学生完成动效调试练习。教学内容知识回顾：前面讲解了H5页面的图片设计、文字设计和音效设计等内容。讨论问题：1.动效在H5页面中起到哪些作用？2.如何避免动效过度影响阅读体验？3.转场动效设计需要注意哪些细节？内容大纲：具体可结合本章的PPT课件进行配合讲解。5.1H5页面动效设计基础5.1.1H5页面动效的作用5.1.2H5页面动效的主要类型5.2H5页面的内页动效设计5.2.1内页动效的选择5.2.2内页动效的层级5.2.3设计案例：制作微信红包H5页面的内页动效5.3H5页面的转场动效设计5.3.1设计转场动效的注意事项5.3.2设计案例：制作微信红包H5页面的转场动效5.4项目实训——使用MAKA制作招聘H5页面动效5.5实战演练小结掌握动效设计基础逻辑与类型。能够制作流畅的内页动效与转场动效。懂得合理控制动效强度提升用户体验。实战演练在MAKA中添加家居H5页面的相关素材，然后依次为文字和图片添加动效，完成后分享到微信平台。

课时内容H5页面的创意设计授课时间135分钟课时3教学目标掌握H5高级交互创意技术掌握动态视觉创意设计方法能够将全景、人脸识别、粒子、快闪、多屏互动等技术与H5创意结合教学重点720°全景、人脸识别、物理引擎、重力感应、手指跟随等交互创意快闪、粒子、视频、多屏互动、GIF动画等动态创意教学难点新技术与创意策划的融合互动体验流畅性、创意效果的实现与调试教学设计教学思路：（1）先介绍H5+720度全景技术、H5+人脸识别技术、H5+物理引擎技术、H5+重力感应技术、5+手指跟随技术，再通过制作凡科微传单全景H5页面案例进行实践练习，让学生掌握H5页面的交互创意设计方法；（2）先介绍H5+快闪广告、H5+粒子特效、H5+视频、H5+多屏互动、H5+GIF动画等知识，再通过制作快闪广告H5页面，让学生掌握H5页面的动态创意设计方法；（3）通过项目实训练习本章知识；（4）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解基础知识；（2）重点内容需要结合案例图片来具体讲解。教学资料及要求：提供高级创意H5案例、特效模板，要求学生完成创意方案设计。教学内容知识回顾：在前面讲解了H5页面动效设计的基础知识，以及H5内页动效与转场动效等内容。讨论问题：1.哪些交互技术能显著提升H5互动体验？2.动态特效如何更好地服务于内容表达？3.怎样让创意H5更符合商业传播需求？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1H5页面的交互创意设计6.1.1使用H5+720°全景技术查看全景画面6.1.2使用H5+人脸识别技术让内容更有趣6.1.3使用H5+物理引擎技术创建虚拟世界6.1.4使用H5+重力感应技术让用户的互动体验更好6.1.5使用H5+手指跟随技术让操作更生动6.1.6设计案例：使用凡科微传单制作全景H5页面6.2H5页面的动态创意设计6.2.1使用H5+快闪广告提升浏览体验6.2.2使用H5+粒子特效提升视觉体验6.2.3使用H5+视频提升内容的展现效果6.2.4使用H5+多屏互动提升营销的娱乐性6.2.5使用H5+GIF动画让画面更生动6.2.6设计案例：制作快闪广告H5页面6.3项目实训——制作元旦GIF动画6.4实战演练小结掌握高级交互与动态创意设计方法。能够运用新技术打造沉浸式H5体验。提升创意策划与商业落地结合能力。课后练习（1）使用凡科微传单制作房屋720°全景H5页面。在制作时先将背景添加到720°全景中，再依次添加素材并设置动效。（2）使用凡科微传单制作暑假夏令营招生的快闪广告H5页面。在制作时先添加快闪页面，依次调整背景颜色，并输入文字。（3）使用Photoshop制作夏日H5页面的GIF动画，制作完成后可使文字以动画的形式展现。

课时内容综合案例：活动运营H5页面的设计与制作授课时间135分钟课时3教学目标掌握活动运营类H5全流程制作方法能够使用AI完成活动H5构思、原型生成、素材搜集掌握H5页面设计、动效音效添加与发布上线操作教学重点AI辅助活动H5构思与原型制作活动标题页、内容页、红包页、介绍页设计动效与音效添加，H5发布设置教学难点活动氛围营造、参与感设计、视觉统一性把控、转化引导逻辑设计AI在活动运营H5页面中的辅助应用教学设计教学思路：（1）通过AI构思元宵节活动H5页面，明确该H5页面的设计构思，然后使用AI绘制原型图并搜集素材，做好前期准备工作；（2）根据前期准备的内容，进行元宵节活动H5页面的标题页、内容页、红包页、介绍页的设计；（3）接着为元宵节活动H5页面添加动效和音效，最后再发布元宵节活动H5页面；（4）通过项目实训练习活动运营型H5页面的设计与制作方法；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解设计思路；（2）使用各设计软件设计H5页面，并添加音效和动效；（3）重难点内容着重进行讲解。教学资料及要求：除教材中的活动运营型H5页面外，学生还可以设计并制作其他的H5页面，提升自己的设计与制作能力。教学内容知识回顾：前面讲解了H5页面的交互创意设计与动态创意设计等内容。讨论问题：1.活动运营H5的核心设计目标是什么？2.如何提升活动H5的用户参与感？3.活动H5发布前需要检查哪些内容？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1制作元宵节活动H5页面的前期准备7.1.1使用AI构思元宵节活动H5页面7.1.2使用AI生成元宵节活动H5页面原型图7.1.3搜集元宵节活动H5页面素材7.2元宵节活动H5页面的设计7.2.1设计元宵节活动标题页7.2.2设计元宵节活动内容页7.2.3设计元宵节活动红包页7.2.4设计元宵节活动介绍页7.3元宵节活动H5页面的动效、音效添加与发布7.3.1为元宵节活动H5页面添加动效7.3.2为元宵节活动H5页面添加音效7.3.3发布元宵节活动H5页面7.4项目实训实训一制作活动邀请H5页面实训二制作活动邀请H5页面动效7.5实战演练小结掌握活动运营H5的完整制作流程。能够用AI完成活动H5策划与落地。具备独立发布上线活动H5的能力。实战演练使用素材文件制作端午节活动H5页面。使用Photoshop将H5页面分为首页、活动内容和活动介绍3个部分进行制作。制作完成后使用人人秀制作动效并进行发布。

课时内容综合案例：产品推广H5页面的设计与制作授课时间135分钟课时3教学目标掌握产品推广H5的逻辑架构与制作流程能够使用AI完成产品H5的构思、原型图绘制掌握产品H5页面的设计、动效音效与发布教学重点AI辅助产品推广H5构思与原型图绘制产品介绍首页、产地信息介绍页、制茶工艺介绍页、冲泡介绍页、尾页的设计产品信息层级与视觉展示优化教学难点产品卖点视觉化表达长页面信息梳理与推广转化引导设计教学设计教学思路：（1）通过AI构思产品推广H5页面，明确该H5页面的设计思路，然后使用AI绘制原型图并搜集素材，做好前期准备工作；（2）根据前期准备的内容，进行产品推广H5页面的各页面的设计；（3）接着为产品推广H5页面添加动效和音效，最后再发布产品推广H5页面；（4）通过项目实训练习产品推广H5页面的设计与制作方法；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解设计思路；（2）使用各设计软件设计H5页面，并添加音效和动效；（3）重难点内容着重进行讲解。教学资料及要求：提供产品素材、文案、参数信息，要求学生完成产品推广H5制作。教学内容知识回顾：前面讲解了元宵节活动H5页面设计与制作的前期准备、元宵节活动H5页面的标题页、内容页、介绍页等的设计，以及音效、动态的添加和页面的发布等内容。讨论问题：1.产品推广H5如何突出核心卖点？2.产品信息展示的合理顺序是什么？3.怎样提升产品H5的传播与转化效果？内容大纲：具体可结合本章的PPT课件进行配合讲解。8.1制作产品推广H5页面的前期准备8.1.1使用AI构思产品推广H5页面8.1.2使用AI绘制产品推广H5页面原型图8.1.3搜集产品推广H5页面素材8.2产品推广H5页面的设计8.2.1设计产品介绍首页8.2.2设计产品产地信息介绍页8.2.3设计制茶工艺介绍页8.2.4设计产品冲泡介绍页8.2.5设计产品推广H5页面尾页8.3产品推广H5页面的动效、音效添加与发布8.3.1为产品推广H5页面添加动效8.3.2为产品推广H5页面添加音效8.3.3发布产品推广H5页面8.4项目实训实训一制作口红推广H5页面实训二制作口红推广H5页面动效8.5实战演练小结掌握产品推广H5完整制作流程。能够清晰地展示产品信息与核心卖点。能够完成产品H5商业化落地设计。课后练习（1）使用素材文件制作家装节产品推广H5页面。使用Photoshop将H5页面分为首页、产品介绍1、产品介绍2、活动信息4个部分进行设计。（2）使用人人秀制作家装节产品推广H5页面的动效。在设计时先