--- 课时: 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. 你打算根据反馈做什么调整 这就是真正的产品经理在做的"可用性测试"！