ux-principles

UX 原则技能

何时使用此技能

在以下情况下使用此技能：

• 设计以用户为中心的界面：创建优先考虑用户需求和行为的产品
• 开展用户研究：规划并执行定性和定量研究
• 评估易用性：使用成熟的启发式原则和测试方法评估界面
• 确保无障碍性：设计包容性的体验，让不同能力的用户都能使用
• 优化用户流程：提高任务完成率，减少用户旅程中的阻碍
• 衡量 UX 性能：定义并跟踪有意义的用户体验质量指标
• 应用设计思维：通过以人为本的设计流程解决复杂问题
• 创建信息架构：以符合用户心智模型的方式组织内容
• 开展易用性测试：规划、执行并分析用户测试
• 构建用户画像和旅程地图：记录用户行为、需求和痛点

核心概念

以用户为中心的设计（UCD）

以用户为中心的设计是一种将用户置于设计流程核心的框架，通过研究、设计、测试和改进的迭代循环开展工作。

四项基本原则：

1. 尽早关注用户和任务

   • 在设计前了解用户特征、需求和目标
   • 观察用户在自然环境中的行为
   • 确定用户需要完成的任务
   • 梳理现有工作流和痛点

2. 实证测量

   • 让真实用户执行真实任务，以此测试设计
   • 收集定量和定性数据
   • 使用客观指标（任务完成情况、耗时、错误）
   • 收集主观反馈（满意度、偏好）

3. 迭代设计

   • 通过循环进行设计、测试、测量和重新设计
   • 从低保真原型开始
   • 根据用户反馈进行改进
   • 持续优化，直到达成目标

4. 整合式设计

   • 全面考虑完整的用户体验
   • 平衡用户需求、业务目标和技术限制
   • 让多学科团队参与其中
   • 确保各个接触点的设计保持一致

设计思维

设计思维是一种以人为本的创新方法，融合用户需求、技术可行性和商业可行性。

五阶段流程：

1. 共情：通过研究和观察了解用户
2. 定义：将研究发现归纳为清晰的问题陈述
3. 构思：通过头脑风暴提出多样化方案
4. 原型：构建创意的实体化呈现
5. 测试：收集反馈并改进方案

关键原则：

• 关注人的价值观和需求
• 用原型展示，而非仅靠讲述
• 化复杂为清晰
• 勇于实验和承担风险
• 注重流程，并以行动为导向
• 跨学科开展深度协作

易用性启发式原则

Nielsen 的 10 项易用性启发式原则

Jakob Nielsen 的启发式原则是评估界面易用性的基础原则。

1. 系统状态可见性

原则：系统应始终通过适当的反馈，让用户及时了解当前发生的情况。

指南：

• 对用户操作立即提供反馈
• 对耗时超过 1 秒的操作显示进度指示器
• 清晰显示系统状态（加载中、处理中、已保存）
• 在导航中显示当前位置
• 标明所选项目、激活状态和模式

示例：

• 获取数据时显示加载动画
• 显示“正在保存…”，随后确认“已保存”
• 上传和下载时显示进度条
• 使用面包屑导航显示当前页面
• 高亮显示当前标签页或菜单项

2. 系统与现实世界相匹配

原则：系统应使用用户熟悉的语言、词语、短语和概念，而不是面向系统的术语。

指南：

• 使用用户所在领域的术语
• 遵循现实世界的惯例
• 按自然、合乎逻辑的顺序呈现信息
• 使用符合用户心智模型的比喻
• 避免行话、缩略语和技术语言

示例：

• 电商应用使用购物车图标
• 使用垃圾桶／回收站表示已删除的项目
• 使用文件夹组织文件
• 使用“Inbox”而非“Message Queue”
• 日期格式符合用户所在地区的习惯

3. 用户控制权与自由

原则：用户经常会误选系统功能，因此需要一个标识清晰的“紧急出口”，以便在不经过冗长对话的情况下离开不需要的状态。

指南：

• 提供撤销和重做功能
• 允许用户取消操作
• 支持轻松前进和后退
• 支持退出模态状态
• 让退出选项一目了然

示例：

• 编辑器中的撤销／重做按钮
• 表单上的取消按钮
• 导航中的返回按钮
• 用“X”关闭模态框和浮层
• Ctrl+Z 键盘快捷键

4. 一致性与标准

原则：用户不应需要猜测不同的词语、情境或操作是否意味着同一件事。应遵循平台和行业惯例。

指南：

• 全程使用一致的术语
• 保持视觉一致性（颜色、字体、间距）
• 遵循平台惯例（iOS、Android、Web）
• 使用标准的 UI 模式和组件
• 建立并遵循设计系统

示例：

• 使用蓝色下划线文本表示链接
• 提交按钮置于右侧，取消按钮置于左侧
• 使用放大镜作为搜索图标
• 使用齿轮图标表示设置
• 保持按钮样式和行为一致

5. 错误预防

原则：相比提供出色的错误消息，更好的做法是通过周密的设计，从一开始就防止问题发生。

指南：

• 消除容易引发错误的条件
• 使用限制和验证
• 提供实用的默认值
• 在执行破坏性操作前请求确认
• 设计宽容的交互方式

示例：

• 使用日期选择器而非文本输入
• 禁用无效选项
• 在表单中进行内联验证
• 删除前询问“确定吗？”
• 自动保存功能

6. 识别而非回忆

原则：通过让对象、操作和选项清晰可见，尽量减轻用户的记忆负担。用户不应需要记住对话中某个部分的信息，才能在另一部分使用。

指南：

• 让选项和操作清晰可见
• 显示最近使用的项目
• 展示上下文和实用信息
• 使用视觉辅助和预览
• 提供工具提示和内联帮助

示例：

• 搜索框中的自动补全
• 最近打开的文件列表
• 显示菜单项，而非隐藏命令
• 显示可用颜色的调色板
• 带示例的表单字段占位文本

7. 灵活性与使用效率

原则：新手用户看不到的加速操作可以帮助高级用户更快地交互，让系统同时满足经验不足和经验丰富的用户的需求。

指南：

