UX Designer

UX 设计师

设计直观、易访问且以研究为依据的用户体验。

核心原则

为用户而设计，而不是为自己。 设计决策应基于用户研究和可用性测试，而非个人偏好。

UX 设计的 5 个阶段

阶段 1：信息架构

目标：以合乎逻辑的方式组织内容和功能

活动：

• 卡片分类：让用户将内容归类
• 站点地图：创建页面和功能的层级结构
• 导航设计：主导航、次级导航和辅助导航
• 标签：使用清晰、易懂的术语

验证：

• 使用 5 位以上用户测试信息架构（树状测试）
• 导航路径清晰且合乎逻辑
• 标签符合用户的思维模型

---

阶段 2：用户流程

目标：绘制用户完成任务时的路径

要设计的关键流程：

• 引导流程：新用户的首次使用体验
• 核心任务：主要使用场景（占使用量的 80%）
• 错误状态：从错误中恢复
• 边缘情况：较少见但重要的场景

流程图元素：

[Entry Point] → [Decision] → [Action] → [Outcome]
                    ↓
               [Alternative Path]

验证：

• 记录顺利完成任务的路径
• 设计错误状态
• 确定退出点
• 流程符合用户研究结果

---

阶段 3：线框图

目标：创建关注结构的低保真布局

保真度级别：

• 低保真：草图、方框、占位文本（最快）
• 中保真：灰度设计、真实内容、基本交互
• 高保真：带样式和品牌元素的设计、详细交互

要绘制线框图的关键屏幕：

• 主页／仪表板
• 核心任务屏幕（CRUD 操作）
• 导航（页眉、侧边栏、页脚）
• 表单和输入验证
• 空状态、加载状态、错误状态

线框图检查清单：

• 视觉层级清晰
• 布局模式一致
• 对比度和尺寸符合无障碍要求
• 触控目标 ≥44x44px（移动设备）
• 表单分组合理

---

阶段 4：原型制作与测试

目标：创建交互式原型，用于可用性测试

原型制作工具：

• Figma（推荐）：支持协作，基于浏览器
• Adobe XD：适合设计系统
• Framer：基于代码的原型制作
• InVision：简单的点击式原型

可用性测试：

Script:
1. Welcome (5 min): Explain process, get consent
2. Context (5 min): Ask about current solutions
3. Tasks (20 min): "Try to [complete task]"
4. Think-aloud: "What are you thinking?"
5. Debrief (5 min): Overall impressions

Metrics:
- Task completion rate (target: >70%)
- Time on task
- Error rate
- Satisfaction (1-5 scale)

验证：

• 原型涵盖主要用户流程
• 测试用户不少于 5 位
• 任务完成率 >70%
• 记录并修复关键问题

---

阶段 5：UI 设计与交付

目标：创建可用于生产环境的高保真设计

设计系统元素：

• 颜色：主色、次色、中性色、语义色（错误、成功）
• 字体排版：字号层级（h1-h6、正文、小号文本）、字重
• 间距：4pt 或 8pt 网格系统
• 组件：按钮、输入框、卡片、模态框等
• 图标：一致的图标集（Heroicons、Lucide、Font Awesome）

无障碍（WCAG 2.1 AA）：

• 色彩对比度：文本为 4.5:1，大号文本／UI 为 3:1
• 键盘导航：Tab 顺序合乎逻辑
• 屏幕阅读器：语义化 HTML、ARIA 标签
• 焦点状态：可见的焦点指示器
• 替代文本：提供具有描述性的图像替代文本

交付开发人员：

• 设计规格：间距、颜色、字体（检查模式）
• 组件状态：默认、悬停、激活、禁用、错误
• 响应式断点：移动设备、平板电脑、桌面设备
• 交互：动画、过渡、微交互
• 资源：图标、图像、徽标（已导出）

验证：

• 设计符合品牌指南
• 已检查无障碍要求（对比度、键盘导航）
• 为所有断点设计响应式布局
• 已记录组件库
• 已与开发人员审查交付内容

---

UX 核心原则

1. 一致性

使用熟悉的模式，不要重新设计标准 UI 元素。

2. 反馈

确认用户操作（成功消息、加载状态）。

3. 错误预防

通过设计预防错误，而不只是处理错误。

4. 优先识别，而非回忆

显示选项，而不是要求用户记忆。

5. 灵活性

同时支持新手和专家用户（快捷方式、默认值）。

---

设计模式

表单设计：

• 标签放在字段上方（不要用占位符代替）
• 内联验证（实时反馈）
• 清晰的错误消息（“邮箱地址必须包含 @”）
• 单列布局（填写更快）
• 将相关字段分组

导航：

• 高亮显示当前页面
• 层级较深时使用面包屑导航
• 大型网站提供搜索功能
• 顶部导航最多包含 7 项（米勒定律）

空状态：

• 说明内容为何为空
• 提供明确的下一步操作
• 使用插图或图标
• 示例：“目前还没有任务。创建你的第一个任务即可开始。”

加载状态：

• 使用骨架屏（优于加载动画）
• 对耗时较长的操作显示进度指示器
• 使用乐观 UI（确认之前先显示结果）

---

无障碍检查清单

• 文本颜色对比度 ≥4.5:1
• 支持键盘导航（Tab、Enter、Esc）
• 焦点指示器清晰可见
• 为图片添加替代文本
• 表单标签与输入框关联
• 使用语义化 HTML（标题、nav、main 等）
• 为图标按钮添加 ARIA 标签
• 使用屏幕阅读器进行测试
• 放大到 200% 时仍可正常使用（响应式）
• 不包含闪烁内容（有诱发癫痫发作的风险）

---

工具与资源

设计工具：

• Figma：协作式设计
• Tailwind CSS：实用优先的 CSS 框架
• shadcn/ui：组件库
• Heroicons/Lucide：图标集

原型设计：

• Figma：内置原型设计功能
• Framer：高级交互
• ProtoPie：复杂的微交互

测试：

• Maze：远程可用性测试
• UserTesting：有主持和无主持测试
• Hotjar：会话录制和热力图

无障碍：

• WAVE：无障碍检查工具
• axe DevTools：浏览器扩展
• Lighthouse：自动化审计

---

相关资源

相关技能：

• user-researcher - 以研究结果为设计依据
• frontend-builder - 实现设计
• product-strategist - 验证设计方向

相关模式：

• STANDARDS/design-systems/component-library.md - 组件规范（创建后提供）
• STANDARDS/best-practices/accessibility.md - 无障碍指南（创建后提供）

相关操作手册：

• PLAYBOOKS/conduct-usability-test.md - 测试流程（创建后提供）
• PLAYBOOKS/design-handoff.md - 开发者交接流程（创建后提供）