课程介绍 · COURSE INTRO第 1 讲
新媒体
交互设计
第 1 讲 · 课程介绍
交互无处不在——这一门课,要让你从「看客」变成内容的「玩家和传播者」。
2026 . 9 . 1
01 / 12
开场 · OPENING
交互
无处不在!
屏幕不再是工具,而是我们生长的环境。每一次点击、滑动、弹幕,都是一次「你来我往」。
02 / 12
概念 01 · CONCEPT交互
什么是「交互」?
双向反馈的动态过程
不是单向的「传递」,而是有来有往的「对话」。一方行动,另一方响应,响应又影响下一步行动——如此循环。
一方行动点击 / 提问
→
另一方响应系统反馈
→
影响下一步循环对话
例子:微信下拉刷新、手机长按弹出菜单——好的交互是「自然」的,用户毫不费力就完成目标。
03 / 12
概念 02 · CONCEPT交互设计 IXD
什么是「交互设计」?
设计人怎么用,
也设计产品怎么回应
它决定了用户和产品之间每一次「你来我往」是否顺畅、自然。
你点按钮用户动作
→
变色 / 转圈系统反馈
→
你知道成功信息理解
04 / 12
概念 03 · CONCEPT新媒体交互设计
什么是「新媒体交互设计」?
用 AI 技术
让内容「活」起来
依托互联网、移动端、社交媒体、AR/VR,以用户参与和双向互动为核心。
05 / 12
对比框架 · FRAMEWORKIDEO 双栏
传统交互设计 vs 新媒体交互设计
传统交互设计
核心目标高效完成任务(工具性)
用户角色操作者 / 使用者
内容关系系统功能为主
典型载体App、网站、软件
新媒体交互设计
核心目标传递信息、引发参与、制造体验
用户角色参与者 / 共创者
内容关系内容即交互(内容承载互动)
典型载体H5、社交媒体、数字展览、互动装置
一句话:传统关注「怎么用」,新媒体关注「怎么玩、怎么参与、怎么传播」。
06 / 12
核心特征 · FEATURES
新媒体交互设计的 5 大核心特征
互动性
用户不再是旁观者,而是内容的一部分:点击、滑动、投票、弹幕。
沉浸感
音视频、动效、AR/VR 营造身临其境的体验。
实时反馈
用户动作即时触发内容变化,增强参与感与信任。
设计关键降低门槛
一键参与 > 复杂注册;互动要服务内容,而非炫技。
07 / 12
应用场景 · SCENES
常见应用场景
H5互动页面
品牌营销、活动海报,如「生成你的年度报告」。
新媒体图文内容
公众号滑动、点击展开、测试题、投票。
AR / VR沉浸体验
试妆、虚拟试衣、沉浸式文旅。
传播自带分享动机
个性化结果、社交荣誉感,让互动自己跑起来。
08 / 12
动机 · WHY
体验为王的时代,
交互是拉开差距的硬技能
1行业需求旺盛:从「内容为王」到「体验为王」,懂交互、能做让人愿意参与内容的人才是稀缺资源。
2竞争力差异化:同样选题,别人是图文,你做能互动、能分享的 H5,传播效果天差地别。
3传播逻辑变了:注意力越来越稀缺,「参与感」是留住注意力的最强抓手。
4职业空间大:运营、策划、产品设计、数字营销……交互思维可迁移到一切「用户触达」岗位。
09 / 12
路径 · LEARN
学什么?知识体系全景
基础Web 简史 · SEO · CLI
语言HTML · CSS · JS · MD
AIAgent · Skills · API
项目音频 / 视频
PPT可交互 Slider
3DThree.js · MediaPipe · Map
数据Echarts 可视化
知识库综合应用
部署Node · Python · Git · Vercel
怎么学?四阶段路径
认知1-2 周
→
工具3-4 周
→
实战1-2 月
→
进阶持续
学习心法闭环:拆解案例 → 动手复刻 → 实战验证 → 数据复盘。新媒体交互是实践学科,光看不做永远学不会!
10 / 12
评估 · ASSESS
考核方式
共 5 次作业,含期中与期末大作业;按规范与要求提交。
案例展示
用 AI 交互制作历史人物讲解视频,全流程沉淀为技能包:
示例:李清照、李白 —— 输入一个名字即自动生成相应视频。
11 / 12
行动 · ACTION
作业 1
参照案例,制作一个「名著介绍」讲解视频技能:剧本、语音、配图生成视频,指定书名即自动产出。
示例书名:《红楼梦》
工具清单
AgentWorkBuddy · Claude Code · DeepSeek
模型DeepSeek · 豆包 · MiniMax
知识库ima · 飞书 · Obsidian
媒体剪映 · PS · PicGo
部署GitHub · Cloudflare · Vercel
语言Node · Python · HTML/CSS/JS
让内容
「活」起来,
从这一次
动手开始。
新媒体交互设计 · 第 1 讲
谢谢观看 · 2026.9.1
12 / 12
NEW MEDIA INTERACTION DESIGN