在完成了我平台的基礎核心功能後，我很快發現一個問題：
基礎功能雖然齊備，但畫面和體驗對小孩來說依然有些單調。

身為一個以「兒童任務管理」為核心的專案，我當然希望孩子能主動打開平台，而不是家長每天催促著：

「快點去打開看看！」

所以我開始思考——如何增加一些吸引兒童的輔助效果，讓他們像玩遊戲一樣，期待下一步？

第一個靈感：遊戲式冒險地圖

腦中第一個浮現的想法，就是 遊戲化冒險地圖」。
想像一下，平台裡有很多不同的地圖，每張地圖都代表一個世界，孩子需要一關一關地闖關、拓展地圖，就像玩 RPG 一樣。
每完成幾個任務，就能解鎖新地圖、新挑戰，甚至獲得道具和成就。

於是我興致滿滿地和 AI 展開討論……
但還沒開始實作，光是討論做法，就很快遇到現實的阻力：

• 設計成本高
  每個關卡如果要有差異化，就必須花時間精心設計。不然很容易變成只是「換個顏色」的重複內容。

• 素材需求大
  遊戲地圖、場景、角色、特效……每樣都是一筆時間成本，尤其是對我這種個人小專案來說。

• 方向偏離
  如果遊戲元素太重，可能反而掩蓋了平台的核心目的——協助孩子管理和完成任務。

經過一番掙扎，我暫時把這條路擱置了。

靈感轉折：動物地圖

就在這時，我想到了一個更貼近孩子興趣的方向——動物。
我的兒子和女兒都非常喜歡動物，而且我相信大多數小孩都不會拒絕動物的魅力。

那如果我做一張可以「解鎖動物」的地圖，不就能同時兼顧趣味性和教育性？

想像一下，完成任務就能獲得一個新動物。
孩子不僅可以蒐集牠們，還能點擊查看介紹、照片、叫聲……這不就很有沉浸感了嗎？

而且，這個設計還有幾個好處：

• 有學習價值：孩子可以認識不同地區的動物與知識。
• 可持續拓展：動物種類和分布地非常多，未來更新空間大。
• 結合真實世界：比起虛擬場景，真實地理位置更能培養世界觀。

聽起來完美，對吧？
但接下來的問題是——要怎麼畫這張地圖？

地圖的兩難

我最先想到兩個方案：

找現成地圖

好處是可以選擇符合平台的精美地圖，
但難處是不好找，而且需要在地圖上精準定位每個國家或地區的位置，並支援互動（滑鼠移上去有反應、可點擊）。

我稍微請 AI 幫我試著做看看，結果完全不堪入目：
AI 只幫我簡單用幾個區塊區分不同位置，和真實地圖上的內容完全對不上。

所以，即便嘗試用 AI 輔助，不僅工程量不小，最重要的是——準確度難以掌控。

請 AI 繪製地圖

實際試起來，完全讓 AI 畫的互動地圖都很陽春。
雖然可以做到基本互動，但細節、質感、互動性都不太能滿足需求。

我原本以為這是一道很難的題目，直到和 AI 進行了幾輪討論後，才知道——
原來網路上有不少現成的互動地圖工具，而且有免費版本！

找到解法

最後我選擇了 amCharts 5。
效果看起來蠻不錯，只需保留原生 logo 和連結，就能免費使用地圖服務，對我這種個人專案來說算非常友善。

它的優點包括：

• 內建世界地圖、國家地圖
• 支援互動、縮放、動畫
• 套用容易（尤其是交給 AI 寫的時候）

我試著讓 AI 幫我串接地圖，結果——
一顆精美、可互動、會旋轉的地球儀就出現在螢幕上了！

安裝:

npm install @amcharts/amcharts5
npm install @amcharts/amcharts5-geodata
npm install @amcharts/amcharts5-fonts

建立地圖容器元件範例:

import React, { useEffect, useRef } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5map from "@amcharts/amcharts5/map";
import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

const WorldMapBasic: React.FC = () => {
  const divRef = useRef<HTMLDivElement | null>(null);
  const rootRef = useRef<am5.Root | null>(null);

  useEffect(() => {
    if (!divRef.current || rootRef.current) return;

    const root = am5.Root.new(divRef.current);
    rootRef.current = root;

    root.setThemes([am5themes_Animated.new(root)]);

    const chart = root.container.children.push(
      am5map.MapChart.new(root, {
        projection: am5map.geoMercator(), // 地球投影可改 geoOrthographic()
        panX: "translateX",
        panY: "translateY",
        wheelY: "zoom",
        wheelX: "zoom",
        pinchZoom: true
      })
    );

    const polygonSeries = chart.series.push(
      am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_worldLow
      })
    );

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: "{name}",
      interactive: true
    });

    polygonSeries.mapPolygons.template.states.create("hover", {
      fill: am5.color(0x74b9ff)
    });

    return () => {
      root.dispose();
      rootRef.current = null;
    };
  }, []);

  return <div ref={divRef} style={{ width: "100%", height: 600 }} />;
};

export default WorldMapBasic;

再讓 ChatGPT 幫我繪製一張宇宙背景圖，瞬間整體質感提升不少，整個介面看起來超有探險感。

真正的挑戰：內容產出

地圖解決了，但更大的麻煩才剛開始——
我需要大量的：

• 國家場景圖片
• 動物圖片
• 對應的知識介紹

而且每一項都必須有一致的風格與品質。

這時我就必須考慮：

• 有沒有現成素材？（免費、優質、又剛好符合需求的不容易找）
• 要不要用 AI 生成？（需要 prompt 設計與後製）
• 動物知識從哪裡來？（必須正確、簡短、適合兒童閱讀）

這些，就是我在「下集」要和大家分享的重點。

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