47 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 8 | 用户体验与产品发布 |
|
|
90分钟 | 过程层 | 共享 |
1. 课程目标
知识目标：
- 理解"UX三维度"框架：好看（视觉）、好玩（平衡）、有感觉（反馈）——三个维度共同决定用户体验
- 理解"Vibe Design"的基本思路：用自然语言描述你想要的视觉效果，让AI帮你实现
- 知道"产品发布"不只是"做完了"——需要录屏/截图、写一句话介绍、让别人能体验到你的作品
能力目标：
- 能用"UX三维度检查清单"诊断自己作品的用户体验问题，至少找出3个改进点（审美力）
- 能用自然语言向AI描述视觉风格需求（配色、字体、布局、图标），完成界面美化（审美力+表达力）
- 能通过同桌互测收集反馈，并据此调整难度参数和反馈系统（共创力萌芽）
- 能为自己的作品录屏/截图，写出一句话产品介绍（表达力）
情感目标：
- 体验"从粗糙到精致"的打磨快感——原来同一个作品，花心思打磨后体验天差地别
- 建立"用户视角"意识——不是"我觉得好"就行，要"别人玩着也觉得好"
- 感受"发布"的仪式感——我的作品值得被看见、被分享
2. 核心概念与误概念预设
核心概念认知层级：
| 概念 | 学生类比 | 认知层级 |
|---|---|---|
| UX三维度（好看/好玩/有感觉） | 就像一道菜——好看（摆盘漂亮）、好吃（味道好）、有感觉（吃完想再来）。三样都好才是好菜 | 理解层→应用层 |
| Vibe Design | 就像跟装修师傅说"我想要温馨的感觉"——你不用自己刷漆，但你要说得出想要什么样子 | 应用层 |
| 难度平衡 | 就像跳绳——太慢没意思，太快跳不过去，刚好有点挑战才最好玩 | 理解层→应用层 |
| 胜利/失败反馈 | 就像考试发成绩——考好了老师表扬你开心，考砸了老师鼓励你下次加油，不能考完了什么都不说 | 理解层 |
| 产品发布 | 就像画完一幅画要装进画框挂起来展览——不挂出来别人怎么欣赏？ | 识别层→应用层 |
典型误概念表：
| 编号 | 误概念 | 正确认知 | 激发策略 |
|---|---|---|---|
| M1 | 好看=加很多特效和鲜艳颜色 | 好看是"舒服、协调、看得清"，不是"花里胡哨"。简洁清晰往往比满屏特效更好看 | 对比展示：一个配色协调的简洁界面 vs 一个颜色刺眼特效满天飞的界面，问"你愿意玩哪个？" |
| M2 | 游戏越难越好/越简单越好 | 好的难度是"刚好有点挑战"——让玩家觉得"我再试一次就能过"，而不是"太简单无聊"或"太难想摔电脑" | 让学生互相试玩，收集"太难了"/"太简单了"的真实反馈 |
| M3 | 游戏结束直接显示"Game Over"就行了 | 胜利要有庆祝感（让玩家觉得值得），失败要有鼓励感（让玩家想再来一次），不能冷冰冰地直接结束 | 对比演示：冷冰冰的"游戏结束" vs 有动画和鼓励语的结束画面 |
| M4 | 做完了就是发布了 | 发布是让别人能体验到你的作品——需要截图/录屏、写介绍、提供访问方式。"做完了"只是第一步 | 问学生"如果你想让好朋友玩你的游戏，你怎么发给他？" |
| M5 | 美化界面要懂设计/懂代码 | Vibe Design 就是用大白话告诉AI"我想要什么感觉"——你不需要懂色号、不需要懂CSS，只需要说得出"我想要科技感的蓝色" | 教师现场演示：一句话让AI完成界面大变身 |
3. 教学准备
工具与环境：
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成安装配置）
- DeepSeek模型（用于界面美化和功能优化）
- 教师演示电脑+投影
- 系统自带截图工具（Win+Shift+S）或录屏工具（建议提前测试OBS/系统录屏是否可用）
- 每位学生的第7课项目文件（HTML文件）
教学资源：
- 教师准备：一个"打磨前 vs 打磨后"的对比项目（同一个游戏，分别展示粗糙版和精致版）
- "UX三维度检查清单"（打印版，每人一张）
- "同桌互测反馈表"（打印版，每人一张）
- "一句话产品介绍"模板（投影展示）
- 教师提前录制一段自己项目的30秒演示视频（用于展示"怎么录屏"）
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 拿一个基础游戏项目，用Vibe Design思维让AI美化界面——记录你的提示词和AI的表现
- 故意做一个"配色刺眼、字体混乱"的反面案例，课堂上用于对比
- 调整一个游戏的难度参数（速度、间隔、生命值等），体验"太难"和"太简单"的感觉
- 给一个游戏添加胜利庆祝动画和失败鼓励画面，记录提示词
- 用截图工具和录屏工具各操作一次，确保课堂演示流畅
- 写一段30字以内的"一句话产品介绍"，体验提炼卖点的过程
4. 教学流程
第一幕：联系 (Connect) — 10分钟 🔗
【环节】上节课回顾 (3分钟)
师： 上节课大家做了一件很有挑战的事——自己写需求文档，自己选方向，让AI开发出你的项目的核心玩法。谁来说说，你做的是什么项目？核心玩法跑起来了吗？【诊断点：检测第7课核心产出的保持度】【识别层】
【分支A】若学生能说出项目名和核心玩法状态： 师： 很好！核心玩法能跑了。那我问你——你对你的项目打几分？10分满分。
【分支B】若学生记忆模糊或项目未完成： 师： 没关系！今天我们先把上节课的项目打开看看，能跑的继续打磨，不能跑的先修好。今天的目标不是做新东西，而是把已有的东西变得更好。
【分支C】若有学生上节课缺课： 师： 没问题！我这里有几个基础项目供你选择。今天的重点是"打磨"——把一个粗糙的作品变成精致的产品。你用我提供的基础项目，一样可以学到所有技能。
【环节】情景导入——"打磨前 vs 打磨后" (7分钟)
师： 大部分同学给自己的项目打了6、7分。为什么不是10分？因为你们心里清楚——能玩，但还不够好。今天我们就来解决这个问题。
师： 先看两个东西。第一个——
【投影展示一个粗糙版游戏：灰色背景、默认字体、没有开始画面、游戏结束只显示"Game Over"两个字、没有重新开始按钮】
师： 这个游戏能玩吗？
生： 能玩。/ 但是好丑。/ 感觉像半成品。
师： 好，现在看第二个——
【投影展示同一个游戏的打磨版：协调的配色方案、清晰的标题、有开始画面、游戏中有计分动画、胜利时有彩色纸屑庆祝、失败时有鼓励语和"再来一次"按钮】
师： 同一个游戏！核心玩法完全一样。但你们更想玩哪个？
生： 第二个！
师： 为什么？【诊断点：学生能否自发识别出"好看""好玩""有感觉"三个维度的差异】【理解层】
【分支A】若学生说出多个维度（"好看""有反馈""更刺激"）： 师： 你们说到了三个不同的点——好看、更刺激、有反馈。这三个点就是今天的核心！
【分支B】若学生只说"好看"： 师： 好看是一个原因。但除了好看，还有没有别的不一样？比如游戏结束的时候呢？难度呢？
【分支C】若学生说不出具体区别： 师： 我来帮你们对比。第一个：灰色背景、字小看不清——不好看。第二个：颜色协调、字大清晰——好看。第一个：游戏结束就两个字"Game Over"——没感觉。第二个：输了有鼓励、赢了有庆祝——有感觉。看出来了吗？
师： 今天这节课，我们要做的就是这件事——把你的项目从"能用"打磨成"好用又好看"。而且在课程最后，你要做一件更酷的事——把你的作品"发布"出去，让别人也能体验到！
第二幕：建构 (Construct) — 65分钟 🛠️
【分段一：UX诊断——给你的作品做一次"体检"】(15分钟) ✨
预设误概念：
- M1：好看=加很多特效和鲜艳颜色
- M2：游戏越难越好/越简单越好
- M3：游戏结束直接显示"Game Over"就行了
讲解与演示 (Teach & Demo):
师： 要打磨一个产品，第一步不是动手改——是先"诊断"。就像去医院看病，医生不会上来就开药，得先做检查。今天我教你们一个"UX体检"工具——UX三维度检查清单。
师： UX是什么？UX就是"用户体验"——用户（就是玩你游戏的人）使用你的产品时的感受。好的UX让人"玩了还想玩"，差的UX让人"打开就想关"。
师： UX有三个维度——【在白板上画三个圆，互相交叉】
┌──────────┐
│ 好看 👁️ │ 视觉维度：看起来舒服吗？
└──────────┘
┌──────────┐
│ 好玩 🎮 │ 平衡维度：难度合适吗？节奏好吗？
└──────────┘
┌──────────┐
│ 有感觉 💫 │ 反馈维度：赢了开心吗？输了想再来吗？
└──────────┘
师： 三个维度就像三条腿的凳子——少了哪条都会倒。好看但不好玩？花瓶。好玩但丑？让人不想打开。好看好玩但没反馈？玩完没感觉。
师： 我来给你们展示每个维度的具体检查项——
【投影展示UX三维度检查清单】
┌──────────────────────────────────────────────────────┐
│ UX三维度检查清单 │
│ │
│ 维度一：好看 👁️ │
│ □ 配色协调吗？（不超过3种主色，不刺眼） │
│ □ 文字看得清吗？（字够大、颜色和背景有对比） │
│ □ 布局整齐吗？（按钮居中、元素对齐、不挤在一起） │
│ □ 有统一的风格吗？（不要一半可爱一半恐怖） │
│ │
│ 维度二：好玩 🎮 │
│ □ 难度合适吗？（普通人第一次玩能撑过10秒吗？） │
│ □ 节奏好吗？（不会太无聊也不会太忙乱） │
│ □ 有目标感吗？（玩家知道自己在追求什么） │
│ □ 想再玩一次吗？（有没有"不服气，再来"的冲动） │
│ │
│ 维度三：有感觉 💫 │
│ □ 做对了有奖励感吗？（得分+1有提示吗？连续得分有特效吗？）│
│ □ 赢了有庆祝吗？（不是直接结束，而是"太厉害了！"） │
│ □ 输了有鼓励吗？（不是冷冰冰的Game Over，而是"再试一次？"）│
│ □ 操作有回应吗？（点击有反应、移动很流畅） │
│ │
│ 我的诊断结果： │
│ 最需要改的3个问题： │
│ 1. _______________ │
│ 2. _______________ │
│ 3. _______________ │
└──────────────────────────────────────────────────────┘
师： 我来用我的"太空躲避大师"做个示范诊断——
- 好看： 配色？深蓝色背景还行，但飞船和陨石都是白色方块，太丑了。文字？存活时间的字太小了。布局？还行，居中显示。风格？没什么风格，就是一堆方块。
- 好玩： 难度？陨石掉得太慢了，完全没挑战。节奏？一直是一个速度，没变化。目标感？就是活着，有点无聊。
- 有感觉： 得分提示？没有。赢了庆祝？没有赢的概念。输了鼓励？就显示"游戏结束"三个字，冷冰冰的。操作回应？飞船能动，算有回应。
师： 我找到了最需要改的3个问题：①飞船和陨石太丑（好看维度）②陨石太慢没挑战（好玩维度）③输了没有鼓励画面（有感觉维度）。有了诊断结果，等下我们就知道改什么了！
学生实践 (Practice):
师： 现在打开你上节课的项目。拿出UX三维度检查清单，用5分钟认真"体检"一遍。步骤：
- 先自己玩/用你的作品2分钟——不是随便点两下，是认真体验
- 按清单逐项勾选——每一项都看看，不符合的打叉
- 写下最需要改的3个问题——从打叉的项目里挑最严重的3个
提示：如果你不确定某一项，问问自己——"如果我第一次打开这个东西，我会觉得怎么样？"
开始！
【教师巡场观察，重点关注：】
- 学生是否真的在体验自己的作品，还是随便一看就开始填清单
- 学生能不能找出具体问题（"配色不好"vs"背景太灰看不清文字"）
- 是否有学生觉得"我的作品没问题"（可能审美敏感度不够）→ 轻声提示："你觉得字够大吗？颜色舒服吗？"
- 做得特别快的学生 → 提醒："12项都检查了吗？每一项都认真看了？"
进度同步 (Checkpoint):
师： 时间到！谁来分享你找到的3个最需要改的问题？【诊断点：学生的UX诊断是否覆盖三个维度，还是只集中在"好看"上】【应用层】
【请2-3位学生分享】
【分支A】若学生的3个问题覆盖了多个维度： 师： 你的诊断很全面！你不只看到了"不好看"的问题，还发现了"不好玩"和"没感觉"的问题。这就是"全面体检"的威力！
【分支B】若学生的3个问题全集中在"好看"维度： 师： 你发现了好几个视觉问题，很好！但再看看另外两个维度——难度合适吗？输赢有反馈吗？一个游戏光好看不好玩，就像一道菜光好看不好吃。
【分支C】若学生说"我觉得没什么问题"： 师： 这很可能是因为你太熟悉自己的作品了。等下同桌互测的时候，让你同桌来玩——看看他/她能不能发现问题。设计师自己往往看不到自己的盲点！
【分段二：Vibe Design——让AI帮你美化界面】(20分钟) ✨
预设误概念：
- M1：好看=加很多特效和鲜艳颜色
- M5：美化界面要懂设计/懂代码
讲解与演示 (Teach & Demo):
师： 诊断做完了，现在开始"治疗"！第一个要解决的维度——好看。怎么让你的作品变好看？
师： 你们可能觉得"我又不是设计师，我不知道什么颜色好看、什么布局好"。没关系！今天我教你们一个新思维——Vibe Design。
师： Vibe是什么意思？就是"感觉""氛围"。Vibe Design就是——你只需要告诉AI"你想要什么感觉"，AI来帮你实现。你不需要知道色号是#3B82F6，你只需要说"我想要科技感的蓝色"。你不需要知道CSS怎么写圆角，你只需要说"按钮要圆润一点"。【诊断点：学生是否理解"用感觉描述"而非"用技术语言描述"的Vibe Design核心思路】【理解层】
师： 我来现场演示。我的太空躲避大师现在是这样的——灰色背景、白色方块。我想让它变成科幻太空风。看我怎么跟AI说——
【教师在AI编程工具中输入：】
请帮我美化游戏界面，我想要以下效果：
## 整体风格
科幻太空风格，深邃的星空背景
## 配色方案
- 背景：深蓝色到黑色的渐变，带闪烁的小星星
- 飞船：亮蓝色发光效果，看起来像科幻飞船的形状（三角形）
- 陨石：橙红色，带尾焰效果
- 文字：白色，带轻微发光
## 字体和布局
- 游戏标题"太空躲避大师"用大字显示在开始页面
- 存活时间用大字号显示在右上角，清晰易读
- 游戏结束画面居中显示，有半透明黑色遮罩
## 注意
- 不要修改游戏逻辑和操控方式
- 只美化视觉效果
师： 注意我是怎么说的——我没有说任何代码、任何色号。我说的是"深蓝色到黑色的渐变""亮蓝色发光效果""科幻飞船的形状"。全是感觉和画面的描述。这就是Vibe Design！
【等待AI生成，预览效果】
师： 哇！看这个变化！同一个游戏，但现在看起来像一个真正的太空游戏了。星空背景、发光的飞船、带尾焰的陨石——全是AI帮我做的，我只是"说"了我想要什么感觉。
师： 但注意——Vibe Design不是"随便说"。要说得具体。我来对比一下好的和坏的描述——
坏：请把界面变好看一点
→ AI不知道你觉得什么叫"好看"
好：请把背景改成深蓝色星空，飞船改成亮蓝色三角形，
陨石改成橙红色带尾焰
→ AI清楚地知道每个元素要变成什么样
师： 秘诀就是——说清楚三件事：①整体风格是什么感觉（科幻？可爱？像素？）②每个元素长什么样③不要改什么（保护游戏逻辑）。
师： 如果你不知道想要什么风格，这里有几个热门选项——
【投影展示风格参考】
🌌 科幻风：深色背景、发光效果、蓝紫配色
🍬 可爱风：浅色背景、圆角元素、粉色/黄色/绿色
🎮 像素风：像素化图形、鲜明色块、复古感
🌊 简洁风：白色背景、灰色线条、大量留白
🔥 酷炫风：黑色背景、红色/橙色高亮、粒子效果
学生实践 (Practice):
师： 现在动手美化你的项目！步骤：
- 看你的诊断清单——"好看"维度有哪些问题？
- 选一个你喜欢的整体风格——从风格参考里选一个，或者自己想一个
- 写Vibe Design提示词——说清楚整体风格、每个元素的视觉效果、不要改什么
- 发给AI，看效果——如果不满意，继续用自然语言调整："背景再暗一点""字再大一点"
给你们12分钟。
保底提示词（如果实在不知道怎么写）：
请帮我美化界面：
- 整体风格：[可爱/科幻/像素/简洁]
- 配色：背景用[深色/浅色]，主要元素用[什么颜色]
- 文字要大一点，看得清楚
- 按钮要明显，圆角
- 不要修改游戏逻辑
开始！
【教师巡场观察，重点关注：】
- 学生的Vibe Design描述是否具体（"变好看"vs"背景改成深蓝色星空"）
- 是否有学生要求加太多花里胡哨的效果（M1）→ 提醒："好看不是越花越好。试试先统一配色，比加特效更有效"
- 是否有学生不知道选什么风格 → 引导："你的游戏/工具是什么主题？太空游戏就科幻风，动物游戏就可爱风"
- AI美化后有没有破坏游戏功能 → 提醒学生验收："美化完了先玩一遍，确认功能没坏"
- 做得快的学生 → 鼓励继续微调："颜色满意了？那字体呢？按钮的样式呢？"
进度同步 (Checkpoint):
师： 暂停！让我看看大家的成果。谁的界面变化最大？举手让我看看你的屏幕！【诊断点：学生的Vibe Design是否产生了有效的视觉提升，还是改了但没什么变化】【应用层】
【请2位学生展示屏幕，教师投影展示】
【分支A】若学生的美化效果明显且协调： 师： 变化太大了！感觉完全不一样了。你跟AI说了什么？能读一下你的Vibe Design提示词吗？——大家听听，他/她的描述多具体！这就是Vibe Design的威力。
【分支B】若学生美化了但效果不太好（颜色冲突、元素混乱）： 师： 你已经迈出了第一步！如果你觉得颜色有点冲突，可以跟AI说："整体配色太乱了，请帮我统一成以蓝色为主色调的方案，最多用3种颜色。"——关键词是"统一"和"最多3种"。
【分支C】若学生还在美化过程中： 师： 没关系，美化可以一步一步来。先从最明显的开始——背景颜色和文字大小。这两个改完，整体感觉就会好很多。
【分段三：体验优化——同桌互测+难度调整+反馈系统】(15分钟) ✨
预设误概念：
- M2：游戏越难越好/越简单越好
- M3：游戏结束直接显示"Game Over"就行了
讲解与演示 (Teach & Demo):
师： 界面变好看了！但好看只是三维度之一。现在解决第二个和第三个维度——好玩和有感觉。
师： 怎么知道你的游戏好不好玩？有一个最简单的办法——让别人玩。你自己觉得好玩不算数，因为你太熟悉了。要让"第一次玩的人"告诉你真实感受。这就叫——用户测试。
师： 等下你要跟你的同桌互换作品来玩。但不是随便玩——你要填一张"互测反馈表"。看看这张表——
【投影展示同桌互测反馈表】
┌──────────────────────────────────────────────────────┐
│ 同桌互测反馈表 │
│ │
│ 测试员：____________ 作品名称：____________ │
│ │
│ 第一印象（打开的第一秒）： │
│ □ 看起来很专业 □ 还不错 □ 有点简陋 □ 看不懂怎么玩 │
│ │
│ 难度感受： │
│ □ 太简单了，没挑战 □ 刚刚好 □ 有点难 □ 太难了！ │
│ │
│ 玩完后的感受： │
│ □ 还想再玩！ □ 还行吧 □ 不太想玩了 │
│ │
│ 最喜欢的一个点：_____________________ │
│ 最想改的一个点：_____________________ │
│ │
│ 结束体验打分（给反馈系统打分）： │
│ 赢了/做得好的时候： □ 有庆祝 □ 一般 □ 没什么反馈 │
│ 输了/做得差的时候： □ 有鼓励 □ 一般 □ 冷冰冰的 │
└──────────────────────────────────────────────────────┘
师： 这张表会告诉你三件关键的事：
- 第一印象——别人打开你的作品第一秒的感受
- 难度感受——是太难还是太简单
- 反馈体验——赢了输了有没有感觉
师： 互测之后，我们要根据反馈做两件事——调难度和加反馈。
师： 关于调难度，我给你们一个"黄金难度公式"——
黄金难度 = 普通人第一次玩能撑过15-30秒
+ 第三次玩能明显进步
+ 高手玩也有挑战
师： 调难度不需要改游戏逻辑——只需要调"参数"。比如：
太难了？→ 跟AI说：
"请把障碍物的速度降低30%，出现间隔增加到2秒"
太简单了？→ 跟AI说：
"请让障碍物速度每10秒自动加快10%，增加紧张感"
师： 关于胜利/失败反馈，我来演示两种结束画面——
差的失败画面：Game Over（黑底白字，什么都没有）
好的失败画面：
请把游戏结束画面改成这样：
- 背景加半透明黑色遮罩
- 大字显示"再接再厉！"
- 下面显示本次成绩和历史最高分
- 一个醒目的"再来一次！"按钮，鼠标放上去会变大
- 如果打破了最高分，显示"新纪录！"并加金色星星特效
师： 看到区别了吗？好的反馈不是冷冰冰地告诉你"你输了"，而是让你觉得"我下次一定能做得更好"——这就是为什么你会想再玩一次！
学生实践 (Practice):
师： 现在开始互测！步骤：
第一步（4分钟）：互换测试
- 你玩同桌的作品，同桌玩你的作品
- 一边玩一边填"同桌互测反馈表"
- 认真填！你的反馈决定同桌要改什么
第二步（8分钟）：根据反馈优化
- 拿回你的反馈表，看看同桌怎么说的
- 根据反馈做两件事中的至少一件：
- ①调难度（如果反馈说太难或太简单）
- ②加/改反馈系统（胜利庆祝或失败鼓励）
开始互换！
【教师巡场观察，重点关注：】
- 学生是否认真在填反馈表（而不是随便勾）
- 是否有学生收到"太难"的反馈但不愿意改 → "设计师不能只想着自己，要想着用户"
- 是否有学生不知道怎么调难度 → 提示："跟AI说'请把XX的速度降低/增加XX%'"
- 是否有学生没有任何反馈系统（M3）→ 提示保底提示词
保底提示词——添加失败反馈：
请在游戏结束时添加以下效果：
- 屏幕中央显示"再接再厉！"的大字
- 下方显示最终得分
- 加一个大大的"再来一次"按钮
- 不要修改游戏核心逻辑
保底提示词——添加胜利反馈：
请在游戏通关/达到目标时添加以下效果：
- 显示"太厉害了！"的庆祝文字
- 加一个简单的彩色纸屑掉落动画
- 显示本次成绩
- 加"再玩一次"按钮
进度同步 (Checkpoint):
师： 好！互测完了。我来快速调查——收到"太难"反馈的举手？收到"太简单"的举手？收到"刚刚好"的举手？【诊断点：难度分布情况，以及学生是否根据反馈做了调整】【应用层】
【分支A】若大部分学生已根据反馈调整了难度或反馈系统： 师： 你们刚才做了一件专业设计师才做的事——用户测试+根据反馈迭代。这比自己闷头改一百遍都有效！因为你猜不到别人怎么想，但别人会告诉你。
【分支B】若有学生收到反馈但没做修改： 师： 收到了反馈但没改？为什么呢？是不知道怎么改，还是不同意反馈？如果是不知道怎么改，用我给的保底提示词试试。如果是不同意——那也OK，但记住，最终是"用户"在用你的产品，不只是你自己。
【分支C】若学生的反馈表填得太笼统（"挺好的"/"没问题"）： 师： 下次互测的时候，要更具体！不是"挺好的"，而是"我最喜欢XX""我觉得XX可以改"。具体的反馈才有用，笼统的夸奖帮不了设计师改进。
【分段四：发布准备——让世界看到你的作品】(15分钟) ✨
预设误概念：
- M4：做完了就是发布了
- 审查类："能跑就行"，不想办法让别人体验到
讲解与演示 (Teach & Demo):
师： 经过三轮打磨——美化了界面、调整了难度、加了反馈——你的作品已经从"粗糙版"变成"精致版"了！但还差最后一步——发布。
师： 什么叫发布？你做了一幅画，但一直锁在抽屉里——别人看得到吗？看不到。发布就是把你的画"挂出来"让别人看到。对于你的项目来说，发布就是——让不在你身边的人也能体验到你的作品。【诊断点：学生是否理解"发布"不等于"做完了"】【理解层】
师： 怎么发布？今天我们学最简单的方法——"三件套"发布法：
发布三件套：
- 一张截图——你的作品最好看的那个画面
- 一段录屏——30秒演示你的作品怎么玩/怎么用
- 一句话介绍——让别人一看就知道你的作品是做什么的
师： 我来演示。先看截图——
【教师演示截图操作】
师： 截图很简单。Windows按 Win+Shift+S，选一个区域就行。关键是——截哪个画面？要截你作品最好看、最能体现核心玩法的那个画面。不是随便截一张。
师： 比如我的太空躲避大师，我不会截开始画面（太无聊），我会截游戏进行中、陨石满天飞、飞船在躲避的那个紧张时刻——这张图一看就知道这是什么游戏，而且看起来很刺激。
师： 再看录屏——
【教师演示录屏，播放提前准备好的30秒演示视频】
师： 录屏就是录一段你玩游戏/用工具的过程。30秒就够了——展示核心玩法、展示一次胜利或失败、展示你的精美界面。不需要录很长。
师： 最后——一句话产品介绍。这是最考验功力的。看看这个模板——
[产品名] —— 一个[类型]，你需要[核心操作]来[达成目标]。
师： 比如我的：
太空躲避大师 —— 一个太空生存游戏，
你需要左右移动飞船来躲避从天而降的陨石，看看你能撑多久！
师： 一句话就说清楚了——是什么、怎么玩、目标是什么。别人看了就知道要不要试试。
学生实践 (Practice):
师： 现在做你的"发布三件套"！给你们10分钟：
- 截一张最好的截图（2分钟）——选你作品最精彩的画面，Win+Shift+S截图，保存
- 写一句话产品介绍（3分钟）——用模板"[名字]——一个[类型]，你需要[操作]来[目标]"
- 录一段30秒演示（5分钟）——打开录屏，展示你的作品核心体验，然后停止录屏
提示：如果你不会录屏，也没关系——截图+一句话介绍已经是很好的发布了！
一句话产品介绍的保底模板（如果写不出来）：
[名字] —— 用[操作方式]来[做什么]的[类型]！
示例：
- "记忆大师 —— 用点击翻牌来配对的记忆力挑战游戏！"
- "数学闪电 —— 用心算来打败倒计时的数学竞速工具！"
- "我的星球 —— 用鼠标画画来设计你的专属星球的创意画板！"
开始！
【教师巡场观察，重点关注：】
- 学生是否在认真选择截图画面（而不是随便截）→ "想想哪个画面最能吸引人"
- 一句话介绍是否包含了类型、操作、目标 → "读一遍你写的，别人能听懂是什么吗？"
- 录屏是否有困难 → 帮助操作，或建议只做截图+文字介绍
- 做得快的学生 → "试试把截图、介绍、录屏整理在一起，发到班级群"
进度同步 (Checkpoint):
师： 时间到！完成了截图的举手？写了一句话介绍的举手？录了屏的举手？太好了！【诊断点：发布三件套的完成度】
师： 谁来读一下你的一句话产品介绍？【诊断点：学生的产品介绍是否清晰且有吸引力】【应用层】
【请3-4位学生读自己的一句话介绍】
【分支A】若学生的介绍清晰且有吸引力： 师： 一听就知道你的产品是干什么的，而且让我想试试！这就是好的产品介绍——简短、清楚、有吸引力。
【分支B】若学生的介绍太模糊（"一个好玩的游戏"）： 师： "好玩的游戏"——什么游戏？怎么玩？试试用模板："你需要[做什么]来[达成什么]"。越具体，别人越想试。
【分支C】若学生的介绍太长（说了一大段）： 师： 说了很多细节，但产品介绍要"一句话"就够！想象你在电梯里只有10秒跟别人说——你会怎么说？挑最核心的。
第三幕：反思 (Contemplate) — 10分钟 🤔
【环节】成果展示 (6分钟)
师： 今天最后的展示环节！这次的展示跟之前不一样——你不只要展示作品，还要做一次"迷你产品发布"。步骤：
- 先读你的一句话产品介绍
- 展示你的截图（或者现场打开作品）
- 用30秒现场演示核心体验
- 告诉大家：你打磨前和打磨后最大的变化是什么？
【请3位学生展示，每人2分钟。优先选择：】
- 一位"打磨前后对比特别明显"的（视觉改善案例）
- 一位"根据同桌反馈做了有效调整"的（用户驱动案例）
- 一位"反馈系统做得特别好"的（体验设计案例）
师： 大家注意看——他/她的作品打磨前和打磨后完全是两个东西！核心玩法没变，但用户体验天差地别。
【环节】互评与讨论 (4分钟)
师： 看了这几位同学的展示，谁有评价？格式还是"一个优点 + 一个建议"。
【请2-3位学生互评】
师： 我来问一个反思问题——今天的课和前几课有什么不一样？前几课我们在做什么，今天我们在做什么？【诊断点：学生能否理解"从粗糙到精致"的产品打磨过程的价值】【迁移层】
【分支A】若学生说出"前面是做功能，今天是让它变好看/好用"： 师： 完全正确！前几课是"从无到有"——让作品能跑。今天是"从有到好"——让作品值得用。这两步都很重要，缺了哪一步都不行。
【分支B】若学生说"今天是改好看的"： 师： 美化是一部分。但今天我们还做了什么？让同桌试玩、调难度、加反馈。这些不只是"好看"——是"好玩"和"有感觉"。三个维度一起提升，才是完整的"用户体验优化"。
【分支C】若学生说不出区别： 师： 我来总结。前几课你是"产品开发者"——负责把东西做出来。今天你变成了"产品设计师"——负责让东西好看、好用、有感觉。开发者关注"能不能跑"，设计师关注"用户爽不爽"。你们今天两个角色都体验了！
第四幕：延续 (Continue) — 5分钟 🚀
【环节】抽象总结 (3分钟)
师： 今天我们学了四个核心知识点，我帮你们串起来——
第一：UX三维度。 好的用户体验 = 好看（视觉舒服）+ 好玩（难度平衡）+ 有感觉（反馈到位）。三条腿的凳子，少一条就倒。
第二：Vibe Design。 你不需要是设计师才能做出好看的界面——用大白话告诉AI"你想要什么感觉"，AI来实现。关键是说得具体："科幻风的蓝色星空"比"变好看"有效一万倍。
第三：用户测试。 自己觉得好不算数，让别人玩了觉得好才算数。同桌互测是最简单的用户测试——你猜不到的问题，别人一玩就发现了。
第四：产品发布。 做完了不等于发布了。发布三件套——截图、录屏、一句话介绍——让不在你身边的人也能体验到你的作品。
师： 这四个知识点不只是做游戏用的。以后你做PPT、做海报、写作文——都可以用UX三维度检查：好看吗？好读吗？有感觉吗？Vibe Design的思维——用自然语言描述你想要的效果——在AI时代会越来越重要。【迁移诊断】
师： 你们刚刚完成了一件了不起的事——从第7课的需求文档，到今天的打磨发布，你们完整地走了一遍"设计→开发→打磨→发布"的产品开发全流程。这就是真正的产品设计师的工作方式！
【环节】下节预告 + 5分钟挑战 (2分钟)
师： 下节课预告——第9课的主题是"需求驱动工具开发"。前面四课我们做了"好玩"的游戏。下节课，我们要做"好用"的东西——用AI做一个能解决你生活中真实问题的小工具！比如背单词工具、计时器、记事本……从"好玩"到"好用"，这是一个新的跃迁！
师： 本周5分钟挑战来了！
5. AI助教使用指南
教师演示用提示词：
课前准备——美化前的"粗糙版"游戏（演示对比用）：
请帮我做一个最简单的躲避游戏：
- 灰色背景
- 玩家是一个白色方块在屏幕底部，用左右方向键移动
- 障碍物是白色小方块从顶部掉落
- 碰到就显示"Game Over"和存活秒数
- 不需要任何美化，越简单越好
- 单个HTML文件
课堂演示——Vibe Design美化（对比效果用）：
请帮我美化游戏界面，我想要以下效果：
## 整体风格
科幻太空风格，深邃的星空背景
## 配色方案
- 背景：深蓝色到黑色的渐变，带随机闪烁的小星星
- 玩家飞船：亮蓝色发光三角形
- 障碍物陨石：橙红色圆形，带短尾焰
- 文字：白色，带轻微发光效果
## 字体和布局
- 顶部居中显示"太空躲避大师"标题
- 右上角大字号显示存活时间
- 游戏结束时半透明遮罩+居中显示结果
## 开始画面
- 游戏名称大字居中
- 下方显示"按空格键开始"，文字缓慢闪烁
## 结束画面
- 显示"再接再厉！"和存活时间
- 如果超过之前最长时间，显示"新纪录！"加金色文字
- 大大的"再来一次"按钮
## 注意
- 不要修改游戏逻辑和操控方式，只美化视觉效果
课堂演示——添加难度递增：
请在游戏中添加难度递增机制：
- 每存活10秒，障碍物的掉落速度增加15%
- 每次难度提升时，屏幕边缘短暂闪烁红光提示
- 障碍物速度最高不超过初始速度的3倍
- 不要修改其他游戏逻辑
学生保底提示词：
保底方案A——一键美化：
请帮我美化界面，要求：
- 整体风格：可爱卡通风
- 背景：浅蓝色渐变
- 所有文字加大加粗，用深色字体确保看得清
- 按钮用圆角，加浅色阴影
- 整体配色不超过3种颜色
- 不要修改功能逻辑
保底方案B——添加失败反馈：
请在游戏结束时添加以下效果：
- 半透明黑色遮罩覆盖游戏画面
- 屏幕中央大字显示"再接再厉！"
- 下方显示最终得分/成绩
- 加一个醒目的"再来一次！"按钮，点击后重新开始
- 不要修改游戏核心逻辑
保底方案C——添加胜利反馈：
请在游戏通关/达到目标分数时添加以下效果：
- 屏幕中央显示"太厉害了！"的金色大字
- 添加简单的彩色纸屑从上方飘落的庆祝动画
- 显示最终成绩
- 加"再玩一次"和"挑战更高分"两个按钮
- 不要修改游戏核心逻辑
保底方案D——难度调整：
我的游戏太难了/太简单了，请帮我调整：
- [太难] 把障碍物/敌人的速度降低30%，出现间隔增加到2秒
- [太简单] 把障碍物/敌人的速度提高20%，每过10秒再加快10%
- 不要修改其他游戏逻辑
进阶提示词（学有余力的学生）：
进阶一——添加开场动画：
请给游戏添加一个开场画面：
- 游戏名称从小到大弹出的动画效果
- 下方显示"按空格键开始"的文字，缓慢闪烁
- 背景与游戏主题风格一致
- 按空格键后，开场画面淡出，游戏开始
进阶二——添加音效反馈：
请用Web Audio API给游戏添加简单音效（不需要外部文件）：
- 得分/成功操作时：短促的"叮"声
- 失败/碰撞时：低沉的"嗡"声
- 游戏结束时：简短的结束旋律
- 添加一个静音/开启音效的按钮
进阶三——粒子特效：
请在以下时机添加简单的粒子效果：
- 碰撞/失败时：红色粒子向四周扩散
- 得分/成功时：金色粒子向上飘散
- 粒子数量不要太多（每次10-15个），1秒内消失
- 不要影响游戏性能
6. 教师指南
本课技术备注：
-
CSS美化的技术原理（教师理解用）： AI在美化界面时主要修改CSS样式——背景色/渐变（
background）、字体大小/颜色（font-size/color）、圆角（border-radius）、阴影（box-shadow）、动画（@keyframes+animation）。学生不需要知道这些属性名，只需用自然语言描述想要的效果。AI对CSS美化的生成质量通常很高。 -
Vibe Design的关键技巧： 描述越具体，AI产出越接近预期。"科幻风的深蓝色星空背景"远好于"好看的背景"。建议学生分三层描述：整体风格→各元素具体样式→交互动画。加上"不要修改游戏逻辑"可以有效防止AI在美化时破坏功能。
-
难度调整的技术实现： 游戏难度通常由几个参数控制——移动速度、出现间隔、目标大小、时间限制等。AI通常能理解"速度降低30%""间隔增加到2秒"这类自然语言描述，并准确修改对应的JavaScript变量。如果AI不确定改哪个参数，提示学生补充描述："我说的是障碍物从上面掉下来的速度"。
-
胜利/失败反馈的技术实现： 主要涉及DOM操作（显示/隐藏结束画面）、CSS动画（文字弹出、纸屑飘落）、和事件监听（重新开始按钮）。彩色纸屑效果AI通常用Canvas粒子系统实现。如果效果不理想，建议简化要求——"不要纸屑动画，只要大字显示祝贺+按钮就行"。
-
截图和录屏工具： Windows自带截图工具（Win+Shift+S）操作简单，建议优先使用。录屏可用Windows自带的Xbox Game Bar（Win+G），或教师提前安装免费工具（如OBS Studio）。如果录屏工具安装有问题，课堂上可跳过录屏环节，只做截图+文字介绍。
-
关于"统一配色"的技术建议： 如果学生的界面颜色混乱，一个有效的提示词是："请帮我把整个界面的配色统一成以[主色]为主的方案，最多使用3种颜色（主色、辅色、强调色）。所有文字确保与背景有足够的对比度。"
常见问题 FAQ：
| 学生问题 | 应对方式 |
|---|---|
| "我不知道选什么风格" | "你的项目是什么主题？太空的就科幻风，动物的就可爱风，数学的就简洁风。或者告诉AI'你帮我选一个适合XX主题的风格'" |
| "AI美化之后我的游戏坏了" | "这是常见问题。跟AI说'你刚才的美化改坏了游戏功能。请撤销对游戏逻辑的修改，只保留视觉美化的部分。'或者在美化前记得保存一个备份" |
| "我的作品不是游戏，怎么做难度平衡？" | "工具类的'平衡'是'好不好用'——操作步骤会不会太多？提示够不够清楚？按钮好不好找？让同桌试用就知道了" |
| "我不会录屏" | "没关系！截图+一句话介绍就很好了。如果你会用手机，也可以用手机拍屏幕" |
| "一句话介绍写不出来" | "用填空句式：'[名字]是一个[类型]，你需要[做什么]来[达成什么目标]。'先填空再修改" |
| "我的同桌说我的项目很好不用改" | "让他/她再认真看一遍——有没有哪个字看不清？有没有哪里不知道怎么操作？'很好'通常意味着没认真测" |
| "我能不能加背景音乐？" | "可以！但用Web Audio API生成简单旋律就行，不需要外部音乐文件。跟AI说'用Web Audio API生成一段简短的背景旋律，可以开关静音'" |
| "美化和加功能可以同时做吗？" | "建议分开做。先美化，确认没问题。再加功能，确认没问题。一次改太多，出了问题你不知道是美化还是功能导致的" |
课堂风险预案：
- 如果AI服务不可用： 本课前15分钟（UX诊断）完全不依赖AI——学生可以正常填写检查清单。分段三（同桌互测）也不依赖AI——互测和填反馈表是纯线下活动。如果AI持续不可用，将分段二改为"用纸笔画出你想要的界面设计稿"（手绘UI），分段四改为"手写产品介绍+课堂内现场演示给全班看"。
- 如果学生上节课的项目文件丢失： 教师准备2-3份不同类型的基础项目作为替代。学生可以在替代项目上体验完整的"诊断→美化→互测→发布"流程。
- 如果学生进度差异过大： 快的学生完成全部四个环节后，安排为"UX顾问"角色——帮还在调试的同学做UX诊断和美化建议。慢的学生至少完成UX诊断+一项美化或反馈优化即可。
- 如果截图/录屏工具不可用： 跳过录屏环节，发布三件套简化为"截图+一句话介绍"。截图可用最原始的方法：按PrtSc键然后粘贴到画图工具保存。
- 如果同桌互测不积极（敷衍填表）： 教师在互测前明确要求："你的反馈表要写出'最喜欢的一个点'和'最想改的一个点'——不能写'都挺好'。具体的反馈才是对同桌最好的帮助！"可以在互测后随机抽查反馈表质量。
7. 5分钟日常AI挑战
本周挑战：Vibe Design改造大赛
挑战说明：
打开你今天打磨过的项目，做以下三件事：
- 再做一轮美化——找一个你今天没来得及改的视觉细节（按钮样式？动画效果？配色微调？），用Vibe Design让AI帮你改好
- 写一段"产品故事"——不超过3句话，告诉别人：你为什么做这个项目？它能带给用户什么体验？你在设计时最用心的是什么？
- 把截图+产品故事发到班级群——让同学们投票你的"一句话产品介绍"是否吸引人
示例产品故事：
"我做太空躲避大师是因为我超喜欢太空！我希望玩家在躲避陨石的时候能感受到在太空飞行的刺激。我最用心的地方是陨石的尾焰效果——看起来像真的在燃烧。"
评选标准：
- 美化后视觉效果是否协调（不是越花越好！）
- 产品故事是否打动人
- 班级群投票数最高者获"本周最佳产品设计师"称号
8. 拓展任务
拓展一（推荐）：极致打磨
选择你UX检查清单上还没解决的问题，继续优化。目标：让清单上的12项检查全部打勾。每改一项就截图保存，最后做一个"优化前 vs 优化后"的对比图。
具体方向建议：
- 给项目加一个精致的开场画面（标题+按钮+简短说明）
- 用Web Audio API加上音效反馈（得分叮、失败嗡）
- 优化移动端适配——让手机浏览器也能正常体验
拓展二（挑战）：UX评审师
找一个家人或朋友（不是同班同学），让他/她使用你的作品。全程在旁边观察：
- 他/她打开后第一反应是什么？
- 有没有不知道怎么操作的时刻？
- 玩完后说了什么？
把观察记录写成一份"用户测试报告"，包含：
- 测试者基本信息（年龄、是否玩过类似游戏/工具）
- 观察到的3个行为细节
- 测试者的直接反馈（原话记录）
- 你打算根据反馈做什么调整
这就是真正的产品经理在做的"可用性测试"！