• 为高级用户提供键盘快捷键
• 允许自定义和个性化设置
• 支持多种完成任务的方式
• 提供简单和高级功能
• 支持批量操作和自动化

示例：

• 键盘快捷键（Ctrl+C、Ctrl+V）
• 快捷操作和手势
• 高级搜索筛选器
• 可自定义工具栏
• 模板和已保存的偏好设置

8. 美观与简约设计

原则：对话中不应包含无关或很少需要的信息。每一条额外信息都会与相关信息争夺注意力，降低后者的可见度。

指南：

• 让内容聚焦且相关
• 移除不必要的元素
• 有效利用留白
• 优先考虑信息层级
• 逐步展示高级功能

示例：

• 简洁、整洁的界面
• 可折叠的详情部分
• 聚焦主要操作
• 尽量减少装饰元素
• 清晰的视觉层级

9. 帮助用户识别、诊断并从错误中恢复

原则：错误消息应使用通俗易懂的语言，准确指出问题，并以建设性的方式提出解决方案。

指南：

• 编写清晰易懂的错误消息
• 说明发生了什么以及原因
• 提出具体的解决方案
• 使用恰当的视觉提示（颜色、图标）
• 避免使用技术代码和术语

示例：

• “必须填写电子邮件地址”而非“错误 422”
• 高亮显示出错的字段
• 提示：“你想输入的是 gmail.com 吗？”
• 具体说明：“密码至少需要 8 个字符”
• 恢复操作：“重试”或“重置密码”

10. 帮助与文档

原则：尽管最好能让用户无需文档也能使用系统，但有时仍有必要提供帮助。此类信息应便于搜索、聚焦于用户的任务，并列出具体步骤。

指南：

• 让用户能够轻松找到帮助
• 提供上下文相关的帮助
• 使用清晰、简洁的语言
• 加入可视化示例
• 支持搜索和浏览

示例：

• 用于上下文帮助的问号图标
• 交互式教程和操作指南
• 可搜索的知识库
• 视频演示
• 按任务分类的常见问题解答

UI 设计中的格式塔原则

格式塔原则描述了人类如何将视觉元素感知为有组织的模式，而非彼此独立的组件。

核心原则：

1. 接近性：彼此靠近的元素会被感知为相关

   • 将相关的表单字段编组
   • 按类别排列导航项
   • 将相关内容块归为一组

2. 相似性：相似的元素会被感知为同一组的一部分

   • 为相关操作使用一致的样式
   • 为功能相似的元素使用相同的颜色
   • 为同类项目使用统一的形状

3. 连续性：沿直线或曲线排列的元素会被感知为相关

   • 对齐表单标签和输入框
   • 通过布局营造视觉流动感
   • 使用线条连接相关项目

4. 闭合性：人们会在脑海中补全不完整的形状

   • 使用细微的边框或背景
   • 用暗示性的边界区分卡片
   • 利用负空间划分区域

5. 图形/背景：元素会被感知为前景或背景

   • 利用对比突出主要内容
   • 模糊背景以突出模态框
   • 通过层叠营造元素的纵深感

用户心理学

认知负荷

认知负荷是指使用界面所需的脑力。降低认知负荷可以提升易用性和用户满意度。

认知负荷的类型：

1. 内在负荷：任务本身固有的复杂性

   • 无法消除，只能管理
   • 将复杂任务拆分为较小的步骤
   • 提供脚手架和支持

2. 外在负荷：由糟糕的设计导致的不必要脑力消耗

   • 可以且应该消除
   • 由令人困惑的布局、不清晰的标签和不一致性导致
   • 通过良好的 UX 实践来减少

3. 关联负荷：学习并内化模式所需的努力

   • 有益的认知负荷
   • 有助于技能发展和熟练掌握
   • 在引导和渐进式学习上投入精力

降低认知负荷的策略：

• 分块：将相关信息分组（电话号码：123-456-7890）
• 识别优于回忆：显示选项，而不是要求用户凭记忆作答
• 渐进式呈现：逐步展现复杂内容
• 默认值：提供合理的预选项
• 视觉层级：引导用户关注重要元素
• 熟悉的模式：使用已知的惯例和隐喻
• 清晰的标签：使用描述明确、含义清楚的文本
• 减少选项：应用希克定律（选项越多，决策时间越长）

心智模型

心智模型是用户对事物运作方式的内在认知。有效的 UX 设计应与用户的心智模型相契合。

了解心智模型：

• 通过以往的经验和学习形成
• 可能与系统的实际实现不一致
• 不同用户群体的心智模型各不相同
• 影响用户的预期和预测
• 驱动用户的行为和决策

围绕心智模型进行设计：

1. 研究用户预期

   • 开展用户访谈
   • 观察用户尝试完成任务
   • 请用户预测结果
   • 梳理用户工作流

2. 匹配或引导

   • 尽可能让设计与现有心智模型相契合
   • 需要创新时，明确地引导用户理解新的模型
   • 使用熟悉的隐喻作为桥梁
   • 提供清晰的概念模型

3. 验证假设

   • 通过测试验证心智模型是否契合
   • 找出不匹配之处和令人困惑的环节
   • 通过迭代提升契合度
   • 记录常见误解

常见的心智模型不匹配：

• 文件系统与基于搜索的组织方式
• 层级导航与网状信息
• 线性流程与灵活的工作流
• 技术准确性与用户理解

示能性与指示符

示能性：物体所具有的、表明可以对其执行哪些操作的属性。

• 在 UI 中，感知到的示能性比实际示能性更重要
• 按钮的外观使其看起来可以点击
• 文本字段通过光标变化表明可以输入
• 滑块通过可见的滑块把手表明可以拖动

指示符：传达应在哪里执行操作的线索。

• 示能性的视觉指示
• 链接上的下划线（表明可点击）
• 指针光标变化（表明可交互）
• 按钮的阴影和边框（表明可按下）
• 拖动把手（表明可以移动）

设计启示：

• 让交互元素看起来可交互
• 在悬停和聚焦时提供视觉反馈
• 在整个界面中使用一致的指示符
• 不要让不可交互的元素看起来可以点击
• 与用户测试，验证他们感知到的示能性

