UX Designer Skill

🧠 Expertise

資深用戶體驗設計師，專精於設計系統、響應式設計、無障礙設計與用戶研究。

1. 設計系統架構

1.1 設計系統結構

Design System
├── Foundations (基礎)
│   ├── Colors (色彩)
│   ├── Typography (字型)
│   ├── Spacing (間距)
│   └── Breakpoints (響應式斷點)
├── Components (組件)
│   ├── Atoms (原子)
│   ├── Molecules (分子)
│   └── Organisms (有機體)
└── Patterns (模式)
    ├── Navigation (導航)
    ├── Forms (表單)
    └── Feedback (回饋)

1.2 色彩系統

:root {
  /* 主色 */
  --color-primary-50: #E3F2FD;
  --color-primary-500: #2196F3;
  --color-primary-900: #0D47A1;
  
  /* 語意色 */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #2196F3;
  
  /* 中性色 */
  --color-gray-100: #F5F5F5;
  --color-gray-500: #9E9E9E;
  --color-gray-900: #212121;
}

1.3 間距系統 (8px Grid)

2. 組件設計原則

2.1 原子設計層級

2.2 按鈕設計規範

/* 按鈕層級 */
.btn-primary { /* 主要行動 */ }
.btn-secondary { /* 次要行動 */ }
.btn-tertiary { /* 第三級行動 */ }
.btn-ghost { /* 幽靈按鈕 */ }

/* 按鈕狀態 */
.btn:hover { /* 懸停 */ }
.btn:active { /* 點擊 */ }
.btn:focus { /* 聚焦 */ }
.btn:disabled { /* 禁用 */ }

/* 按鈕尺寸 */
.btn-sm { height: 32px; padding: 0 12px; }
.btn-md { height: 40px; padding: 0 16px; }
.btn-lg { height: 48px; padding: 0 24px; }

3. 響應式設計

3.1 斷點系統 (Mobile First)

/* 斷點定義 */
--breakpoint-sm: 640px;   /* 手機橫向 */
--breakpoint-md: 768px;   /* 平板 */
--breakpoint-lg: 1024px;  /* 小桌面 */
--breakpoint-xl: 1280px;  /* 桌面 */
--breakpoint-2xl: 1536px; /* 大桌面 */

/* 使用方式 */
@media (min-width: 768px) {
  .container { max-width: 720px; }
}

3.2 響應式策略

3.3 觸控友善設計

4. 無障礙設計 (WCAG 2.1)

4.1 四大原則

4.2 色彩對比度

4.3 鍵盤導航

<!-- 正確的焦點順序 -->
<button tabindex="0">第一個</button>
<button tabindex="0">第二個</button>

<!-- 跳過導航連結 -->
<a href="#main-content" class="skip-link">跳到主要內容</a>

<!-- ARIA 標籤 -->
<button aria-label="關閉對話框">×</button>
<nav aria-label="主導航">...</nav>

4.4 螢幕閱讀器

<!-- 視覺隱藏但可被閱讀 -->
<span class="sr-only">載入中</span>

<!-- 動態內容通知 -->
<div aria-live="polite" aria-atomic="true">
  訂單已成功送出
</div>

<!-- 表單錯誤關聯 -->
<input id="email" aria-describedby="email-error">
<span id="email-error">請輸入有效的電子郵件</span>

5. 用戶研究方法

5.1 研究類型

5.2 可用性測試流程

1. 定義目標任務
2. 招募目標用戶 (5-8 人)
3. 準備測試環境
4. 執行測試 (觀察 + 錄製)
5. 分析結果 (成功率、錯誤、時間)
6. 產出改善建議

5.3 關鍵指標

6. 表單設計

6.1 表單最佳實務

6.2 錯誤處理

<!-- 錯誤狀態 -->
<div class="form-field error">
  <label for="email">電子郵件 *</label>
  <input 
    id="email" 
    type="email" 
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <span id="email-error" class="error-message">
    請輸入有效的電子郵件格式
  </span>
</div>

7. 設計檢查清單

視覺設計

• 色彩對比度符合 WCAG AA？
• 字體大小至少 16px？
• 間距使用 8px 網格？
• 響應式斷點正確？

無障礙

• 所有圖片有替代文字？
• 可完全使用鍵盤操作？
• 焦點狀態明顯可見？
• 表單有適當錯誤提示？

互動設計

• 觸控目標至少 44px？
• 載入狀態有回饋？
• 錯誤訊息清晰？
• 關鍵流程可逆？