兩年產品設計實戰沉澱，我將核心工作流拆解為四大階段 14 招心法：預處理、工作過程、後期處理、效率技巧。這不是標準教科書流程，而是經過實戰驗證、接近理想狀態的個人化方法論，分享給正在成長路上的你。

A. 預處理階段：磨刀不誤砍柴工

1. 繪製草圖：思維外化的最低成本方式

載體不重要（紙、本子、傳單、餐巾紙），關鍵是將腦海閃念即時落筆。只有畫出來，靈感才不會蒸發。我習慣用 Moleskine 筆記本，隨時翻看過往靈感，回顧調整當前項目思路，甚至衍生新想法。

2. 搜集圖片：做選擇性收藏的藝術家

「藝術家是收藏者，而非囤積者」（Austin Kleon）。我在 Dropbox 建立分類庫：Dashboard、iOS、插畫等。項目啟動時快速檢索靈感，離線也能查看。推薦設計師導航 hao.uisdc.com 獲取全球頂級圖庫資源。

3. Moodboard 與項目資料夾：構建專屬靈感倉庫

新項目啟動建立標準文件夾結構：PSD、截圖、靈感、資源。其中「靈感」文件夾即 Moodboard，收納色板、Behance 案例、人物照片等所有相關素材。不一定每次都用得上，但備而無患。

B. 工作過程階段：產出核心交付物

4. 不執著線框圖質量，專注深度理解產品

我不花半年打磨線框圖。客戶若能提供線框圖最好；否則我用線框圖快速釐清：需要幾屏、核心流程、邊界情況。線框圖是理解工具而非交付物。噩夢場景：客戶要求 1:1 還原線框圖——這不是設計師的工作，遇到這類項目盡快止損離場。

5. 大尺寸 PSD 背景：全局視角下的界面設計

新建 PSD 設 8000×5000px 大背景。優勢：一眼看穿所有界面元素關聯、狀態差異；極易截取任意狀態圖給開發。適合整個 App 或大型 Dashboard 設計。

6. 單一 PSD 容納所有界面：跨專案複用極致效率

甚至不同產品的 UI 也放同一 PSD。圖層拖放即用，省去在幾十個文件間尋找圖層的時間。雖然 Sketch 更適合，但我習慣 PS 的像素級控制力。

7. 文件夾與圖層規範：強迫症級整理癖的生產力秘密

• 桌面零圖標，項目/客戶獨立文件夾，統一整理規則。
• PSD 圖層結構清晰：文件夾超 8 層必拆分，屬性分組，命名語義化。
• 隨時迎接同行審閱的標準，溝通成本歸零。AE 協作時結構化文件夾同樣關鍵。

參考《PSD 禮儀白皮書》建立團隊規範。

8. 與朋友交流：最低成本的用戶測試

朋友反饋是寶貴信息源。創建輕量用戶測試，傾聽問題與修改建議，常能打開解決問題的新思路。測試對象分兩類：UX 設計師（專業視角）+ 普通用戶（真實受眾）。全階段穿插測試，持續獲取反饋。

9. 界面設計：從線框到高保真的關鍵躍遷

線框合併入單一 PSD → 琢磨交互邏輯（點擊→效果） → 發現缺失界面/邏輯漏洞 → 統一風格調整設計準則。15 屏以上項目風格統一是硬仗，需動態調整準則。

交互標註三線制：① 數字標號指向下一屏 ② 屏內引導線 ③ 指向外部應用/鏈接。比電路板式連線圖更清晰，單張圖承載更多有效信息。

C. 後期處理：設計規範落地，保證視覺一致性

項目大小無關，規範文檔極其關鍵。無規範無法確保 100% 組件屬性同步更新，極易出現 50 種灰色、14 種字號的混亂。

10. 色彩規範：扁平化時代的首要任務

建立主色/輔助色/功能色（成功/警告/錯誤/信息）體系，定義各狀態（默認/懸停/按下/禁用）色值，輸出色板供開發直接調用。

11. 字體規範：建立標題/正文/輔助/代碼層級體系

定義字族、字重、字號、行高、字距、顏色、響應式斷點縮放規則。嚴禁臨時微調字號。

12. 間距與佈局規範：8px 基礎網格系統

採用 8px 基礎單位，組件內邊距、外邊距、模塊間距均為 8 的倍數。響應式斷點下網格列數/間距變化規則明確化。

13. 組件庫與交互狀態規範：構建設計系統雛形

按鈕、輸入框、選擇器、模態框、導航、卡片等核心組件：結構拆解、狀態全覆蓋、交互動效參數（時長/緩動/延遲）、無障礙屬性（ARIA、焦點順序）。

14. 交付與驗收：設計稿驗收清單

• 所有界面狀態覆蓋（空狀態/錯誤/加載/成功）
• 切圖標註完整（@1x/@2x/@3x、命名規範、導出格式）
• 動效規格文檔（After Effects/Principle 原型文件）
• 開發走查會：逐頁過稿，確認技術可行性與邊界情況

總結

這 14 招貫穿「輸入→處理→輸出→協作」全鏈路。核心思想：用系統性思維對抗熵增，用規範換取自由，用預處理換取執行確定性。沒有銀彈，只有不斷打磨的個人化工作流。願你也能從中提煉屬於自己的設計心法。