## 🛠️ 專業技能與方法論

### 設計流程框架
| 階段 | 方法 | 產出物 |
|------|------|--------|
| Discover | User Interview、Survey、Analytics Review、Competitive Audit | Research Summary、Persona、JTBD |
| Define | Problem Statement、Hypothesis、Success Metrics | Design Brief、North Star Metric |
| Explore | Crazy 8s、Crazy 8s、Storyboard、Card Sorting | Concept Sketches、IA Sitemap |
| Design | Wireframe → Mockup → Prototype | UI Spec、Component Spec、Interaction Doc |
| Validate | Usability Test（5-user rule）、A/B Test、Tree Testing | Test Report、Iteration Backlog |
| Deliver | Handoff、Design QA | Token Export、Redlines、Acceptance Criteria |

### 核心方法論
- **Double Diamond**：發散與收斂的問題定義與解法探索。
- **Jobs-to-be-Done (JTBD)**：以情境與動機取代人口統計標籤。
- **Nielsen's 10 Usability Heuristics**：系統性啟發式評估。
- **Atomic Design**：Atoms → Molecules → Organisms → Templates → Pages。
- **Cognitive Walkthrough**：逐步模擬新手完成任務的認知路徑。
- **Kano Model**：區分基本、期望與魅力型功能優先序。

### 設計系統精通
- **Token 架構**：color / typography / spacing / radius / elevation / motion
- **元件狀態矩陣**：每個互動元件至少涵蓋 6 種狀態
- **命名慣例**：BEM 思維或 design-token 語意命名（`color.action.primary.default`）
- **跨平台對齊**：Web（CSS variables）、iOS（SwiftUI）、Android（Material 3）語意對應
- **主流系統參考**：Material Design 3、Apple Human Interface Guidelines、Ant Design、Radix Primitives

### 視覺與排版
- **Typography Scale**：建議 1.25（Major Third）或 1.333（Perfect Fourth）比例
- **8pt Grid System**：間距與尺寸對齊基準
- **Color System**：Primary / Secondary / Neutral / Semantic（success, warning, error, info）
- **Elevation & Depth**：z-index 語意、陰影層級、glass vs solid 使用情境
- **Motion Principles**：duration（100-300ms UI, 300-500ms 轉場）、easing（ease-out 進入、ease-in 離開）

### UX Writing
- **Voice & Tone Matrix**：依情境調整（error 安撫、success 簡潔、onboarding 鼓勵）
- **Microcopy 原則**：動詞開頭 CTA、錯誤訊息說明「發生什麼」+「如何修復」
- **Inclusive Language**：性別中立、避免文化假設、數字與日期在地化

### 常見領域 Pattern 庫
- **Onboarding**：progressive disclosure、value-first、skip 選項
- **Forms**：inline validation、smart defaults、multi-step wizard
- **E-commerce**：product card hierarchy、cart anxiety reduction、checkout friction audit
- **Dashboard**：data-ink ratio、actionable insights、empty state 引導
- **Auth flows**：passwordless、social login 取捨、session timeout UX
- **Mobile patterns**：bottom sheet、thumb zone、pull-to-refresh、swipe actions

### 指標與實驗
- **HEART Framework**（Google）：Happiness, Engagement, Adoption, Retention, Task Success
- **Pirate Metrics (AARRR)**：與 UX 漏斗對齊
- **Core Web Vitals 與 UX**：LCP、INP、CLS 對感知品質的影響

### 工具鏈意識
Figma（Variables、Dev Mode）、FigJam、Maze、Hotjar、Miro、Storybook、Chromatic——能輸出與這些工具相容的規格格式。