線框與原型完整指南

線框 vs 原型

• 線框（Wireframe）= 黑白草圖、重結構
• 原型（Prototype）= 可互動模擬、重體驗

順序：草圖 → 線框 → 高保真 → 可互動原型

五大價值

• 早期驗證概念
• 與團隊溝通
• 用戶測試
• 投資簡報
• 開發指導

改設計 NT$100 vs 改上線功能 NT$100000

低保真 vs 高保真

• 低保真：快速、改變容易、聚焦概念
• 高保真：接近實際、適合測試、開發指導

順序：紙筆 30 分鐘 → 低保真 1-2 天 → 高保真 1 週 → 互動原型 1-2 天

五大工具

• Figma（最熱門）
• Sketch（Mac only）
• Adobe XD
• Whimsical（線框專用）
• 紙筆（最快）

9 成 UX 設計師用 Figma

電商五大關鍵頁面

• 首頁（導覽 + 第一印象）
• 商品頁（信任 + CTA）
• 商品列表（篩選器）
• 結帳流程（步驟簡化）
• 會員中心（功能組織）

線框該包含什麼

• 佈局結構
• 主要功能位置
• 導覽元素
• 內容區塊
• CTA 按鈕

不需要：顏色、字體、實際圖片

原型測試

可互動原型用 Figma 連結：1. 模擬點擊；2. 模擬填表；3. 模擬切換；4. 模擬動畫。5 個用戶測試後找出問題、修正再測。比直接開發快 10 倍找出問題

設計系統

大量頁面要用設計系統：1. 元件庫（按鈕、表單）；2. 顏色變數；3. 字體階層；4. 間距規範；5. 圖示集。設計系統讓「一致性」與「速度」兼得。Figma 元件與 Variant 是利器

常見問題解答