設計非拍腦袋產出。成熟團隊遵循結構化流程：腦暴發散 → 線框定架構 → 原型驗交互。Jerry Cao實戰指南，為早期設計階段提供科學作業標準。

階段一：結構化腦暴 — Design Studio Exercise

無序腦暴如「空氣中抓東西」。UXPin推崇的Design Studio Exercise是規範化工作流：激發靈感+建立團隊+挖掘UI素材+讓決策者參與設計過程，極大降低「委員會設計」弊端(視覺不一致/初衷失焦)。全程約1.5h，將10-15個粗略想法煉為3-4個可線框化方案。

六步走流程

1. 問題啟動(15min)：選定經調研驗證的核心問題/挑戰，詳述角色模型/用戶場景/商業目標。
2. 分組(5min)：4-5人/組，隨機或跨職能。
3. 速寫草圖(8-10min)：限時速寫，思維敏捷>畫工精美。
4. 組內討論修正(15min)：分享草圖，協作優化，促進團隊效能。
5. 二輪迭代(15min)：消化反饋再寫兩輪草圖展示，約3輪產出優質初步方案。
6. 全組反饋(15min)：各組展示最佳想法，集體討論研究，**最關鍵環節**。強力Leader(理想為設計師)擁有最終決策權。

斯坦福大學方法庫、UXPin《Guide to UX Design Process》提供更多靈感激發工具，可按需選用。

階段二：線框圖 — 給思想畫出輪廓

腦暴後團隊重組，進入低保真線框 → 高保真模型 → 原型遞進(不建議跳過模型直奔快速原型)。線框承載設計思想，必須包含三層：

• 內容：圖形/文本/Logo/標題/格式等。
• 排版：頁眉/頁腳/導航/正文/內容優先級。
• 行為：標註錯誤提示/彈窗/默認值等二維難表達的交互邏輯。

線框圖7大實戰建議

1. 先手繪草圖：避免冷啟動恐慌，團隊討論修改成本極低。
2. 及早分享：線框溝通功能>設計功能，改線框>>改代碼。
3. 選自帶版本追蹤的工具：記錄修改時間/作者/參考，利於複盤。
4. 定期縮放全局視圖：防止細節中迷失頁面初衷，把控流程連貫性。
5. 內容優先，視覺完美度其次：框框/基本圖形即可，字體/顏色留給高保真階段。
6. 善用通用元件/全局修改：標準化設計樣式，參考40+交互設計模式庫。
7. 5人走廊測試法：Nielsen證明5人可發現95%問題，低成本高頻驗證。

線框是連接理念與原型的橋梁。蘋果/推特等大廠線框案例可供參考，《Guide to Wireframing》提供深度練手資源。

階段三：原型 — 為設計注入生命力

線框測結構，原型測體驗。UXPin CEO Marcin指出：原型為用戶-界面交互而存在，核心差異在於UI元素(按鈕/流程/功能)的真實可操作性。設計階段發現問題成本<<代碼階段。

原型設計7大原則

1. 重功能輕外觀：交互優先，顏值其次。
2. 大膽嘗試新交互：開發前盡情試錯，深入後想改無門。
3. 不戀棧問題元素：該捨棄果斷捨棄，設計如雕刻，去蕪存真。
4. 延後優化：別一上來寫CSS/JS優化，後續刪改全白費，優化留到最後。
5. 真實內容/數據：拒絕Lorem Ipsum，真實數據暴露真實問題。
6. 分層驗證：核心流程高保真，邊緣流程低保真，資源聚焦關鍵路徑。
7. 記錄決策理由：每個交互選擇背後的商業/用戶邏輯留檔，利於移交與復盤。

從腦暴的發散能量，到線框的理性骨架，再到原型的鮮活脈動——結構化流程不扼殺創意，而是為創意鋪設高速公路。掌握這套方法論，團隊即可從「靠運氣出好設計」進化為「穩定產出高質量體驗」。