output/option1-magic-camera-detail.md

Option 1 詳細設計：神奇相機

Date: 2026-07-12
Project: kids-photo-voice-minigame
Status: design detail (not built)

1. 一句定位

影一張相，講一句嘢，即刻聽返自己把聲。
用相機 + 咪高峰，練命名、描述、自信；唔考試、唔打分。

核心理念： - 3 歲已經鍾意影相同錄音 → 唔使教「點玩 app」，只要放大呢兩個動作 - 學習發生在「影完之後講」同「聽返自己」 - 家長係玩伴，唔係考官

2. 點解推薦 Option 1

角度	說明
興趣 fit	直接用中影相 + 錄音
學習 fit	命名、描述、情緒、手眼、自主
Scope	單一 loop，最易做完
可擴展	之後可加任務卡（Option 2）、故事 mode（Option 3），唔使推翻
風險	比「多科平台」低好多，唔易 scope 爆炸

3. 核心 Game Loop（一輪 20–40 秒）

[主畫面]
   │
   ▼
① 撳大掣「影張相」
   │
   ▼
② 相機預覽 → 撳快門（或用相簿揀相 fallback）
   │
   ▼
③ 大圖確認：「呢張得唔得？」
   - 得 → 下一步
   - 唔得 → 再影
   │
   ▼
④ 提示：「講下係咩呀～」（可播叮一聲）
   │
   ▼
⑤ 撳大掣「講嘢」開始錄音（3–8 秒，可提早停）
   │
   ▼
⑥ 即時播返自己把聲 + 相一齊顯示
   │
   ▼
⑦ 慶祝（星星 / 掌聲 / 「好叻呀！」）
   │
   ├─ 再玩一次（回到 ①）
   └─ 收埋（入今日小相簿）

成功標準（一輪）： - 3 歲可以自己完成大部分按掣（家長可扶手機） - 由影到聽返 ≤ 3 個大動作 - 一定有即時回饋，唔會「儲存中…」死等

4. 學習點點樣發生（唔靠測驗）

4.1 自然發生的學習

命名：影杯 → 講「杯杯」
描述：影爸爸笑 → 講「爸爸開心」
分類萌芽：連續影紅色嘢（家長口頭引導即可）
情緒：用聲線表達「鍾意／驚／好玩」
手眼協調：對準、撳快門
自信：聽返自己把聲 = 「我講得到」

4.2 家長輕引導（可選，唔強制）

螢幕下方或家長小提示卡（小字，畀大人睇）： - 「問佢：呢個係咩？」 - 「問佢：咩顏色？」 - 「問佢：你鍾唔鍾意？」 - 「一齊講：紅色的蘋果」

原則： - 唔糾正口音 - 唔要求完整句子 - 重複佢講嘅詞已經係學習 - 家長講一句、仔跟一句都 OK

4.3 明確唔做

❌ AI 評分「講得啱唔啱」
❌ 強制要講指定詞先過關
❌ 錯咗要重來
❌ 顯示發展 milestone 分數

5. 畫面設計（Mobile-first，3 歲 UX）

5.1 UX 原則

大掣：最少 64–80px 高，拇指友好
少字：主畫面最多 1–2 個字／短句
高對比：黃/橙大掣 + 深色底或淺色乾淨底
即時：撳完 0.3 秒內有視覺/聲音反應
無表單：無 login、無設定迷宮
可重玩：永遠有「再影一張」

5.2 畫面清單（V1）

Screen A — 主畫面（Home）

中央超大圓掣：📷 影張相
次要小入口：📚 今日相簿（角落）
可選：溫柔背景音 off by default
文案例：「一齊影相講嘢！」

Screen B — 相機

全螢幕預覽
底部超大快門
可翻前後鏡（家長用細掣）
取消返回

Screen C — 相確認

大圖
兩個大掣：✅ 得啦 / 🔄 再影

Screen D — 錄音

上面仍顯示剛影嘅相（細/中）
中央大掣：🎤 講嘢（按住或點一下開始）
錄音中：波紋動畫 + 秒數（3–8s）
可提前「停」
提示句（大字或語音）：「係咩呀？」

Screen E — 回放 + 慶祝

相 + 自動播錄音
大字：「好叻呀！」或星星雨
兩個掣：🔁 再玩 / 💾 收埋

Screen F — 今日小相簿

大 thumbnail 直向/2 欄
撳一張 = 再播嗰段聲
可刪（家長長按，V1 可簡化）

5.3 聲音設計（細）

快門聲：短
開始錄音：叮
完成：開心短旋律 / 掌聲（唔刺耳）
音量：預設中等，唔嚇親

5.4 無障礙 / 實務

字少，靠 icon + 顏色
粵語口語文案（「影張相」「講嘢」「好叻呀」）
WhatsApp in-app browser 可能無 camera → 提示用 Safari/Chrome 打開
Fallback：無相機權限時改「由相簿揀相」

6. 玩法變奏（同一 loop，唔加新 app）

V1 只做「自由影講」。
同一架構之後可加「提示層」，仍叫神奇相機：

6.1 Free Play（V1 必做）

想影咩就影咩，想講咩就講咩。

6.2 Prompt Cards（V1.1 可選）

每次主畫面頂部一張輕提示（可跳過）： - 🎨 影啲紅色 - 👟 影下鞋鞋 - 😊 影個笑臉 - 🧸 影你最鍾意嘅玩具

仍係：影 → 講 → 播；唔自動判定啱錯。
家長可口頭話「哇紅色！」。

