大学本科三年级数字媒体艺术专业电子图形交互设计教案

大学本科三年级数字媒体艺术专业电子图形交互设计教案

一、课程基本信息

本课程定位于大学本科三年级数字媒体艺术专业核心必修课，前置课程包括平面设计基础、程序设计基础（Processing/Java基础），后续衔接移动应用交互设计、用户体验度量与分析等课程。课程总学时为64学时，其中理论讲授24学时，实验实践40学时，学分为3.5学分。本教案聚焦于其中承上启下的关键章节——图形用户界面的动态构建与交互逻辑实现。本教学设计的核心理念在于，从单纯的视觉造型训练跨越至基于用户心理模型的行为逻辑编程，强调图形不仅是视觉呈现，更是可对话、可生长、可反馈的交互实体。我们致力于培养既懂艺术表现又通晓计算思维，能够运用代码进行交互叙事与体验塑造的复合型设计人才。课程将深度融合认知心理学、人机工程学与软件工程思想，引导学生在像素级的微观操作与系统级的宏观架构之间建立深刻的联系。本设计严格遵循以学生为中心、产出导向（OBE）的教学理念，对标国际一流交互设计课程标准，着力提升学生的创新思维、复杂问题解决能力与跨学科协作素养。

二、课程教学目标与毕业要求对应关系

（一）知识目标

【基础】学生能够系统阐述电子图形交互设计的基本概念、发展历程与未来趋势，准确界定交互设计、用户界面、用户体验在电子图形语境下的内涵与外延。学生应熟练掌握至少一种主流图形交互开发环境（以p5.js/Processing为核心，拓展至TouchDesigner基础）的语法规则、绘图API（应用程序编程接口）、事件处理机制与数据结构运用。深入理解图形学基本原理在交互场景下的应用，包括但不限于坐标系统变换、颜色模式（RGB、HSB）的交互式调节、图形变换矩阵、贝塞尔曲线与动态路径生成。系统掌握交互事件的捕获、传递与响应机制，涵盖鼠标、键盘、触摸、摄像头、传感器等多种输入方式的整合调用。学生能够识别并运用面向对象编程思想来构建可复用的交互图形组件，理解状态机、粒子系统、物理引擎在创造动态图形中的基础逻辑。

（二）能力目标

【重要】学生能够独立完成从用户需求分析、交互概念设计、低保真原型绘制到基于代码的高保真可执行原型实现的全流程设计实践。重点培养学生运用计算思维将模糊的设计意图转化为清晰的程序逻辑的能力，即“从想法到代码”的转化能力。通过课程项目实践，强化学生的逻辑思辨与问题拆解能力，能够将一个复杂的交互系统（如一个多人在线绘画应用）分解为若干可独立开发与测试的模块（如网络通信模块、绘图板模块、笔刷样式模块）。培养学生的跨学科协作与沟通能力，能够清晰地向程序员、用户体验研究员、产品经理等不同背景的团队成员阐述其设计决策背后的艺术考量与技术可行性。提升学生的审美判断与技术创新融合的能力，能够在编码过程中不断优化图形表现力，探索超越传统工具限制的视觉语言。

（三）素养目标

【非常重要】塑造以用户为中心的持续同理心，在设计、开发、测试的全过程中，始终将用户的操作习惯、认知负荷与情感体验置于首位。培育严谨求实的科学精神与精益求精的工匠精神，认识到交互设计中的每一个像素、每一次反馈时间差都可能影响最终的产品品质。激发学生对社会、文化、伦理议题的敏感性，引导他们思考电子图形交互技术在信息传播、公共数据可视化、特殊群体辅助等领域的应用所带来的社会责任。养成批判性反思与终身学习的习惯，认识到技术迭代的迅速性，建立通过阅读官方文档、参与开源社区、逆向分析优秀作品等方式进行自主学习的意识。

三、学情分析及教学对策

