上一篇文章中，我分享了兒童任務管理平台的雛形，已經能夠順利新增任務與列出任務清單。雖然功能已經達到基本需求，但我真正的目標，是打造一個讓小孩願意主動使用的平台。

這意味著它不能只是冷冰冰的任務清單，更不能靠單純遊戲化去短暫吸引孩子，而是要引導孩子建立自發完成任務的習慣。

核心方向

在經過與 AI 討論後，我把關鍵設計鎖定在兩個方向：

• 泡泡任務 — 吸引孩子點選的互動設計
• 語音輔助 — 提供清楚的指引與提醒

接下來，還有一個能讓孩子持續回來的「秘密武器」：獎勵商店。

泡泡任務：視覺吸引，主動選擇

我在介面上不用死板的列表，而是讓任務變成漂浮的泡泡，隨機飄動在畫面上。對小孩來說，漂浮物天生就有「想戳一下」的衝動，這種心理驅動可以引發他們去主動選擇任務。

每個泡泡上會顯示任務名稱，我的平台將任務分成三種：

• 主線任務(時間軸)：每天必須完成，完成後可獲得額外獎勵
• 支線任務(圓形泡泡)：可自由選擇，完成後獲得拼圖，能在冒險地圖中使用
• 限時任務(方形泡泡)：必須在指定時間完成，逾時消失且無法獲得獎勵

當孩子選定任務並按下「開始」，系統會切換任務狀態並記錄時間，讓他們可以離開螢幕去行動，而不用一直盯著電腦或平板(這邊可以直接進 Firebase console 查看任務狀態和時間是否正確更新)。

不過後續測試時發現，漂浮的泡泡時常擋住後面的主線任務，因此又請 AI 設計一個，碰一下就會加速前進的機制，沒想到完成後讓我的小孩在選任務時都忍不住多戳幾下......。

語音輔助：不識字也能獨立完成

對於 4–6 歲的孩子來說，光看文字指引可能難以完全理解，因此我在平台中加入了高品質的語音輔助功能，讓孩子只要「聽」就能理解任務目標，無須依賴家長陪同。

一開始我測試了瀏覽器內建的 Web Speech API，好處是可以零後端快速導入，但缺點也很明顯——聲音偏機械化，缺乏自然感。最終我選擇了 Google Cloud Text-to-Speech 作為主要方案，因為它的語音表現更接近真人，孩子聽起來也更舒服。

語音架構概覽

整體架構很簡單：

1. 前端：把要朗讀的文字送到雲端 URL。
2. 雲端（Firebase Cloud Functions）：由 Google 代管的 Node.js/TypeScript 環境，接收到文字後，呼叫 Google Cloud Text-to-Speech API，將文字轉成 MP3（base64 格式）。
3. 前端：拿到 MP3 後，直接用 <audio> 播放。
4. 備援：若雲端暫時不可用，系統會退回使用 Web Speech API 朗讀，確保語音輔助不中斷。

後端部署流程

• 在 Google Cloud Console 啟用 Text-to-Speech API
• 在 Functions 專案中安裝套件 @google-cloud/text-to-speech
• 撰寫一個 HTTP 端點接受 text 與 languageCode 等參數，並回傳 base64 MP3

部署指令：

firebase deploy --only functions

前端整合

• 以 REST 呼叫雲端端點，取得 base64 MP3，然後生成 Audio 物件播放：

fetch("https://us-central1-YOUR_PROJECT.cloudfunctions.net/generateSpeechREST?text=你好&languageCode=zh-TW")
  .then(res => res.json())
  .then(data => {
    const audio = new Audio("data:audio/mp3;base64," + data.audioContent);
    audio.play();
  });

整個過程延遲很低，孩子幾乎能即時聽到指令，達到拿到任務 → 馬上執行的效果。不過有個小問題是，開啟應用的首次語音撥放會稍微延遲，雲端函式首次被喚醒會多幾百毫秒到數秒不等。
當然，整個流程完全是 AI 設計、AI 實作，我的任務就是審核實作的是否合理，以及驗證效果是否符合需求。

獎勵商店：持續回來的動力

在心理學中，適當的獎勵是推動行為的有效方式。但若過度依賴物質又可能造成只為了獎勵而做事，因此預設獎勵設計以活動型為主、實體型為輔(當然家長還是可以自由新增刪除項目)，讓孩子充滿成就感與正向循環才是核心價值。

獎勵類型範例

• 活動型獎勵：
  • 周末可以選擇去哪裡玩
  • 獲得額外的親子遊戲時間
• 實體獎勵：
  • 文具、貼紙
  • 小餅乾
• 特殊獎勵：
  • 倍增藥水，讓任務獲得獎勵倍增(帶入輕度遊戲化獎勵)

用 ChatGPT 生成獎勵圖片

我直接在 ChatGPT 中輸入需求，讓它生成適合整個專案風格的獎勵圖片，例如：

參考附圖，以同樣風格，產生一張，兩個小孩一起去遊樂園玩的圖片。

整個過程算是流暢，基本都是一次到位，就是生圖速度有點慢。

動畫設計：讓獎勵更有成就感

星星飛進錢袋

孩子完成任務後，最有成就感的時刻就是看到星星獎勵被收進錢袋。我利用 AI 來設計動畫，先描述需求：

當家長按下審核完成後觸發一個星星從畫面右上角飛向左下角錢袋的動畫，依據獲得的星星數量，產生對應數量的星星。

第一次生成的版本星星雖然會飛，但落點不夠精準。於是我反覆修改描述方式，經過數次調整，最終成功呈現平滑軌跡 + 精確落點的動畫，讓孩子在完成任務時可以有視覺化的滿足感。

獎勵兌換動畫

在商店中兌換獎勵時，也不能只是「星星數字減少」這麼簡單。我同樣透過 AI 輔助，在完成獎勵兌換時，出現特別的動畫效果和音效，這樣孩子會覺得星星沒有「憑空消失」，而是透過一個轉換過程，轉換成了自己的獎勵而更有成就感。

總結

透過「泡泡任務」吸引孩子開始，「語音輔助」引導他們執行任務，再用「獎勵商店」和「精美動畫」提供持續回來的理由，平台成功從單純的任務清單，升級成一個能幫助孩子建立自律與成就感的互動系統。

AI 在這過程中扮演了多重角色——幫我生成貼圖、提供動畫程式碼、快速迭代視覺設計，讓整個開發週期大幅縮短，也讓產品在第一版就能擁有吸引孩子的完整體驗。

敬請期待下一篇：《從任務清單到動物冒險地圖：AI 輔助下的兒童互動設計(上集)》