資深設計師 Claudio Guglieri 總結的 20 步版面設計工作流，涵蓋從草圖到交付的完整路徑，不僅是設計原則，更是專業職業素養的體現。新手常犯錯誤：跳過思考直奔 Photoshop、忽略網格、濫用字體顏色、細節失控。掌握這 20 步，邁向專業設計師的第一階梯。

第一階段：思考與骨架

1. 先在紙上畫草圖

設計是解決「如何有效傳達資訊」的問題，非堆砌陰影特效。打開軟體前，先理清內容、版面、層級結構。

2. 繪製頂層框架

框架 = 圍繞內容的 UI（導航、側邊欄、底部欄）。先定框架，解決所有 UX 問題，非首頁頁面的佈局需求自然清晰。

3. PSD 建立網格系統

無理由不加網格。網格輔助介面切分、多螢幕適配、留白一致性。10px 基線網格是經典起點。

第二階段：視覺語言定調

4. 選擇字體（不超過兩套）

一套易讀字體（正文）+ 一套有個性字體（標題/互動）。大膽用大字號，保持趣味性與連續性。

5. 確立配色主題（有限色彩與色調）

UI 層限制色數與色調變化，保持功能性色彩一致性（參考 Facebook、Twitter 等）。插畫、細節層可突破限制，只要不干擾 UI 功能識別。

第三階段：佈局與結構

6. 版面模組化切分

每個區塊須有明確目的與價值。單一明確的行動呼喚（CTA），引導使用者理解「我在這能做什麼」。從最簡佈局起步，僅添加必要元素。

7. 反思現有慣例

「我們真的需要搜尋框嗎？」大多數情況答案是否定的。重新審視既有交互模式，尋找提升空間。

8. 挑戰自我，微創新

每個專案嘗試一項創新：新網格系統、新元件、避開混合模式、限制特定顏色。創新源於主動挑戰。

第四階段：細節與品質

9. 精益求精細節

細節 = 小交互元件、意外驚喜動畫、按鈕漸層、描邊。必須源於實際需求，且視覺自然。

10. 每個元件皆為傑作

單獨拎出任何元件，都應經得起審視。拒絕「待處理」清單積壓細節缺陷。

11. 銳化設計輸出

避免漸層失真、鋸齒邊緣、字體渲染模式不當、線條融入背景。整體協調與局部精細雙重檢視。

12. PSD 圖層有序整潔

專案規模、協作人數不變，整潔習慣決定產出效率與溝通成本。

第五階段：驗證與心態

13. 多裝置預判：一顆紅心，兩手準備

為理想裝置設計，但確保非理想環境不崩壞。響應式、優雅降級是基本功。

14. 反覆審視，直到厭倦

截圖當桌布、貼牆上、設螢幕保護。討厭自己的作品，是從錯誤中學習的成熟標誌。

15. 客戶分享前，避免過度投入

（原文截斷，補全核心意）：在客戶評審前保持適度抽離，預留修改空間與心態彈性。

16. 靈活應對回饋

客戶反饋非指令，而是問題線索。透過溝通挖掘真實需求，而非機械執行。

17. 交付開發前的規格文檔化

標註尺寸、間距、狀態、動效參數，減少開發還原偏差。

18. 上線後的數據驗證

關鍵指標追蹤（跳出率、轉換率、熱力圖），用數據說話，持續迭代。

19. 建立設計系統組件庫

將通用元件、模式、規範沉澱為資產，提升團隊效率與一致性。

20. 持續學習與復盤

每個專案結束進行復盤，記錄得失，更新個人知識庫。設計師的成長，源於有意識的刻意練習。

結語

這 20 步不僅是流程，更是專業思維的外化。從草圖到復盤，每一步都在為「解決問題」而非「畫圖」服務。內化於心，外化於行，方得專業之道。