本课程面向大学本科三年级学生。他们已具备一定的视觉设计基础和初级编程能力，但普遍存在“视觉优先、逻辑滞后”的思维惯性。具体表现为：擅长在Photoshop或Illustrator中绘制静态的精美界面，但难以将这种视觉构思转化为可交互、可变动的代码逻辑；能够模仿教程编写简单的绘图程序，但在面对开放式、不确定的设计任务时，容易陷入“不知道代码能否实现”或“不知道如何用代码表达”的思维困境。此外，学生在面对程序报错时，往往缺乏系统性的调试策略，容易产生畏难情绪。

针对上述学情，本课程的教学对策如下：【重要】采用“脚手架式”教学方法。初期提供高度结构化的代码模板和逐步引导的实验手册，帮助学生建立代码与视觉结果之间的快速映射。中期引入“代码拆解”练习，将优秀开源作品或经典案例的源代码提供给学生，要求他们通过注释、修改参数、局部重构来理解其内在逻辑。后期则完全开放，由学生自主定义项目目标。强化“调试即设计”的理念，专门设置课时讲授常见错误类型（语法错误、运行时错误、逻辑错误）及其系统排查方法，并鼓励学生组成“调试互助小组”，分享报错信息与解决方案。引入“纸上编程”与“伪代码撰写”环节，要求学生在动手敲代码之前，先用自然语言、流程图或伪代码清晰地描述其交互逻辑和程序结构，强制性地将计算思维前置。针对“视觉优先”的特点，教学中将大量运用“对比案例法”，即展示同一设计目标下，不同代码实现方式所带来的微妙视觉差异（例如，用随机噪声与用正弦波控制透明度产生的不同闪烁效果），从而激发学生从代码层面追求视觉精度的兴趣。

四、教材与参考资源处理

本课程无单一教材，采用以经典著作、前沿论文、在线文档和开源项目为核心的复合型资源体系。核心教材为《代码本色：用Processing模拟自然系统》（DanielShiffman著）和《交互设计沉思录》（JonKolko著）。前者提供了从物理模拟到复杂行为的算法思维启蒙，后者奠定了交互设计的理论基石。此外，指定官方文档（/reference）作为首要技术查询工具，强调一手资料的重要性。拓展阅读材料包括ACMSIGGRAPH、CHI会议的相关论文节选，以及《失控》（KevinKelly）、《设计心理学》（DonaldNorman）等跨学科经典。实验教学资源采用自编实验指导书，内含分步式任务、挑战性拓展题和常见问题FAQ。

五、教学实施过程（核心环节，详尽展开）

本部分为课程设计的核心，按照教学周次与主题模块详细展开，总篇幅占比超过80%。

第一模块：图形与交互的初遇——从静态绘图到事件响应（第1-4周）

（一）第一周：像素、画布与第一笔交互

1.课程导入（2学时）【基础】：首次课，不直接讲解语法。展示一系列由代码生成的震撼交互艺术作品，如RafaelLozano-Hemmer的《脉动桌》、TeamLab的沉浸式数字艺术空间，引发学生对“电子图形如何具备生命感”的思考。引导学生讨论：什么是交互？这些作品与传统绘画、雕塑的本质区别是什么？建立本课程的核心基调——图形即过程，而非结果。

2.技术基础（2学时）【基础】：介绍开发环境（p5.jsWebEditor或ProcessingIDE）的安装与使用。讲解程序的基本结构：setup()与draw()函数的区别与协作。【非常重要】理解draw()函数作为无限循环的核心意义，它是图形得以“动起来”和“响应”的根本。通过绘制点、线、基本几何图形（rect,ellipse,line），掌握画布坐标系（原点在左上角，Y轴向下）。讲解颜色模式（默认RGB0-255）与填充、描边（fill,stroke,noFill,noStroke）的设置。

3.第一行交互代码——鼠标事件（2学时）【重要】：讲解mouseX,mouseY系统变量。实验1-1：设计一个简单的绘画板，用鼠标拖动时在画布上连续绘制点或线条。引出鼠标按下事件（mouseIsPressed）与鼠标按键判断（mouseButton）。实验1-2：实现只有按下鼠标左键时才绘画，右键按下时清除画布。【高频考点】mousePressed()函数与mouseIsPressed变量的区别与应用场景分析。

