🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。

前言與選型動機

在確定了核心功能和資訊架構後，下一步就是將抽象的頁面階層落實為可視覺化的產品雛形（Mockup）。

為了在 MVP 階段快速搭建原型並維持極簡視覺風格，我選擇以 Bootstrap 5 作為 UI 設計系統與樣式庫。除了活用先前的學習成果，我也想藉此挑戰自己：「在脫離既有 Figma 設計稿的情況下，能否直接運用 Bootstrap 5 的元件庫，獨立構建出符合 UX 邏輯的介面？」

核心互動設計與 Bootstrap 元件對應

為了打造流暢的使用體驗，我將 IA 中的核心功能模組與 Bootstrap 5 元件進行了以下對應與設計思考：

1. 無縫的視圖切換：Navs & Tabs (.nav-tabs)

• 設計考量：傳統網站多採用 Header 導覽列超連結，但對於工具型應用而言，網頁重新載入會打斷使用者的專注狀態。為了保有工具的一體感與操作流暢度，我採用 SPA (Single Page Application) 概念。

• 元件套用：使用 Bootstrap 的 Navs & Tabs 元件。透過 JavaScript 觸發 Tab 切換，無需重新載入頁面即可在「計時器」、「任務列表」與「FAQ」三個核心視圖間切換。

2. 靈活的任務選取：Input Group 與 Dropdown (.input-group)

• 設計考量：在開始計時前，使用者需要快速指定當前的「主任務」與「子任務」。

• 元件套用：結合 Bootstrap 的 Input Group 與 Dropdown，將主任務與子任務選單組合在一起，形成緊湊且直覺的操作列，減少介面視覺雜訊。

[↓運用Input Group 與 Dropdown來進行任務的選取]

3. 清楚的任務階層展現：Accordion 折疊卡片 (.accordion)

• 設計考量：任務列表需要同時呈現「主任務」與「子任務明細」。如果一次列出所有內容，介面會過於擁擠。

• 元件套用：將 Accordion 進行客製化變化。以主任務作為手風琴標題（顯示完成度進度條與總時數），展開後即可檢視與操作子任務清單。

[↓將Accordion 稍加變化之後，讓主子任務在視覺上劃分]

4. 降低上手門檻：經典 FAQ 折疊區塊 (.accordion)

• 設計考量：方便使用者快速查找對應解答，同時避免資訊一次性堆疊，保持介面簡潔。

• 元件套用：採用標準的 Bootstrap Accordion 手風琴元件，收納常見 Q&A，讓版面保持整潔，需要時再展開閱讀。

[↓使用原生Accordion 元件]

實作觀察與小結

直接使用 Bootstrap 5，讓我能使用既有的設計系統和元件，快速搭建出雛形，減少很多複雜的設計決策。

下一篇，我們將從**使用者操作流程（User Flow）**出發，針對Happy Path(理想主流程)，來規劃整體邏輯。