優秀的 UI 設計不是靈光一現的產物，而是結構化探索 → 視覺語言定調 → 組件系統化構建 → 多態完善 → 交付標準化的工程化過程。本文以某餐飲預訂 App「牛排」模塊為例，完整復盤從草圖到最終稿的 4 輪迭代關鍵決策點。

階段 1：概念草圖與信息架構梳理
低保真手繪/白板：確定核心任務流（選門店 → 選套餐 → 選時段 → 填資訊 → 支付），識別關鍵信息層級（門店/套餐/價格/評分/距離/優惠），探索 3 種佈局方案（列表卡片/地圖+列表/瀑布流），團隊評審定奪「列表卡片+地圖切換」雙模式。

階段 2：視覺語言定調與組件庫搭建
情緒板提取「牛排煎烤焦糖色系」（#C44D2E 主色、#FFF8F0 背景、#2D2D2D 文字）、字體選型（標題 PingFang SC Semibold / 正文 Regular）、圓角 8px/12px 兩級、陰影 3 級、間距 8px 基準網格。建立 Figma 組件庫：`Card/Restaurant`、`Card/Meal`、`Button/Primary`、`Tag/Promo`、`Rating/Stars`、`Input/Form` 等 20+ 原子組件。

階段 3：高保真頁面構建與狀態全覆蓋
基於組件庫搭建 8 個核心頁面：首頁/門店列表/門店詳情/套餐選擇/時間選擇/訂單確認/支付/訂單成功。每頁覆蓋：默認態、載入態、空態、錯誤態、無網絡態、長文本截斷態、極長列表虛擬滾動態。關鍵交互細節：門店卡片「展開詳情」手勢動畫、套餐選擇「單選/多選」切換邏輯、時間段「已滿/可選/即將開始」三態視覺區分、價格拆分「原價/優惠/實付」三行對齊。

階段 4：多端適配與設計交付
響應式斷點：375px（iPhone SE）、390px（iPhone 14）、414px（Plus/Pro Max）、768px（iPad Mini）、1024px（iPad Pro）。組件變體：列表卡片橫向佈局（平板）、地圖全屏模式（桌面端）、側邊欄導航（寬屏）。交付包：Figma 連結（含標註/動效/紅線）、Token JSON、組件 API 文檔、切圖資源（@2x/@3x/WebP）、無障礙檢查清單、驗收標準表。

關鍵決策複盤：為什麼這樣設計？

決策點	備選方案	最終選擇理由
門店卡片圖片比例	1:1 / 4:3 / 16:9 / 3:4	4:3 最佳平衡：展示菜品細節 + 保留足夠信息區高度，適配多數商家攝影比例
價格顯示策略	僅顯示實付 / 顯示原價劃線 / 三行拆分	三行拆分：原價灰色劃線 + 優惠綠色標簽 + 實付大號品牌色，感知折扣力度最強
評分組件形式	五角星 / 數字分 / 進度條 / 标签云	星級（半星精度）+ 數字分 + 評價數，三重編碼滿足不同認知習慣
加載態設計	骨架屏 / Spinner / 佔位圖	骨架屏：卡片結構級佔位，保持佈局穩定，CLS ≈ 0，體感最快
空態插畫風格	插畫 / 真實圖片 / 純文字	手繪風插畫 + 幽默文案（如「連牛都找不到路」），緩解挫敗感，引導轉向地圖模式

數據驗證：上線後核心指標變化

• 門店列表 → 詳情點擊率：+18%（卡片信息密度優化、CTA 按鈕視覺權重提升）
• 套餐選擇完成率：+22%（單選/多選邏輯明確化、價格拆分透明化）
• 訂單提交轉化率：+15%（表單字段減少 30%、智能預填、錯誤即時提示）
• 用戶反饋「介面好看/好用」提及率：從 12% 升至 34%

設計師成長感悟

1. 系統先於頁面： 先搭組件庫再畫頁面，修改成本指數級下降。
2. 狀態思維： 不只設計「理想路徑」，邊界狀態決定產品質感下限。
3. 數據閉環： 設計決策必須可驗證，上線後追蹤指標，形成「決策-驗證-迭代」飛輪。
4. 交付即文檔： 標註、Token、API 文檔是給工程師的愛，也是給未來的自己留的後路。

結語：好設計是看不見的邏輯，加上摸得著的溫度

從草圖到上線，每一像素的移動都有業務理由、用戶證據、系統約束。這份複盤，獻給每一位在像素中尋找確定性的設計師。