4.课下任务：完成一个“交互式签名”作品，要求使用鼠标动态绘制，并能通过按键（如按‘s’键）保存画布为图片。引入keyPressed()函数基础。

（二）第二周：动态图形与内置变量

1.动画基础（2学时）【重要】：深入理解draw()循环。利用frameCount变量创建随时间变化的动画。实验2-1：实现一个从屏幕中央逐渐放大并变淡的圆。讲解映射函数map()，将时间或鼠标位置映射到图形属性上。实验2-2：让一个圆形跟随鼠标移动，但存在一定延迟（通过线性插值lerp()或简单的位置累加），引出“平滑跟随”的交互体验概念。

2.随机性与噪声（2学时）【重要】：讲解random()函数，产生不可预测的图形效果。实验2-3：用随机的位置、大小、颜色绘制大量圆点，模拟星空或气泡。引申至自然现象的模拟。介绍噪声函数noise()，产生更平滑、更自然的随机变化。实验2-4：用一维噪声控制一个圆形的X轴位置，使其看起来像在随机漫步但又平滑连贯。

3.条件逻辑与状态切换（2学时）【核心难点】：引入if-else结构。讲解如何利用布尔变量来存储交互状态。实验2-5：实现一个开关按钮。当鼠标在屏幕特定区域点击时，切换背景色。引导学生理解“热区”的概念，为后续复杂的界面元素交互奠定基础。讲解mouseClicked()与mousePressed()的区别。

4.课下任务：设计一个“永不相同的动态壁纸”。要求综合运用循环、随机、噪声和鼠标位置影响，使每次刷新或鼠标移动都能生成独特的图案。

第二模块：构建可交互的组件——面向对象与数据结构（第5-8周）

（三）第三周：封装行为——面向对象的交互图形

1.面向对象编程基础（2学时）【非常重要】：讲解类与对象的概念，类比为“图纸”与“按图纸建成的房子”。以“气泡”类为例，定义其属性（X坐标、Y坐标、半径、速度、颜色）和方法（移动、显示、点击检测）。实验3-1：创建一个Bubble类，并实例化一个对象，使其在画布上弹动。

2.对象数组与管理（2学时）【重要】：引入数组（Array）概念，用于存储和管理多个对象。讲解如何用循环创建、更新和显示数组中的所有对象。实验3-2：创建一个包含100个Bubble对象的数组，让它们各自独立运动。【高频考点】在更新和显示循环中，为何有时需要从后往前遍历？这涉及对象的绘制层级（Z-ordering）和删除时的效率问题。

3.对象间的交互（2学时）【核心难点】：在类的方法中加入对自身或其他对象状态的判断。实验3-3：为Bubble类添加“点击分裂”功能。当鼠标点击到某个气泡时，该气泡消失并生成两个更小的气泡。这需要学习在全局或主程序中处理鼠标事件与所有气泡对象的碰撞检测，并将结果反馈给对象数组。【难点】如何高效地在遍历数组的同时安全地添加或删除元素？讲解使用逆向循环或利用临时数组的策略。

4.课下任务：设计一个“粒子模拟器”。必须使用至少两个不同的类（如粒子类、发射器类），粒子之间需有某种简单的交互行为（如相互靠近、远离、或颜色混合），并受鼠标位置影响。

（四）第四周：数据结构与可视化——数组、对象与表格

1.复杂数据管理（2学时）【基础】：回顾一维数组，拓展至二维数组，用于表示网格或矩阵数据。实验4-1：用二维数组创建一个10x10的颜色矩阵，鼠标移动到每个单元格上时改变其颜色。介绍ArrayList动态数组，比较其与普通数组在灵活性的优势。实验4-2：用ArrayList重构第三周的气泡项目，体验动态增删的便利性。