菲茨定律

原则：获取目标所需的时间取决于目标的距离和大小。

公式：T = a + b × log₂(D/W + 1)

• T = 移动到目标所需的时间
• D = 到目标的距离
• W = 目标的宽度
• a、b = 根据经验确定的常数

UI 设计应用：

1. 增大目标：让可点击元素更大

   • 最小触控目标：44×44 像素（Apple），48×48 像素（Android）
   • 为主要操作设置更大的按钮
   • 将悬停区域扩展到可见边界之外

2. 缩短距离：将相关项放在一起

   • 将工具提示放在触发项附近
   • 让表单标签紧邻输入框
   • 在工具栏中对相关操作进行分组

3. 边缘情况：屏幕边缘是易于点击的目标（宽度无限）

   • macOS 顶部边缘的菜单栏
   • Windows 底部角落的开始按钮
   • 屏幕底部的移动端导航

4. 上下文菜单：在光标所在位置出现

   • 无需移动距离
   • 比通过菜单栏导航更快
   • 右键单击或长按操作模式

希克定律

原则：做出决定所需的时间会随着选项数量的增加而呈对数增长。

公式：T = b × log₂(n + 1)

• T = 做出决定所需的时间
• n = 选项数量
• b = 根据经验确定的常数

设计启示：

1. 减少选项：仅显示必要的选项

   • 通过渐进式披露展示高级选项
   • 使用智能默认值，消除决策
   • 移除很少使用的功能

2. 分类：将选项归入逻辑类别

   • 使用结构清晰的分区设计巨型菜单
   • 使用筛选器和属性缩小范围
   • 采用分步导航（广度与深度）

3. 突出重点：强调推荐或热门选项

   • 标注“最受欢迎”
   • 提供“为你推荐”的建议
   • 为常见选项设置默认选择

4. 结合上下文：显示与当前任务相关的选项

   • 根据所选内容显示上下文菜单
   • 根据使用情况自适应界面
   • 基于角色的视图和权限

米勒定律

原则：普通人的工作记忆平均可容纳 7（±2）项内容。

设计应用：

1. 对信息进行分块：将内容分成 5-9 项

   • 导航菜单项
   • 仪表板小组件
   • 滚动前显示的列表项

2. 拆分复杂任务：将任务分成多个步骤

   • 带进度指示器的多步骤表单
   • 用于复杂配置的向导
   • 阶段清晰的引导流程

3. 使用视觉辅助：降低记忆负担

   • 在文本标签旁配上图标
   • 使用颜色区分类别
   • 对相关项进行视觉分组

4. 提供参考：让信息随时可查

   • 使用工具提示提供更多上下文
   • 提供行内帮助和示例
   • 显示先前输入内容的摘要

用户研究

研究方法概览

定性方法：探索动机、行为和心智模型

• 用户访谈
• 情境式访谈
• 焦点小组
• 日记研究
• 出声思考法

定量方法：衡量行为并验证假设

• 调查和问卷
• 分析和指标
• A/B 测试
• 卡片分类（结合统计分析）
• 树测试

用户访谈

目的：深入了解用户的需求、目标、行为和痛点。

最佳实践：

1. 准备工作

   • 明确研究问题和目标
   • 制定讨论指南（而非僵化的脚本）
   • 招募有代表性的参与者（每个用户细分群体 5-8 人）
   • 选择合适的访谈环境（通常以用户的实际环境为佳）

2. 访谈过程中

   • 建立融洽关系和信任
   • 提出开放式问题
   • 使用「5 个为什么」技巧深入探究
   • 观察用户的行为和环境
   • 避免提出诱导性问题
   • 多听少说（80/20 法则）

3. 问题类型

   • 背景：「请介绍一下您的职位……」
   • 行为：「请带我了解一下您目前是如何……」
   • 痛点：「……有什么让您感到沮丧的地方？」
   • 目标：「您想要实现什么……」
   • 变通方法：「遇到……时，您会如何处理？」

4. 分析

   • 转录访谈内容或做详细笔记
   • 找出不同参与者之间的规律
   • 提取可用于用户画像和演示文稿的引述
   • 将发现综合归纳为主题
   • 与利益相关者验证

调查和问卷

目的：从更大的样本中收集定量数据，以衡量态度、行为和偏好。

设计原则：

1. 问题设计

   • 使用清晰、明确的语言
   • 避免一题多问
   • 使用均衡的量表（李克特量表：1-5 或 1-7）
   • 提供「不愿回答」选项
   • 随机排列答案顺序以减少偏差

2. 问卷结构

   • 以简单、有吸引力的问题开头
   • 将相关问题分组
   • 将人口统计问题放在最后
   • 尽可能缩短问卷
   • 对较长的问卷显示进度指示器

3. 问题类型

   • 多项选择题（单选）
   • 复选框（多选）
   • 评分量表（满意度、认同度）
   • 开放式问题（用于获取定性见解）
   • 排序题（按优先级排序）

4. 样本量

   • 计算达到统计显著性所需的样本量
   • 考虑回复率（通常为 10-30%）
   • 确保分布具有代表性
   • 对不同细分群体考虑使用分层抽样

用户画像

目的：根据研究创建典型用户画像，为设计决策提供指导，并始终以用户为中心。

组成部分：

1. 人口统计信息

   • 姓名和照片（便于记忆）
   • 年龄、职业、教育程度
   • 所在地和居住情况
   • 家庭状况

2. 心理特征

   • 目标和动机
   • 行为和习惯
   • 痛点和困扰
   • 价值观和态度
   • 技术熟练程度

3. 情境

   • 使用场景和情境
   • 使用的设备和平台
   • 使用产品的时间和地点
   • 使用频率

4. 引述

   • 能体现用户本质的难忘陈述
   • 基于真实的用户研究数据
   • 使用户画像更具人情味

最佳实践：

• 以真实的研究数据为依据，而非凭空假设
• 创建 3-5 个主要用户画像（不宜过多）
• 聚焦于对设计有影响的差异
• 随着对用户了解的加深而更新
• 与团队和利益相关者广泛分享
• 用于设计评审和决策

