Menu
UI/UX 設計：介面設計原則、用戶體驗、可用性、無障礙設計
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
非技術領域專業知識集合，包含商業、金融、創意、專業服務、生活、方法論等 18 個領域
數位行銷策略、內容行銷與成效分析
產品管理：PRD撰寫、用戶故事、OKR設定、路線圖規劃
專案管理：敏捷開發、Scrum、甘特圖、風險管理、團隊協作
銷售技巧：B2B/B2C 銷售、客戶開發、電商營運、成交策略
商業策略：藍海策略、差異化、競爭優勢、價值創新、商業模式設計
| schema | 1.0 |
| name | ui-ux-design |
| version | 1.1.0 |
| description | UI/UX 設計：介面設計原則、用戶體驗、可用性、無障礙設計 |
| triggers | {"keywords":{"primary":["UI","UX","介面設計","用戶體驗","interface","user-experience","wireframe"],"secondary":["usability","accessibility","可用性","無障礙","prototype","原型","設計系統"]},"context_boost":["figma","design","component","layout","mobile","responsive"],"context_penalty":["backend","api","database","trading"],"priority":"high"} |
| keywords | ["creative","design","ui","ux","interface"] |
| dependencies | {"software-skills":["frontend"]} |
| author | claude-domain-skills |
以用戶為中心的設計思維
| 原則 | 說明 |
|---|---|
| 一致性 | 相同功能使用相同的視覺和互動模式 |
| 可見性 | 重要資訊和操作應該容易被發現 |
| 回饋 | 每個操作都應該有即時的視覺或聽覺回饋 |
| 容錯 | 允許用戶撤銷操作，避免災難性錯誤 |
| 簡約 | 只顯示必要的資訊，減少認知負荷 |
| 層級 | 用途 | 設計手法 |
|---|---|---|
| Primary | 主要行動 | 大按鈕、強對比色 |
| Secondary | 次要行動 | 較小、輪廓按鈕 |
| Tertiary | 輔助資訊 | 文字連結、淡色 |
視覺重量優先級：大小 > 顏色對比 > 粗細 > 位置 > 間距
| Token | 值 | 用途 |
|---|---|---|
| xs | 4px | 緊湊間距 |
| sm | 8px | 相關元素 |
| md | 16px | 區塊間距 |
| lg | 24px | 區塊間距 |
| xl | 32px | 章節間距 |
| xxl | 48px | 大區塊分隔 |
| 色彩 | 用途 | Hex 範例 |
|---|---|---|
| Primary | 品牌主色、主要 CTA | #0066FF |
| Success | 成功、確認、完成 | #00C853 |
| Warning | 警告、需注意 | #FFB300 |
| Error | 錯誤、危險、刪除 | #FF3D00 |
| Info | 資訊、提示 | #00B0FF |
| 層級 | 普通文字 | 大型文字 |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
| 原則 | 核心要求 |
|---|---|
| Perceivable | 圖片有 alt、色彩不是唯一資訊、對比度 AA |
| Operable | 鍵盤可操作、Focus 明顯、無閃爍 |
| Understandable | 語言指定、表單標籤清楚、導航一致 |
| Robust | 語意化 HTML、ARIA 正確、跨裝置相容 |
| 問題 | 解決方案 |
|---|---|
| 圖片無 alt | <img alt="描述"> |
| 低對比度 | 使用對比度檢查工具 |
| 無鍵盤導航 | 確保 tabindex 正確 |
| 無 focus 指示 | 加入 :focus 樣式 |
詳細 WCAG 檢查清單見
extended/checklists.md
Button, Input, Select, Checkbox/Radio, Toggle, Icon
Card, Modal, Toast, Table, Pagination, Navigation
Container, Grid, Stack, Divider
| # | 啟發式 | 檢查問題 |
|---|---|---|
| 1 | 系統狀態可見 | 用戶知道目前發生什麼事嗎？ |
| 2 | 現實與系統匹配 | 使用用戶熟悉的語言嗎？ |
| 3 | 用戶控制與自由 | 可以撤銷/返回嗎？ |
| 4 | 一致性與標準 | 遵循平台慣例嗎？ |
| 5 | 錯誤預防 | 是否預防錯誤發生？ |
| 6 | 識別而非回憶 | 選項是否可見？ |
| 7 | 靈活與效率 | 有快捷方式嗎？ |
| 8 | 美學與極簡 | 是否只顯示必要資訊？ |
| 9 | 錯誤恢復 | 錯誤訊息有幫助嗎？ |
| 10 | 幫助與文件 | 需要時能找到幫助嗎？ |
| 錯誤 | 正確做法 |
|---|---|
| 按鈕顏色區分功能 | 用大小/位置/文字區分 |
| Placeholder 當標籤 | 使用獨立的 label |
| 無 hover 狀態 | 所有可互動元素有 hover |
| 自動播放影片 | 需要用戶主動播放 |
| 類型 | 說明 | 適用階段 |
|---|---|---|
| 探索性 | 了解用戶如何自然使用 | 早期原型 |
| 任務導向 | 完成特定任務 | 設計中期 |
| 比較測試 | A vs B 方案 | 決策階段 |
| 基準測試 | 量化效能指標 | 上線前/後 |
測試準備清單見
extended/checklists.md
| 裝置 | 寬度 |
|---|---|
| 手機 | < 640px（預設） |
| 平板 | >= 768px |
| 筆電 | >= 1024px |
| 桌機 | >= 1280px |
響應式詳細指南見
extended/examples.md
| 原則 | 實作 |
|---|---|
| 目的性 | 引導注意力、表達關係 |
| 自然性 | 使用緩動函數 |
| 快速 | 大多 200-300ms |
| 一致性 | 建立動效規範 |
緩動函數詳細參考見
extended/examples.md
深色模式完整指南見
extended/examples.md
Audit(審計) → Define(定義) → Build(建立) → Maintain(維護)
詳細步驟與 Design Token 範例見
extended/templates.md
extended/templates.md - 設計交接清單、測試報告模板、Design Tokenextended/examples.md - 響應式、動效、深色模式詳細指南extended/checklists.md - WCAG、可用性測試、上線前檢查清單