2.外部数据加载与可视化（2学时）【热点】：讲解如何加载并解析外部文本文件或表格（CSV格式）数据。实验4-3：加载一个关于城市气温的CSV文件，将数据映射为画布上的一系列矩形条的高度和颜色，构建一个简单的“交互式数据柱状图”。当鼠标悬停在某个柱条上时，显示具体数值。这初步链接了信息设计与交互设计。

3.图像与像素操作（2学时）【重要】：讲解如何加载并显示图像（loadImage,image）。深入到像素级操作——获取图像的像素数组，并基于其颜色值或亮度值重新生成图形。实验4-4：实现一个“点彩画”效果，读取图像的每个像素，然后根据其亮度决定在对应位置绘制一个小圆点的半径或颜色。鼠标移动时，影响点彩的密度或风格。这将图像处理与交互实时融合。

4.课下任务：完成一个“个人数据日志”可视化项目。要求学生连续一周记录自己的某项数据（如睡眠时长、步数、心情指数），存入CSV文件，然后用代码设计一个富有美感和交互性的可视化作品，允许用户通过鼠标探索不同日期的细节。

第三模块：构建复杂的交互系统——输入、输出与逻辑整合（第9-12周）

（五）第五周：多样的输入方式——拓展交互边界

1.键盘与文字输入（2学时）【基础】：深入讲解keyPressed()、keyReleased()、keyTyped()事件。区分key与keyCode变量。实验5-1：创建一个简单的打字游戏，字母从屏幕上方落下，玩家需敲击对应键盘按键进行消除。讲解如何动态创建和删除代表字母的对象。

2.时间与日期作为输入（2学时）【热点】：讲解内置函数hour(),minute(),second(),millis()。实验5-2：设计一个“一天的时间切片”时钟，将当前时间动态映射为图形艺术。例如，秒针控制背景颜色的微妙变化，小时数控制某个形状的旋转。millis()用于创建基于时间的事件，如“若用户10秒无操作，则进入屏保模式”。

3.麦克风与摄像头输入（2学时）【热点】：介绍p5.js的Sound库与Video库（需额外引入）。实验5-3：获取麦克风音量（getLevel()），并映射为图形的尺寸或运动幅度，创建声音可视化效果。实验5-4：获取摄像头视频流（createCapture()），实现简单的动态捕捉。例如，将摄像头图像灰度化，或根据画面中某个区域的亮度来控制背景色。【重要】讲解用户隐私与权限请求的道德规范。

4.课下任务：选择一个非传统的输入方式（摄像头、麦克风、或通过串口连接的简单传感器），设计一个实验性交互作品，探索人机交互的新形式。

（六）第六周：状态与流程——有限状态机在交互设计中的应用

1.交互状态的复杂性（2学时）【重要】：引导学生思考一个稍复杂的交互系统（如一个设置界面）包含哪些状态？正常、悬停、按下、禁用、选中。用传统的if-else管理多个状态会变得混乱。引入“有限状态机”（FSM）理论，用状态、转移条件和动作来描述系统行为。

2.基于枚举的状态实现（2学时）【核心难点】：讲解用枚举类型（enum）清晰定义所有可能的状态。实验6-1：设计一个简单的播放器界面，包含播放、暂停、停止三个状态。每个状态下，按钮的视觉表现和点击行为都不同。用状态机模型来组织代码，使逻辑清晰易懂。【非常重要】理解状态模式如何让代码更健壮、更易于扩展。例如，要增加一个“快进”状态，只需在枚举中添加并处理相应的转移条件即可，而无需在庞大的if-else中四处修改。

3.状态转换图与代码映射（2学时）【难点】：指导学生为其最终课程项目绘制状态转换图（STD）。然后，在课堂上练习将一个给定的STD（如一个简单游戏的开始、运行、暂停、结束状态）转化为代码骨架。强调设计先行，代码实现紧随其后。

4.课下任务：分析一个熟悉的应用程序（如手机上的音乐播放器）的交互状态，绘制其状态转换图，并尝试用p5.js和枚举实现其核心状态的简化版本。

