為什麼要了解設計師的工作流程？
作為業主，了解設計師的工作流程有幾個實際的好處：
- 你知道什麼時候應該給什麼（素材、確認、feedback）
- 你理解為什麼需要這麼多時間
- 你知道哪些問題在哪個階段提出最有效率
這篇用我實際做品牌官網的流程來說明。
Phase 1：發現階段（Discovery）—— 3–5 天
需求訪談
這是整個設計過程中最重要的一步，也最容易被輕視。
我會問的問題包括：
- 你的目標受眾是誰？他們最大的痛點是什麼？
- 你的核心差異化是什麼？為什麼客戶應該選你，而不是選競爭對手？
- 你喜歡哪些風格的網站？（請提供 2–3 個參考）
- 完成後你們自己負責更新哪些內容？
業主最重要的準備：把這些問題想清楚，越具體越好。
競品分析
我會研究你的主要競爭對手的官網：
- 他們的設計風格和訊息傳遞方式
- 在 SEO 上他們的關鍵字策略
- 他們做得好的地方和可以被超越的地方
這個研究的目的不是「做得跟他們一樣」，是「找到你的差異化切入點」。
Moodboard 建立
根據需求訪談和品牌調性，收集設計靈感：
- 顏色方向（冷調vs暖調、深色vs淺色）
- 字型風格（現代無衫線 vs 優雅有衫線）
- 圖片風格（攝影 vs 插圖、商業 vs 生活感）
- 互動風格（動態豐富 vs 靜態優雅）
Moodboard 建好後需要業主確認，確保方向一致再進入下一步。
Phase 2：線框稿（Wireframe）—— 2–3 天
什麼是線框稿？
線框稿是以灰色方塊為主的版面草圖，不涉及顏色或精緻的視覺設計，只是確定版面結構：
- 首頁 Hero 區域要放什麼元素？
- 服務方案怎麼排版？
- 導覽列的結構和選項？
為什麼要做線框稿？
先確認「資訊架構和版面方向」，再進入視覺設計，可以避免做完精緻設計後才發現「版面結構不對」要推倒重來。
線框稿的修改成本比 UI 稿低很多。
Phase 3：UI 設計稿（High-Fidelity Design）—— 5–8 天
從線框到高保真
在 Figma 中，把線框稿填入真實的：
- 品牌色彩系統
- 字型選擇和層次
- 真實的圖片和圖示
- 精緻的按鈕、卡片、分隔線設計
這個階段的順序通常是：
- 先做桌機版首頁設計
- 確認整體視覺方向
- 擴展到其他頁面
- 做手機版（Mobile）的適應設計
設計系統的建立
同步建立 Figma 的設計系統：
- 顏色和字型的 Styles
- 可重複使用的元件（按鈕、卡片、表單）
- 間距系統（8px 網格）
這個工作在前端開發時可以直接對照，確保設計和實作的一致性。
Phase 4：設計確認與修改
業主看到設計稿後的 Feedback 流程：
有效的 Feedback 方式：
- 「這個區域的文字顏色在手機上感覺對比不夠，可以加深嗎？」（具體、有描述）
- 「我覺得按鈕的圓角弧度可以稍微增加，感覺更有親切感」（有方向）
容易造成無效循環的 Feedback：
- 「感覺不對，我也說不清楚哪裡」（方向不清）
- 「我不知道，你覺得怎麼樣？」（責任回推給設計師）
修改輪次通常包含在方案裡（例如 2 次免費修改），額外輪次需說明。
Phase 5：交付
Figma 設計稿交付給前端工程師（或進入你自己開發）時包含：
- 所有頁面的桌機版和手機版設計稿
- 設計系統元件
- 圖片素材（已處理好尺寸和格式）
- 間距和字型規格的標注
好的交付讓工程師不需要猜測任何細節，開發速度提升。