你正在 萌芽版 · 作品展示墙 · 回到展示墙 · 萌芽版主页 · 总入口

← 作品展示

🐠 鱼缸看护台

普利亚 · 13 岁 · 用 VS Code + Qwen

"我弟弟还不识字。给他做一个看图就懂的鱼缸状态界面"

背景

普利亚有一个 6 岁的弟弟,特别想自己照顾家里的小金鱼。但他还不识字,而家里所有的"养鱼指南"都是文字的。普利亚的妈妈也不想每次都要跟弟弟讲一遍"鱼今天需要吃东西吗"或"水该换了吗"。普利亚想:如果有一个界面,弟弟看一眼就知道该做什么,那就太好了。

动机 · 为什么做这个

普利亚本来想给弟弟买一个养鱼 app,但 app 都是给大人用的。她意识到:"没有人为一个还不识字的小朋友设计养鱼工具。"她决定自己做一个。

时间 + 工具

用了什么: HTML/CSS/JavaScript(自己写) + Qwen(问"怎样用图表示养鱼步骤")

花了多久: 两周,每天大约 1 小时

大人帮忙了多少: 无。普利亚懂编程,自己完成所有工作

步骤 · 这个孩子是怎么做的

  1. 观察弟弟: 观察弟弟的行为习惯,发现他能理解的是:大的图标、鲜艳的颜色、简单的操作。
  2. 养鱼知识整理: 列出一条金鱼每天需要的护理:喂食、换水、温度检查、清洁。
  3. 设计界面: 用四个大图标代表四个任务。每个图标有三种状态:红色(需要现在做)、黄色(可以做)、绿色(最近做过)。
  4. 获取帮助: 用 Qwen 问"怎样用颜色和图标代替文字来教一个不识字的小孩"。
  5. 编码实现: 用 HTML/CSS/JS 实现了界面。点击每个任务,会显示一个简单的"怎么做"的图示(比如喂食就显示一条鱼和一些颗粒)。
  6. 测试: 给弟弟用,看他有没有理解。有不理解的地方就改。
  7. 部署: 放在一个平板上,放在鱼缸旁边,弟弟可以随时看。

核心 prompt(节选)

我要给我 6 岁的弟弟设计一个"鱼缸护理界面"。他还不识字。

需求:
1. 用图标和颜色,不用文字
2. 每个任务有三个状态(红、黄、绿),弟弟能理解"现在该做"和"不用做"
3. 任务:喂食、换水、温度、清洁
4. 简单,不要超过 4 个任务

请给我:
1. 四个任务的图标设计建议
2. 颜色方案(用什么颜色代表"现在该做")
3. 怎样用图示解释"怎样做这个任务"

重点:我的弟弟能看懂 emoji 和简单的形状,但理解不了复杂的图。

样例对话 · AI 真的是这样答的

弟弟的操作:看到红色的"喂食"图标,点一下。

界面显示:屏幕上出现一条简单的鱼的图,旁边有很多小颗粒。下面有一个大按钮"拿起来"(显示一只手),旁边有一个"倒进去"(显示鱼食洒下来)。

弟弟完成任务后:点一下"完成"的大绿色按钮。

界面反应:喂食图标变成绿色,屏幕上出现一条"快乐的鱼"的简单动画(鱼在跳动)。然后自动显示下一个需要做的任务。

结果 · 真的发生了什么

这个孩子学到什么

普利亚学到的最重要的事是:设计不是为了"所有人",而是为了"一个具体的人"。当她把弟弟的具体需求放在最中心的时候,设计的每一个决定都变得有意义。她理解了什么叫"包容性设计" —— 不是"让这个东西能用",而是"为了这个人特别设计,让他能很轻松地用"。

什么没成 · 改了几遍才好

第一版的界面对弟弟来说太复杂了。普利亚原来想做一个"历史记录"功能,但弟弟不需要。她后来把所有"信息"都去掉,只保留"现在该做什么"和"怎样做"。第二版加上了"完成后的动画反馈",弟弟就特别喜欢了。改了三次才找到"对这个 6 岁小孩来说最简单最清楚的版本"。

← 看更多作品

小测 普利亚为弟弟做的这个界面,最聪明的是什么?
选最有道理的答案:
  • 她学会了 HTML 和 CSS。
  • 她用了最新的网页框架。
  • 她用图标和颜色代替文字,让弟弟这样还不识字的小朋友也能明白。
  • 她的网页有很多交互功能。
  • 她把这个网页发布到网上。
解释:这是真正的"为了一个具体的人而设计"。普利亚没有做一个"通用的鱼缸管理工具",她做的是"专门为我弟弟这个还不识字的 6 岁小朋友"设计的界面。这才是设计的真谛 —— 理解你的用户,为他而不是为"所有人"而设计。
如果你也想做类似的事,怎样开始?

如果你也想为身边的小小朋友设计一个"界面"或"工具":1. 仔细观察这个人 —— 他能理解什么?他喜欢什么颜色?什么形状?2. 想清楚这个工具的目的:帮他做什么?3. 用最大的图标、最鲜艳的颜色、最简单的形状。4. 测试:让这个小朋友用一次,看他有没有理解。5. 不理解的地方就改。6. 如果理解了,你就成功了。不用代码有多复杂,关键是这个人能用。