D19 - 規劃前端介面：盤點所需的頁面與功能

哈囉，大家好！經過前面的努力，我們已經成功地整合了後端 API，並在 Nuxt 中使用 Axios 實現了資料的動態渲染。現在，我們的個人財務管理系統已經具備了基本的功能。但要讓使用者有更好的體驗，我們需要進一步規劃前端介面，確保各個頁面和功能都能滿足需求。

今天，我們將重新盤點前端需要哪些畫面，並整理成一份完整的內容。透過這個過程，我們可以更清晰地了解接下來的開發方向，確保不遺漏任何重要的功能。

一、為什麼需要重新規劃前端介面？

在軟體開發中，良好的規劃是成功的關鍵。透過系統性地盤點和整理需求，我們可以：

• 明確功能需求：確保每個功能都有對應的頁面和操作。
• 提升使用者體驗：透過合理的頁面設計和流程，讓使用者操作更加順暢。
• 提高開發效率：有了清晰的規劃，可以避免重複勞動和返工。
• 便於協作：如果未來有其他開發者加入，清晰的規劃可以讓他們更快上手。
  還記得我在之前的專案中，因為沒有做好前端介面的規劃，導致後續的開發出現了許多問題。界面不統一、功能遺漏、流程不順暢，最終花費了更多的時間來修復和調整。因此，現在每次在開始實作前，我都會先做好詳細的規劃。

二、盤點應用程式所需的頁面

我們的個人財務管理系統主要功能包括：

• 使用者管理：註冊、登入、登出、更新個人資料。
• 銀行帳戶管理：新增、編輯、刪除銀行帳戶，查看帳戶列表。
• 分類管理：新增、編輯、刪除收入/支出分類，查看分類列表。
• 交易紀錄管理：新增、編輯、刪除交易紀錄，查看交易列表。
• 報表與統計：查看收入/支出統計，按分類查看統計資料。
  根據上述功能，我們需要以下頁面：

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. 首頁（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：記錄一筆支出

• 角色：小明，一位正在管理自己財務的上班族。
• 情境：小明剛剛在便利商店購買了午餐，想要記錄這筆支出。
• 目標：快速記錄支出，並查看餘額變化。
  操作流程：

1. 小明打開應用程式，登入自己的帳號。
2. 在首頁或交易紀錄頁面，點擊「新增交易」。
3. 選擇「支出」，輸入金額、選擇分類（如「餐飲」）、填寫描述（如「午餐」）。
4. 提交表單，看到交易紀錄列表已更新，餘額也隨之調整。
5. 小明對於操作的流暢性感到滿意。

使用者故事 2：查看每月支出統計

• 角色：小美，一位關注自己消費習慣的學生。
• 情境：小美想要查看這個月的支出情況，了解在哪些方面花費較多。
• 目標：查看每月的支出統計和分類佔比。
  操作流程：

1. 小美登入應用程式，前往「報表與統計」頁面。
2. 選擇當月份，看到總支出金額。
3. 查看分類統計圖表，發現「娛樂」類型的花費較多。
4. 小美決定下個月要適當控制娛樂支出。
   透過這些使用者故事，我們可以更具體地釐清功能需求，確保開發出的功能真正符合使用者的期望。

七、後續開發計劃

透過今天的規劃，我們已經清楚了解了前端需要實作的頁面和功能。接下來，我們將：

1. 建立頁面骨架：在 Nuxt 中建立上述的各個頁面，確保路由和導航正確。
2. 實作頁面功能：按照需求，為每個頁面添加相應的功能和互動。
3. 優化使用者介面：使用 Tailwind CSS 或其他 UI 庫，提升介面的美觀和一致性。
4. 進行測試與調整：確保每個功能都正常運作，並進行優化。

小結

今天，我們重新盤點了前端需要的頁面和功能，並詳細規劃了每個頁面的需求和操作流程。透過這個過程，我們可以更有條理地進行後續的開發，確保不遺漏任何重要的功能。

溫馨提示：在開發過程中，隨時回顧需求和規劃，確保開發方向正確。若有新的需求或變更，及時更新規劃文件。

Next

接下來，我們將開始實作這些頁面：

• 建立頁面骨架：在 Nuxt 中為每個頁面建立對應的檔案，並設定路由。
• 實作導航列和頁腳：確保使用者可以方便地在各個頁面之間切換。
• 實作登入和註冊功能：讓使用者可以註冊新帳號並登入系統。
• 保護受限頁面：使用中介層（middleware）來保護需要身份驗證的頁面。
  讓我們繼續保持熱情，迎接接下來的挑戰吧！相信透過不斷的學習和實踐，我們都能成為更好的開發者。感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下次見！