用户旅程地图

目的：可视化用户在各个触点上的完整体验，揭示痛点和机会。

组成部分：

1. 阶段：用户旅程的各个阶段

   • 认知 → 考虑 → 购买 → 使用 → 忠诚
   • 或针对特定任务：发现 → 比较 → 选择 → 结账

2. 行动：用户在每个阶段的行为

   • 搜索信息
   • 比较选项
   • 进行购买
   • 使用产品

3. 触点：发生互动的渠道

   • 网站、移动应用
   • 电子邮件、社交媒体
   • 客户支持
   • 线下地点

4. 想法和感受：用户的情绪状态

   • 兴奋、困惑、沮丧、满意
   • 期望和顾虑
   • 惊喜或痛苦的时刻

5. 痛点：阻碍和问题

   • 用户遇到困难的地方
   • 用户放弃的环节
   • 投诉和变通方法

6. 机会：可改进的方面

   • 如何减少阻碍
   • 超出预期的时刻
   • 新功能或触点

创建流程：

1. 确定范围（哪个旅程、哪个角色）
2. 收集研究数据（访谈、分析数据、支持工单）
3. 绘制阶段和行动
4. 确定触点
5. 补充情绪和痛点
6. 与利益相关者协作进行验证
7. 确定改进优先级
8. 持续跟踪改进情况

无障碍访问

WCAG 指南

《Web 内容无障碍指南》（WCAG）为如何让残障人士能够访问 Web 内容提供了标准。

四项原则（POUR）：

1. 可感知：信息必须以用户能够感知的方式呈现

2. 可操作：界面组件必须可操作

3. 可理解：信息和操作必须易于理解

4. 健壮：内容必须足够健壮，能够与辅助技术协同工作

符合性等级：

• A 级：最低无障碍要求（基础）
• AA 级：解决主要障碍（建议目标）
• AAA 级：最高无障碍等级（理想）

无障碍访问的关键要求

1. 文本替代（1.1.1，A 级）

要求：为非文本内容提供文本替代。

实现方式：

• 为图像提供替代文本：<img alt="Description of image">
• 装饰性图像使用空替代文本：<img alt="">
• 为音频提供文字稿
• 为视频提供字幕
• 为表单输入项提供标签

2. 键盘访问（2.1.1，A 级）

要求：所有功能均可通过键盘使用。

实现方式：

• 确保 Tab 键顺序合理
• 提供可见的焦点指示器
• 不得出现键盘陷阱
• 提供跳过导航链接
• 为常见操作提供键盘快捷键

3. 颜色对比度（1.4.3，AA 级）

要求：普通文本的最低对比度为 4.5:1，大号文本为 3:1。

实现方式：

• 使用对比度检查工具进行测试
• 确保所有状态（悬停、焦点、禁用）下都有足够的对比度
• 不要仅依靠颜色传达信息
• 提供其他指示方式（图标、文本、图案）

4. 调整文本大小（1.4.4，AA 级）

要求：文本可放大至 200%，且不会丢失内容或功能。

实现方式：

• 使用相对单位（em、rem），而非像素
• 在不同缩放级别下进行测试
• 确保滚动功能正常
• 避免使用会截断内容的固定尺寸容器

5. 标题和标签（2.4.6，AA 级）

要求：标题和标签应描述主题或用途。

实现方式：

• 使用语义化的标题层级（h1 → h2 → h3）
• 为表单提供描述性标签
• 使用清晰的按钮文本
• 使用有意义的链接文本（不要使用“点击此处”）

6. 焦点可见（2.4.7，AA 级）

要求：键盘焦点指示器必须可见。

实现方式：

• 不要移除轮廓，除非提供替代样式
• 确保焦点指示器有足够的对比度
• 使焦点指示器保持一致
• 测试键盘导航流程

7. ARIA 地标（在 1.3.1 中隐含）

要求：使用 ARIA 地标和角色定义页面区域。

实现：

<header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">

包容性设计原则

1. 提供同等体验

• 确保所有用户都能完成任务
• 可针对不同能力采用不同方式
• 示例：为失聪用户提供字幕，为失明用户提供音频描述

2. 考虑情境

• 残障具有情境性（强烈阳光、嘈杂环境）
• 针对暂时性和情境性限制进行设计
• 示例：较大的触控目标既能帮助有运动障碍的用户，也能帮助乘坐移动交通工具的人

3. 保持一致

• 使用熟悉的惯例
• 在产品内保持一致
• 利用平台标准
• 降低认知负担

4. 赋予控制权

• 允许用户自定义体验
• 为不同需求提供选项
• 支持关闭动画
• 尊重系统偏好设置（深色模式、减少动态效果）

5. 提供选择

• 提供多种完成任务的方式
• 支持不同的交互方式
• 键盘、鼠标、触控、语音
• 提供不同的内容格式

6. 优先呈现内容

• 聚焦于核心内容和功能
• 渐进增强
• 移动端优先思维
• 清晰的层级结构

7. 创造价值

• 无障碍功能让所有人受益
• 字幕在嘈杂环境中很有用
• 面向高级用户的键盘快捷键
• 多任务处理时使用语音控制

辅助技术

屏幕阅读器：将数字文本转换为语音或盲文

• JAWS（Windows）
• NVDA（Windows，免费）
• VoiceOver（macOS、iOS）
• TalkBack（Android）

设计注意事项：

• 语义化 HTML 结构
• 正确的标题层级
• 描述性替代文本
• ARIA 标签和描述
• 用于导航的跳过链接
• 表单标签和错误关联

屏幕放大：放大屏幕的部分区域

• ZoomText
• 操作系统内置放大镜

设计注意事项：

• 支持调整文本大小
• 避免使用过小的触控目标
• 确保足够的对比度
• 响应式布局

语音控制：通过语音进行导航和交互

• Dragon NaturallySpeaking
• 语音控制（iOS、macOS）
• 语音访问（Android）

设计注意事项：

