名称：软件-ui-ux-设计
描述：用于设计或审计UI/UX（从线框图到UI规范），执行启发式和可访问性审查（WCAG 2.2 AA，ARIA），定义设计系统和令牌，优化流程/表单/状态和转化率（CRO），或针对Web/iOS/Android/桌面平台定制包容性体验（如年龄、神经多样性），包括AI/自动化UX模式。
软件UI/UX设计
设计直观、可访问、以用户为中心的界面。
基线（2026年1月）：
快速开始
- 明确平台、主要用户旅程和约束（可访问性级别、性能、本地化、认证）。
- 选择路径：审计现有UI（启发式 + 状态矩阵 + WCAG）或设计新UI（信息架构 + 流程 + UI规范）。
- 生成工件：建议、验收标准和交付规范（组件、状态、文案、令牌）。
决策树
设计挑战：
├─ 要构建什么？ → 先使用软件-ux-研究
├─ 改进现有UI？
│ ├─ 可用性问题 → 启发式审查
│ ├─ 可访问性差距 → WCAG 2.2审计
│ ├─ 不一致性 → 设计系统对齐
│ └─ 转化率问题 → CRO审计
├─ 构建新UI？
│ └─ references/ui-generation-workflows.md
├─ 特定人群？
│ └─ references/demographic-inclusive-design.md
└─ 平台约束？
├─ Web → 语义 + 焦点 + 重排
├─ iOS → 系统导航 + 动态类型
└─ Android → Material + 边缘到边缘
交互清单
| 目标 |
做 |
避免 |
| 清晰度 |
每个视图一个主要操作 |
竞争性召唤行动 |
| 可供性 |
原生控件，强指示符 |
可点击div，仅悬停 |
| 反馈 |
即时视觉响应 |
无声点击 |
| 错误预防 |
约束输入，显示示例 |
提交后失败 |
| 错误恢复 |
具体消息 + 下一步 |
“出了点问题” |
| 一致性 |
重用模式和术语 |
相同术语，不同含义 |
状态矩阵
| 状态 |
处理 |
何时 |
| 加载中 |
占位符匹配布局 |
数据获取 |
| 空 |
消息 + 召唤行动 |
零项目 |
| 错误 |
警报 + 重试操作 |
请求失败 |
| 离线 |
横幅 + 缓存指示器 |
无网络 |
| 降级 |
警告 + 有限功能 |
部分失败 |
平台约束
Web
- 语义HTML优先（无“div汤”）
- 仅在需要时使用ARIA
- 在SPA导航中管理焦点
- 在320 CSS像素处重排（WCAG 1.4.10）
- 目标尺寸 ≥24像素（WCAG 2.5.8）
iOS
- 系统导航（标签栏、导航栏）
- 支持动态类型
- 深色模式 + 系统材料
- 处理安全区域
Android
- Material 3组件
- 动态颜色（Material You）
- 边缘到边缘内容
- 处理预测性返回
WCAG 2.2关键变更
| 要求 |
实现 |
| 焦点不被遮挡 |
使用粘性UI保持焦点可见 |
| 焦点外观 |
清晰可见指示器 |
| 拖拽动作 |
非拖拽替代方案 |
| 目标尺寸 |
≥24×24 CSS像素 |
| 冗余输入 |
不重新请求已知信息 |
| 可访问认证 |
避免认知测试 |
减少动画
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
设计令牌
{
"颜色": {
"主要": {
"$值": "#0066cc",
"$类型": "颜色"
}
},
"间距": {
"小": {
"$值": "8px",
"$类型": "尺寸"
}
}
}
| 层 |
示例 |
目的 |
| 原始 |
蓝色-500，16像素 |
原始值 |
| 语义 |
颜色-主要 |
基于意图 |
| 组件 |
按钮-背景 |
组件特定 |
资源
模板
模式灵感
相关技能