《前端互动设计》课程标准

1、前端互动设计课程标准一、课程概述：课程根据岗位工作流程与数字媒体艺术设计专业学生认知事物和解决问题的规律，共安 排课时为64课时，授课顺序由浅入深分为三阶段、六大模块呈能力递增方式组成，每个模 块以一个思政主题作引导，通过任务的知识目标、能力目标、素质目标、技能训练、案例连 接等形式，帮助学生在实践中掌握H5可视化交互的技术和筹划创意技能，和后续的专业课 程形成交互课程体系。第一阶段为初级阶段，是整门课程的基础，包括了初识H5互动设计、基础动画两个模 块。在案例设计中融入了职业道德和大国科技的思政元素。通过学习，学生需掌握软件的基 本使用方法和八大动画的制作技巧，提升动画编辑能力。第二阶段为中

2、级学习阶段，包括H5可视化交互制作、控件的使用、关联技术三个模 块，也是本课程的重点。在案例设计中融入了美丽家乡、社会公德、文化自信的思政元素。 培养学生可视化交互的制作方法，提升交互制作能力。第三阶段为高级能力的进阶，包括H5创意与实现模块。在案例设计中融入了创新精神 和工匠精神的色正。该阶段通过学习115创意来源、创意产生、创意表现、创意实现4个知 识点和技能点，并依托一个真实设计工程贯穿本阶段的学习，使学生全程跟踪工程的始末， 提升学生创意能力和工程掌控能力。二、教学目标通过本课程知识与技能的学习，使学生的创造力、动画编辑能力、H5交互能力、创意 能力和工程掌控能力等技能。引导学生建立正

3、确的职业道德观，树立文化自信与精益求精的 工匠精神，激发对家乡和祖国的热爱。使其掌握技术和艺术相结合的设计方法，拓展设计思 维，具备独立完成H5互动整体设计的职业能力，为专业设计提供方法和途径，能按职业岗 位需求设计制作富有创意与时代感的H5交互作品。(一)知识目标(1)理解H5前端互动的概念和用途；熟悉不同类型H5传播的特点；(2) 了解动画形成原理；掌握H5基础动画的制作方法；熟悉时间轴、帧、关键帧和空 白关键帧的概念及用法；(3)掌握H5的加载页面和动画控制的方法；熟练掌握H5行为与触发事件等交互控制；掌握播放元件、属性、关联的使用方法；掌握H5实用工具的应用技巧；熟悉H5发布信息设置的

4、步骤与主流媒体的尺寸及其屏幕适配技巧；(4)理解H5产品创意的过程；掌握H5产品买点的提炼方法；掌握H5创意方法与表现 技巧；掌握H5从创意到实现的过程；(5)掌握H5 一镜到底等拓展技能的制作方法。(二)能力目标(1)通过完成基础动画的学习，能运用时间轴、关键帧、元件的知识制作出关键帧动 画、运动动画、路径动画、曲线变形动画、遮罩动画、进度动画、预置动画、元件动画；(2)根据软件的设置能上传PSD、GIF,音频、视频等文件并且能将制作好的H5动画 根据屏幕适配进行准确的发布；(3)通过完成H5可视化交互制作知识的学习，能运用行为与触发事件、帧行为交互控 制、页行为交互控制、多图层帧交互设计、

5、播放元件片段、改变元件属性、关联以及幻灯片 效果、擦玻璃、点赞与投票、陀螺随机数、计数器、表单与统计等可视化技巧，制作出既符 合现代审美又具备实用功能的优质H5交互；(3)通过完成H5创意与实现知识的学习，能根据工程分析、运用创意寻找方法、创意 变现方法，选择合适的交互方式独立完成微信、微博H5工程，培养学生创意能力和工程掌 控能力。(三)素质目标(1)在习近平新时代中国特色社会主义思想指引下，通过将中国传统元素、大国科技等 元素融入工程训练中，弘扬中华文化，践行社会主义核心价值观，培养学生的爱国情怀与民 族自豪感以及对家乡的热爱，树立文化自信；(2)通过完成不同类型H5传播的特点和H5概念、

6、用途的学习，培养学生的审美意识与 专业素养；(3)通过导入科技创新手法进行页面智能配色与编排，培养学生创新创意思维，提升科 技创新意识；(4)通过将真实设计工程融入前端互动的实践教学，培养学生精益求精的工匠精神，具备良好的团队协作素质和人际沟通素质。三、教学模式遵循“以学习者为中心”的理念，采用混合式教学，以在线学习为主，适当结合线下面授和讨论等，课程内容在线学习时长达50%以上。学习方式为教师引领、学生微课自学及 工程驱动教学法等。四、教学日历：建议8学时/周教学 模块周次教学主题学习成果学习资源学习活动初识H51.课程简介. H5的概念.H5作品的分 类与欣赏. H5设计流程 与步骤1 .

