「介面，不只是畫面，而是人與科技的對話，更是使用者與專案理念的第一個接觸點。」

在專案的前 11 天，我們談到專案的系統架構與決策邏輯，確立了前端、後端、資料庫、AI 模組之間的協作方式。
今天，焦點要落在「前端」——因為它是使用者最直接感受到的部分，也是平台能否真正被採納的關鍵。

為什麼選擇 React/Next.js？

前端框架的選擇，並不只是「工程師的偏好」，而是與產品定位、開發效率、部署模式高度相關。
在一開始，我就有幾個核心需求：
1.快速開發與維護： side project 的時間有限，必須用現成且成熟的生態系。
2.彈性與擴展性： 未來可能會增加情境模組（地震、颱風、戰災），需要能平滑延展。
3.SEO 與效能： 防災平台不只給工程師看，也要能讓一般大眾透過搜尋引擎找到。

基於這些條件，React + Next.js 是合適的選擇：
1.React 提供了強大的元件化設計，讓清單、問答表單、結果頁面都能被模組化管理。

• 防災物資推薦平台清單包含「物資卡片」「分類區塊」「情境建議」等重複元素。
  

• React的元件化讓UI拆解成積木式元件，快速迭代、保持一致性。
  

2. Next.js 則支援 Server-Side Rendering（SSR）與 Static Site Generation（SSG），確保平台效能與 SEO。

• Server-Side Rendering (SSR)：提升行動裝置的載入速度，災時也能快速使用。
  

• API Routes：輕量後端請求（如即時推薦或清單比對）能在框架內完成。可以直接在Next.js內建API route處理小型請求（例如即時推薦或清單比對）。
  

• Vercel部署優勢：CI/CD 自動化，一鍵推送即可完成部署，，讓side project的維護更輕鬆、維運成本更低。
  

3.擴充性

• React/Next.js擁有龐大社群。
  

• 與 Tailwind CSS 搭配，可以快速建構出既現代又簡潔的 UI。
  

• 對個人專案而言，意味著「可維護」與「能持續演進」。
  

使用者介面的核心挑戰

如果問我這個專案最困難的部分，其實不是程式碼，而是如何讓使用者理解並採納。
我把前端設計的挑戰分成三個層次：

1.入口要簡單

• 問題設計不能像問卷調查般繁瑣。
• 「居住人數」「是否有寵物」「住屋型態」這些核心參數，只要三到五題即可啟動。
  2.結果要明確
• 結果頁不是「長篇清單」，而是「分組整理」。
• 例如：「食物與水」「醫療與衛生」「工具與通訊」「寵物照護」等四大類別。
  3.互動要引導
• 使用者不是來背誦防災手冊的，而是來「被提醒」和「被行動化」。
• 因此結果頁每一項物資，都應該附上「為什麼需要」的簡短說明，降低抗拒心理。

UI/UX的初步藍圖

在 Figma 的初版設計中採取 「簡單、清晰、可行動」 的原則，把使用者流程拆成三頁：

• 簡單 —— 避免防災資訊的艱澀感，以清晰易懂的互動引導。
• 清晰 —— 將複雜的物資資訊轉化成可視化的卡片。
• 可行動 —— 一鍵下載或分享，降低使用門檻。

三大核心頁面：

1.首頁（Landing Page）(入口)

• **目標：** 讓使用者秒懂「這是一個防災物資推薦平台」。
  

• 元素設計：

•     Hero 區塊：標語：「三步驟，找到屬於你的避難包」
  

•     Call-to-Action：一個大按鈕「開始準備」。
  

  •     明顯的輸入框或按鈕，引導使用者輸入「家庭人數」或「生活情境」。
    

•     簡單插圖：降低防災的嚴肅感，營造親近氛圍。
  

2. 問答流程（Form Wizard）(互動)

• **互動設計：** 使用 Stepper（分步驟）介面，採用單題分頁式，減少使用者的認知負擔。
  

• **例子：** 
  

•     Step 1：輸入家庭人數、年齡層。
  

•     Step 2：選擇居住環境（公寓/獨棟）。
  

•     Step 3：是否有寵物。
  

• ** 好處：** 分步驟降低認知負擔，每一步驟都明確，讓使用者認為「好像很快就能完成」。

3.結果頁（Recommendation Result）(清單)

• ** 核心元素：**

•    ** 物資卡片：** 每個物資項目以卡片呈現，包含圖片、建議數量、用途說明。
  

•   **  標籤分類：** 例如「必備」、「選配」、「情境」。
  