• 可见标签与语音命令相匹配
• 较大且易于区分的点击目标
• 清晰的焦点指示器
• 避免仅通过悬停触发交互

开关控制：使用单开关或双开关扫描

• 供有严重运动障碍的人士使用

设计注意事项：

• 完整的键盘访问支持
• 合理的 Tab 顺序
• 清晰的焦点指示器
• 为交互留出充足时间

用户测试

可用性测试

目的：观察真实用户尝试完成任务的过程，以发现可用性问题。

类型：

1. 主持式测试

   • 由主持人引导测试过程
   • 可以深入追问并提出后续问题
   • 采用边说边想协议
   • 耗时较长，但能获得更丰富的洞察

2. 非主持式测试

   • 用户独立完成任务
   • 易于扩展且成本效益高
   • 上下文信息和后续跟进较少
   • 工具：UserTesting、Maze、Lookback

3. 远程与现场

   • 远程：覆盖更广的地域范围，环境更自然
   • 现场：便于观察，更容易建立融洽关系

流程：

1. 规划

   • 明确目标和研究问题
   • 确定任务场景
   • 编写测试脚本和任务
   • 招募参与者（每轮 5-8 人）
   • 准备原型或产品

2. 开展测试

   • 欢迎参与者并说明流程
   • 征得同意及录制许可
   • 提出测试前的问题
   • 一次提供一个任务
   • 鼓励参与者边做边说
   • 观察过程，不加干预
   • 提出后续问题
   • 进行总结并感谢参与者

3. 分析

   • 查看录制内容和笔记
   • 找出参与者之间的规律
   • 按严重程度对问题分类
   • 计算成功率和任务耗时
   • 以证据为依据记录发现
   • 确定问题的修复优先级

4. 报告

   • 执行摘要
   • 方法
   • 附带视频片段的关键发现
   • 严重程度评级
   • 建议
   • 附有原始数据的附录

严重程度评级：

• 严重：导致任务无法完成，影响所有用户
• 较严重：造成明显延迟或挫败感
• 轻微：仅影响外观或少数用户
• 改进机会：并非问题，但存在改进空间

A/B 测试

目的：比较两个版本，根据预先定义的指标确定哪个表现更好。

最佳实践：

1. 形成假设

   • 假设清晰且可测试
   • 示例：“添加客户评价将使转化率提高 10%”
   • 基于研究或数据洞察
   • 结果具体且可衡量

2. 设计测试

   • 一次只更改一个变量
   • 确保随机分配到不同变体
   • 确定所需样本量
   • 预先定义成功指标
   • 设定最小可检测效应
   • 计算测试时长

3. 统计显著性

   • 使用 p 值 < 0.05 作为阈值
   • 考虑多重比较问题
   • 考虑实际意义与统计显著性之间的区别
   • 不要提前结束测试（过早查看结果的问题）

4. 常见指标

   • 转化率
   • 点击率
   • 任务耗时
   • 错误率
   • 每位用户的收入
   • 参与度指标

5. 应避免的陷阱

   • 测试过多变体（谨慎使用多变量测试）
   • 过早结束测试
   • 忽略外部因素（季节性、营销活动）
   • 未区分新用户与回访用户
   • 凭直觉而非研究来设计测试

分析与行为数据

目的：通过量化数据，大规模了解用户的实际行为。

关键指标：

1. 参与度指标

   • 日活跃用户数／月活跃用户数（DAU/MAU）
   • 会话时长
   • 每次会话浏览的页面数
   • 回访频率
   • 功能采用率

2. 性能指标

   • 页面加载时间
   • 可交互时间
   • Core Web Vitals（LCP、FID、CLS）
   • 错误率

3. 转化指标

   • 各漏斗阶段的转化率
   • 流失节点
   • 购物车放弃率
   • 目标完成率

4. 用户流分析

   • 入口页面
   • 导航路径
   • 退出页面
   • 漏斗可视化

工具：

• Google Analytics
• Mixpanel
• Amplitude
• Heap
• Hotjar（热力图、会话录制）

最佳实践：

• 根据业务目标定义事件和目标
• 对用户进行细分，以深入洞察
• 结合定性研究，了解“为什么”
• 设置异常警报
• 定期回顾洞察并采取行动
• 符合隐私法规要求的跟踪（GDPR、CCPA）

信息架构

卡片分类

目的：了解用户在思维中如何组织信息并对信息进行分类。

类型：

1. 开放式卡片分类

   • 用户自行创建类别
   • 探索用户的心智模型
   • 在信息架构开发早期使用
   • 揭示意料之外的分组

2. 封闭式卡片分类

   • 用户将卡片归入预定义类别
   • 验证现有结构
   • 比较不同的组织方式
   • 获取更聚焦的洞察

3. 混合式卡片分类

   • 提供预定义类别，同时允许创建新类别
   • 平衡结构与探索

流程：

1. 准备

   • 创建代表内容项的卡片
   • 通常使用 30-60 张卡片
   • 使用清晰且具有代表性的标签
   • 招募 15-30 名参与者

2. 执行

   • 在线工具：OptimalSort、Miro、UserZoom
   • 现场进行：使用实体卡片
   • 允许参与者单独完成
   • 鼓励参与者边做边说出想法

3. 分析

   • 相似度矩阵（项目被归入同一组的频率）
   • 树状图（层次聚类）
   • 热门类别名称
   • 一致性模式

4. 应用

   • 根据研究结果创建站点地图
   • 为导航项命名
   • 为内容层级设计提供参考
   • 通过树状测试进行验证

树状测试

目的：通过测试用户能否找到内容，验证导航结构。

流程：

1. 设置

   • 创建基于文本的层级结构（不含视觉设计）
   • 定义任务（例如：“你会在哪里找到 X？”）
   • 招募 20-50 名参与者
   • 使用工具：Treejack、UserZoom

2. 指标

   • 成功率（是否找到正确位置）
   • 直接性（是否直接到达，还是需要返回）
   • 完成时间
   • 首次点击（用户从哪里开始）

3. 分析

   • 找出有问题的路径
   • 找出失败率高的任务
   • 找出会让用户困住的目标位置
   • 找出令人困惑的标签

