iT邦幫忙

2025 iThome 鐵人賽

DAY 28
0
佛心分享-SideProject30

《韌性生活指南:用科技打造更堅韌的日常》系列 第 28

Day28|Demo 展示:第一版平台長什麼樣?

  • 分享至 

  • xImage
  •  

「當理念終於成形,韌性就有了形體。」


一、從概念到實體的里程碑

經過 27 天的設計、討論與打磨,《韌性生活指南》平台終於走到了「能被看見」的階段。
這不只是 UI 的呈現,而是一個願景被具體化的過程:

從「想讓防災更親民」,到「讓每個人都能打開網頁、完成自己的防災物資準備清單」。

這個 Demo,不只是產品的雛形,更是 韌性生活哲學的第一個具象化版本
在這個階段,我們關注的不只是「能運作」,而是——
它是否能讓使用者感受到安心與掌握感。


二、平台核心結構回顧

為了讓「智慧化防災物資推薦」真正落地,系統採用四層結構設計:

層級 技術/工具 角色定位
前端 UI React + Next.js 使用者互動與即時渲染
後端服務 Node.js + Express 處理問卷資料與推薦邏輯
資料庫 MongoDB Atlas 儲存物資清單、使用者設定與提醒狀態
AI 模組 OpenAI API 轉譯清單內容、生成情境化解釋與推薦說明

此架構確保系統能於多裝置間流暢運作,
並為後續擴充(電商 API、Gmail/LINE 通知、家庭共用功能)預留彈性。


三、第一版 Demo 的設計理念

Demo 設計建立在三個核心方向:

1️⃣ 一眼理解、一步完成

首頁以「問答卡片」為主軸。使用者只需回答五個問題,就能生成專屬清單:

👤 家庭成員與人數
🐾 是否有寵物
🩺 是否有慢性病需求
🕒 準備天數
🏠 居住地(城市/地區)

這些輸入會即時傳送到後端,由 AI 模組 × 物資資料庫 運算出專屬結果。
整個過程控制在 3 分鐘內完成,避免資訊疲勞。


2️⃣ 情境化的防災建議

清單不是冷冰冰的表格,而是能「說話」的建議。
AI 為每個項目提供簡短的「為什麼你需要這項物資」說明。

💧 飲用水:依據你家 3 人 × 3 天計算,每人每日 3 公升,建議共準備 27 公升水源。
🐕 寵物飼料:根據家中 1 隻中型犬,每日需求 0.3 公斤,建議準備 1 公斤備糧。

二次驗證說明:

  • 飲水量 3 L/人/日 取自《東京防災》;美國 FEMA/CDC 指引為 1 加侖 ≈ 3.8 L/人/日
    建議依居住地官方建議調整。
  • 寵物備糧建議以「天數備量」為主:3–7 天(ASPCA)2 週(CDC)

補充說明(可直接引用於平台說明)
「本平台以 3 公升/人/日 為預設值(參考東京防災);若依美國 FEMA/CDC 指引則為 1 加侖(約 3.8 公升)/人/日。
寵物備糧以天數備量為原則:3–7 天(ASPCA)至 2 週(CDC)不等,並依體重與日常食量調整。」

這種「說明式推薦」的語氣,既降低焦慮,也增加信任。
AI 不只是提供資訊,而是協助理解。


3️⃣ 視覺化的進度與狀態

清單頁面設有「備妥進度條」與「提醒面板」:

✅ 綠色代表已完成購買
⏳ 黃色代表即將過期(如電池、乾糧)
⚠️ 紅色提醒「尚未準備」

這個顏色系統的靈感來自《東京防災》的資訊分層理念:
以色彩引導行動,而非放大恐懼。


四、Demo 操作流程展示

🔹 Step 1:啟動首頁問答
使用者輸入家庭成員與生活條件。

🔹 Step 2:生成個人化清單
AI 根據輸入生成建議,右側提供「一鍵前往購物連結」。

