software-ui-ux-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSoftware UI/UX Design
软件UI/UX设计
Design intuitive, accessible, user-centered interfaces.
Baselines (Jan 2026):
- Accessibility: WCAG 2.2 Level AA — W3C
- Performance: Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1) — web.dev
- Platforms: Apple HIG, Material 3
设计直观、可访问、以用户为中心的界面。
基准要求（2026年1月）:
- 可访问性: WCAG 2.2 AA级别 — W3C
- 性能: 核心Web指标（LCP ≤2.5秒，INP ≤200毫秒，CLS ≤0.1） — web.dev
- 平台规范: Apple HIG, Material 3
Quick Start
快速入门
- Clarify platform(s), primary user journey, and constraints (accessibility level, performance, localization, auth).
- Choose track: audit an existing UI (heuristics + state matrix + WCAG) or design a new UI (IA + flows + UI spec).
- Produce artifacts: recommendations, acceptance criteria, and a handoff spec (components, states, copy, tokens).
- 明确目标平台、核心用户旅程及约束条件（可访问性级别、性能、本地化、认证）。
- 选择工作路径：审核现有UI（启发式评估+状态矩阵+WCAG审查）或设计新UI（信息架构+流程+UI规范）。
- 输出交付物：改进建议、验收标准，以及交接规范（组件、状态、文案、设计令牌）。
Decision Tree
决策树
text
Design challenge:
├─ What to build? → Use software-ux-research first
├─ Improving existing UI?
│ ├─ Usability issues → Heuristic review
│ ├─ Accessibility gaps → WCAG 2.2 audit
│ ├─ Inconsistency → Design system alignment
│ └─ Conversion issues → CRO audit
├─ Building new UI?
│ └─ references/ui-generation-workflows.md
├─ Specific demographics?
│ └─ references/demographic-inclusive-design.md
└─ Platform constraints?
├─ Web → semantics + focus + reflow
├─ iOS → system nav + Dynamic Type
└─ Android → Material + edge-to-edgetext
Design challenge:
├─ What to build? → Use software-ux-research first
├─ Improving existing UI?
│ ├─ Usability issues → Heuristic review
│ ├─ Accessibility gaps → WCAG 2.2 audit
│ ├─ Inconsistency → Design system alignment
│ └─ Conversion issues → CRO audit
├─ Building new UI?
│ └─ references/ui-generation-workflows.md
├─ Specific demographics?
│ └─ references/demographic-inclusive-design.md
└─ Platform constraints?
├─ Web → semantics + focus + reflow
├─ iOS → system nav + Dynamic Type
└─ Android → Material + edge-to-edgeInteraction Checklist
交互检查清单
| Goal | Do | Avoid |
|---|---|---|
| Clarity | One primary action per view | Competing CTAs |
| Affordances | Native controls, strong signifiers | Clickable divs, hover-only |
| Feedback | Immediate visual response | Silent taps |
| Error prevention | Constrain inputs, show examples | Submit-then-fail |
| Error recovery | Specific message + next step | "Something went wrong" |
| Consistency | Reuse patterns and terms | Same term, different meanings |
| 目标 | 建议做法 | 避免事项 |
|---|---|---|
| 清晰性 | 每个视图仅保留一个核心操作 | 多个相互竞争的CTA |
| 可操作性 | 使用原生控件、明确的交互提示 | 可点击div、仅悬停触发的操作 |
| 反馈性 | 即时视觉响应 | 无反馈的点击操作 |
| 错误预防 | 限制输入范围、提供示例 | 提交后才提示错误 |
| 错误恢复 | 具体错误信息+下一步操作指引 | 仅显示“出了点问题” |
| 一致性 | 复用交互模式和术语 | 同一术语对应不同含义 |
State Matrix
状态矩阵
| State | Treatment | When |
|---|---|---|
| Loading | Placeholder matching layout | Data fetching |
| Empty | Message + CTA | Zero items |
| Error | Alert + retry action | Request fails |
| Offline | Banner + cached indicator | No network |
| Degraded | Warning + limited functionality | Partial failure |
| 状态 | 处理方式 | 适用场景 |
|---|---|---|
| 加载中 | 与布局匹配的占位符 | 数据获取时 |
| 空状态 | 提示信息+操作按钮 | 无内容项时 |
| 错误 | 警告提示+重试操作 | 请求失败时 |
| 离线 | 横幅提示+缓存标识 | 无网络连接时 |
| 降级 | 警告提示+受限功能 | 部分功能失效时 |
Platform Constraints
平台约束
Web
网页端
- Semantic HTML first (no "div soup")
- ARIA only when needed
- Manage focus on SPA navigation
- Reflow at 320 CSS px (WCAG 1.4.10)
- Target size ≥24px (WCAG 2.5.8)
- 优先使用语义化HTML（避免“div嵌套地狱”）
- 仅在必要时使用ARIA
- 管理SPA导航时的焦点
- 支持320 CSS px下的重排（WCAG 1.4.10）
- 目标元素尺寸≥24px（WCAG 2.5.8）
iOS
iOS端
- System navigation (tab bar, nav bar)
- Dynamic Type support
- Dark mode + system materials
- Handle Safe Areas
- 使用系统导航（标签栏、导航栏）
- 支持动态字体
- 适配深色模式+系统材质
- 处理安全区域
Android
Android端
- Material 3 components
- Dynamic Color (Material You)
- Edge-to-edge content
- Handle predictive back
- 使用Material 3组件
- 支持动态色彩（Material You）
- 边缘到边缘的内容布局
- 处理预测性返回
WCAG 2.2 Key Changes
WCAG 2.2 主要变更
| Requirement | Implementation |
|---|---|
| Focus not obscured | Keep focus visible with sticky UI |
| Focus appearance | Clear visible indicator |
| Dragging movements | Non-drag alternatives |
| Target size | ≥24×24 CSS px |
| Redundant entry | Don't re-request known info |
| Accessible auth | Avoid cognitive tests |
| 要求 | 实现方式 |
|---|---|
| 焦点不被遮挡 | 通过固定UI保持焦点可见 |
| 焦点外观 | 清晰可见的焦点指示器 |
| 拖拽操作 | 提供非拖拽替代方案 |
| 目标尺寸 | ≥24×24 CSS px |
| 重复输入 | 不重复请求已知信息 |
| 可访问的认证 | 避免认知类测试 |
Reduced Motion
减少动画
css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Design Tokens
设计令牌
json
{
"color": {
"primary": {
"$value": "#0066cc",
"$type": "color"
}
},
"spacing": {
"sm": {
"$value": "8px",
"$type": "dimension"
}
}
}| Layer | Examples | Purpose |
|---|---|---|
| Primitive | | Raw values |
| Semantic | | Intent-based |
| Component | | Component-specific |
json
{
"color": {
"primary": {
"$value": "#0066cc",
"$type": "color"
}
},
"spacing": {
"sm": {
"$value": "8px",
"$type": "dimension"
}
}
}| 层级 | 示例 | 用途 |
|---|---|---|
| 基础层 | | 原始数值 |
| 语义层 | | 基于意图命名 |
| 组件层 | | 组件专用 |
Resources
资源
| Resource | Purpose |
|---|---|
| references/implementation-research-workflow.md | Research before building |
| references/design-systems.md | Design system patterns |
| references/component-library-comparison.md | shadcn, MUI, Radix |
| references/nielsen-heuristics.md | Heuristic evaluation |
| references/wcag-accessibility.md | WCAG compliance |
| references/demographic-inclusive-design.md | Age-specific UX |
| references/neurodiversity-design.md | ADHD, autism, dyslexia |
| references/ui-generation-workflows.md | UI from scratch |
| references/ai-design-tools-2025.md | Figma AI, v0 |
| references/cro-framework.md | Conversion optimization |
| references/operational-playbook.md | Decision frameworks |
| 资源 | 用途 |
|---|---|
| references/implementation-research-workflow.md | 开发前的调研 |
| references/design-systems.md | 设计系统模式 |
| references/component-library-comparison.md | shadcn、MUI、Radix组件库对比 |
| references/nielsen-heuristics.md | 启发式评估 |
| references/wcag-accessibility.md | WCAG合规性 |
| references/demographic-inclusive-design.md | 年龄适配UX |
| references/neurodiversity-design.md | 神经多样性适配（ADHD、自闭症、阅读障碍） |
| references/ui-generation-workflows.md | 从零开始设计UI |
| references/ai-design-tools-2025.md | Figma AI、v0等AI设计工具 |
| references/cro-framework.md | 转化率优化框架 |
| references/operational-playbook.md | 决策框架 |
Templates
模板
| Template | Purpose |
|---|---|
| assets/design-brief.md | Design brief |
| assets/ux-review-checklist.md | UX review |
| assets/ui-generation/full-ui-spec.md | UI spec |
| assets/audits/cro-audit-template.md | CRO audit |
| 模板 | 用途 |
|---|---|
| assets/design-brief.md | 设计简报 |
| assets/ux-review-checklist.md | UX审查 |
| assets/ui-generation/full-ui-spec.md | UI规范 |
| assets/audits/cro-audit-template.md | CRO审核 |
Pattern Inspiration
设计灵感来源
- Mobbin — 300k+ screenshots
- Page Flows — User flow recordings
- Refero Design — Web design references
- Mobbin — 30万+界面截图
- Page Flows — 用户流程录制
- Refero Design — 网页设计参考
Related Skills
相关技能
| Skill | Purpose |
|---|---|
| software-ux-research | Research (use first) |
| software-frontend | Implementation |
| software-mobile | Mobile patterns |
| product-management | Product strategy |
| 技能 | 用途 |
|---|---|
| software-ux-research | 用户调研（优先使用） |
| software-frontend | 前端实现 |
| software-mobile | 移动端交互模式 |
| product-management | 产品策略 |