什麼是 Wireframe？

Wireframe（線框稿）是將 PRD 或腦中的想法具體化，用來呈現介面結構、內容配置與操作流程的設計稿。形式可以很簡單，例如用鉛筆或白板畫草圖，也可以使用 Figma、FigJam 等數位工具製作，重點是先把資訊與流程梳理清楚。

在我的工作經驗中，會根據專案階段、功能需求與團隊的溝通方式，決定要產出什麼形式的設計稿。

若專案是從 0 到 1 打造產品，或功能需求仍很模糊，此時的目標就是透過 Wireframe，和團隊或需求方一起梳理概念與流程。我通常會先以手繪或 Figma 將模糊的需求具體化，再和利害關係人確認方向。讓設計符合專案目標與使用者需求，仍是最重要的原則，避免一開始就花太多時間打磨 UI。

若專案只是新增一個小功能，流程與需求都很明確，也能直接沿用既有產品的 UI 元件與互動模式，我就會直接製作高保真設計稿，和團隊進行溝通。

所以，Wireframe 是個很靈活的工具，可以根據專案階段、需求、團隊的溝通方式，甚至自己對數位工具的熟悉程度，調整呈現形式與細節。

若想進一步了解 Wireframe，可以參考 Figma 官網的介紹文章。
https://www.figma.com/resource-library/what-is-wireframing/

主要流程設計：從需求到畫面

這次我選擇直接用 Figma 製作高保真設計稿，將 PRD 中的需求具體化。因為在規劃產品時，我腦中已經浮現一些畫面構想，所以決定跳過低保真線框稿，直接透過畫面探索與調整流程。

這是目前第一版的產品概念圖，主要以 Figma 製作，接下來會分享設計理念與考量。

回顧一下當時 Day 3 PRD 的內容

使用者流程

1. 呼吸練習
   1. 選擇呼吸模式 → 聆聽呼吸引導 → 設定放鬆時間 → 開始進行呼吸練習（操作可暫停／繼續／離開）→ 寫下呼吸完後的感受

使用者情境與目標

• 作為一個使用者，我希望在不同情境下，透過呼吸引導達成睡眠/專注/放鬆等需求，讓當下雜亂的思緒和情緒緩慢沉澱下來
• 作為一個使用者，我希望我能看到每次呼吸放鬆的視覺化數據，透過視覺回饋與紀錄來激勵自己要持續不斷練習，以及量化自己給自己放鬆的時間，讓這個原子習慣成為一個長期的習慣。

設計概念 1：先了解當下狀態與需求，再提供對應的呼吸法

第一版設計中，我原本打算直接呈現所有呼吸法的介紹與適用情境，讓使用者自行選擇。但實際做完後，我發現畫面上的資訊有點多：使用者必須先認識不同的呼吸法、理解它們的差異，再判斷哪一種適合自己。

對一個當下只想放鬆的人來說，開始之前還要先讀完一輪介紹，似乎又多了一份負擔。

因此，我嘗試了另一種方式：先引導使用者確認自己當下的狀態與需求，例如感到焦慮、難以專注，或想在睡前放鬆，再提供對應的呼吸練習。

調整的核心，是讓選擇從「用哪一種呼吸法？」變成「現在需要什麼？」，減輕使用者一次理解大量資訊的負擔，讓開始練習這件事更簡單。

設計概念 2: 支持習慣建立

我身為使用者對於這個產品的目標除了放鬆之外，就是逐漸建立每天都要提醒自己花一點時間做呼吸練習的習慣。除了透過資料視覺化呈現練習紀錄，我也決定在主畫面加入「連續練習 X 天」的提醒，讓使用者看見自己持續投入的累積。

以我自己的經驗來說，看到已經連續做了幾天，會產生「想繼續保持下去」的動力。不過，我也不希望提醒變成壓力，像是 Duolingo 的情勒鳥雖然讓人印象深刻，但有時候也會覺得煩 XD。

設計概念 3: 用 Quote 產生情感共鳴

我喜歡在看書或電影時，記下某些讓我感到被理解的句子。它們往往剛好呼應了我的經歷或當下的心境，讓我覺得自己的感受被理解了，也可能帶給我一點力量，或讓我停下來反思。我希望把這樣的感受帶進設計，透過隨機呈現不同的引言，讓使用者有機會遇到一句與當下心境呼應的話。這些話可能來自世界名人，也可能來自一個平凡的人。不論我們是誰、過著什麼樣的生活，都有需要喘口氣的時候，也都值得擁有片刻的平靜。

Day 6 內容預告

Day 6 也會進行 Wireframe 的繪製，主要以製作呼吸放鬆的視覺化數據為主。明天見，Cheers🍻