🐠 鱼缸看护台
普利亚 · 13 岁 · 用 VS Code + Qwen
"我弟弟还不识字。给他做一个看图就懂的鱼缸状态界面"
背景
普利亚有一个 6 岁的弟弟,特别想自己照顾家里的小金鱼。但他还不识字,而家里所有的"养鱼指南"都是文字的。普利亚的妈妈也不想每次都要跟弟弟讲一遍"鱼今天需要吃东西吗"或"水该换了吗"。普利亚想:如果有一个界面,弟弟看一眼就知道该做什么,那就太好了。
动机 · 为什么做这个
普利亚本来想给弟弟买一个养鱼 app,但 app 都是给大人用的。她意识到:"没有人为一个还不识字的小朋友设计养鱼工具。"她决定自己做一个。
时间 + 工具
用了什么: HTML/CSS/JavaScript(自己写) + Qwen(问"怎样用图表示养鱼步骤")
花了多久: 两周,每天大约 1 小时
大人帮忙了多少: 无。普利亚懂编程,自己完成所有工作
步骤 · 这个孩子是怎么做的
- 观察弟弟: 观察弟弟的行为习惯,发现他能理解的是:大的图标、鲜艳的颜色、简单的操作。
- 养鱼知识整理: 列出一条金鱼每天需要的护理:喂食、换水、温度检查、清洁。
- 设计界面: 用四个大图标代表四个任务。每个图标有三种状态:红色(需要现在做)、黄色(可以做)、绿色(最近做过)。
- 获取帮助: 用 Qwen 问"怎样用颜色和图标代替文字来教一个不识字的小孩"。
- 编码实现: 用 HTML/CSS/JS 实现了界面。点击每个任务,会显示一个简单的"怎么做"的图示(比如喂食就显示一条鱼和一些颗粒)。
- 测试: 给弟弟用,看他有没有理解。有不理解的地方就改。
- 部署: 放在一个平板上,放在鱼缸旁边,弟弟可以随时看。
核心 prompt(节选)
我要给我 6 岁的弟弟设计一个"鱼缸护理界面"。他还不识字。 需求: 1. 用图标和颜色,不用文字 2. 每个任务有三个状态(红、黄、绿),弟弟能理解"现在该做"和"不用做" 3. 任务:喂食、换水、温度、清洁 4. 简单,不要超过 4 个任务 请给我: 1. 四个任务的图标设计建议 2. 颜色方案(用什么颜色代表"现在该做") 3. 怎样用图示解释"怎样做这个任务" 重点:我的弟弟能看懂 emoji 和简单的形状,但理解不了复杂的图。
样例对话 · AI 真的是这样答的
弟弟的操作:看到红色的"喂食"图标,点一下。
界面显示:屏幕上出现一条简单的鱼的图,旁边有很多小颗粒。下面有一个大按钮"拿起来"(显示一只手),旁边有一个"倒进去"(显示鱼食洒下来)。
弟弟完成任务后:点一下"完成"的大绿色按钮。
界面反应:喂食图标变成绿色,屏幕上出现一条"快乐的鱼"的简单动画(鱼在跳动)。然后自动显示下一个需要做的任务。
结果 · 真的发生了什么
- 弟弟每天早上自己打开平板,按照界面的指示照顾金鱼。
- 金鱼活了 4 个月。这是这个家里金鱼活得最久的一次。以前的金鱼都活不过一个月。
- 普利亚的妈妈说:"我再也不用跟弟弟讲『该喂鱼了』。他自己会看。"
- 最让人欣慰的是,弟弟的反应:"哥哥真厉害。"这是对普利亚工作的最直接的认可。
- 学校的美术老师看了这个项目,问可不可以在"为小小孩设计"的课里讲一讲。
这个孩子学到什么
普利亚学到的最重要的事是:设计不是为了"所有人",而是为了"一个具体的人"。当她把弟弟的具体需求放在最中心的时候,设计的每一个决定都变得有意义。她理解了什么叫"包容性设计" —— 不是"让这个东西能用",而是"为了这个人特别设计,让他能很轻松地用"。
什么没成 · 改了几遍才好
第一版的界面对弟弟来说太复杂了。普利亚原来想做一个"历史记录"功能,但弟弟不需要。她后来把所有"信息"都去掉,只保留"现在该做什么"和"怎样做"。第二版加上了"完成后的动画反馈",弟弟就特别喜欢了。改了三次才找到"对这个 6 岁小孩来说最简单最清楚的版本"。
- 她学会了 HTML 和 CSS。
- 她用了最新的网页框架。
- 她用图标和颜色代替文字,让弟弟这样还不识字的小朋友也能明白。
- 她的网页有很多交互功能。
- 她把这个网页发布到网上。
如果你也想做类似的事,怎样开始?
如果你也想为身边的小小朋友设计一个"界面"或"工具":1. 仔细观察这个人 —— 他能理解什么?他喜欢什么颜色?什么形状?2. 想清楚这个工具的目的:帮他做什么?3. 用最大的图标、最鲜艳的颜色、最简单的形状。4. 测试:让这个小朋友用一次,看他有没有理解。5. 不理解的地方就改。6. 如果理解了,你就成功了。不用代码有多复杂,关键是这个人能用。