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

閱讀時間約 11 分鐘

哈囉,大家好!經過前面的努力,我們已經成功地整合了後端 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)來保護需要身份驗證的頁面。
    讓我們繼續保持熱情,迎接接下來的挑戰吧!相信透過不斷的學習和實踐,我們都能成為更好的開發者。感謝你的閱讀,如果你有任何問題或建議,歡迎在下方留言討論。我們下次見!
這是一系列以軟體開發為主題的輕鬆分享,內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇,還是如何應對技術轉移的挑戰,作者都用幽默、有趣的對話風格,將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
發表第一個留言支持創作者!
哈囉,大家好!本次介紹如何在 Nuxt 應用中使用 Axios 整合 Laravel 後端 API,實現動態資料渲染並搭建身份驗證機制。透過 Axios 配置與 Vuex 狀態管理,建立交易紀錄頁面並添加錯誤處理,提供更友善的使用者體驗。
哈囉,大家好!我們將探討 Nuxt 開發環境的建立與應用介面規劃,通過使用 Nuxt 的約定式結構和全域佈局,我們更高效地管理前端界面,並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
哈囉,大家好!本次介紹如何在 Nuxt 應用中使用 Axios 整合 Laravel 後端 API,實現動態資料渲染並搭建身份驗證機制。透過 Axios 配置與 Vuex 狀態管理,建立交易紀錄頁面並添加錯誤處理,提供更友善的使用者體驗。
哈囉,大家好!我們將探討 Nuxt 開發環境的建立與應用介面規劃,通過使用 Nuxt 的約定式結構和全域佈局,我們更高效地管理前端界面,並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil