Agent skill

ui-ux-design

UI/UX 設計：介面設計原則、用戶體驗、可用性、無障礙設計

View SKILL.md on GitHub Repository
Stars 10
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/miles990/claude-domain-skills/tree/main/creative/ui-ux-design/skills/ui-ux-design

SKILL.md

UI/UX 設計 UI/UX Design

以用戶為中心的設計思維

適用場景

  • 設計用戶介面和互動流程
  • 建立設計系統和元件庫
  • 進行可用性評估
  • 確保無障礙合規
  • 製作線框圖和原型

核心設計原則

原則 說明
一致性 相同功能使用相同的視覺和互動模式
可見性 重要資訊和操作應該容易被發現
回饋 每個操作都應該有即時的視覺或聽覺回饋
容錯 允許用戶撤銷操作，避免災難性錯誤
簡約 只顯示必要的資訊，減少認知負荷

視覺層級

層級 用途 設計手法
Primary 主要行動 大按鈕、強對比色
Secondary 次要行動 較小、輪廓按鈕
Tertiary 輔助資訊 文字連結、淡色

視覺重量優先級：大小 > 顏色對比 > 粗細 > 位置 > 間距

間距系統（8pt Grid）

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

對比度要求（WCAG 2.1）

層級 普通文字 大型文字
AA 4.5:1 3:1
AAA 7:1 4.5:1

無障礙設計 (WCAG POUR)

原則 核心要求
Perceivable 圖片有 alt、色彩不是唯一資訊、對比度 AA
Operable 鍵盤可操作、Focus 明顯、無閃爍
Understandable 語言指定、表單標籤清楚、導航一致
Robust 語意化 HTML、ARIA 正確、跨裝置相容

常見修復

問題 解決方案
圖片無 alt <img alt="描述">
低對比度 使用對比度檢查工具
無鍵盤導航 確保 tabindex 正確
無 focus 指示 加入 :focus 樣式

詳細 WCAG 檢查清單見 extended/checklists.md

互動設計模式

導航模式

  • Tab Bar: 3-5 個主要功能（行動裝置）
  • Side Nav: 多層級導航（桌面）
  • Breadcrumb: 深層結構回溯

輸入模式

  • Inline Validation: 即時驗證
  • Progressive Disclosure: 逐步顯示
  • Default Values: 預填合理預設

回饋模式

  • Toast: 非阻斷式通知
  • Modal: 需要用戶決策
  • Skeleton: 載入中佔位

設計系統元件

基礎元件

Button, Input, Select, Checkbox/Radio, Toggle, Icon

複合元件

Card, Modal, Toast, Table, Pagination, Navigation

版面元件

Container, Grid, Stack, Divider

Nielsen 10 大可用性啟發式

# 啟發式 檢查問題
1 系統狀態可見 用戶知道目前發生什麼事嗎？
2 現實與系統匹配 使用用戶熟悉的語言嗎？
3 用戶控制與自由 可以撤銷/返回嗎？
4 一致性與標準 遵循平台慣例嗎？
5 錯誤預防 是否預防錯誤發生？
6 識別而非回憶 選項是否可見？
7 靈活與效率 有快捷方式嗎？
8 美學與極簡 是否只顯示必要資訊？
9 錯誤恢復 錯誤訊息有幫助嗎？
10 幫助與文件 需要時能找到幫助嗎？

常見錯誤

錯誤 正確做法
按鈕顏色區分功能 用大小/位置/文字區分
Placeholder 當標籤 使用獨立的 label
無 hover 狀態 所有可互動元素有 hover
自動播放影片 需要用戶主動播放

用戶測試類型

類型 說明 適用階段
探索性 了解用戶如何自然使用 早期原型
任務導向 完成特定任務 設計中期
比較測試 A vs B 方案 決策階段
基準測試 量化效能指標 上線前/後

測試準備清單見 extended/checklists.md

響應式設計

斷點（Mobile First）

裝置 寬度
手機 < 640px（預設）
平板 >= 768px
筆電 >= 1024px
桌機 >= 1280px

關鍵策略

  • 手機：觸控區域 44px+、單欄布局
  • 桌面：hover 狀態、多欄布局

響應式詳細指南見 extended/examples.md

動效設計原則

原則 實作
目的性 引導注意力、表達關係
自然性 使用緩動函數
快速 大多 200-300ms
一致性 建立動效規範

緩動函數詳細參考見 extended/examples.md

深色模式要點

  • 不是簡單反轉，需重新設計色階
  • 背景層級：#121212 → #1E1E1E → #2D2D2D
  • 文字：87% / 60% / 38% 白色透明度
  • 強調色降低飽和度，確保對比度

深色模式完整指南見 extended/examples.md

設計系統建立

Audit(審計) → Define(定義) → Build(建立) → Maintain(維護)

詳細步驟與 Design Token 範例見 extended/templates.md

工具推薦

  • 設計：Figma, Sketch
  • 原型：Figma, ProtoPie
  • 無障礙測試：axe, WAVE
  • 對比度：WebAIM Contrast Checker

相關資源

延伸閱讀

  • extended/templates.md - 設計交接清單、測試報告模板、Design Token
  • extended/examples.md - 響應式、動效、深色模式詳細指南
  • extended/checklists.md - WCAG、可用性測試、上線前檢查清單

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

miles990/claude-domain-skills

skill-optimizer

Skill 瘦身優化器 — 減少 token 使用同時保持功能完整

10 1
Explore
miles990/claude-domain-skills

knowledge-acquisition-4c

從未知領域到專業的系統化學習方法論

10 1
Explore
miles990/claude-domain-skills

consistency-checker

內容一致性檢查器 — 確保程式碼、文檔、多來源之間保持一致

10 1
Explore
miles990/claude-domain-skills

tech-spec-gen

設計文件 → 技術規格生成器 — 將任何設計文件轉換為 AI 可執行的技術實作規格

10 1
Explore
miles990/claude-domain-skills

research-analysis

研究分析：文獻回顧、競品分析、市場調研、數據分析方法論

10 1
Explore
miles990/claude-domain-skills

knowledge-management

知識管理：第二大腦、筆記系統、資訊整理、數位工具流

10 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results