前言與承接

昨天我們完成了後端 Activities CRUD API 設計與 Repository 實作，今天我們來看看前端如何設計一個直觀、美觀且易用的 Activities 管理系統。因為畫面跟程式碼有點肥，所以分成兩篇，這篇就先展示一下畫面呈現。

下一篇再談怎麼實作的。

整體頁面佈局設計

首頁進入後的畫面結構

如果大家還記得，當初畫面設計是這樣

下圖是後來實作的畫面

(今天主要談”我的活動”這區塊)

活動卡片設計 (ActivityCard)

每個活動卡片都採用卡片式設計：

做成卡片，因為這邊的”活動”想要直接能看到該活動的摘要，使用者總共花了多少時間、本週花了多少時間，以及目標、刪除/編輯按鈕等等。

小巧思是 本週時間/目標會變成一個圓餅圖，放在卡片左下角。

Modal 彈窗設計

新增活動 Modal

點擊 +新增活動後會有個彈出視窗讓使用者填。

小巧思是提供顏色跟icon(圖示)讓使用者能區分特定活動，其實當初在設計資料表的時候就有想到。

編輯活動 Modal

編輯 Modal 與新增類似，但會預填現有資料

刪除確認對話框

安全刪除設計

後記：
其實這段原本計畫是一篇講完，但今天開寫的時候發現不行，前端比想像中肥，加上我最近寫文的時間都比較晚
有點扛不住，明天過後要調整一下寫文的時間，趁我意志力還強的時候。

Photo by Tim Mossholder on Unsplash