ui-ux-design

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

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）