🔹 Step 3:存取與追蹤
可選擇「寄送到 Gmail」或「傳送到 LINE」以保存清單。

🔹 Step 4:定期提醒
後端 CRON 任務每月自動檢查物品狀態並發出提醒。

讓防災從一時行動,變成生活節奏的一部分。


五、設計落地驗證(Usability Test)

內測階段邀請 12 位不同族群進行測試:

  • 4 位上班族
  • 3 位家庭主婦
  • 2 位獨居長者
  • 3 位飼主
指標 結果
問卷完成時間 平均 2 分 45 秒
清單生成成功率 100%
清單理解率(可自行解讀 AI 說明) 93%
問卷放棄率 0%

研究說明:本結果屬 內測(N=12,便利取樣),未具代表性。
未來將擴大樣本並採隨機化以提升外部效度。

使用者回饋摘要:

「原本覺得防災很難,沒想到這麼快就能看懂自己缺什麼。」
「問答過程像聊天,不會有壓力。」

這證明平台成功降低了 心理負擔操作門檻
實現了「讓非技術族群也能三分鐘上手」的目標。


六、資料來源與即時示警

平台資料同步以下政府與國際來源:

  • NCDR 民生示警公開資料平台(CAP 格式)
    提供地震、豪雨、颱風、淹水即時資料;
    並可透過 NCDR LINE 官方帳號 訂閱所在地示警。

  • 全動署《全民安全指引》消防署防災物資建議清單
    作為防災物資標準資料集(normalized dataset)。

資料透明與開放,是韌性科技的第一層防線。


七、Demo 版本的限制與下一步

限制 下一步優化方向
缺乏行動紀錄功能 增加「已購清單」與「追蹤更新」頁面
無法離線使用 建立 PWA 模式,支援斷線操作
通知僅限 Email 串接 LINE 官方帳號推播模組
缺乏家庭共用功能 建立「家庭共編模式」供多人同步檢視

這些功能將於 第二階段開發(Day29–Day30) 納入規劃,
讓平台從「展示」邁向「實用」。


八、PM 視角:韌性的具象化

在這個階段,我看到的不只是程式碼、介面與圖層,
而是「韌性」這個抽象概念的具體形態。

它從願景變成了畫面,
從畫面變成了互動,
從互動變成了行動。

「韌性生活」的本質,從來不只是抵抗災難,
而是 讓不確定變得可準備,讓焦慮變得可行動。

此刻,正是 把「知識」轉化為「行動」的第一步 的轉折點。


參考資料

  1. 國防部全民防衛動員署(全動署)。《當危機來臨時:臺灣全民安全指引》
  2. 內政部消防署。防災物資建議清單與避難指引
  3. NCDR(國家災害防救科技中心)。民生示警公開資料平台(含 CAP 格式)技術文件
  4. Tokyo Metropolitan Government. Tokyo Bousai: Let’s Get Prepared!(3 L/人/日 指引)。
  5. FEMA / CDC / Ready.gov. Water & Food Supply Recommendations(1 加侖/人/日 指引)。
  6. ASPCA (2024). Disaster Preparedness for Pets.(3–7 天備糧)。
  7. Centers for Disease Control and Prevention (CDC). Protecting Your Pets in Emergencies(建議 2 週備糧)。
  8. UNDRR (2015). Sendai Framework for Disaster Risk Reduction 2015–2030.
  9. Norman, D. A. (2013). The Design of Everyday Things (Revised Edition). Basic Books.
  10. Fogg, B. J. (2009). A Behavior Model for Persuasive Design. Proceedings of Persuasive Technology.

上一篇
Day27|制度化韌性:從《全民安全指引》到智慧防災的政府框架延伸
下一篇
Day29|使用者回饋與公益/商業版的可能路線
系列文
《韌性生活指南:用科技打造更堅韌的日常》30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言