（七）第七周：图形变换与空间交互——平移、旋转、缩放与矩阵

1.坐标系统与变换基础（2学时）【重要】：讲解translate(),rotate(),scale(),push(),pop()函数。理解这些变换函数影响的是后续所有绘图。讲解push()和pop()如何用于隔离变换效果，是构建复杂层级结构的关键。【非常重要】通过绘制一个“机器人”手臂的例子，展示push/pop在管理父子层级变换（上臂、下臂、手掌）中的威力。

2.基于鼠标的旋转与缩放（2学时）【高频考点】：实验7-1：创建一个“万花筒”效果。将画布分成多个扇区，利用旋转和鼠标X坐标控制每个扇区内图形的旋转角度。实验7-2：实现一个图片浏览器，用鼠标滚轮（mouseWheel事件）控制图片的缩放，用鼠标拖拽（mouseDragged+translate）控制图片的平移。这涉及到窗口与视图的坐标映射，是地图类应用的基础。

3.三维空间基础（2学时）【拓展】：简要介绍WEBGL模式下的三维绘图。讲解盒子、球体的绘制，设置相机位置，以及简单光照。实验7-3：创建一个三维空间，里面漂浮着多个立方体。鼠标移动时，控制整个空间的旋转视角。让学生初步体验三维交互的维度。

4.课下任务：设计一个具有父子层级关系的交互式角色（如一只行走的蜘蛛、一个可操控的机械臂）。角色必须在鼠标或键盘的控制下完成一个协调的动作。

第四模块：综合创新与项目实践（第13-16周）

（八）第八周：期中项目汇报与交叉评审

1.项目展示与答辩（4学时）【非常重要】：每位学生用5分钟展示其前三周（或自选主题）完成的综合性期中项目。项目要求必须整合面向对象、数据结构、多种输入方式和状态机中的至少三个要素。学生需阐述设计理念、技术实现路径、遇到的典型问题及解决方案。

2.交叉点评与技术复盘（2学时）：采用“画廊漫步”形式，学生互评，并使用便利贴写下“亮点”和“建议”。教师引导进行技术复盘，选取2-3个有代表性的案例进行深入技术拆解，共同重构其代码，探讨更优的实现方案。这不仅是评价，更是集体学习和知识升华的过程。

3.建立期末项目小组与选题（2学时）：发布期末项目要求，主题为“未来界面——为特定场景设计创新的电子图形交互方式”。鼓励跨学科选题，如为视障人士设计的触觉音乐界面、用于博物馆的增强现实互动导览（模拟）、基于生物数据的情绪可视化等。学生自由组队（2-3人），并提交初步选题意向。

（九）第九周至第十三周：专题深化与期末项目孵化

1.第九周：网络通信与多设备交互（4学时）【热点】：讲解使用p5.js的httpGet()或httpPost()与简单API进行交互。实验：获取天气JSON数据并可视化。介绍基于WebSockets的实时通信库（如socket.io），实现多客户端间的数据同步。实验：创建一个多人协作画板，多个浏览器窗口可以同时绘画。这为需要协同或物联网交互的期末项目提供技术支持。

2.第十周：物理引擎入门——让图形遵循物理定律（4学时）【热点】：讲解向量（p5.Vector）、力、加速度、速度、位置的基本物理模型。实验：实现一个简单的弹球模拟，包括碰撞检测与动量守恒。介绍第三方物理库（如matter.js）的简单应用，帮助学生快速构建更复杂的物理场景，如刚体碰撞、重力、摩擦力等。

3.第十一周至第十三周：期末项目“闪电演讲”与工作坊式指导（12学时）。每两周进行一次，每次由2-3个小组进行5分钟的“闪电演讲”，汇报项目进展、核心难题和下一步计划。剩余时间采用“工作坊”形式，教师和助教深入各小组进行一对一或小组指导，解决具体的技术实现、交互逻辑或视觉设计问题。指导重点：【重要】引导学生