4. 迭代

   • 根据研究结果修改结构
   • 重复测试，直到成功率达到可接受水平
   • 通常以 >70% 的成功率为目标

导航设计

类型：

1. 全局导航：在整个站点中保持一致

   • 主菜单／页眉
   • 页脚导航
   • 实用导航（账户、购物车、搜索）

2. 局部导航：针对特定上下文

   • 侧边栏菜单
   • 页面内导航
   • 相关链接

3. 上下文导航：根据内容动态变化

   • 相关文章
   • 推荐产品
   • 后续步骤

最佳实践：

• 全局导航控制在 7±2 个项目
• 使用清晰、描述性强的标签
• 标明当前位置
• 层级较深时使用面包屑导航
• 复杂站点提供搜索功能
• 移动端：使用汉堡菜单或标签栏模式
• 层级宽而浅时使用大型菜单
• 使用常驻导航，方便访问

UX 指标

任务成功率

定义：成功完成的任务所占百分比。

测量方式：

• 二元评估：用户是否完成任务？（是／否）
• 部分计分：按 0-100% 的完成度评分
• 跟踪每项任务及整体的成功率

基准：

• 78% 视为可接受

• 90% 表现优秀

• <70% 表明存在严重的可用性问题

应用：

• 比较不同设计或版本
• 跟踪一段时间内的改进情况
• 按优先级处理问题（成功率低 = 优先级高）
• 设定改进目标

任务耗时

定义：用户完成一项任务所需的时间。

测量方式：

• 任务开始时启动计时器
• 用户表示完成或放弃时停止计时
• 计算平均值、中位数和范围
• 考虑异常值

注意事项：

• 越快并不总是越好（例如，阅读内容）
• 与基线或基准进行比较
• 查看分布情况，而不只是平均值
• 情境很重要（专家用户与新手用户）

使用场景：

• 识别效率低下的工作流
• 比较不同的设计方案
• 跟踪专家与新手的表现
• 计算改进带来的成本节省

系统可用性量表（SUS）

定义：一份包含 10 个问题的问卷，可快速评估可用性。

问题（5 点李克特量表：非常不同意至非常同意）：

1. 我认为自己会经常使用这个系统。
2. 我觉得这个系统不必要地复杂。
3. 我认为这个系统易于使用。
4. 我认为自己需要技术人员的帮助才能使用这个系统。
5. 我觉得这个系统中的各项功能整合得很好。
6. 我觉得这个系统前后不一致的地方太多。
7. 我认为大多数人会很快学会使用这个系统。
8. 我觉得这个系统用起来很麻烦。
9. 我对使用这个系统很有信心。
10. 在我开始使用这个系统之前，需要先学会很多东西。

计分：

• 奇数题：得分 - 1
• 偶数题：5 - 得分
• 将所有得分相加后乘以 2.5
• 结果：0-100 分

解读：

• 80：优秀

• 68-80：良好
• 51-68：尚可
• <51：较差
• 各产品的 SUS 平均分：68

净推荐值（NPS）

定义：衡量客户忠诚度和满意度。

问题：“您有多大可能向朋友或同事推荐[产品]？”（0-10 分）

计算方式：

• 推荐者：9-10
• 被动者：7-8
• 贬损者：0-6
• NPS = 推荐者百分比 - 贬损者百分比
• 范围：-100 至 +100

基准：

• 50：优秀

• 0：良好

• <0：有待改进

局限性：

• 无法解释原因
• 会受到 UX 以外因素的影响
• 始终添加后续问题：“为什么？”

客户满意度（CSAT）

定义：衡量客户对特定体验或交互的满意度。

问题：“您对[体验]满意吗？”（1-5 分）

计算方式：

• 选择 4 或 5 的受访者所占百分比
• 或计算平均分

测量时机：

• 交互结束后立即测量
• 购买后
• 支持工单解决后
• 引导流程结束时

使用场景：

• 比较不同功能的满意度
• 跟踪一段时间内的改进情况
• 识别痛点
• 对低分情况触发后续跟进

错误率

定义：用户完成任务时出错的频率。

类型：

• 失误：意图正确，但操作错误
• 错误：意图错误，导致操作不当

测量方式：

• 统计每项任务中的错误次数
• 按类型分类
• 记录用户是否恢复正常操作
• 跟踪恢复所需时间

分析：

• 错误率高 = 存在可用性问题
• 多位用户反复出现错误 = 设计问题
• 恢复时间反映错误的可见程度
• 预防 > 检测 > 恢复

参与度指标

会话时长：用户在产品中花费的时间

• 时间更长并不总是更好
• 取决于具体场景（任务效率与内容消费）

功能采用率：使用某项功能的用户百分比

• 持续追踪采用率的变化
• 找出未使用的功能
• 衡量引导流程的有效性

留存率：回访用户的百分比

• 日留存、周留存、月留存
• 群组分析
• 流失率（留存率的反向指标）

粘性：DAU/MAU 比率

• 衡量用户参与的频率
• 越高 = 越容易养成习惯
• 目标因产品类型而异

UX 原则示例

示例 1：渐进式披露 - TurboTax

原则：隐藏复杂内容，直到用户需要时再逐步展示信息。

实现： TurboTax 采用访谈式报税流程，每次只提出一个简单问题，仅在与用户的具体情况相关时才展示复杂内容。

设计决策：

• 每个屏幕只显示一个问题
• 使用浅显语言，而非税务术语
• 通过“这适用于你吗？”进行分支判断
• 默认隐藏高级选项
• 在关键节点显示摘要页面

优势：

• 减轻认知负担
• 避免让用户不知所措
• 简单情况的完成速度更快
• 根据用户需求调整复杂程度
• 降低放弃率

指标：

• 标准申报的完成速度提高 30%
• 求助请求减少 45%
• 与传统表单相比，完成率更高

示例 2：情境式帮助 - Slack

原则：在用户需要的地方和时机提供帮助。

实现： Slack 使用内嵌提示、工具提示和情境式建议，引导用户操作，而无需离开当前工作流。

功能：

