在完成介面雛形（mockup）後，下一步就是定義應用程式的 Happy Path（理想主流程） 與 視覺反饋。透過梳理流程圖，能幫助我們在動手寫 JavaScript 前，先釐清每個關鍵步驟的狀態切換與邏輯判斷。

核心流程圖 (Flowchart)

依照標準流程圖（Flowchart）規範，不同的形狀代表不同的含義：

• 橢圓形（Start / End）：代表流程的開始與結束。

• 矩形（Process）：代表系統執行的動作或處理過程。

• 平行四邊形（Input / Output）：代表使用者的輸入（如選擇選單、輸入備註）或系統的輸出顯示。

• 菱形（Decision）：代表判斷條件或分支選擇（如：是否點擊暫停、是否填寫備註）。

(參考資料：Wikipedia - 流程圖)

我們將使用者最核心的操作路徑梳理為以下流程：

流程圖四大階段解析

• 選擇任務（自動預選）：預設帶入上次執行的項目，也可以透過選單切換主任務與子任務。

• 啟動計時：點擊「開始計時」即觸發計時器，並動態替換控制按鈕為暫停跟結束。

• 彈性備註：在計時前、中、後可以隨時記錄想法或心得。

• 結束與自動統計：點擊「結束」後系統自動結算時長、寫入本地儲存，並即時更新任務進度。

關鍵節點的互動與視覺回饋

在 Happy Path 的執行過程中，可以運用 Bootstrap 5 補強每個節點的視覺反饋：

• 狀態與按鈕動態切換：點擊開始後，按鈕組即時切換為暫停與結束；計時數字採用等寬字體（font-monospace），避免數字因為不同數字的尺寸不同而在滾動時跳動。

• 無痛完成提示 (Toast)：結束時從下方往上滑出 Toast 浮動提示，給予使用者明確的操作確認。

• 數據與進度條即時更新：資料寫入後，任務清單區塊的「累計時間」與「進度條 %」同步更新，帶給使用者直觀的成就感。

小結

在正式動手寫程式之前，先繪製主要流程圖，能幫助梳理使用者在每個階段的操作步驟與畫面狀態變化。這不僅能大幅降低邊寫邊改的混亂感，更能對整個應用程式的邏輯架構有更清晰的全貌理解。