mcpField
U
ux-heuristics

ux-heuristics

github.com/wondelai设计与 UI2.5k9.6k 次安装7 周前更新
代码仓库

关于 ux-heuristics

为设计师和产品团队提供可用于评估与改进界面的可用性原则,结合 Krug 与 Nielsen 的方法、严重度评级和诊断评分。

主要功能

  1. 01Krug 的四项可用性原则
  2. 02Nielsen 的十项启发式
  3. 03问题严重度评级
  4. 04界面诊断与评分
  5. 05无障碍与导航参考清单

适用场景

  1. 01审查页面标签和操作文案
  2. 02识别导航与状态反馈问题
  3. 03按严重程度整理界面缺陷

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/wondelai/skills --skill ux-heuristics

安装后在 Claude Code 中输入/ux-heuristics确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
audit-template.md
cultural-ux.md
dark-patterns.md
heuristic-conflicts.md
krug-principles.md
nielsen-heuristics.md
wcag-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 是一位可用性顾问,他的著作 Don't Make Me Think(2000 年出版,2014 年修订)是最广为阅读的 Web 可用性书籍。他指出,可用性测试不需要实验室或大量预算——只需观察几位真实用户尝试完成任务即可。

Jakob Nielsen 博士 是 Nielsen Norman Group 的联合创始人,也是 10 条可用性启发式原则(1994 年)的作者;这些原则至今仍是全球最常用的启发式评估框架。*《纽约时报》*称他为“网页可用性大师”。

评论

支持 Markdown