6.3 Emotion Round（V1.2）

提示：「做個開心面 / 講句我開心」
練情緒詞，仍然唔評分。

6.4 Story Strip（V2，接近 Option 3）

今日相簿入面揀 2–3 張，順住播，變小故事。
唔入 V1。

7. 家長角色設計

角色	做咩	唔做咩
手機支架	扶穩、對準	唔代佢全部撳完
語言夥伴	問「係咩呀？」重複佢嘅詞	唔糾正到挫敗
氣氛組	一齊慶祝	唔比較「佢同學識更多」
安全員	控制時長、環境安全	唔用嚟換安靜坐定

建議 session： - 平日 1 次 × 3–8 分鐘 - 夠玩 5–15 輪就好 - 仔唔想講只影：都得，稍後先再引講

8. 內容與資料（V1）— Storage-safe 修訂

行為 insight

睿睿核心爽感：自己錄/影 → 自己聽返睇返。
所以「再播」要極淺；但 VPS disk 唔夠當家庭雲。

存咩（V1）

photo（壓縮後）
audio ≤ 8 秒
created_at
唔存 video

儲存策略（揀一）

A. 推薦：媒體本機（IndexedDB）
- VPS 只放 app 殼
- 相/聲留喺手機 browser
- 幾乎唔食 server storage

B. 備選：VPS 存但硬上限
- 最多 50 筆或 200MB
- 超額刪最舊
- 上載前 JPEG 壓縮（最長邊 1280）
- 家長可一鍵清空

相簿 UX

今日／全部（若本機：就係本機列表）
撳一張 = 再播聲 + 再睇相（主路徑）
可刪單筆

隱私

家用無帳號
V1 無公開分享、無人臉識別、無 AI 評分

9. 技術草圖（批准後先做）

Stack

Path：/opt/data/kids-camera/（暫名）
Port：5053
Express + better-sqlite3 + multer
Frontend：vanilla HTML/CSS/JS，mobile-first
Proxy（可選）：Ming's Note /kids/ → 5053

Browser APIs

Camera：getUserMedia({ video: { facingMode: 'environment' } })
Fallback：<input type="file" accept="image/*" capture="environment">
Mic：MediaRecorder → webm/mp4（視機型）
Playback：<audio> + <img>

API（極簡）

POST /api/entries — multipart: photo + audio
GET /api/entries?day=today|all
GET /api/entries/:id
DELETE /api/entries/:id
static /uploads/...

HTTPS / 權限注意

getUserMedia 通常要 secure context（https 或 localhost）
經 Zeabur 公網 https 較穩
HTTP 內網可能要 fallback file input

10. V1 / V1.1 / 不做邊界

V1（最小可玩）

[x] 影相（或相簿揀）
[x] 錄音 3–8 秒
[x] 即時播返
[x] 慶祝反饋
[x] 存入今日相簿
[x] 再玩
[x] 粵語大掣 UI
[x] 刪除單筆（家長）

V1.1（有人真係玩過先加）

提示卡（顏色/物件）
簡單 sticker 收集
家長提示句開關
前後鏡切換優化

明確不做（防膨脹）

Login / 多小孩 profile
AI 語音評分
Milestone dashboard
社交分享 feed
複雜設定頁
Native App Store
一次做齊 3 個 game mode

11. 成功標準（點算做得好）

對小朋友

肯自己撳最少一個大掣
願意聽返自己把聲（笑/重播）
自發「再嚟！」

對家長

1 分鐘內打開就玩到
唔使讀說明
覺得係玩，唔係上堂

對產品

一輪 ≤ 3 步
手機實機 camera + mic 成功
無字海、無卡死 loading

12. 風險同對策

風險	對策
淨係影唔講	錄音掣超大；提示「講下係咩」；家長口頭帶；允許先影後講
權限被拒	file input fallback；清楚提示開 Safari/Chrome
3 歲拿不穩	家長扶；大快門；可後置為主
太嘈/太長	預設短錄音 cap 8s；慶祝音短
Scope 變教育平台	死守單一 loop；新 idea 入 V1.1 backlog
WhatsApp 內置瀏覽器	引導「用瀏覽器打開」

13. 範例 Session 劇本（5 分鐘）

爸爸打開「神奇相機」
睿睿影低地玩具車
提示：係咩呀？
佢講：「車車！」
播返 → 一齊笑 → 星星
再影媽媽面
講：「媽媽！」
收工，今日相簿有 2 張可重播

學習已發生：命名、親子互動、自主操作、聽覺回饋。
全程無測驗。

14. 文案庫（粵語口語草稿）

影張相
講嘢
得啦
再影
好叻呀！
再玩
收埋
今日相簿
係咩呀～
講多句都得
要打開相機／咪高峰先玩到

15. 建議決策

Approve Option 1 = V1 神奇相機（Free Play only）
之後先加 Prompt Cards。

若同意，下一步（仍 plan/mock 優先）： 1. 出 1 頁 mobile flow mock（文字 wire 或圖） 2. 確認名：神奇相機 / 睿睿相機 / 其他 3. 批准後先起可玩原型

16. Open questions（Option 1 專用）

名：神奇相機 / 睿睿相機 / 其他？
錄音：點一下開始，定按住講？
相簿：要長期留，定只留 N 日？
主要裝置：Henry 手機 / Henna 手機 / iPad？
慶祝風格：星星、掌聲、定兩樣都要？

🐒 Ming's Note