H页面创意设计（AI协同）（全彩慕课版）（第3版）-教学大纲

H5页面创意设计（H5页面创意设计（AI协同）（全彩慕课版）（第3版）第第页教学大纲教学大纲开课专业：授课班级：授课教师：（学年第学期）XXX学校课程信息课程名称：H5页面创意设计课程类别：专业基础课/专业核心课课程性质：选修/必修计划学时：28计划学分：2先修课程：无选用教材：《H5页面创意设计（AI协同）（全彩慕课版）（第3版）》，编著，2026年；人民邮电出版社出版教材；适用专业：本书适合作为高等院校H5页面设计与制作类课程的教材，也可作为从事与H5页面设计与制作相关工作的从业人员的参考书。课程负责人：课程简介课程以项目化、实战化教学为核心，通过项目引导、专项实训、实战演练层层递进的教学模式，助力学生构建完整的H5设计知识体系。学习本课程后，学生可熟练掌握H5设计工具、基础原理、素材及动效创作技巧，独立完成活动运营、产品推广、企业招聘等各类商用H5页面的设计与制作。同时，依托AI协同设计思维，能有效拓宽创意设计思路，提升数字视觉表达、交互创新及商业化落地能力，培养严谨的设计思维与实操素养，具备适配新媒体行业岗位的核心竞争力。本课程采用项目化、阶梯式实战教学模式，依托项目引导、专项实训、实战演练的分层教学模块，帮助学生循序渐进搭建系统化的H5设计知识与技能体系。通过学习本课程，学生不仅能够熟练掌握H5设计基础原理、工具操作、素材与动效制作等专业技能，还可以独立完成产品推广、活动运营、企业招聘等多场景H5页面的设计落地，并能突破传统设计思维局限，掌握AI协同设计H5页面的方法，有效提升创意创新、视觉表达与商业落地能力，全面提升新媒体设计相关岗位的就业核心竞争力。课程教学要求序号专业毕业要求课程教学要求关联程度1工程知识2问题分析了解H5页面设计与制作的工具，快速掌握H5页面的设计与制作，以及AI协同的制作方法H3设计/开发解决方案具备设计H5页面的能力，能够根据企业的需求，设计出有吸引力的H5页面H4研究M5使用现代工具M6工程与社会L7环境和可持续发展8职业规范提高H5页面的设计能力，培养H5设计水平H9个人和团队课后练习可以进行分组练习，分担任务，学习配合H10沟通通过小组发言、提交练习或思考报告增强沟通能力与执行能力H11项目管理H12终身学习以终身学习为目标，不断了解当下流行的H5页面设计的相关知识，学习使用图形图像软件设计H5页面，并导入H5页面设计工具中添加动效，提高H5页面的设计与制作的综合能力注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。“关联程度”栏中字母表示二者关联程度。关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。课程教学内容项目名称主要内容重难点关键词学时类型1认识H5页面H5页面的基础知识如何学好H5页面设计H5页面的设计与制作流程H5的概念、类型、风格，H5的优势与不足，H5页面设计的原则；AI时代下的H5页面设计趋势；H5设计作品应具备的特点、H5设计人员应具备的素质，以及H5的设计与制作流程3理论+实训2H5页面设计的注意事项和工具H5页面设计注意事项H5页面元素设计工具H5页面的设计与制作工具H5页面的辅助设计工具AI创意设计工具浏览器的选择、H5的常用设计尺寸、H5页面的安全区，Photoshop、Illustrator、AfterEffects、Audition等元素设计工具，MAKA、人人秀、意派Epub360、iH5等H5页面设计与制作工具；格式工厂、PSPlay、TinyPNG、草料二维码等H5辅助设计工具；DeepSeek、文心一言、Midjourney、即梦AI等AI创意设计工具4同上3H5页面的设计基础原型图色彩版面原型图的概念与应具备的要素，色彩三要素、色彩与情感、氛围的关系，色彩搭配方法；H5页面版面类型及各设计要点3同上4H5页面的素材设计H5页面的图片设计H5页面的文字设计H5页面的音效设计图片素材的获取、图片的设计原则，H5页面中的文字及字体、H5页面标题文字和正文文字的设计技巧，H5页面中音效设计要点及注意事项3同上5H5页面的动效设计H5页面动效设计基础H5页面的内页动效设计H5页面的转场动效设计H5页面动效的作用和主要类型，内页动效的选择、层级；设计转场动效的注意事项3同上6H5页面的创意设计H5页面的交互创意设计H5页面的动态创意设计使用H5+720度全景技术查看全景画面、使用H5+人脸识别技术让内容更有趣、使用H5+物理引擎技术创建虚拟世界、使用H5+重力感应技术让用户的互动体验更强、使用H5+手指跟随技术让操作更生动，使用H5+快闪广告提升浏览体验、使用H5+粒子特效提升视觉体验、使用H5+视频提升内容的展现效果、使用H5+多屏互动提升营销的娱乐性、使用H5+GIF动画让画面更生动3同上7综合案例：活动运营H5页面的设计与制作制作元宵节活动H5页面的前期准备元宵节活动H5页面的设计元宵节活动H5页面的动效、音效添加与发布使用AI构思元宵节活动H5页面，使用AI生成元宵节活动H5页面原型图，搜集元宵节活动H5页面素材，设计元宵节活动标题页，设计元宵节活动内容页，设计元宵节活动红包页，设计元宵节活动介绍页，为元宵节活动H5页面添加动效，为元宵节活动H5页面添加音效，发布元宵节活动H5页面3案例+实训8综合案例：产品推广H5页面的设计与制作制作产品推广H5页面的前期准备产品推广H5页面的设计产品推广H5页面的动效、音效添加与发布使用AI构思产品推广H5页面，使用AI绘制产品推广H5页面原型图，搜集产品推广H5页面素材，设计产品介绍首页，设计产品产地信息介绍页，设计制茶工艺介绍页，设计产品冲泡介绍页，设计产品推广H5页面尾页，为产品推广H5页面添加动效，为产品推广H5页面添加音效，发布产品推广H5页面3同上9综合案例：企业招聘H5页面的设计与制作制作企业招聘H5页面的前期准备企业招聘H5页面设计企业招聘H5页面的动效、音效添加与发布使用AI生成企业招聘H5页面设计构思，使用AI制作企业招聘H5页面原型图，整理企业招聘内容并搜集素材，导入企业招聘H5页面素材，制作一镜到底企业招聘H5页面首页，制作企业招聘H5页面内页，为企业招聘H5页面添加动效，为企业招聘H5页面添加音效，发布企业招聘H5页面3同上考核要求及成绩评定序号成绩类别考核方式考核要求权重（%）备注1期末成绩期末考试大作业50百分制，60分为及格2平时成绩实战训练10次40优、良、中、及格、不及格3平时表现出勤情况102次未参加课程则无法获得学分注：此表中内容为该课程的全部考核方式及其相关信息。学生学习建议学习方法建议1.理论配合课堂实训进行学习，提高学生对H5页面设计与制作的动手能力；2.在条件允许的情况下，可以尝试在不同平台工具软件设计与制作H5页面；3.结合AI工具辅助设计H5页面；4.结合AI工具提升H5页面的创意，并在实际设计H5页面的过程中，结合AI与其他工具、平台，提高多平台的综合应用能力。学生课外阅读参考资料《H5页面设计与制作（全彩慕课版）（第2版）》，周建国编著，2024年，人民邮电出版社《H5页面设计与制作标准教程（全彩微课版）》，彭超编著，2024年，清华大学出版社课程改革与建设本课程内容架构完整、难易梯度合理，课程前期聚焦H5基础认知、设计工具与规范要点，夯实学生入门基础；中期系统讲解H5页面设计基础、素材创作、动态特效、创意构思等核心专业内容，完善学生核心设计知识框架；后期结合活动运营、产品推广、企业招聘三大主流商用场景开展综合项目实训，实现知识点的深度融合与落地应用。本课程立足现代数字设计教学改革需求，摒弃传统课程重理论、轻实操、创意固化的弊端，在常规设计理论与技法教学基础上，融入AI辅助创作、智能素材生成、动效优化、创意赋能等前沿内容，兼顾基础能力培养与创新思维提升。同时，课程坚持案例化、项目化的改革建设思路，所有教学案例与实训项目均源自真实行业工作场景与商业应用需求，贴合当下市场H5设计的主流标准与创作趋势。通过理论结合典型案例、知识点搭配专项实训、综合项目实战复盘的教学模式，引导学生循序渐进吃透专业知识、熟练操作技能，有效拓宽设计思路，