《网页交互设计》实验课程教学大纲
一、课程简介
课程中文名 | 网页交互设计 | ||||||||
课程英文名 | Interactive Web Page Design | 双语授课 | £是 R否 | ||||||
课程代码 | 27114021 | 课程学分 | 3 | 总学时数 | 48（含实践32） | ||||
课程类别 | □专业基础课程 £专业核心课程 R专业选修课程 □其他 | 课程性质 | £必修 R选修 £其他 | 课程形态 | □线上 R线下 □线上线下混合式 □社会实践 □虚拟仿真实验教学 | ||||
考核方式 | □闭卷 □开卷 □课程论文 R课程作品 □汇报展示 £报告 R课堂表现 □阶段性测试 R平时作业 □其他（可多选） | ||||||||
开课学院 | 传媒学院 | 开课 系(教研室) | 网络与新媒体 | ||||||
面向专业 | 网络与新媒体 | 开课学期 | 第3学期 | ||||||
课程负责人 | 李舒迪 | 审核人 | 张建雄 | ||||||
先修课程 | 无 | ||||||||
后续课程 | 无 | ||||||||
选用教材 | 董建明,傅利民,饶培伦.人机交互：以用户为中心的设计和评估[M].北京:清华大学出版社,2013. | ||||||||
参考书目 | 1. 王慧. 网页交互设计艺术与技巧[M]. 广州: 暨南大学出版社, 2021. 2.范凯熹.信息交互设计[M].中国海洋大学出版社,2015. 3.零代码 html5交互动画设计；高等教育出版社；陈志；2017-9； | ||||||||
课程资源 | 无 | ||||||||
课程简介 | 《网页交互设计》课程旨在使学生深入掌握ivx平台的使用技巧，熟悉其工作界面与各类工具属性。通过学习，学生将能够熟练运用ivx实现不同种类的H5页面效果，掌握综合应用技巧以制作精彩的H5实例。课程强调理论与实践相结合，引导学生了解H5设计的一般思路和过程，掌握利用ivx进行网页交互作品制作的基本方法和手段。通过本课程的学习，学生将能够提升网页交互设计能力，为未来的职业发展奠定坚实基础。 | ||||||||
课程目标
表1 课程目标
序号 | 具体课程目标 |
课程目标1 | 熟悉ivx的工作界面和基本操作，熟知ivx各种工具，熟知各种工具的属性，各种效果的制作方法与技巧。熟练掌握不同种类H5页面效果的实现方法。掌握综合应用制作精彩H5实例。 |
课程目标2 | 了解网页交互设计的一般思路和过程，掌握并利用ivx进行网页交互作品制作的基本方法和手段。能够进行交互设计，并具有一定的综合创作能力，有创新思维能力和健康的审美意识以及团结协作能力。在学习交互设计的过程中，培养对用户需求的把控能力，形成用户导向意识。 |
课程目标3 | 养成善于动脑，勤于思考，及时发现问题的学习习惯。具备勤奋学习的态度，严谨求实、创新的工作作风。具备独立思考能力。养成相互沟通、相互帮助的好习惯。具有较强的团队合作意识，能进行良好的团队合作。 |
表2-1 课程目标与毕业要求对应关系
毕业要求 | 指标点 | 课程目标 |
毕业要求1：艺术素养【H】 | 1.1 具备高品质视觉文化传播理念、修养和能力。 | 2 |
毕业要求2：核心技能【M】 | 2.1 具备参与或独立组织网络与新媒体调研、网络与新媒体数据挖掘分析和开发应用的能力。 | 1，2 |
毕业要求3：终身学习【M】 | 3.1具有较强的自主学习能力和视野拓展能力，并具备通过自主学习动获取新知识、学习新方法、了解新技术发展动向的能力，具备一定的网络（含移动互联网）应用、内容产品研发能力和自主创业能力。 | 3 |
三、课程教学内容与方法
表3课程目标、教学内容和方法对应关系
序号 | 项目名称 | 项目来源 | 教学目标（观测点、重难点） | 学时数 | 项目类型 | 要求 | 每组人数 | 教学方法 | 课程目标 |
1 | H5基础认知 | 实验教材 | 学生能够理解H5的基本概念、移动端特点以及H5交互设计要点。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够准确描述H5的定义、移动端特点以及交互设计的基本原则。 | |||||||||
H5与移动端的结合点及交互设计的核心原则。 | |||||||||
2 | Ivx平台熟悉 | 实验教材 | 学生能够熟悉Ivx平台的界面组成、功能以及基本操作流程。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够独立完成Ivx平台的登录、创建项目和基本页面设置。 | |||||||||
Ivx平台的高级功能和复杂操作流程。 | |||||||||
3 | 对象组与时间轴应用 | 实验教材 | 学生能够掌握对象组的操作、页面滚动条的使用以及滑动时间轴控制页面切换的技巧。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
学生能够成功创建对象组、实现页面滚动，并通过滑动时间轴实现页面间的平滑切换。 | |||||||||
对象组的复杂操作和滑动时间轴的精细控制。 | |||||||||
4 | 事件与条件判断 | 实验教材 | 学生能够理解并掌握简单事件、计数器、页面跳转以及条件判断的使用方法。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够独立完成基于事件和条件判断的交互设计，如按钮点击后的页面跳转或内容显示。 | |||||||||
复杂事件的处理和多重条件判断的逻辑设计。 | |||||||||
5 | 画布与动画应用 | 实验教材 | 学生能够熟练使用画布工具进行绘图和编辑，并掌握不同类型动画的制作方法。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
学生能够成功创建和编辑画布内容，实现多种类型的动画效果。 | |||||||||
高级绘图技巧和复杂动画的制作流程。 | |||||||||
6 | 触发事件的交互设计 | 实验教材 | 学生能够理解并掌握触发事件在交互设计中的应用，如动画播放控制、媒体播放控制等。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够独立完成基于触发事件的交互设计，如视频播放按钮的点击控制视频播放。 | |||||||||
触发事件与其他功能的结合使用和复杂交互逻辑的设计。 | |||||||||
7 | 关联与逻辑判断深化 | 实验教材 | 学生能够深入理解关联与逻辑判断在交互设计中的应用，并实现复杂的关联和逻辑判断功能。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够成功实现多种类型的关联和逻辑判断功能，如属性关联、条件判断等。 | |||||||||
高级关联和复杂逻辑表达式的构建与应用。 | |||||||||
8 | 表单制作与数据收集 | 实验教材 | 学生能够掌握表单的制作方法，理解数据收集与分析的基本原理。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
学生能够成功创建表单并实现数据的收集与分析功能。 | |||||||||
表单的复杂布局设计和数据处理的深入应用。 | |||||||||
9 | 3D世界与全景制作探索 | 实验教材 | 学生能够了解3D世界与全景制作的基本概念，并实现简单的3D效果和全景效果。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
学生能够成功创建简单的3D场景和全景效果，并理解其在交互设计中的应用。 | |||||||||
高级3D效果和全景制作的技巧与流程。 | |||||||||
10 | 物理世界应用实践 | 实验教材 | 学生能够理解物理世界的基本概念，并掌握物体添加、碰撞交互等物理效果的应用方法。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
学生能够成功实现基于物理世界的交互设计，如碰撞检测、重力模拟等。 | |||||||||
物理世界的深入理解和复杂物理效果的实现。 | |||||||||
11 | 数据库操作与应用 | 实验教材 | 学生能够理解数据库的基本概念，并掌握数据的提交、输出、绑定以及数组处理方法。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
学生能够成功实现基于数据库的数据提交、输出和绑定功能，理解一维数组和二维数组的应用场景。 | |||||||||
数据库的高级操作和复杂数据处理逻辑的设计。 | |||||||||
12 | H5小游戏制作实践 | 教师开发 | 学生能够综合运用所学知识完成一个简单的H5小游戏制作，包括游戏环节与交互设计以及游戏的发布与测试。 | 3 | 综合性 | 必做 | 1 | 课堂讲授 | 1，2，3 |
学生能够独立完成一个功能完整的H5小游戏，并进行基本的测试与优化。 | |||||||||
游戏的创意构思、复杂交互设计以及性能优化技巧。 |
四、课程考核
（一）考核内容与考核方式
表4-1 课程目标、考核内容与考核方式对应关系
课程目标 | 考核内容 | 所属 学习项目 | 考核占比 | 考核方式 |
课程目标1 |
| 授课与练习 | 42% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
课程目标2 |
| 交互H5设计与制作 | 40% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
| ||||
| ||||
课程目标3 |
| 交互H5团队合作 | 18% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
|
表4-2 课程目标与考核方式矩阵关系
课程目标 | 考核方式 | 考核占比 | ||
期末成绩比例60% | 期中成绩比例20% | 平时成绩比例20% | ||
课程目标1 | 40% | 40% | 50% | 42% |
课程目标2 | 50% | 30% | 20% | 40% |
课程目标5 | 10% | 30% | 30% | 18% |
（二）成绩评定
1.平时成绩评定
出勤率：学生每堂课按时出勤。
课堂参与度：积极回答问题、参与讨论。
课堂作业：取决于平时作业的整体完成效果。平时会让学生分析解读各式H5设计案例，模仿制作，并加入自己的想法，培养他们解决实际问题的能力。
平时成绩（100%）=出勤率（60%）+课堂参与度（20%）+课堂作业完成度（20%）
期中成绩评定
期中作业为分小组H5制作，设计构思、美观性、创新性、细节处理，都是期中作业成绩的影响因素。
期中成绩（100%）= 设计构思（20%）+美观性（20%）+创新性（20%）+交互流畅度（20%）+ 细节处理（20%）
3.期末成绩评定
期末成绩通过考察学生完成的个人作品，来评判学生网页交互设计的综合能力。期末大作业是否按要求及时上交，作品的交互性、整体结构布局、逻辑完整性、制作复杂程度以及细节处理、是否围绕命题展开、是否有一定的创意等因素，都在期末成绩的评定范围内。
期末成绩（100%）= 交互性（20%）+ 整体结构布局（20%）+逻辑完整性（20%）+制作复杂程度（20%）+细节处理等（20%）
4.总成绩评定
总成绩（100%）=平时成绩（20%）+期中成绩（20%）+期末成绩（60%）
（三）评分标准
表5评分标准（非试卷考核项目）
考核项目 | 评分标准 | ||||
优秀 (100>x≥90) | 良好 (90> x≥80) | 中等 (80> x≥70) | 及格 (70> x≥60) | 不及格 (x <60) | |
作品交互性 | 设计独特，交互流畅，用户体验极佳 | 交互设计合理，用户体验良好 | 有基本的交互设计，但不够流畅 | 交互设计存在明显不足 | 无交互设计或设计错误 |
整体结构布局 | 结构清晰，布局合理，美观大方 | 结构合理，布局较整齐 | 结构基本合理，布局稍显杂乱 | 结构布局存在明显问题 | 结构混乱，布局极差 |
逻辑完整性 | 逻辑严密，条理清晰，内容完整 | 逻辑清晰，内容较为完整 | 逻辑基本清晰，内容稍显单薄 | 逻辑不完整，内容有所缺失 | 逻辑混乱，内容严重缺失 |
制作复杂程度 | 制作精细，技术难度高，实现效果好 | 制作较为精细，技术难度适中 | 制作基本符合要求，技术难度一般 | 制作简单，技术难度低 | 制作粗糙，技术难度极低 |
细节处理 | 细节处理到位，无瑕疵 | 细节处理较好，个别小瑕疵 | 细节处理一般，存在明显瑕疵 | 细节处理不足，瑕疵较多 | 细节处理极差，大量瑕疵 |
是否围绕命题展开 | 紧密围绕命题，内容丰富 | 围绕命题展开，内容较丰富 | 基本围绕命题，内容略显单薄 | 与命题有所偏离，内容不足 | 偏离命题，内容严重缺失 |
创意性 | 创新性强，设计新颖独特 | 有一定的创意，设计较为新颖 | 创意一般，设计稍显普通 | 创意不足，设计缺乏亮点 | 无创意，设计陈旧 |
是否按要求及时上交 | 准时提交，无误 | 准时提交，有轻微瑕疵 | 稍晚提交，但内容完整 | 提交时间较晚，内容完整 | 未能按时提交或内容缺失 |
五、其他说明
本课程大纲依据2023年网络与新媒体专业培养方案，由传媒学院网络与新媒体系讨论制定，传媒学院教学工作委员会审定，教务处审核批准，自2023级开始执行。
