generic-ux-designer

通用 UX 设计师

能够适应任何项目约束的专业 UX 专长。

结合研究开展视觉设计工作

对于 UI／视觉设计决策，还请使用：

Skill(ui-research)  # Research inspiration first

参考资料：

• UX 原则 - UX 方法论
• UI 灵感来源 - 视觉研究

何时使用此技能

适用于：

• 设计新功能或流程
• 改善现有用户体验
• 开展设计评审／点评
• 评估用户流程和交互
• 做出无障碍设计决策
• 在不同设计方案之间进行选择

不适用于：

• 视觉样式／设计令牌 → 使用 generic-design-system
• 代码架构 → 使用 generic-feature-developer
• 代码质量评审 → 使用 generic-code-reviewer

设计思维流程

1. 共情 - 了解用户需求、痛点和历程
2. 定义 - 明确问题陈述、用户角色和成功指标
3. 构思 - 集思广益，探索不同方案
4. 原型设计 - 先制作低保真原型，验证假设
5. 测试 - 开展可用性测试，根据数据迭代

研究决策指南

何时开展研究，何时发布

情况	行动
新产品／新功能	完整研究（访谈 + 测试）
渐进式更改	快速点评（启发式评估）
Bug 修复	无需研究
A/B 决策	分析 + 小规模测试
有争议的设计	先与利益相关者达成共识

方法选择

• 需要了解用户动机？→ 访谈
• 需要可用性反馈？→ 测试
• 需要快速检查质量？→ 启发式评估
• 需要定量数据？→ 调查／分析
• 还没有用户？→ 竞品分析 + 原型用户角色

根据把握程度确定研究范围

把握程度	行动
高（成熟模式）	跳过研究
中（存在一些不确定性）	快速点评
低（全新领域）	完整研究

参考： 有关详细的方法框架，请参阅 UX_PRINCIPLES.md

用户心理学的应用

认知负荷

• 减少选择（Hick 定律）
• 对信息分块（Miller 定律）
• 渐进式披露
• 尽量减少记忆负担

视觉层次

• 尺寸体现重要性
• 对比度吸引注意力
• 留白将元素分组
• F 型／Z 型阅读模式

交互模式

导航

模式	适用场景
顶部导航	简单网站，少于 7 个项目
侧边导航	复杂应用，有多个分区
底部导航	移动应用，少于 5 个项目
标签页	相关内容分区

表单

• 单列布局
• 行内验证
• 智能默认值
• 进度指示器

反馈

模式	适用场景
Toast	非阻塞信息
模态框	阻塞／重要内容
行内反馈	上下文反馈
骨架屏	加载状态

移动端注意事项

• 触控目标：最小尺寸为 44x44px
• 目标之间间隔 8px
• 便于拇指操作的位置
• 使用底部操作面板

无障碍（UX 视角）

方面	方法
视觉	高对比度、可缩放文本
运动	大尺寸目标、键盘导航
认知	简明语言、清晰结构
听觉	字幕、视觉提示

实践中的启发式评估

快速检查（5 分钟）

启发式原则	快速检查
可见性	当前状态是否一目了然？
反馈	每项操作是否都有响应？
一致性	相似的事物看起来或使用起来是否相似？
防错	用户是否容易出错？
错误恢复	用户能否撤销或修正错误？

需要标记的常见问题

• 系统状态隐藏（加载时没有指示）
• 无声失败（操作后没有任何反馈）
• 模式不一致（相同操作使用不同按钮）
• 破坏性操作未确认（删除后无法撤销）
• 面向用户的文本中使用术语

呈现检查结果

Issue: [What's wrong]
Heuristic: [Which violated]
Impact: [User consequence]
Suggestion: [How to fix]
Priority: P0/P1/P2

设计评审框架

方面	问题
易用性	用户能否完成任务？
清晰度	目的是否一目了然？
一致性	是否遵循既定模式？
层级	最重要的内容是否突出？
反馈	用户是否了解系统状态？
无障碍性	是否适用于所有人？

UX 模式

空状态

1. 说明此处会显示什么
2. 引导用户执行首个操作
3. 显示示例内容

加载状态

1. 骨架屏优于加载动画
2. 耗时操作应显示进度
3. 确保安全时使用乐观 UI

错误状态

1. 说明发生了什么
2. 建议如何修复
3. 不要责怪用户

UX 输出检查清单

在提出 UX 建议前：

• 清楚定义用户问题
• 解决方案针对根本原因（而非表面症状）
• 考虑无障碍性
• 识别边缘情况
• 说明实现复杂度
• 定义成功指标

设计评审检查清单

• 可以完成主要任务
• 视觉层级清晰
• 可通过键盘导航
• 触控目标尺寸合适
• 文案清晰且有帮助

另请参阅

• UX 原则 - 研究方法、启发式原则、心理学
• 设计模式 - 视觉模式和组件
• generic-design-system - 用于令牌、样式和视觉一致性
• generic-feature-developer - 用于实现架构
• 项目 CLAUDE.md - 项目特定约束

阅读 UX_PRINCIPLES.md，了解：

• 完整的研究方法框架 → methods 部分
• 完整的 Nielsen 启发式原则 → evaluation 部分
• 快速评审工作流 → critique 部分