课程介绍 · 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

考核方式

20%平时成绩
20%期中成绩
60%期末成绩

共 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