•    ** 一鍵下載／分享：** 輸出為 PDF 或 LINE 分享，方便傳給家人。
  

•    **補充說明：**
  

  •    清單分成四大類別。
     * 每一項物資旁有一行解釋，例如「行動電源｜停電時保持通訊」；並附上勾選框，讓使用者標記是否已備齊。
       * 若有串接 API，還能跳出「去購買」按鈕，直接導向電商頁面。
    

4.響應式設計（Responsive Design）

• ** 考量：** 多數使用者會透過手機查詢，因此必須「行動優先」。

• **策略：** 
  

•     使用 Tailwind CSS快速建立響應式樣式。
  

•     保證核心功能(輸入／查看清單)在4吋螢幕上依然清晰可操作。
  

第一版 Wireframe 草圖（概念展示）

[首頁 Hero] ---------------------------
| 標語：三步驟，找到屬於你的避難包     |
| [開始規劃按鈕]                      |
---------------------------------------

[問答流程 Stepper] -------------------
Step 1：家庭人數 [ 1-9 下拉選單 ]  
Step 2：居住類型 [ 公寓 / 獨棟 ]  
Step 3：是否有寵物 [ 是 / 否 ]  
[ 下一步 ] [ 上一步 ]
---------------------------------------

[推薦清單頁] -------------------------
| 必備物資 | 乾糧（3 天份） | [✓]   |
| 選配物資 | 行動電源        | [✓]   |
| 情境物資 | 貓糧 2kg        | [✓]   |
[ 下載 PDF ] [ 分享到 LINE ]  
---------------------------------------

第一版 Wireframe 示意圖（概念展示）

• 全灰階設計，僅以框線區隔區塊，專注於資訊架構與互動路徑。。
• 用文字標示元件位置（按鈕、輸入框、清單）。
• 目標是快速驗證使用流程：「使用者能不能順利走完流程」。

第二版 Wireframe 示意圖（概念展示）

• 引入品牌色（橘色 × 深灰），代表「警示」與「行動」。
• 清晰的按鍵顯示（開始規劃 / 下一步 / 分享）。
• 搭配灰階背景，凸顯按鍵位置。

迭代用意

「一個好產品，不是憑空出現，而是經過無數次迭代的結果。」
「好的設計不是一步到位，而是透過迭代，不斷逼近理想使用體驗。」

1.快速迭代，，快速測試想法。
2.優先確認功能與流程正確，並模擬、確立品牌風格與使用者體驗。
3.於後續製作Prototype(原型)，: 驗證產品概念、測試互動流程、收集使用者回饋。

這樣的流程，讓專案既能靈活迭代，又能逐步走向穩定。

技術細節：如何實現？

這裡我規劃了幾個技術步驟：

• 狀態管理：
  使用 React hooks（useState, useContext）來儲存使用者回答，並在結果頁生成對應清單。
• 動態路由：
  Next.js 的動態路由可讓不同情境（地震、颱風、戰災）對應不同結果頁。
• Tailwind CSS：
  提供一致的設計系統，快速迭代，避免過度糾結在排版。
• 日後擴展：
  若要支援多語系（例如中英日文），Next.js 原生的 i18n 功能能幫助快速擴展。

📌 重點回顧(技術落點)：

• React/Next.js提供快速開發與維運的基礎。

• React元件化 —— Hero、Stepper、清單頁都能拆分成可重複使用的元件。
  

• Next.js部署 —— 利用 Vercel部署，確保在行動裝置上快速載入。
  

• Tailwind CSS —— 建立響應式版型，確保在手機上依然清晰可用。
  

• UI/UX 設計以「簡單、清晰、可行動」為原則。
• Wireframe 展示了「首頁 → 問答流程 → 推薦清單」的核心路徑。

從畫面到韌性：介面的深層意義

設計前端，表面上是「畫面」和「程式碼」，但本質上是 如何讓資訊成為行動。
對我而言，這個平台不只是一個工具，而是一種「韌性生活」的實踐方式。

• 當使用者看到「這份清單屬於我」，他就跨出了行動第一步。
• 當物資清單被標記「已完成」，那就是一份日常韌性的累積。

前端不是「裝飾」，而是「轉化的橋梁」：將嚴肅的防災文件，化為人人可理解的日常指南。

Day13我將進一步分享 後端設計（Node.js/Express) ，解釋如何讓這個前端問答流程如何串接資料庫與 AI 模組，生成真正「個人化」的防災物資推薦清單。