872 lines
47 KiB
Markdown
872 lines
47 KiB
Markdown
---
|
||
课时: 8
|
||
主题: 用户体验与产品发布
|
||
核心能力: [审美力, 表达力]
|
||
核心工具: [穹狼 Code / Trae]
|
||
时长: 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秒演示视频（用于展示"怎么录屏"）
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
> 1. 拿一个基础游戏项目，用Vibe Design思维让AI美化界面——记录你的提示词和AI的表现
|
||
> 2. 故意做一个"配色刺眼、字体混乱"的反面案例，课堂上用于对比
|
||
> 3. 调整一个游戏的难度参数（速度、间隔、生命值等），体验"太难"和"太简单"的感觉
|
||
> 4. 给一个游戏添加胜利庆祝动画和失败鼓励画面，记录提示词
|
||
> 5. 用截图工具和录屏工具各操作一次，确保课堂演示流畅
|
||
> 6. 写一段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分钟认真"体检"一遍。步骤：
|
||
|
||
1. **先自己玩/用你的作品2分钟**——不是随便点两下，是认真体验
|
||
2. **按清单逐项勾选**——每一项都看看，不符合的打叉
|
||
3. **写下最需要改的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):**
|
||
|
||
**师：** 现在动手美化你的项目！步骤：
|
||
|
||
1. **看你的诊断清单**——"好看"维度有哪些问题？
|
||
2. **选一个你喜欢的整体风格**——从风格参考里选一个，或者自己想一个
|
||
3. **写Vibe Design提示词**——说清楚整体风格、每个元素的视觉效果、不要改什么
|
||
4. **发给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):**
|
||
|
||
**师：** 界面变好看了！但好看只是三维度之一。现在解决第二个和第三个维度——**好玩**和**有感觉**。
|
||
|
||
**师：** 怎么知道你的游戏好不好玩？有一个最简单的办法——**让别人玩**。你自己觉得好玩不算数，因为你太熟悉了。要让"第一次玩的人"告诉你真实感受。这就叫——**用户测试**。
|
||
|
||
**师：** 等下你要跟你的同桌互换作品来玩。但不是随便玩——你要填一张"互测反馈表"。看看这张表——
|
||
|
||
【投影展示同桌互测反馈表】
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ 同桌互测反馈表 │
|
||
│ │
|
||
│ 测试员：____________ 作品名称：____________ │
|
||
│ │
|
||
│ 第一印象（打开的第一秒）： │
|
||
│ □ 看起来很专业 □ 还不错 □ 有点简陋 □ 看不懂怎么玩 │
|
||
│ │
|
||
│ 难度感受： │
|
||
│ □ 太简单了，没挑战 □ 刚刚好 □ 有点难 □ 太难了！ │
|
||
│ │
|
||
│ 玩完后的感受： │
|
||
│ □ 还想再玩！ □ 还行吧 □ 不太想玩了 │
|
||
│ │
|
||
│ 最喜欢的一个点：_____________________ │
|
||
│ 最想改的一个点：_____________________ │
|
||
│ │
|
||
│ 结束体验打分（给反馈系统打分）： │
|
||
│ 赢了/做得好的时候： □ 有庆祝 □ 一般 □ 没什么反馈 │
|
||
│ 输了/做得差的时候： □ 有鼓励 □ 一般 □ 冷冰冰的 │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**师：** 这张表会告诉你三件关键的事：
|
||
1. **第一印象**——别人打开你的作品第一秒的感受
|
||
2. **难度感受**——是太难还是太简单
|
||
3. **反馈体验**——赢了输了有没有感觉
|
||
|
||
**师：** 互测之后，我们要根据反馈做两件事——**调难度**和**加反馈**。
|
||
|
||
**师：** 关于调难度，我给你们一个"黄金难度公式"——
|
||
|
||
```
|
||
黄金难度 = 普通人第一次玩能撑过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):**
|
||
|
||
**师：** 经过三轮打磨——美化了界面、调整了难度、加了反馈——你的作品已经从"粗糙版"变成"精致版"了！但还差最后一步——**发布**。
|
||
|
||
**师：** 什么叫发布？你做了一幅画，但一直锁在抽屉里——别人看得到吗？看不到。发布就是把你的画"挂出来"让别人看到。对于你的项目来说，发布就是——**让不在你身边的人也能体验到你的作品**。【诊断点：学生是否理解"发布"不等于"做完了"】【理解层】
|
||
|
||
**师：** 怎么发布？今天我们学最简单的方法——"三件套"发布法：
|
||
|
||
**发布三件套：**
|
||
1. **一张截图**——你的作品最好看的那个画面
|
||
2. **一段录屏**——30秒演示你的作品怎么玩/怎么用
|
||
3. **一句话介绍**——让别人一看就知道你的作品是做什么的
|
||
|
||
**师：** 我来演示。先看**截图**——
|
||
|
||
【教师演示截图操作】
|
||
|
||
**师：** 截图很简单。Windows按 Win+Shift+S，选一个区域就行。关键是——截哪个画面？要截你作品**最好看、最能体现核心玩法**的那个画面。不是随便截一张。
|
||
|
||
**师：** 比如我的太空躲避大师，我不会截开始画面（太无聊），我会截游戏进行中、陨石满天飞、飞船在躲避的那个紧张时刻——这张图一看就知道这是什么游戏，而且看起来很刺激。
|
||
|
||
**师：** 再看**录屏**——
|
||
|
||
【教师演示录屏，播放提前准备好的30秒演示视频】
|
||
|
||
**师：** 录屏就是录一段你玩游戏/用工具的过程。30秒就够了——展示核心玩法、展示一次胜利或失败、展示你的精美界面。不需要录很长。
|
||
|
||
**师：** 最后——**一句话产品介绍**。这是最考验功力的。看看这个模板——
|
||
|
||
```
|
||
[产品名] —— 一个[类型]，你需要[核心操作]来[达成目标]。
|
||
```
|
||
|
||
**师：** 比如我的：
|
||
|
||
```
|
||
太空躲避大师 —— 一个太空生存游戏，
|
||
你需要左右移动飞船来躲避从天而降的陨石，看看你能撑多久！
|
||
```
|
||
|
||
**师：** 一句话就说清楚了——是什么、怎么玩、目标是什么。别人看了就知道要不要试试。
|
||
|
||
**学生实践 (Practice):**
|
||
|
||
**师：** 现在做你的"发布三件套"！给你们10分钟：
|
||
|
||
1. **截一张最好的截图**（2分钟）——选你作品最精彩的画面，Win+Shift+S截图，保存
|
||
2. **写一句话产品介绍**（3分钟）——用模板"[名字]——一个[类型]，你需要[操作]来[目标]"
|
||
3. **录一段30秒演示**（5分钟）——打开录屏，展示你的作品核心体验，然后停止录屏
|
||
|
||
提示：如果你不会录屏，也没关系——截图+一句话介绍已经是很好的发布了！
|
||
|
||
一句话产品介绍的保底模板（如果写不出来）：
|
||
```
|
||
[名字] —— 用[操作方式]来[做什么]的[类型]！
|
||
```
|
||
|
||
示例：
|
||
- "记忆大师 —— 用点击翻牌来配对的记忆力挑战游戏！"
|
||
- "数学闪电 —— 用心算来打败倒计时的数学竞速工具！"
|
||
- "我的星球 —— 用鼠标画画来设计你的专属星球的创意画板！"
|
||
|
||
开始！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 学生是否在认真选择截图画面（而不是随便截）→ "想想哪个画面最能吸引人"
|
||
- 一句话介绍是否包含了类型、操作、目标 → "读一遍你写的，别人能听懂是什么吗？"
|
||
- 录屏是否有困难 → 帮助操作，或建议只做截图+文字介绍
|
||
- 做得快的学生 → "试试把截图、介绍、录屏整理在一起，发到班级群"
|
||
|
||
**进度同步 (Checkpoint):**
|
||
|
||
**师：** 时间到！完成了截图的举手？写了一句话介绍的举手？录了屏的举手？太好了！【诊断点：发布三件套的完成度】
|
||
|
||
**师：** 谁来读一下你的一句话产品介绍？【诊断点：学生的产品介绍是否清晰且有吸引力】【应用层】
|
||
|
||
【请3-4位学生读自己的一句话介绍】
|
||
|
||
**【分支A】若学生的介绍清晰且有吸引力：**
|
||
**师：** 一听就知道你的产品是干什么的，而且让我想试试！这就是好的产品介绍——简短、清楚、有吸引力。
|
||
|
||
**【分支B】若学生的介绍太模糊（"一个好玩的游戏"）：**
|
||
**师：** "好玩的游戏"——什么游戏？怎么玩？试试用模板："你需要[做什么]来[达成什么]"。越具体，别人越想试。
|
||
|
||
**【分支C】若学生的介绍太长（说了一大段）：**
|
||
**师：** 说了很多细节，但产品介绍要"一句话"就够！想象你在电梯里只有10秒跟别人说——你会怎么说？挑最核心的。
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||
|
||
**【环节】成果展示 (6分钟)**
|
||
|
||
**师：** 今天最后的展示环节！这次的展示跟之前不一样——你不只要展示作品，还要做一次"迷你产品发布"。步骤：
|
||
|
||
1. 先读你的**一句话产品介绍**
|
||
2. 展示你的**截图**（或者现场打开作品）
|
||
3. 用30秒**现场演示**核心体验
|
||
4. 告诉大家：你打磨前和打磨后**最大的变化**是什么？
|
||
|
||
【请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. 教师指南
|
||
|
||
**本课技术备注：**
|
||
|
||
1. **CSS美化的技术原理（教师理解用）：** AI在美化界面时主要修改CSS样式——背景色/渐变（`background`）、字体大小/颜色（`font-size/color`）、圆角（`border-radius`）、阴影（`box-shadow`）、动画（`@keyframes`+`animation`）。学生不需要知道这些属性名，只需用自然语言描述想要的效果。AI对CSS美化的生成质量通常很高。
|
||
|
||
2. **Vibe Design的关键技巧：** 描述越具体，AI产出越接近预期。"科幻风的深蓝色星空背景"远好于"好看的背景"。建议学生分三层描述：整体风格→各元素具体样式→交互动画。加上"不要修改游戏逻辑"可以有效防止AI在美化时破坏功能。
|
||
|
||
3. **难度调整的技术实现：** 游戏难度通常由几个参数控制——移动速度、出现间隔、目标大小、时间限制等。AI通常能理解"速度降低30%""间隔增加到2秒"这类自然语言描述，并准确修改对应的JavaScript变量。如果AI不确定改哪个参数，提示学生补充描述："我说的是障碍物从上面掉下来的速度"。
|
||
|
||
4. **胜利/失败反馈的技术实现：** 主要涉及DOM操作（显示/隐藏结束画面）、CSS动画（文字弹出、纸屑飘落）、和事件监听（重新开始按钮）。彩色纸屑效果AI通常用Canvas粒子系统实现。如果效果不理想，建议简化要求——"不要纸屑动画，只要大字显示祝贺+按钮就行"。
|
||
|
||
5. **截图和录屏工具：** Windows自带截图工具（Win+Shift+S）操作简单，建议优先使用。录屏可用Windows自带的Xbox Game Bar（Win+G），或教师提前安装免费工具（如OBS Studio）。如果录屏工具安装有问题，课堂上可跳过录屏环节，只做截图+文字介绍。
|
||
|
||
6. **关于"统一配色"的技术建议：** 如果学生的界面颜色混乱，一个有效的提示词是："请帮我把整个界面的配色统一成以[主色]为主的方案，最多使用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改造大赛**
|
||
|
||
**挑战说明：**
|
||
|
||
打开你今天打磨过的项目，做以下三件事：
|
||
|
||
1. **再做一轮美化**——找一个你今天没来得及改的视觉细节（按钮样式？动画效果？配色微调？），用Vibe Design让AI帮你改好
|
||
2. **写一段"产品故事"**——不超过3句话，告诉别人：你为什么做这个项目？它能带给用户什么体验？你在设计时最用心的是什么？
|
||
3. **把截图+产品故事发到班级群**——让同学们投票你的"一句话产品介绍"是否吸引人
|
||
|
||
**示例产品故事：**
|
||
> "我做太空躲避大师是因为我超喜欢太空！我希望玩家在躲避陨石的时候能感受到在太空飞行的刺激。我最用心的地方是陨石的尾焰效果——看起来像真的在燃烧。"
|
||
|
||
**评选标准：**
|
||
- 美化后视觉效果是否协调（不是越花越好！）
|
||
- 产品故事是否打动人
|
||
- 班级群投票数最高者获"本周最佳产品设计师"称号
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**拓展一（推荐）：极致打磨**
|
||
|
||
选择你UX检查清单上还没解决的问题，继续优化。目标：让清单上的12项检查全部打勾。每改一项就截图保存，最后做一个"优化前 vs 优化后"的对比图。
|
||
|
||
具体方向建议：
|
||
- 给项目加一个精致的开场画面（标题+按钮+简短说明）
|
||
- 用Web Audio API加上音效反馈（得分叮、失败嗡）
|
||
- 优化移动端适配——让手机浏览器也能正常体验
|
||
|
||
**拓展二（挑战）：UX评审师**
|
||
|
||
找一个家人或朋友（不是同班同学），让他/她使用你的作品。全程在旁边观察：
|
||
- 他/她打开后第一反应是什么？
|
||
- 有没有不知道怎么操作的时刻？
|
||
- 玩完后说了什么？
|
||
|
||
把观察记录写成一份"用户测试报告"，包含：
|
||
1. 测试者基本信息（年龄、是否玩过类似游戏/工具）
|
||
2. 观察到的3个行为细节
|
||
3. 测试者的直接反馈（原话记录）
|
||
4. 你打算根据反馈做什么调整
|
||
|
||
这就是真正的产品经理在做的"可用性测试"！
|