audit-ux

UX 审计技能

自由度：混合——步骤 0、2–5 为 [HIGH freedom]；步骤 1 研究 JSON 和每个 Playwright 步骤为 [LOW freedom — run exactly]。 进行任何浏览器交互前，请先阅读 protocol-browser-anti-stall。

本技能与相邻技能的区别

技能	负责范围
audit-ux（本技能）	单页 UX 审计：NN/g 启发式原则、微文案审查、Google HEART
audit-ux-journeys	跨页面 UX 审计：用户故事、任务完成情况和 IA
enhance-web-ux	基于 NN/g 原则改进一个现有页面的流程
audit-uiux-design-system	视觉系统一致性：设计令牌、变体、颜色、字体、间距、暗色模式
thirdparty-ui-ux-pro-max	第三方样式目录：通过脚本提供的调色板、字体排版和 UX 指南

推理方式

1. 观察——引用截图、文案或代码行
2. 解读——这会在流程的此刻对人产生什么影响？
3. 分类——启发式原则失效／定律违背／微文案问题／无需修改
4. 严重性——阻碍成功时刻 = P0；可恢复的摩擦 = P1；小问题 = P2

示例

**观察：**发票提交按钮始终处于启用状态；没有提示；POST /invoices 请求正在处理中，已持续 4s。 **解读：**再次点击会创建重复发票（H1 + H5，涉及资金的流程）。 **分类：**对需要建立信任的写入操作，启发式原则失效。 **严重性：**P0——涉及资金的操作可重复提交。 发现：/invoices/new | H1/H5 | P0 | 无待处理状态 | 禁用按钮 + 显示提示。

报告前的自我批评 [LOW freedom — do not skip]

1. 有证据支持——提供截图或引用文案，而不是“感觉令人困惑”
2. 针对单页——跨页面 IA／用户故事问题 → audit-ux-journeys
3. 严重性有依据——P0 会阻碍已记录的成功时刻
4. 归属正确——断点问题 → audit-responsive；空状态／错误状态问题 → audit-ui-states
5. 先了解上下文——未完成步骤 0 中对人和流程的分析，不得提出发现

以上下文为先

评估启发式原则前，先了解使用者是谁（具体状态，而非“用户”）、该页面在用户旅程中的位置、数据如何从输入流经 API 和 DB 再呈现在屏幕上，以及情绪变化轨迹。步骤 0 为必做项。

---

步骤 0：深入了解产品和流程

0a. 了解业务和使用者背景

阅读 README、落地页、营销文案及所有引导流程，以回答：

• 这解决了什么问题？（不是功能，而是缓解了使用者的什么痛点）
• 主要使用者是谁？（人口统计特征、技术水平、使用时的情绪状态）
• 替代方案是什么？（没有这个产品时，人们会怎么做？用电子表格？打电话？什么也不做？）
• 成功时刻是什么？（使用者得到所需内容时的“顿悟”时刻）
• 信任模式是什么？（使用者是否会把资金、健康数据或业务数据托付给这个产品？）

0b. 梳理流程、路由和情绪变化轨迹

针对每项核心任务，追踪数据如何从使用者输入开始，经过客户端验证、API 调用、服务端处理、数据库、响应和客户端更新，最终转化为使用者看到的反馈（通过 api/、actions/、hooks/use*、lib/ 以及 fetch|axios|ky|useSWR|useQuery|trpc 调用位置找出集成点）。标记对延迟敏感、容易出错和需要建立信任的环节——H1、H5 和 H9 的问题都来自这些环节。根据框架发现路由（app/**/page.tsx、pages/**/*.tsx、src/routes/、router.*），并记录范围内页面的导航结构（扁平／分层／中心辐射式）、深度、交叉链接和死胡同；跨页面 IA 问题应交由 audit-ux-journeys 负责。针对每个核心流程，记录进入时的情绪、困惑或焦虑加剧的节点、产品赢得信任的节点、峰值时刻（最好或最糟）以及流程的结束方式。

0c. 记录发现

用最合适的形式写一段简短内容：产品类型、使用者的问题、主要使用者及其情绪背景、最重要的核心任务、成功时刻、信任级别（资金／数据／时间／声誉）、页面数量、身份验证模式、本地化／i18n，以及已知的延迟或易错环节。

---

第 1 步：研究当前 UX 标准

1a. NN/g — 可用性启发式原则和方法