7、知识点：了解H5的概念；了解H5 的用途；理解H5产品的判断标准 2,能力点：能把不同类型H5动画的 特点带入到工程设计中。能通过三 点分析判断H5产品的优缺点。3.素质点：培养学生正确的审美情 趣和动画思维方式。.课程简介视频. H5的概念微课. H5作品的分类 微课. H5设计流程与 步骤微课.本模块4个知 识点的PPT.拓展资源视频.作业： 分小组，收 集5个优秀 H5作品，并 分析其优缺 点。.在线测试基础 动画2- 3.界面与舞台.文件导入.关键帧动画.运动动画.路径动画曲线变形动 画.遮罩动画.进度动画.预置动画.元件动画.声音与视频上传. H5发布与适配.知识点：掌握软件的基本使

8、用方 法，以及关键帧动画、运动动画、 路径动画、曲线变形动画、遮罩动 画、进度动画、预置动画、音视频 和发布的制作方法。.能力点：能熟练运用6总基础 动画完成具备美感的简易H5动画。.素质点：通过在训练工程中融入 爱国元素，培养学生的爱国情怀与 民族自豪感。.基础动画模块 微课.本模块重点知 识讨论.基础动画微课 所附带的PPT.拓展资源视频.拓展资源图片.作业：课堂案例 制作公司标志 遮照动画 寿司滚动 动画5秒vlog 动画.在线测试 3.在线讨论视交 可化互4L加载页面.帧行为交互.页面交互.播放原件片 段.改变元素属 性.知识点：理解加载页面作用；掌握 可视化交互的4种方式；握绘制工具

9、 的应用；掌握行为与触发事件来设置 交互的方法；掌握帧行为和页面行为 设置交互的方法。.能力点：能设计独特审美的在自主 加载页面。能根据工程要求设置H5按 钮和页面的跳转；能通过对按钮的设 置来控制原件片段。.素质点：通过在训练工程中融入大 国科技，继承与弘扬中华文化。.可视化交互模 块微课.可视化交互模 块微课的ppt.本模块重点知识 讨论.拓展资源视频.拓展资源图片.作业：课堂案例 制作长沙老街 轮播图.在线测试.在线讨论控件5器仪 票赞数埔 投点计陀 L2.3.4.知识点：熟悉8个实用工具的属 性；掌握8个实用工具的设置方法； 掌握8个实用工具对页面、按钮、动 画控制的方法。.能力点：能

10、完成每个实用工具的小 练习；能根据工程选择2-4种工具制 作交互动画。.素质点：通过美丽家乡案例、中国 传统文化融入教学，培养学生的爱国 情怀与民族自豪感，树立文化自信.控件模块中微课.控件模块微课 的ppt.本模块重点知识 讨论.拓展资源视频.拓展资源图片.作业：课堂案例 制作比亚迪汽 车加载页面 长沙老街 轮播图.在线测试 3.在线讨论关联 绑定6.动画关联.公式关联.自动关联.条件判断.逻辑表达式.知识点：掌握舞台关联和元件关联 的区别与作用；理解关联对象和关联 属性的概念；理解播放模式中切换、 同步的用法；掌握属性关联与自动关 联的区别和不同的用法。.能力点：能用所学知识完成卷轴展 学

11、动画任务。能用关联方法控制动 画。.素质点：培养学生自主学习能力和 举一反三的能力；通过在训练工程中 融入中国传统元素，继承与弘扬中华 文化。.关联绑定模块中 微课.关联绑定微课 的ppt.本模块重点知识 讨论.拓展资源视频.拓展资源图片.作业： 课堂案例制 作.在线测试.在线讨论意实 创与现7-8.手术刀案例.天猫双十一 案例,剪刀石头布 案例1 .知识点：掌握H5创意方法和表现技 巧。理解H5设计灵感来源。2能力点：在制作实际案例，能根据 创意综合选择和运用交互技术。3.素质点：通过知识的学习提升审美 素养和专业素质。.创意与实现模块 中视频.创意与实现视 频的ppt.本模块重点知识 讨论.拓展资源视频.拓展资源图片.作业：课堂案例 制作完成全国 大学生广告 大赛命题1 项.在线测试 3.在线讨论展识 拓知选修.学生优秀作 品赏析.广告营销类 案例.公益案例.文化类案例.政府新闻案 例.知识点：掌握创意、技术、视觉三 种H5作品的分析方法。.能力点：运用H5的设计思维、三种 分析法正确分析优秀作