ux-design

UX 设计

系统化地设计用户体验——从策略到经过验证的交互。

范围

适用于以下场景：规划用户研究、创建用户画像、定义信息架构、记录用户流程、设计交互模式，或审查现有产品的 UX 质量。

原则

1. 设计由用户决定，而非设计师

每项设计决策都基于真实的用户数据。未经验证的假设只是猜测。

2. 设计体验，而非表象

UX 涵盖完整的交互过程——从初次感知到长期使用。

3. 简单胜过面面俱到

一个人人都能理解的功能，胜过十个无人能找到的功能。

4. 情绪是可衡量的成功因素

积极的体验能够建立信任并促使用户回访。UX 直接关系到业务成败。

5. 迭代胜过追求完美

快速原型设计、尽早测试和持续改进，胜过长时间的规划阶段。

规则

用户体验的 5 个层面（Garrett 模型）

• 要做：从底向上推进：策略 > 范围 > 结构 > 框架 > 表层。
• 要做：在层面 1（策略）明确：用户是谁？他们的目标是什么？业务目标是什么？
• 要做：在层面 2（范围）根据用户需求而非利益相关者的愿望确定功能优先级。
• 不要做：尚未定义底层层面，就直接跳到视觉设计（层面 5）。

用户研究

• 要做：在设计之前，至少开展 5 次用户访谈或可用性测试。
• 要做：创建数据驱动的用户画像，包括姓名、人口统计特征、目标、痛点和使用情境。
• 要做：使用同理心地图快速记录用户的想法、感受、言语和行为。
• 不要做：根据团队的假设创建用户画像。每个用户画像至少应有 3 个真实数据点作为依据。
• 不要做：只与同事测试。务必与实际目标受众进行测试。

信息架构（IA）

• 要做：根据用户的心智模型而非组织结构来组织内容。
• 要做：通过卡片分类验证内容结构。
• 要做：保持导航层级简浅：最多点击 3 次即可到达目标内容。
• 要做：使用用户熟悉的语言标注导航项，而非行业术语。
• 不要做：使用包含超过 7 个主要类别的大型菜单（米勒定律：7 ± 2）。

交互设计

• 要做：对每项操作立即提供反馈（无反馈时间最长不超过 400ms）。
• 要做：提供有帮助的错误处理：说明出了什么问题以及如何修复。
• 要做：为破坏性操作提供撤销功能（撤销时间至少为 5 秒）。
• 要做：减少每个页面需要用户做出的决策数量（希克定律）。
• 不要做：只在提交表单后显示错误消息。行内验证才是标准做法。
• 不要做：为简单操作显示确认对话框，只对不可逆操作使用。

UX 定律

• 要做：菲茨定律——触控目标至少为 44x44px，并靠近用户预期的位置。
• 要做：雅各布定律——遵循成熟的惯例（用户熟悉其他网站）。
• 要做：多尔蒂阈值——系统响应时间低于 400ms 时，用户会觉得即时。
• 要做：波斯特尔定律——宽容地接受输入，严格地规范输出。

用户流程

• 要做：定义主要流程（顺利路径）以及至少 2 条替代路径。
• 要做：用带有决策点的流程图记录流程。
• 要做：在创建线框图之前，先与真实用户验证流程。
• 不要做：创建会导致死胡同的流程（即没有后续操作或返回方式的页面）。

模式

详细的模式说明：参见 references/patterns.md

渐进式披露

第一层只显示必要信息。详情放在“了解更多”中。使用多步表单，而非一张长表单。

引导流程

最多 3-5 步。显示进度指示器。提供跳过选项。完成后直接进入核心价值。

以搜索为核心的设计

醒目的搜索栏。提供即时结果的自动补全。筛选选项。无结果页面提供替代方案。

反馈循环

视觉反馈（悬停、激活）、系统反馈（加载指示器）、结果反馈（成功消息）。

空状态

绝不留下空白区域。始终提供：说明 + 行动号召 + 合适的视觉元素。

反模式

功能蔓延

未经验证便不断增加功能。解决方案：每项功能都需要经过验证的用户需求。使用率低于 20% = 移除或隐藏。

基于假设的设计

“我觉得用户想要……”解决方案：每项关键决策至少需要 3 个数据点。

只设计理想路径

只针对理想情况进行设计。解决方案：为每个流程定义并设计至少 3 种错误场景。

认知过载

每个页面选项过多。解决方案：米勒定律（7 ± 2）。一个页面 = 一个主要目标。

忽视情境

在所有设备上采用相同的 UX。解决方案：根据情境进行设计（移动端：随时随地、单手操作；桌面端：用户注意力更充足）。

检查清单

• 是否已定义策略层：记录用户目标和业务目标？
• 是否已创建至少 3 个基于数据的用户画像？
• 是否已记录用户流程（理想路径 + 边缘情况）？
• 是否已验证信息架构（卡片分类或树测试）？
• 导航标签是否使用用户语言（无内部行话）？
• 导航深度是否最多为 3 层？
• 是否为每项操作提供即时反馈（400ms 内）？
• 错误处理是否有帮助（说明是什么 + 如何解决）？
• 破坏性操作是否支持撤销？
• 表单是否提供内联验证？
• 空状态是否包含说明和行动号召？
• 触控目标是否至少为 44x44px？
• 主要导航项是否最多为 7 个？
• 是否不存在未经验证用户需求的功能？

交叉引用

• ui-design -- UX 概念的视觉实现
• accessibility -- 作为 UX 基石的包容性设计
• usability -- 测试方法和启发式原则
• navigation-design -- 在导航结构中实现 IA
• customer-journey -- 用户旅程整体情境中的 UX
• design-process -- 项目工作流中的 UX 方法
• landing-pages -- 针对转化优化的 UX 模式