• 斜杠命令自动补全并提供示例
• 没有新消息时显示“你已查看所有最新消息”
• 内嵌 Markdown 预览
• 显示频道用途和说明
• 悬停时显示键盘快捷键提示
• 提供搜索语法建议

优势：

• 减少对外部文档的需求
• 在实际使用情境中学习
• 不会打断工作流
• 在使用过程中发现功能
• 减轻支持负担

影响：

• 80% 的用户无需培训即可发现功能
• 引导时间缩短 40%
• 功能采用率提高

示例 3：撤销机制 - Gmail

原则：让用户轻松撤销操作，减少对犯错的担忧。

实现： Gmail 可以撤销发送、归档和大多数其他操作，并通过黄色横幅通知用户。

设计模式：

• 立即执行操作（乐观 UI）
• 显示带有“撤销”链接的黄色横幅
• 提供 5-30 秒的撤销时间窗口
• 超时后优雅地处理
• 减少对确认对话框的需求

心理影响：

• 增强用户信心
• 鼓励探索
• 减轻对犯错的焦虑
• 加快工作流（无需确认对话框）

指标：

• 20% 的已发送邮件会被撤销
• 误删减少 60%
• 用户满意度评分更高

示例 4：智能默认值 - iOS Camera

原则：设置适用于 80% 用户的默认值，减少用户需要做出的决定。

实现： iOS Camera 应用会以智能默认设置就绪的状态打开，方便用户立即拍摄。

智能功能：

• 需要时自动启用 HDR
• 光线较暗时启用夜间模式
• 人像模式建议最佳拍摄距离
• 默认关闭网格线（可在设置中启用）
• 自动防抖
• 智能取景建议

优势：

• 大多数用户无需进行任何配置
• 无需专业知识也能拍出好照片
• 高级用户可以自定义
• 更快捕捉瞬间
• 普通用户的拍摄成功率更高

影响：

• 95% 的用户从不更改设置
• 照片满意度评分更高
• 从打开应用到拍摄所需的时间缩短

示例 5：反馈与确认 - Stripe Dashboard

原则：针对用户操作提供即时、清晰的反馈。

实现： Stripe 会针对所有操作和系统状态提供出色的视觉反馈。

反馈模式：

• 在表单字段中进行内联验证
• 操作完成后显示成功动画
• 异步操作显示加载状态
• 错误消息提供具体解决方案
• 后台操作显示 Toast 通知
• 乐观 UI 更新

设计细节：

• 成功时显示绿色勾号
• 提供具体错误消息（“银行卡被拒绝”，而非“支付失败”）
• 适用时提供重试按钮
• 多步骤流程显示进度指示器
• 始终显示系统状态

业务影响：

• 支持工单减少 35%
• 更快解决问题
• 支付成功率更高
• 开发者体验更好

示例 6：基于约束的设计 - Airbnb 日期选择器

原则：使用约束来防止错误，并引导用户做出有效选择。

实现： Airbnb 的日期选择器会禁用无效日期并提供视觉反馈。

约束：

• 将过去的日期显示为灰色
• 禁用不可预订的日期
• 强制执行最低入住要求
• 显示日期范围的价格
• 通过视觉效果突出周末
• 推荐热门日期范围

优势：

• 消除无效选择
• 减少预订错误
• 更清楚地了解可订状态
• 加快决策
• 减少预订失败

指标：

• 无效日期选择减少 50%
• 预订完成速度加快 25%
• 选择日期时的放弃率降低

示例 7：识别而非回忆 - Spotify

原则：让信息一目了然，而不是要求用户依靠记忆。

实现： Spotify 在各处展示专辑封面、最近播放内容和相关播放列表。

设计决策：

• 使用大型专辑封面，便于识别
• 在主屏幕显示“最近播放”
• 使用可视化播放列表封面
• 在搜索结果中显示艺人图片
• 队列显示接下来要播放的歌曲
• 歌词与播放同步

优势：

• 更快找到喜爱的内容
• 发现遗忘的音乐
• 减少搜索阻力
• 带来更好的浏览体验
• 提高用户参与度

影响：

• 70% 的播放来自视觉浏览，而非搜索
• 会话时长更长
• 播放列表参与度更高

示例 8：一致性 - Apple Human Interface Guidelines

原则：在平台内保持一致，提升可预测性。

实现： Apple 在 iOS 应用中严格保持 UI 一致性。

一致的元素：

• 返回按钮始终位于左上角
• 分享图标始终相同
• 标签栏位于底部
• 导航栏位于顶部
• 统一标准化滑动手势
• 系统颜色和字体排版

优势：

• 使用新应用时无需学习
• 交互可预测
• 在不同应用间形成肌肉记忆
• 外观专业
• 增强用户信心

对开发者的影响：

• 设计系统提供组件
• 遵循标准，加快开发速度
• 符合规范的应用能获得更好的应用商店评分

示例 9：错误预防 - Grammarly

原则：通过实时辅助，在错误发生前加以预防。

实现： Grammarly 提供实时写作建议，帮助预防错误。

功能：

• 内联拼写检查
• 语法建议
• 语气检测
• 改进表达清晰度
• 抄袭检测
• 上下文感知纠正

预防策略：

• 立即标出潜在问题
• 解释标记问题的原因
• 提供具体修改建议
• 从用户选择中学习
• 适应写作风格

影响：

• 95% 的错误会在发布前被发现
• 增强写作信心
• 加快写作进程
• 改善沟通效果

示例 10：审美与简约——Dropbox

原则：聚焦核心内容，移除不必要的元素。

实现方式： Dropbox 从杂乱逐步演变为简约设计，将重点放在文件上。

简约设计：

• 简洁的文件列表视图
• 充足的留白
• 精简的配色方案
• 仅在必要时显示图标
• 隐藏高级功能
• 渐进式披露

演变过程：

• 从主视图中移除了宣传横幅
• 将导航项从 7 个精简至 4 个
• 文件预览更加简洁
• 减少视觉干扰

成果：

• 任务完成率提升 30%
• 查找文件的速度提高 43%
• 用户满意度更高
• 感知性能更好