firecrawl:firecrawl_search
{
 "query": "site:nngroup.com heuristic evaluation checklist [current year]",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

1b. Intuit 内容设计 — 微文案原则

firecrawl:firecrawl_search
{
 "query": "site:contentdesign.intuit.com UX writing principles",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

抓取最相关的结果，获取详细的写作指南。

1c. UX 法则 — 交互心理学

firecrawl:firecrawl_scrape
{
 "url": "https://lawsofux.com",
 "formats": ["markdown"],
 "onlyMainContent": true
}

1d. 特定领域的 UX 研究

firecrawl:firecrawl_search
{
 "query": "<PRODUCT_TYPE> UX best practices usability patterns [current year]",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

抓取最佳结果，了解特定领域的 UX 模式。

---

第 2 步：Nielsen 的 10 条可用性启发式原则（深入评估）

对每条启发式原则进行代码分析和实时浏览器验证。

H1：系统状态的可见性

要在代码中查找的内容：

在 *.tsx 中搜索反馈模式：loading|isLoading|isPending|skeleton|Skeleton|spinner|Spinner （加载状态）；progress|Progress|step.*of|currentStep（多步骤进度）； toast|Toast|notification|Notification|snackbar（用户通知）。

要在浏览器中验证的内容：

信号	通过	未通过
加载状态	获取数据期间显示骨架屏/加载指示器	空白屏幕或界面冻结
表单提交	按钮显示加载状态，并提供成功/错误反馈	没有反馈，用户再次点击
进度指示	多步骤流程显示步骤数	用户不知道自己进行到哪一步
当前导航项	高亮显示当前页面/部分	未指示当前位置
实时更新	提供乐观 UI 或轮询反馈	数据过时，没有刷新提示

H2：系统与现实世界的匹配

要在代码中查找的内容：

在 *.tsx 中搜索与文案质量相关的 TODO：TODO.*wording|TODO.*copy|TODO.*label|TODO.*text（不区分大小写）。

要在浏览器中验证的内容：

信号	通过	未通过
标签和术语	使用用户预期的领域适用语言	技术术语、内部代号
图标	使用普遍认可的图标，或为图标添加标签	使用含义不明且没有文本标签的图标
数据格式	日期、货币和数字符合用户的区域设置	ISO 日期、原始数字、货币错误
逻辑分组	按照用户的心智模型组织信息	按数据库架构或开发便利性组织信息
隐喻	借助现实世界的类比帮助理解	生硬的隐喻造成困惑

H3：用户控制权和自由

要在代码中查找的内容：

在 *.tsx 中搜索紧急退出模式：onCancel|handleCancel|onClose|handleClose|onDismiss （取消/关闭处理程序）；undo|Undo|revert|Revert（撤销操作）； confirm.*delete|confirm.*remove|AlertDialog|ConfirmDialog（破坏性操作保护）。

要在浏览器中验证的内容：

信号	通过	未通过
关闭模态框	提供关闭按钮、支持 Escape 键和点击背景关闭	无法关闭，被困在模态框中
放弃表单	返回按钮可用，草稿已保存	切换页面时数据丢失
破坏性操作	确认对话框清楚说明操作后果	单击即删除，且无法撤销
多步骤流程	可返回上一步且不丢失数据	只能前进
撤销	重要操作后提供撤销选项	不可逆的更改没有警告

H4：一致性与标准

要在浏览器中验证的内容：

信号	通过	未通过
按钮层级	一致地使用主要/次要/幽灵按钮	按钮样式随意
术语	同一操作始终使用相同标签	同一操作有时称为“保存”，有时称为“提交”“确认”或“应用”
布局模式	不同视图的页面结构保持一致	每个页面的布局逻辑都不同
交互模式	相同手势始终产生相同结果	点击有时跳转，有时打开模态框
平台惯例	遵循 Web 惯例（链接带下划线，表单模式符合惯例）	自定义模式打破用户预期

H5：预防错误

在代码中查找：

在 *.tsx 中搜索预防模式：disabled.*(!|=.*false)|isDisabled|isInvalid （禁用／无效状态）；required|min.*length|max.*length|pattern=（输入约束）。 检查 package.json 中的验证库：zod|yup|joi|superstruct|valibot。

在浏览器中验证：

信号	通过	未通过
输入约束	日期选择器（而非自由文本）、为已知选项提供下拉菜单	结构化数据使用自由文本
行内验证	失焦／更改时验证，在提交前完成	仅在提交时验证
危险操作保护	要求确认；关键操作需输入指定文本确认	单击即可执行不可撤销的操作
默认值	智能默认值减少所需输入	所有字段均为空，需要用户猜测
禁用状态	表单无效时禁用按钮，并说明原因	按钮可用，但操作静默失败

H6：识别而非回忆

在浏览器中验证：

信号	通过	未通过
导航	导航中可见所有主要分区	功能隐藏在深层菜单中
搜索	大型数据集提供搜索功能	用户必须滚动／浏览才能找到内容
面包屑	层级内容中提供面包屑	用户在深层页面中丢失上下文
最近访问项	显示最近访问的项目	必须靠记忆从头导航查找
上下文帮助	工具提示、占位符可解释字段	标签缺少上下文

H7：灵活高效地使用

在代码中查找：

在 *.tsx 中搜索效率模式：keyboard|shortcut|hotkey|useHotkeys|Cmd\+|Ctrl\+ （键盘快捷键）；bulk|batch|selectAll|multiSelect（批量操作）。

在浏览器中验证：

信号	通过	未通过
键盘快捷键	提供面向高级用户的快捷键	只能使用鼠标交互
批量操作	支持多选、批量操作	只能逐项操作
筛选与排序	数据密集型页面支持筛选／排序	必须手动查找
自定义	用户可以配置视图／偏好设置	一种设置适用于所有人
快捷操作	常见任务可在 1-2 次点击内完成	核心任务深藏在菜单中

H8：美观简洁的设计

在浏览器中验证：

信号	通过	未通过
信息密度	渐进式展示，按需展开	所有内容一览无余
视觉层级	主要／次要／次次要内容层次分明	所有内容的视觉权重相同
留白	分区之间留有舒适空间	布局拥挤、密集
CTA	每个视图有 1 个明确区分的主要操作	多个 CTA 彼此争抢注意力
内容优先级	最重要的内容优先显示／突出展示	关键信息藏在首屏以下

H9：帮助用户识别、诊断和恢复错误

在代码中查找：

在 *.tsx 中搜索错误处理模式：error.*message|errorMessage|Error.*:.*'（错误 消息字符串）；try.*catch|\.catch\(|onError（捕获位置）；fallback|ErrorBoundary|error\.tsx （回退组件——列出匹配到的文件，而不仅是数量）。

在浏览器中验证：

信号	通过	未通过
错误措辞	使用通俗易懂的语言，不含代码	“错误 500”、“ECONNREFUSED”、原始堆栈跟踪
具体程度	明确说明出了什么问题	“出了点问题”
恢复操作	建议用户接下来可以采取的操作	没有出路，用户必须猜测
行内错误	输入框附近显示字段级错误	表单顶部只显示一条错误
空状态	提供有帮助的空状态和后续操作	空白页面、“无数据”

H10：帮助与文档

在代码中查找：

搜索 *.tsx 中的应用内帮助：Tooltip|tooltip|HelpCircle|InfoIcon|help.*text|aria-describedby （上下文帮助）；onboarding|tour|walkthrough|guide|Onboarding（引导流程）。

在浏览器中验证：

信号	通过	未通过
上下文帮助	复杂字段或功能配有工具提示	没有说明，用户只能猜
引导	为首次使用的用户提供引导	用户直接面对复杂界面
文档	可在应用内访问帮助	必须搜索外部文档
输入引导	占位符、提示文本、格式示例	输入框没有任何提示

---

第 3 步：UX 法则评估

法则	原则	检查内容	如何修复违规问题
雅各布定律	用户期待你的网站与其他网站的使用方式相同	导航、表单模式、结账流程是否遵循平台惯例	通过 Firecrawl 研究 3 个竞争对手，采用其常见模式
菲茨定律	更大、更近的目标点击起来更快	主要 CTA 尺寸是否足够大，是否避开角落。触控目标 ≥44px	增大 CTA 尺寸，将主要操作移至移动端自然的拇指操作区域
希克定律	需要 权衡 的选项越多，决策时间越长	用户需要评估的选项集（套餐、操作、筛选条件）是否经过分组、分阶段呈现或设有默认选项。已知项目查询（国家、州/省）不适用：这类查询应使用搜索	对选项分组，基于合理依据预选一项，将大量次要选项隐藏在“更多”后方；查询使用输入联想
米勒定律	工作记忆可容纳约 4–7 个组块	不应要求用户在不同屏幕间依靠记忆；代码应分组显示并配有复制按钮；字段应保留可见标签。不限制可见菜单项数量：可见菜单是用来阅读的，而不是记忆的	保留标签，汇总先前的选择，将代码分组，为字段组添加标签
冯·雷斯托夫效应	与众不同的项目更容易被注意到	每个视图中只突出显示一个实心强调操作	将相互竞争的 CTA 降级为描边或幽灵样式
目标梯度效应 / 蔡格尼克效应	可见的进度和未完成的任务会促使用户完成目标	多步骤流程应如实显示当前位置和总步骤数；重新加载和返回后仍应保留输入内容	根据实际状态显示“第 2 步，共 3 步”，自动保存草稿（绝不保存卡号或验证码）
认知负荷	尽量减少心智投入	没有不必要的字段，步骤之间无需依赖记忆	从默认视图中移除可选字段，只显示当前所需内容
审美—易用性效应	美观会让人觉得更易用	第一印象能带来信心	为落地页和关键流程打磨视觉效果。展现个性，而不仅仅是正确
特斯勒定律	复杂性无法消除，只能转移	为用户简化复杂任务，而不是把复杂性推给用户	使用智能默认值、自动检测，并渐进式展示复杂功能
多尔蒂阈值	响应时间低于 400ms 时，效率会提高	交互是否感觉即时？	使用乐观 UI、骨架屏、预取和感知性能优化技巧
波斯特尔定律	接受输入时应灵活	灵活解析输入内容（电话、日期、大小写）	接受多种输入格式，自动调整格式，不要拒绝有效的变体
峰终定律	人们会根据高峰体验和结尾来评价体验	成功时刻是否令人满意？错误时刻是否得到了妥善处理？	庆祝任务完成（彩纸动画、明确的确认信息）。弱化错误带来的负面感受

对于原生移动应用，还要评估：主要操作是否位于拇指操作区域，触控目标是否 ≥ 44pt / 48dp，标签页目标是否为 3–5 个，每个可点击元素是否都有按压反馈，是否仅在确认操作时触发触觉反馈，正文是否 ≥ 16sp。对此的修复流程为 enhance-mobile-native-feel。

---

第 4 步：内容与微文案审核（Intuit 内容设计原则）

4a. 语气和风格

原则	符合	不符合
对话式	读起来像是在和朋友交谈	读起来像法律文件或机器人说的话
主动语态	“我们已保存你的更改”	“你的更改已由系统保存”
使用第二人称	对用户使用“你”，对产品使用“我们”	使用第三人称、被动表达
使用缩略形式	自然地使用缩略形式（“don't”“we'll”）	使用生硬正式的语言（“do not”“we will”）

4b. 清晰准确

原则	符合	不符合
用词具体	“我们现在无法连接到 Square”	“出了点问题。请稍后重试”
术语一致	始终用同一个词表达同一个概念	“Save”／“Submit”／“Confirm”／“Apply”交替使用
动词简单	使用一般现在时、一般过去时或一般将来时	使用进行时、完成时或复杂时态
句子简短	每句不超过 20 个单词	使用包含多个从句的冗长句子

4c. 微文案质量

在浏览器中检查以下位置：

位置	评估内容
按钮标签	以行动为导向且具体（如“保存发票”，而不只是“提交”）
错误消息	使用通俗易懂的语言，说明具体原因和补救操作
空状态	提供帮助，引导用户进行下一步操作，而不只是显示“无数据”
确认消息	明确说明后果（“删除此发票？此操作无法撤销”）
工具提示	简洁地回答一个问题，而不是写成段落
占位符	提供格式提示（如“例如：[email protected]”），而不是标签
加载文本	尽可能提供有用信息（如“正在加载你的发票……”）
成功消息	确认已完成的操作（如“已将发票发送给 John”）

4d. 国际化就绪情况

检查项	符合	不符合
硬编码字符串	所有字符串都在 i18n 文件中	字符串直接写在组件中
文化习语	使用中性的比喻	使用特定文化的俚语或幽默
文本扩展	UI 能容纳长度增加 40% 的译文	字符串变长后布局错乱
RTL 就绪情况	使用逻辑属性（margin-inline-start）	使用物理属性（margin-left）

查找违规项： 搜索 *.tsx 中的 >([\w\s]{3,})<，以找出可能遗漏国际化的硬编码可见文本字符串。

---

第 5 步：情感化设计与以人为本的评估

5a. 第一印象测试（5 秒测试）

打开着陆页／主页。在截图的前 5 秒内：

问题	依据
你能看出这个产品的用途吗？	[是／否——传达了什么信息]
你信任它吗？	[视觉精致度、可信度信号、品牌存在感]
你知道首先该做什么吗？	[清晰的 CTA、显而易见的起点]
它看起来像真正的产品，还是模板？	[个性、匠心，还是通用的 Bootstrap 风格]

延伸阅读

• 5b. 情感摩擦图及更多内容