Menü
UI/UX 設計：介面設計原則、用戶體驗、可用性、無障礙設計
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
非技術領域專業知識集合，包含商業、金融、創意、專業服務、生活、方法論等 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、可用性測試、上線前檢查清單