哈囉，大家好！經過前面的努力，我們已經成功地整合了後端 API，並在 Nuxt 中使用 Axios 實現了資料的動態渲染。現在，我們的個人財務管理系統已經具備了基本的功能。但要讓使用者有更好的體驗，我們需要進一步規劃前端介面，確保各個頁面和功能都能滿足需求。
今天，我們將重新盤點前端需要哪些畫面，並整理成一份完整的內容。透過這個過程，我們可以更清晰地了解接下來的開發方向，確保不遺漏任何重要的功能。一、為什麼需要重新規劃前端介面？
在軟體開發中，良好的規劃是成功的關鍵。透過系統性地盤點和整理需求，我們可以：
- 明確功能需求：確保每個功能都有對應的頁面和操作。
- 提升使用者體驗：透過合理的頁面設計和流程，讓使用者操作更加順暢。
- 提高開發效率：有了清晰的規劃，可以避免重複勞動和返工。
- 便於協作：如果未來有其他開發者加入，清晰的規劃可以讓他們更快上手。
還記得我在之前的專案中，因為沒有做好前端介面的規劃，導致後續的開發出現了許多問題。界面不統一、功能遺漏、流程不順暢，最終花費了更多的時間來修復和調整。因此，現在每次在開始實作前，我都會先做好詳細的規劃。
二、盤點應用程式所需的頁面
我們的個人財務管理系統主要功能包括：
- 使用者管理：註冊、登入、登出、更新個人資料。
- 銀行帳戶管理：新增、編輯、刪除銀行帳戶，查看帳戶列表。
- 分類管理：新增、編輯、刪除收入/支出分類，查看分類列表。
- 交易紀錄管理：新增、編輯、刪除交易紀錄，查看交易列表。
- 報表與統計：查看收入/支出統計，按分類查看統計資料。
根據上述功能，我們需要以下頁面：
- 首頁（Home）
- 註冊頁面（Register）
- 登入頁面（Login）
- 個人資料頁面（Profile）
- 銀行帳戶列表頁面（Bank Accounts）
- 新增/編輯銀行帳戶頁面（Add/Edit Bank Account）
- 分類列表頁面（Categories）
- 新增/編輯分類頁面（Add/Edit Category）
- 交易紀錄列表頁面（Transactions）
- 新增/編輯交易紀錄頁面（Add/Edit Transaction）
- 報表與統計頁面（Reports）
- 404 錯誤頁面（Not Found）
三、詳細說明每個頁面的功能與需求
1. 首頁（Home）
- 功能：作為應用程式的入口，提供整體概覽。
- 需求：
- 顯示歡迎訊息和系統簡介。
- 若使用者已登入，顯示近期的交易摘要和餘額統計。
- 提供快速導航到主要功能的入口。
2. 註冊頁面（Register）
- 功能：讓新使用者建立帳號。
- 需求：
- 提供輸入使用者名稱、電子郵件、密碼和確認密碼的表單。
- 驗證輸入資料的正確性，提供即時的錯誤提示。
- 註冊成功後自動登入並導向首頁。
3. 登入頁面（Login）
- 功能：讓已註冊的使用者登入。
- 需求：
- 提供輸入電子郵件和密碼的表單。
- 支援「記住我」的功能。
- 驗證輸入資料，提供錯誤提示。
- 登入成功後導向首頁或之前試圖訪問的受保護頁面。
4. 個人資料頁面（Profile）
- 功能：讓使用者查看和更新個人資料。
- 需求：
- 顯示使用者的基本資訊，如使用者名稱、電子郵件。
- 提供更新個人資料的表單。
- 支援修改密碼的功能。
5. 銀行帳戶列表頁面（Bank Accounts）
- 功能：管理使用者的銀行帳戶。
- 需求：
- 列出所有銀行帳戶，顯示帳戶名稱、餘額等資訊。
- 提供新增、編輯、刪除帳戶的操作。
- 點擊帳戶可查看詳細資訊或相關交易。
6. 新增/編輯銀行帳戶頁面（Add/Edit Bank Account）
- 功能：讓使用者新增或編輯銀行帳戶。
- 需求：
- 提供輸入帳戶名稱、帳號、銀行名稱、初始餘額等的表單。
- 驗證輸入資料，提供錯誤提示。
- 保存成功後導向銀行帳戶列表頁面。
7. 分類列表頁面（Categories）
- 功能：管理收入和支出的分類。
- 需求：
- 列出所有分類，區分收入和支出。
- 提供新增、編輯、刪除分類的操作。
8. 新增/編輯分類頁面（Add/Edit Category）
- 功能：讓使用者新增或編輯分類。
- 需求：
- 提供輸入分類名稱和類型（收入或支出）的表單。
- 驗證輸入資料，提供錯誤提示。
- 保存成功後導向分類列表頁面。
9. 交易紀錄列表頁面（Transactions）
- 功能：查看和管理交易紀錄。
- 需求：
- 列出所有交易紀錄，顯示日期、分類、金額、描述等。
- 提供篩選和排序功能，例如按日期範圍、分類、金額大小等。
- 提供新增、編輯、刪除交易的操作。
10. 新增/編輯交易紀錄頁面（Add/Edit Transaction）
- 功能：讓使用者新增或編輯交易紀錄。
- 需求：
- 提供輸入交易日期、類型（收入或支出）、金額、分類、描述等的表單。
- 根據選擇的類型，動態顯示相應的分類選項。
- 驗證輸入資料，提供錯誤提示。
- 保存成功後導向交易紀錄列表頁面。
11. 報表與統計頁面（Reports）
- 功能：提供財務統計和圖表。
- 需求：
- 顯示收入和支出的總額、餘額變化等統計數據。
- 提供按月份、分類查看統計的功能。
- 顯示圖表，例如圓餅圖、柱狀圖等，視覺化呈現數據。
12. 404 錯誤頁面（Not Found）
- 功能：當使用者訪問不存在的頁面時，提供友好的提示。
- 需求：
- 顯示錯誤訊息，如「抱歉，您訪問的頁面不存在」。
- 提供返回首頁或其他建議操作的連結。
四、設計頁面流程和導航
為了讓使用者有順暢的操作體驗，我們需要設計合理的頁面流程和導航。
1. 導覽列（Navigation Bar）
- 內容：
- LOGO 或應用程式名稱，點擊可返回首頁。
- 主要功能的連結：交易紀錄、銀行帳戶、分類、報表。
- 若使用者已登入，顯示使用者名稱，點擊可展開下拉選單，包含個人資料、登出等。
- 若使用者未登入，顯示登入和註冊的連結。
2. 頁面間的流轉
- 未登入狀態：
- 訪問受保護的頁面時，自動導向登入頁面。
- 登入或註冊成功後，返回之前試圖訪問的頁面或首頁。
- 已登入狀態：
- 可以自由訪問受保護的頁面。
- 登出後，自動導向首頁或登入頁面。
3. 操作流程
- 新增交易：
- 在交易紀錄列表頁面，點擊「新增交易」按鈕，進入新增交易頁面。
- 填寫表單並提交，保存成功後返回交易紀錄列表。
- 編輯交易：
- 在交易紀錄列表頁面，點擊某筆交易的「編輯」按鈕，進入編輯交易頁面。
- 修改資料並提交，保存成功後返回交易紀錄列表。
- 刪除交易：
- 在交易紀錄列表頁面，點擊某筆交易的「刪除」按鈕，彈出確認對話框。
- 確認刪除後，更新列表。
同樣的流程適用於銀行帳戶和分類的管理。
五、考慮 UI/UX 的最佳實踐
在設計介面時，我們需要考慮使用者體驗，讓應用程式易於使用。
1. 簡潔清晰的介面
- 避免過度設計：介面應該簡潔，避免過多的裝飾元素。
- 一致的設計風格：使用一致的字體、顏色和樣式。
2. 友善的錯誤提示
- 即時驗證：在使用者輸入時即時驗證，提供即時的反饋。
- 清晰的錯誤訊息：當發生錯誤時，提供明確的提示，告知如何修正。
3. 響應式設計
- 支援不同裝置：確保應用程式在桌面、平板和手機上都有良好的顯示效果。
4. 無障礙考量
- 可訪問性：考慮到色盲、視力不佳等使用者，使用高對比度的顏色，並提供替代文字。
六、使用者故事和情境分析
透過使用者故事，我們可以更好地了解使用者的需求和操作情境。
使用者故事 1：記錄一筆支出
- 角色：小明，一位正在管理自己財務的上班族。
- 情境：小明剛剛在便利商店購買了午餐，想要記錄這筆支出。
- 目標：快速記錄支出，並查看餘額變化。
操作流程：
- 小明打開應用程式，登入自己的帳號。
- 在首頁或交易紀錄頁面，點擊「新增交易」。
- 選擇「支出」，輸入金額、選擇分類（如「餐飲」）、填寫描述（如「午餐」）。
- 提交表單，看到交易紀錄列表已更新，餘額也隨之調整。
- 小明對於操作的流暢性感到滿意。
使用者故事 2：查看每月支出統計
- 角色：小美，一位關注自己消費習慣的學生。
- 情境：小美想要查看這個月的支出情況，了解在哪些方面花費較多。
- 目標：查看每月的支出統計和分類佔比。
操作流程：
- 小美登入應用程式，前往「報表與統計」頁面。
- 選擇當月份，看到總支出金額。
- 查看分類統計圖表，發現「娛樂」類型的花費較多。
- 小美決定下個月要適當控制娛樂支出。
透過這些使用者故事，我們可以更具體地釐清功能需求，確保開發出的功能真正符合使用者的期望。
七、後續開發計劃
透過今天的規劃，我們已經清楚了解了前端需要實作的頁面和功能。接下來，我們將：
- 建立頁面骨架：在 Nuxt 中建立上述的各個頁面，確保路由和導航正確。
- 實作頁面功能：按照需求，為每個頁面添加相應的功能和互動。
- 優化使用者介面：使用 Tailwind CSS 或其他 UI 庫，提升介面的美觀和一致性。
- 進行測試與調整：確保每個功能都正常運作，並進行優化。
小結
今天，我們重新盤點了前端需要的頁面和功能，並詳細規劃了每個頁面的需求和操作流程。透過這個過程，我們可以更有條理地進行後續的開發，確保不遺漏任何重要的功能。
溫馨提示：在開發過程中，隨時回顧需求和規劃，確保開發方向正確。若有新的需求或變更，及時更新規劃文件。
Next
接下來，我們將開始實作這些頁面：
- 建立頁面骨架：在 Nuxt 中為每個頁面建立對應的檔案，並設定路由。
- 實作導航列和頁腳：確保使用者可以方便地在各個頁面之間切換。
- 實作登入和註冊功能：讓使用者可以註冊新帳號並登入系統。
- 保護受限頁面：使用中介層（middleware）來保護需要身份驗證的頁面。
讓我們繼續保持熱情，迎接接下來的挑戰吧！相信透過不斷的學習和實踐，我們都能成為更好的開發者。感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下次見！