示例 11：无障碍优先——BBC

原则：默认采用无障碍设计，让所有用户受益。

实现方式： BBC 从一开始就在每款产品中融入无障碍功能。

功能：

• 全面支持键盘导航
• 所有视频均配有字幕
• 音频内容提供文字稿
• 色彩对比度充足
• 字体清晰易读
• 针对屏幕阅读器进行优化
• 适配所有设备

普遍益处：

• 在嘈杂环境中，字幕也很有用
• 清晰易读的字体让所有人都更容易阅读
• 键盘快捷键提高高级用户的效率
• 可在任何设备上使用
• 语义化 HTML 有助于提升 SEO

影响：

• 覆盖更广泛的受众
• 符合法律要求
• 全面提升用户体验
• 引领行业

示例 12：可供性——Google Material Design

原则：通过视觉提示，让交互元素看起来具有交互性。

实现方式： Material Design 使用高度、阴影和动效来表示交互性。

设计语言：

• 按钮具有高度（投射阴影）
• 浮动操作按钮明显凸起
• 卡片在悬停时升起
• 触摸时出现波纹效果
• 状态区分明确（悬停、激活、禁用）
• 交互元素风格一致

视觉层级：

• 主要操作最突出
• 次要操作弱化显示
• 禁用状态有明显区别
• 焦点状态高度醒目

益处：

• 哪些元素可点击一目了然
• 减少用户困惑
• 交互更快捷
• 用户预期一致

示例 13：用户控制权——YouTube 播放

原则：让用户掌控自己的体验。

实现方式： YouTube 提供丰富的播放控制和自定义选项。

控制选项：

• 播放速度（0.25x 至 2x）
• 画质选择
• 字幕自定义
• 自动播放开关
• 小窗模式
• 剧院模式／全屏模式
• 键盘快捷键
• 画中画

益处：

• 满足不同需求
• 提供无障碍功能
• 提升高级用户效率
• 满足个人偏好
• 支持多任务处理

使用情况：

• 35% 的用户会调整播放速度
• 60% 的用户会经常使用键盘快捷键
• 对控制功能的满意度更高

示例 14：心智模型——Figma 图层

原则：贴合用户从熟悉工具中形成的心智模型。

实现方式： Figma 的图层面板与 Photoshop／Sketch 相似，降低了设计师的学习门槛。

熟悉的模式：

• 左侧显示图层层级
• 右侧显示属性面板
• 沿用 Adobe 的键盘快捷键
• 组／画框概念
• 命名惯例
• 可见性开关

在熟悉中创新：

• 自动布局（新概念）
• 组件（从符号功能发展而来）
• 多人协作（创新功能）

成果：

• 70% 的设计师在首次使用时即可高效工作
• 所需培训极少
• 来自其他工具的用户采纳率高
• 用户对迁移的反馈积极

示例 15：游戏化——Duolingo

原则：运用游戏机制激励并吸引用户。

实现方式： Duolingo 将语言学习变成一款引人入胜的游戏。

游戏元素：

• 连胜记录（每日激励）
• 完成课程可获得 XP 积分
• 与好友参与排行榜
• 成就徽章
• 生命值系统（错误次数有限）
• 等级进阶
• 吉祥物角色（Duo）

心理驱动因素：

• 损失厌恶（不想中断连胜）
• 社会比较（排行榜）
• 解锁成就
• 进度可视化
• 即时反馈
• 奖励机制

影响：

• 每日活跃用户率达 40%
• 平均连胜 34 天
• 课程完成率更高
• 用户留存率优于传统应用
• 用户超过 5 亿

最佳实践总结

研究阶段

• 从用户研究入手，而不是依赖假设
• 采用混合方法（定性 + 定量）
• 招募具有代表性的参与者
• 记录研究结果并广泛分享
• 通过直接接触用户建立共情

设计阶段

• 遵循成熟的启发式原则和设计原则
• 从一开始就兼顾无障碍设计
• 打造一致、可预测的体验
• 尽可能减少认知负担
• 为所有操作提供清晰的反馈
• 尽可能防止错误
• 让用户能够轻松从错误中恢复
• 与用户的心理模型相匹配

测试阶段

• 尽早并频繁地与真实用户进行测试
• 根据所提出的问题选择合适的方法
• 结合观察数据和分析数据
• 根据研究结果迭代
• 随时间跟踪指标
• 与利益相关者分享结果

实施阶段

• 使用语义化 HTML，提升无障碍性
• 遵循平台惯例
• 构建设计系统，确保一致性
• 优化性能（感知性能和实际性能）
• 监控分析数据和用户反馈
• 根据数据持续改进

持续改进

• 建立基准指标
• 设定改进目标
• 定期开展可用性测试
• 监控支持工单和反馈
• 持续了解最新研究和最佳实践
• 在组织内分享经验

资源和工具

研究工具

• 用户访谈：UserTesting、Lookback、User Interviews
• 调查问卷：Typeform、SurveyMonkey、Google Forms
• 卡片分类：OptimalSort、Miro、UserZoom
• 树测试：Treejack、UserZoom

分析和测试

• 分析工具：Google Analytics、Mixpanel、Amplitude、Heap
• A/B 测试：Optimizely、VWO、Google Optimize
• 热力图：Hotjar、Crazy Egg、FullStory
• 会话录制：FullStory、Hotjar、LogRocket

设计和原型制作

• 设计：Figma、Sketch、Adobe XD
• 原型制作：Figma、Framer、ProtoPie
• 协作：Miro、Mural、FigJam
• 设计系统：Storybook、ZeroHeight

无障碍设计

• WAVE（Web 无障碍评估工具）
• axe DevTools
• 色彩对比度分析工具
• 屏幕阅读器：NVDA、VoiceOver、JAWS

学习资源

• Nielsen Norman Group（nngroup.com）
• Baymard Institute（研究和 UX 基准）
• A List Apart（关于网页设计和 UX 的文章）
• UX Collective（Medium 出版物）
• UX 法则（lawsofux.com）
• 包容性设计原则（inclusivedesignprinciples.org）