关于 ux-heuristics
为设计师和产品团队提供可用于评估与改进界面的可用性原则,结合 Krug 与 Nielsen 的方法、严重度评级和诊断评分。
主要功能
- 01Krug 的四项可用性原则
- 02Nielsen 的十项启发式
- 03问题严重度评级
- 04界面诊断与评分
- 05无障碍与导航参考清单
适用场景
- 01审查页面标签和操作文案
- 02识别导航与状态反馈问题
- 03按严重程度整理界面缺陷
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ wondelai/ skills --skill ux-heuristics安装后在 Claude Code 中输入/ux-heuristics确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/audit-template.mdcultural-ux.mddark-patterns.mdheuristic-conflicts.mdkrug-principles.mdnielsen-heuristics.mdwcag-checklist.md详细介绍
UX 启发式框架
用于评估和改进用户界面的实用易用性原则。用户不会逐字阅读,而是快速浏览;他们不会做出最优选择,而是满足于可接受的选择;他们不会探究事物的运作方式,而是摸索着完成任务。
核心原则
“别让我思考”——每个页面都应该一目了然。如果某件事需要思考,那就是易用性问题。用户的耐心和认知带宽有限,因此设计时应考虑上文所述的快速浏览、满足于可接受的选择和摸索着完成任务等行为。
评分
目标:10/10。 检查界面,根据下方的严重程度量表评估每个问题,然后根据快速诊断结果为界面评分:从 10 分开始,每出现一项未通过的诊断行就扣分,并根据其触发的最高严重程度加权(灾难性/重大问题约扣 2 分,轻微/表面问题约扣 1 分)。分数区间:9-10 = 没有严重程度为 3 级或更高的问题,且未通过的诊断行不超过 1 项;6-8 = 存在一些重大问题或多项未通过的诊断行;3-5 = 存在灾难性问题或多项未通过的诊断行;≤2 = 核心任务受阻。务必说明当前得分、严重程度最高的问题,以及达到 10/10 所需的具体修复措施。
Krug 的易用性原则
第 1 至第 3 条是 Krug 的三大易用性法则;第 4 条“行李箱测试”是他用于检查导航定位的测试。
1. 别让我思考
核心概念: 用户脑海中每冒出一个疑问,都会增加认知负担,并分散他们对任务的注意力。
为何有效: 用户有明确目标——他们不想费力猜测标签的含义,也不想解读巧妙的营销话术。所需思考越少,他们完成任务的可能性就越高。
关键要点:
- 清晰的名称总是胜过巧妙的名称
- 营销腔会造成阻碍;直白的语言则能消除阻碍
- 陌生的类别会迫使用户停下来琢磨
- 含糊不清的链接和按钮会让用户犹豫
产品应用:
| 上下文 | 应用方式 | 示例 |
|---|---|---|
| 导航标签 | 使用一目了然的名称 | “获取路线”,而不是“计算前往目的地的路线” |
| CTA | 使用用户理解的动作动词 | “登录”,而不是“访问您的账户门户” |
| 错误状态 | 告诉用户接下来该做什么 | “检查您的电子邮件格式”,而不是“验证错误” |
文案模式:
- 使用以动作为导向的按钮:动词 + 名词(“创建账户”“下载报告”)
- 避免术语:“保存”,而不是“持久化”;“移除”,而不是“解除关联”
- 如果标签需要解释,就简化标签
伦理边界: 清晰应服务于用户——绝不要用直白的语言掩盖不利条款。
另请参阅:references/krug-principles.md,了解完整的 Krug 方法——快速浏览/满足于可接受的选择/摸索着完成任务的心理机制、善意储备、主页和标语指南,以及 0 美元易用性测试流程(用户人数、测试脚本)。
2. 点击次数无关紧要
核心概念: 有一种说法认为“用户点 3 次就会离开”。但实际上,只要每次点击都轻松、明确,并能增强信心,用户就不会介意点击。
为什么有效: 每次点击所需的认知努力比点击次数更重要。用户放弃,是因为失去信心,而不是因为没耐心继续点击。
关键见解:
- 每次点击都应轻松、明确,并能增强信心
- 3 次不假思索的点击,胜过 1 次需要仔细斟酌的点击
- 标签清晰的浅层导航,胜过标签模糊的深层导航
产品应用:
| 场景 | 应用 | 示例 |
|---|---|---|
| 结账流程 | 让每个步骤都一目了然 | 使用带有描述性标签的清晰步骤指示器 |
| 设置 | 使用清晰的分类,而非扁平列表 | “账户 > 安全 > 修改密码”(3 次让人安心的点击) |
| 引导流程 | 将流程拆分为简短、明确的步骤 | 每一步都只有一个明确操作的向导 |
文案模式:
- 进度指示器:“第 2 步,共 4 步:配送详情”
- 每一步都提供确认信息:“太好了,你的邮箱已验证。现在来设置个人资料吧。”
- 使用清晰的链接文字:“查看所有跑鞋”,而不是“点击此处”
道德边界: 绝不能通过增加步骤来隐藏取消流程——每次点击都应帮助用户达成目标,而不是让他们偏离目标。
3. 删掉一半的文字
核心概念: 删掉每个页面上一半的文字,再删掉剩余文字的一半。简洁能突出有用的内容,也体现对用户时间的尊重。
关键见解:
- 客套话(“欢迎访问我们的网站!”)浪费空间
- 没人会读的说明应该删掉
- “请”“劳驾”等客套赘词只会增加噪声
- 页面越短,滚动越少,浏览越快
产品应用:
| 场景 | 应用 | 示例 |
|---|---|---|
| 落地页 | 删掉欢迎文案,突出核心价值 | 删除“欢迎……”段落 |
| 错误消息 | 只说明问题和解决办法 | “密码太短(至少 8 个字符)” |
| 空状态 | 以行动为导向,保持简洁 | “没有结果。试试其他搜索词。” |
文案模式:
- 修改前:“请注意,你需要输入密码才能继续下一步。” → 修改后:“输入密码以继续。”
- 修改前:“我们已收到你的消息,会尽快回复。” → 修改后:“消息已发送。我们会在 24 小时内回复。”
道德边界: 简洁不应省略关键信息——关于价格、条款和数据使用的简明披露,是用户的权利。
4. 后备箱测试
核心概念: 把用户放到任意一个随机页面上(就像从汽车后备箱里放出来,身处一个随机地点一样),他们应该能立即回答 6 个定位问题:这是哪个网站?这是哪个页面?主要版块有哪些?我在这里有哪些选择?我在层级结构中的哪个位置?搜索在哪里?
为什么有效: 良好的导航能持续帮助用户定位。用户如果无法判断自己身在何处,就会感到迷失并离开。
将它用作导航检查:页面标题必须与用户点击的链接相符;必须有“当前位置”指示(高亮的导航项、加粗的面包屑);版块标题必须能帮助用户定位(例如“你的账户 > 账单”,而不只是“设置”)。
道德边界: 导航标签必须如实反映网站结构——绝不能使用误导性标签将用户引向营销页面。
参见:references/krug-principles.md,在进行后备箱测试或设计导航时使用——该文档将 6 个问题分别对应到能回答它们的页面元素,并介绍面包屑和固定导航规则。
Nielsen 的 10 项可用性启发式原则
1. 系统状态的可见性
通过及时反馈让用户随时了解情况。每项操作都需要得到确认——上传时显示进度条、提交后显示确认信息、加载时显示骨架屏。无声失败会摧毁信任。文案模式:“正在保存……” → “已保存”。
2. 系统与现实世界相匹配
使用用户的语言:“登录”而不是“身份验证”,“搜索”而不是“查询”。遵循现实世界的隐喻(垃圾桶、购物车)和自然顺序(街道 → 城市 → 州 → 邮政编码)。
3. 用户控制权与自由
提供明确的“紧急出口”。撤销胜过“确定吗?”对话框——用户会不看内容就点击确认。每个流程都需要取消或退出选项,返回按钮绝不能失效。
4. 一致性与标准
相同的词语、样式和行为在任何地方都应表示相同的意思。既要保持内部一致性(应用内),也要遵循外部一致性(平台惯例:徽标在左上角,搜索在右上角)。一个概念只用一个术语——始终使用“项目”,绝不与“工作区”混用。
5. 错误预防
在问题发生之前加以预防:限制输入(使用日期选择器而不是文本框)、自动补全、合理的默认值、“未保存的更改”警告。失误(意外的错误操作)和错误(意图错误)需要采用不同的预防方式。
6. 识别而非回忆
尽量减少记忆负担——展示选项,而不是要求用户记住。面包屑导航、最近搜索、预填字段、显示解码后值的下拉菜单。工作记忆大约能容纳 7 项;识别远比回忆容易。
7. 灵活高效地使用
同时满足新手和专家的需求:键盘快捷键、批量操作、保存的搜索、命令面板(Cmd+K)。渐进式呈现让新手轻松上手,同时让专家使用全部功能。
8. 美观简洁的设计
每个元素都必须证明其存在的价值——当所有内容都在争夺注意力时,就没有什么能脱颖而出。展示当前重要的内容,隐藏无关内容。每个页面只设一个主要 CTA。
9. 帮助用户识别、诊断并从错误中恢复
错误消息需要包含三部分:发生了什么、原因是什么,以及如何修复。使用通俗语言(“连接失败”而不是“ECONNREFUSED”),描述具体(“密码必须至少包含 8 个字符”而不是“无效”),绝不责怪用户,并保留用户已输入的内容。
10. 帮助与文档
帮助内容应可搜索、以任务为导向(“如何……”而不是技术参考),并结合上下文提供(工具提示、行内提示、引导式导览)。
参见:references/nielsen-heuristics.md,用于针对特定启发式原则进行评估——该文档将 10 项原则分别扩展为良好实现、常见违规情况和严重程度表,并附有文案模式和伦理边界。
严重程度评级标准
为审查中发现的每个问题评级:
| 严重程度 | 评级 | 说明 | 优先级 |
|---|---|---|---|
| 0 | 不构成问题 | 意见不一,并非易用性问题 | 忽略 |
| 1 | 表面问题 | 轻微烦扰,影响较小 | 有时间再修复 |
| 2 | 轻微 | 导致延迟或挫败感 | 安排修复 |
| 3 | 严重 | 任务明显失败 | 尽快修复 |
| 4 | 灾难性 | 导致任务无法完成 | 立即修复 |
权衡三个因素:频率(发生频率)、影响(发生时的严重程度)、持续性(一次性还是持续发生)。
参见:references/audit-template.md,用于开展完整的启发式评估——这是一份结构化的逐屏模板,可按统一格式记录问题、严重程度和建议的修复方案。
常见错误
| 错误 | 为什么行不通 | 修正方法 |
|---|---|---|
| 让人摸不着头脑的导航 | 没有标签的图标让用户只能猜 | 在图标旁添加文字标签 |
| 选项过多 | 决策瘫痪会拖慢用户 | 将选项减少到 7 个左右,允许上下浮动 2 个 |
| 没有“当前位置”指示 | 用户会在层级结构中迷失 | 在导航和面包屑中突出显示当前部分 |
| 没有内联验证 | 提交、报错、滚动的循环令人沮丧 | 在失去焦点时验证,并显示具体消息 |
| 必填字段不明确 | 用户不清楚哪些字段是必填的 | 标记选填字段,而非必填字段 |
| 大段文字 | 没人会读密集的段落 | 用标题、项目符号和留白拆分内容 |
| 标签使用行话 | 用户不懂你们内部的说法 | 对所有标签进行用户测试,并使用通俗语言 |
| 没有加载指示器 | 用户会以为系统坏了 | 显示加载图标、进度条或骨架屏 |
| 点击目标太小 | 移动设备用户总会误点 | 触控目标至少为 44x44 px |
| 信息仅在悬停时显示 | 移动设备和键盘用户会看不到 | 不要把关键信息藏在悬停交互后面 |
| 没有撤销功能 | 用户害怕执行任何操作 | 为所有非破坏性操作提供撤销功能 |
| 错误消息不佳 | “输入无效”没有告诉用户任何信息 | 说明哪里有问题,以及如何修正 |
| 文本对比度低 | 许多人难以阅读 | 至少达到 WCAG AA 标准(对比度 4.5:1) |
| 导航位置不一致 | 用户找不到导航 | 固定位置,并在每个页面保持一致 |
| 后退按钮失效 | 违反浏览器约定 | 绝不要劫持或破坏浏览器历史记录 |
审核无障碍功能(对比度、键盘、屏幕阅读器、焦点)时,请参阅:references/wcag-checklist.md——其中包含完整的 WCAG 2.1 AA 检查清单和测试工具。面向全球受众设计时,请参阅 references/cultural-ux.md——其中涵盖 RTL 布局、颜色含义、表单/姓名/日期惯例以及本地化陷阱。
快速诊断
| 问题 | 如果答案为“否” | 操作 |
|---|---|---|
| 我能否立即判断这是哪个网站/页面? | 用户会迷失方向 | 添加清晰的徽标、页面标题和面包屑 |
| 主要操作是否一目了然? | 用户不知道该做什么 | 建立视觉层级,并设置单一的主要 CTA |
| 导航是否清晰? | 用户找不到方向 | 应用 Trunk Test,并添加“当前位置”指示 |
| 我能找到搜索功能吗? | 目标明确的用户会受阻 | 在页眉中放置醒目的搜索框 |
| 系统是否展示当前正在发生的事情? | 用户会失去信任并再次点击 | 显示加载状态、确认信息和进度 |
| 错误消息是否有帮助? | 用户会被卡住 | 使用通俗语言说明问题,并给出具体修正方法 |
| 用户能否撤销操作或返回? | 用户会害怕操作 | 在各处提供撤销、取消和返回选项 |
| 不使用悬停也能正常使用吗? | 移动设备/键盘用户会被排除在外 | 为悬停交互提供始终可见的替代方式 |
| 所有交互元素都标注了吗? | 用户只能猜图标的含义 | 添加文字标签或描述性工具提示 |
| 有没有什么让我停下来想“嗯?” | 认知负荷太高 | 简化——如果需要解释,就重新设计 |
启发式原则之间的冲突
启发式原则有时会相互矛盾。遇到这种情况时:
- 简洁性与灵活性:采用渐进式展示
- 一致性与情境:保持模式一致,同时突出情境相关内容
- 效率与错误预防:优先提供撤销功能,而非确认对话框
- 可发现性与极简主义:让主要操作可见,将次要操作隐藏起来
当两项启发式原则相互冲突,且上述四条规则无法解决时,请参阅 references/heuristic-conflicts.md——其中包含解决框架和经过推演的权衡示例。
暗黑模式识别
暗黑模式会故意违背启发式原则来操纵用户:强制续订(难以取消)、蟑螂旅馆(容易进入,难以退出)、确认羞辱(以愧疚感为基础的选项)、隐藏费用(结账时出现意外费用)。
如果你怀疑某种设计是在操纵用户,而非为用户服务,请参阅:references/dark-patterns.md — 其中包含完整的分类体系、符合伦理的替代方案以及相关法规。
何时使用各方法
| 方法 | 适用时机 | 耗时 | 发现 |
|---|---|---|---|
| 启发式评估 | 用户测试之前 | 1-2 小时 | 主要问题 |
| 用户测试 | 修复启发式评估发现的问题之后 | 2-4 小时 | 真实行为 |
| A/B 测试 | 优化时 | 数天至数周 | 统计验证 |
| 分析数据审查 | 持续进行 | 30 分钟 | 模式和问题 |
延伸阅读
基于 Steve Krug 和 Jakob Nielsen 提出的可用性原则:
- "别让我思考,重访",作者:Steve Krug
- "轻松开展可用性测试",作者:Steve Krug(自己动手进行可用性测试)
- "用户界面设计的 10 条可用性启发式原则",作者:Jakob Nielsen(Nielsen Norman Group)
关于作者
Steve Krug 是一位可用性顾问,他的著作 Don't Make Me Think(2000 年出版,2014 年修订)是最广为阅读的 Web 可用性书籍。他指出,可用性测试不需要实验室或大量预算——只需观察几位真实用户尝试完成任务即可。
Jakob Nielsen 博士 是 Nielsen Norman Group 的联合创始人,也是 10 条可用性启发式原则(1994 年)的作者;这些原则至今仍是全球最常用的启发式评估框架。*《纽约时报》*称他为“网页可用性大师”。