產品誕生前，必經「紙上/屏幕上」的設計階段。本文節選自《用戶體驗設計與流程文檔編制指南》，由 UXPin 專家 Chris Bank 系統講解：概念草圖、線框圖、低/高保真原型、詳細模型、設計規格的定義、優缺點、工具選型、最佳實踐、迭代策略，構建完整產品設計知識體系。

一、草圖與線框圖：反復迭代的骨架構建

1. 粗略草圖 — 最快、最自由、最聚焦概念

• 工具：筆/紙、白板、iPad+Procreate、甚至 MS Paint。
• 優勢：延展記憶、聚焦注意力、提高靈活性（Laura Busche 語）。
• ZURB 實踐：用馬克筆限制細節，聚焦整體概念與流程；紙筆最快、最專注、最靈活，但難擴展、難關聯交互。
  

2. 線框圖 — 產品骨架的數字化表達

• 工具推薦：UXPin、Balsamiq、Axure、Proto.io、Figma。
• 高保真線框圖：耗時較長但能明確展現表單、按鈕、交互狀態，利於說服利益相關者。
  
• 紙質線框：分區劃格、添加網格線/圖框，低成本驗證結構。

二、詳細模型：從結構到外觀的躍遷

• 定義：高保真線框圖或概念模型升級版，專注具體字體、配色方案、最終視覺外觀。
• 兩條路徑：
  A. 跳過線框 → 低保真概念模型 → 逐步提高保真度 → 詳細模型。
  B. 線框圖作骨架 → 注入材質細節 → 詳細模型。
  
• 注意：詳細模型不可直接丟給開發（Nick Pettit 語），響應式/靈活開發時代需轉向交互原型。

三、原型製作：從結構到體驗的轉向

核心差異

• 線框圖/模型重結構，原型重體驗/交互。
• InVision、UXPin、Figma、ProtoPie 可將靜態頁面串聯成可點擊原型。
  

工作流選型

• 草圖 → 原型（Josh Porter/HubSpot 模式）：跳過線框，草圖回答「有什麼物件/能做什麼操作」，原型驗證流程。適合早期探索、小團隊。
• 草圖 → 線框 → 模型 → 原型：傳統瀑布/敏捷雙軌，文檔完整、移交清晰，適合大團隊/合規要求高專案。

低保真原型 4 大優勢

1. 反饋更真實：用戶關注價值主張而非視覺細節。
2. 適合 A/B 測試：10-20 種粗糙變體 > 2-3 種像素級完美變體。
3. 試錯成本低：資源投入少，團隊易於放棄/修改。
4. 聚焦流程而非頁面：沙箱環境驗證頁面間聯繫與任務流。

實務建議：20/80 法則

將 80% 精力集中在佔比 20% 但被 80% 用戶使用 80% 時間的核心功能上（如註冊、搜尋、下單、支付、核心內容瀏覽）。

四、設計規格：從設計到工程的契約

• 內容：設計系統、組件庫、色彩/字體/間距/陰影/動效 Token、響應式規則、無障礙標準、文案規範、圖標庫、品牌指南。
• 形式：Figma Library + Zeroheight/Storybook 文檔站 + Git 版本控制。
• 治理：設計系統團隊維護，版本發布流程（Alpha/Beta/Stable），破壞性變更預警機制。
  

五、專家觀點匯總

專家/機構	核心觀點
Aarron Walter	設計個性化體驗，建立情感連結，而非只做功能。
Ian McAllister (Amazon)	工作向後推導：從用戶價值倒推設計決策。
Vurb	上下文感知介面，減少用戶決策步驟。
MailChimp	設計系統服務於品牌聲音一致性，跨觸點統一語氣。
Apple	像素級完美主義，硬體軟體服務一體化體驗。

六、行動清單：建立你的產品設計標準化流程

1. 確立專案專用「設計文檔分級」：草圖/線框/模型/原型/規格，明確每級產出物、負責人、驗收標準、工具。
2. 引入「設計評審儀式」：週度設計評審（視覺/交互/文案）、雙週可用性測試、月度設計系統治理會。
3. 建立「效能預算」：首屏載入、交互響應、包體積、內存佔用，CI 自動把關。
4. 推廣「設計 Token」：色彩/間距/字體/動效參數抽象為 Token，設計稿/代碼雙端同源，一次修改多端生效。
5. 培養「文檔文化」：每個設計決策留痕（為什麼這樣做、替代方案、數據支持、決策者），新成員 1 天上手。

產品設計不是畫圖，是「在不確定性中，通過結構化方法論，持續交付可驗證的用戶價值」。掌握這套全流程方法論，你就擁有了從 0 到 1、從 1 到 100 的產品設計確定性能力。