ux-usability-review

UX 易用性评审

概述

这是一套结构化的易用性审查方法，基于 Steve Krug 的 Don't Make Me Think。它通过 8 个连续阶段，引导你系统地评估界面的认知负荷、易浏览性、导航清晰度、内容质量、移动端易用性、无障碍性和整体用户体验。核心原则：如果用户必须停下来思考如何使用你的界面，就说明有些地方需要重新设计。

适用场景

• 在发布产品、功能或重新设计之前
• 用户反映困惑、放弃操作，或因基本任务而寻求支持时
• 设计评审或影响用户流程的代码评审期间
• 评估竞争对手界面的优缺点时
• 向新团队成员介绍 UX 标准时
• 作为 ui-polish-review 技能的补充（该技能关注视觉质量；本技能关注易用性）

不适用场景

• 纯粹的视觉／美学评估（请使用 ui-polish-review 技能）
• 性能或技术审查
• 代替真实用户参与的实际易用性测试（这是启发式评审，而不是用户测试）
• 内容策略或文案项目（不过会评估内容清晰度）

流程

依次完成每个阶段。在每个阶段：

1. 提出针对正在评审的特定界面的具体问题
2. 阅读 front-end-design/dont-make-me-think/ 中相关章节的摘要，以获取详细指导
3. 提出并执行具体测试（源代码中的 grep 模式、人工检查任务、快速用户测试）
4. 标记发现并注明严重程度：CRITICAL / HIGH / MEDIUM / LOW / INFO
5. 总结发现，然后进入下一阶段

如果应用没有适用于某个阶段的界面（例如，内部工具没有主页），请说明并给出跳过的理由。

digraph audit_phases {
  rankdir=TB;
  node [shape=box, style=rounded];

  p1 [label="Phase 1\nDon't Make Me Think"];
  p2 [label="Phase 2\nVisual Hierarchy\n& Scanning"];
  p3 [label="Phase 3\nNavigation"];
  p4 [label="Phase 4\nWords & Content"];
  p5 [label="Phase 5\nHomepage Clarity"];
  p6 [label="Phase 6\nMobile Usability"];
  p7 [label="Phase 7\nGoodwill & Courtesy"];
  p8 [label="Phase 8\nAccessibility"];
  report [label="Usability\nReport", shape=note];

  p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> p7 -> p8 -> report;
}

---

阶段 1：「Don't Make Me Think」测试

参考： front-end-design/dont-make-me-think/ch01-dont-make-me-think.md、ch02

**目标：**评估每个屏幕是否一目了然——用户应该无需费力思考，就能立即明白屏幕的用途以及接下来该做什么。

要提出的问题：

• 对于每个屏幕：初次使用的用户能否立即明白这是做什么的，以及接下来该做什么？
• 是否有一些巧妙、有创意或带有品牌特色的标签，而常规标签会更清楚？（例如，"Job-o-Rama" 与 "Jobs"，"Quick Procurement Module" 与 "Shopping Cart"）
• 哪些内容可以点击，哪些不能，是否一目了然？（链接看起来像链接，按钮看起来像按钮，不可交互元素不会看起来像可点击元素。）
• 用户是否必须阅读并理解，还是可以浏览后直接操作？
• 5 秒测试：如果有人只看这页 5 秒，能否说出这个网站的用途和主要操作是什么？

要运行的测试：

# Find potentially clever/non-standard labels and navigation items
grep -rn "nav\|Nav\|navigation\|menu\|Menu\|sidebar\|Sidebar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find link/button text to review for clarity
grep -rn ">.*<\/a>\|>.*<\/button>\|>.*<\/Link>" --include="*.tsx" --include="*.jsx" --include="*.html"

# Check for elements styled to look clickable but are not (or vice versa)
grep -rn "cursor:\s*pointer" --include="*.css" --include="*.scss"
grep -rn "cursor-pointer" --include="*.tsx" --include="*.jsx" --include="*.html"

# Find tooltips (may indicate UI is not self-explanatory)
grep -rn "tooltip\|Tooltip\|title=\"\|data-tip\|aria-label" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for instructional text that might indicate confusing UI
grep -rn "Click here\|click here\|Please note\|Note:\|Instructions:\|How to\|how to\|Steps:" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

5 秒测试（人工）：

1. 打开页面。准确看 5 秒，然后移开视线。
2. 你能回答这些问题吗：这是一个什么网站／应用？我能做的主要事情是什么？我应该从哪里开始？
3. 如果其中任何问题的答案不清楚，页面就未通过此测试。

视觉检查清单：

• 每个可交互元素在视觉上都能与不可交互元素区分开吗？
• 标签是否常规且一看就懂（没有术语或故弄玄虚）？
• 你能在每个屏幕上 2 秒内找到主要操作吗？
• 页面是否一目了然（无需说明），或至少能让人很快明白？
• 去掉任何「操作指南」文字或说明会破坏使用体验吗？（如果会，UI 需要重新设计，而不是添加说明。）

发现模板：

[SEVERITY] Cognitive Load: [description]
  Affected: [screen/component]
  Issue: [what makes the user think]
  User question: [the question mark in the user's head — e.g., "Is this clickable?" or "What does 'Synergy Hub' mean?"]
  Fix: [specific recommendation — e.g., "rename 'Synergy Hub' to 'Team Dashboard'"]

---

阶段 2：视觉层次与快速浏览

参考： front-end-design/dont-make-me-think/ch03-billboard-design-101.md

目标： 验证页面是否支持快速浏览——用户不会逐字阅读网页，而是快速浏览。设计必须让用户能立即找到最重要的内容。

要问的问题：

• 视觉层次是否清晰，最重要的内容是否最醒目？
• 页面是否分成清晰明确、视觉上彼此区分的区域？
• 文本是否采用便于快速浏览的格式？（有意义的标题、简短段落、加粗关键词、项目符号列表。）
• 是否存在过多的视觉噪声？（相互争夺注意力的元素过多、背景图案、不必要的装饰、动画过多。）
• 相关条目是否在视觉上归为一组（邻近原则），无关条目是否在视觉上彼此分开？

要运行的测试：

# Check for heading structure (are headings used to break up content?)
grep -rn "<h[1-6]\|<Heading\|role=\"heading\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find long text blocks without headings or formatting (walls of text)
# Look for paragraphs or text blocks without structure
grep -rn "<p>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for bullet/ordered lists (good for scanning)
grep -rn "<ul\|<ol\|<li" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find text formatting helpers (bold for key terms)
grep -rn "<strong\|<b>\|<em>\|font-bold\|font-semibold\|fontWeight.*bold" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for potential noise: excessive decoration, patterns, animations
grep -rn "background-image:\|background-pattern\|animation:\|@keyframes" --include="*.css" --include="*.scss"

视觉检查清单：

• 看一眼页面后，能否在 3 秒内识别页面用途和主要内容？
• 是否有清晰明确的视觉区域（页眉、主要内容、侧边栏、页脚），且边界一目了然？
• 正文是否拆分为简短段落（最多 3-4 句），并配有描述性标题？
• 关键词是否已加粗或以其他方式突出，便于快速浏览？
• 页面是否没有过多的视觉噪声（相互争夺注意力的元素、不必要的装饰、令人分心的动画）？
• 是否有效利用留白，营造舒适空间并将内容在视觉上分组？

问题记录模板：

[SEVERITY] Scanning & Hierarchy: [description]
  Affected: [screen/section]
  Issue: [e.g., "400-word paragraph with no headings, no bold, no lists"]
  Impact: [users will skip this content entirely rather than read it]
  Fix: [e.g., "break into 3 short paragraphs with descriptive headings, bold key terms, use bullet list for features"]

---

阶段 3：导航

参考： front-end-design/dont-make-me-think/ch06-street-signs-and-breadcrumbs.md

目标： 验证导航是否清晰、持续可见，并让用户始终能回答三个基本问题：我在哪里？我可以去哪里？如何返回？

要问的问题：

• 是否每个页面都显示持续可见的全局导航？
• 用户是否始终能回答：我在哪里？我可以去哪里？如何返回？
• 导航中是否有清晰的“你在这里”指示（当前状态、高亮、加粗）？
• 每个页面是否都有名称/标题，且与用户点击进入该页面时所选的内容相符？
• 对于层级较深的结构（3 层以上），是否显示面包屑导航？
• 是否有持续可见且易于使用的搜索功能？
• Logo 是否链接到首页？

要运行的测试：

# Check for navigation component
grep -rn "<nav\|<Nav\|role=\"navigation\"\|Navbar\|Header\|AppBar\|TopBar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for "you are here" indicators (active/current state in navigation)
grep -rn "active\|current\|isActive\|aria-current\|selected\|activeClassName\|pathname" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.css" --include="*.scss"

# Check for breadcrumbs
grep -rn "breadcrumb\|Breadcrumb\|aria-label=\"breadcrumb\"\|role=\"navigation\".*breadcrumb" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for search functionality
grep -rn "search\|Search\|type=\"search\"\|role=\"search\"\|searchParams\|useSearch" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for back/home navigation
grep -rn "back\|Back\|home\|Home\|logo.*href\|logo.*link\|Logo.*Link" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for page titles/headings matching navigation labels
grep -rn "<title\|<h1\|document\.title\|useTitle\|Head>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

主干测试（独立快速检查）： 不要先打开首页，直接进入网站任意一个内页。能否立即回答：

1. 这是哪个网站？（网站标识/Logo 是否可见）
2. 我在哪个页面？（页面名称/标题是否可见）
3. 网站有哪些主要版块？（全局导航是否可见）
4. 我在当前层级有哪些选项？（本地导航是否可见）
5. 我在整个结构中的什么位置？（面包屑导航或“你在这里”指示）
6. 如何搜索？（搜索框是否可见或易于找到）

如果任何一个问题无法在 5 秒内回答，请将其标记出来。

视觉检查清单：

• 全局导航是否在每个页面上持续可见（桌面端是否没有隐藏在汉堡菜单后）？
• 是否有“你在这里”指示，显示当前页面/版块？
• 页面标题是否与引导用户进入该页面的导航标签相符？
• 对于深度超过 2 层的内容，是否显示面包屑导航？
• Logo 是否可点击并链接到首页？
• 用户是否始终可以返回来时的位置（返回按钮可用、面包屑导航或明确的返回链接）？

问题记录模板：

[SEVERITY] Navigation: [description]
  Affected: [screen/flow]
  Trunk test: [which questions could not be answered]
  Issue: [e.g., "no 'you are here' indicator — active nav item has no visual distinction"]
  Fix: [e.g., "add font-weight: 600 and a left border accent to the active navigation item"]

---

阶段 4：用词与内容

参考： front-end-design/dont-make-me-think/ch04、ch05-omit-needless-words.md

目标： 确认界面上的所有文字都简洁、有用，不包含客套话、不必要的说明和营销套话。每个字都应该有其存在的价值。

需要思考的问题：

• 是否有应该删掉的客套话？（“欢迎使用我们的创新平台……”“我们热衷于……”“感谢您的选择……”）
• 如果界面设计得更好，是否就不需要某些说明了？
• 任意页面上的文字能否删掉一半，同时不影响原意？
• 标签是否清晰、通用，并采用用户熟悉的语言（而非营销用语或内部术语）？
• 错误消息是否使用通俗易懂的语言，说明发生了什么以及该怎么做？

要运行的测试：

# Find happy talk and filler text patterns
grep -rni "welcome to\|we're passionate\|we believe\|our mission\|thank you for\|we're excited\|innovative\|cutting-edge\|world-class\|best-in-class\|leverage\|synergy\|empower\|revolutionize" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.md"

# Find instructional text that might indicate confusing UI
grep -rni "please\s\+\(enter\|click\|select\|choose\|note\)\|in order to\|you must\|make sure to\|don't forget\|remember to\|follow these steps\|instructions:" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find generic/unhelpful error messages
grep -rni "something went wrong\|an error occurred\|unexpected error\|oops\|try again later\|contact support\|error:\s*true" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.ts" --include="*.js"

# Find button/link text that could be clearer
grep -rni "click here\|learn more\|read more\|submit\|go\|here\b" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find long text blocks (potential walls of text)
grep -rn "<p>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

视觉检查清单：

• 页面是否不含没有提供任何信息的客套话？（营销套话、欢迎语、界面中的使命宣言。）
• 是否可以通过重新设计界面来删掉某些说明？
• 页面上的段落能否删掉一半，同时不丢失重要信息？
• 按钮标签是否清楚地描述了点击后会发生什么？（“保存更改”，而不是“提交”；“创建账户”，而不是“继续”。）
• 错误消息是否具体且可操作？（“此邮箱已注册。请尝试登录。”，而不是“发生了错误。”）

问题记录模板：

[SEVERITY] Content: [description]
  Affected: [screen/section]
  Current text: "[the problematic text]"
  Issue: [e.g., "happy talk — provides no useful information"]
  Suggested text: "[concise alternative]" or "Remove entirely"

---

阶段 5：首页清晰度

参考： front-end-design/dont-make-me-think/ch07-the-first-step-in-recovery.md

目标： 确认首页能在 5 秒内让首次访问者明白网站是什么、可以做什么，以及为什么值得关注。

需要思考的问题：

• 首页是否能在 5 秒内回答三个问题：这是什么？我能在这里做什么？我为什么要来这里（而不是去别处）？
• Logo 附近是否有清晰、简洁的标语来说明网站的用途？
• 首页是否有太多相互竞争的重点，还是重要内容的层级清晰？
• 首次访问者是否无需滚动页面就能理解网站的用途？
• 主要行动号召是否醒目且有吸引力？
• 首页是否避免了一次性展示所有内容的陷阱？

要运行的测试：

# Check for tagline/value proposition near the top
grep -rn "tagline\|slogan\|hero\|Hero\|headline\|Headline\|value-prop\|subtitle\|subheading" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check the homepage/landing page component
grep -rn "HomePage\|LandingPage\|Landing\|index\.\(tsx\|jsx\)\|page\.\(tsx\|jsx\)" --include="*.tsx" --include="*.jsx"

# Find the primary call-to-action on the homepage
grep -rn "cta\|CTA\|call-to-action\|get-started\|GetStarted\|sign-up\|SignUp\|try-free\|hero.*button\|Hero.*Button" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for competing CTAs (too many primary actions)
grep -rn "btn-primary\|variant=\"primary\"\|variant='primary'" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Look for logo + tagline proximity
grep -rn "logo\|Logo\|brand\|Brand" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

5 秒首页测试（手动）：

1. 打开首页，启动 5 秒计时器。计时结束时移开视线。
2. 写下以下问题的答案：这个网站是做什么的？我可以采取的主要操作是什么？这个网站面向谁？
3. 如果任何答案含糊不清或不正确，就需要改进首页。

视觉检查清单：

• 无需滚动页面，首屏内容是否就能传达网站的用途？
• Logo 附近是否有标语或价值主张？
• 是否只有一个明确的主要 CTA（而不是 5 个互相争抢注意力的按钮）？
• 首页是否没有“大包大揽”的问题？
• 目标受众中的首次访问者能否在 5 秒内理解网站的用途？
• 首页的信息层级是否清晰：主要信息 > 次要功能 > 补充细节？

问题记录模板：

[SEVERITY] Homepage Clarity: [description]
  Affected: [homepage section]
  The 3 questions:
    What is this? [clear / unclear — what a user might guess]
    What can I do? [clear / unclear — what the primary action appears to be]
    Why here? [clear / unclear — is the value proposition communicated?]
  Fix: [e.g., "add a tagline under the logo: 'Project management for remote teams' and make the 'Start free trial' button the sole primary CTA above the fold"]

---

第 6 阶段：移动设备易用性

参考： front-end-design/dont-make-me-think/ch10-mobile-usability.md

目标： 确认界面在移动设备上使用体验良好——触控目标足够大、文字清晰易读、功能易于访问，并且提供完整体验（而不是精简版）。

需要提出的问题：

• 触控目标是否至少为 44x44 点（Apple HIG）/ 48x48dp（Material），且彼此间距适当？
• 移动设备上是否能使用关键功能，而非将其隐藏或移除？
• 单手使用界面是否方便？
• 无需缩放即可阅读文字吗（正文最小字号为 16px）？
• 移动端体验是否功能完整（而非桌面版的精简版本）？
• viewport meta 标签是否设置正确，以防止意外缩放问题？
• 表单输入是否使用了适当的移动键盘类型（email、tel、number）？

要运行的测试：

# Check for viewport meta tag
grep -rn "viewport" --include="*.html" --include="*.tsx" --include="*.jsx"

# Check for responsive design (media queries, responsive utilities)
grep -rn "@media\|breakpoint\|responsive\|sm:\|md:\|lg:\|xl:" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check touch target sizes (minimum 44x44 / 48x48)
grep -rn "min-height:\s*\(4[0-3]\|3[0-9]\|[12][0-9]\|[0-9]\)px\|min-width:\s*\(4[0-3]\|3[0-9]\|[12][0-9]\|[0-9]\)px" --include="*.css" --include="*.scss"
grep -rn "h-[0-9]\b\|w-[0-9]\b\|h-1[0-1]\b\|w-1[0-1]\b" --include="*.tsx" --include="*.jsx" --include="*.html"

# Check for appropriate input types on mobile
grep -rn "type=\"email\"\|type=\"tel\"\|type=\"number\"\|type=\"url\"\|type=\"search\"\|inputMode\|inputmode\|autocomplete" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for mobile navigation patterns (hamburger, bottom nav, sheet)
grep -rn "hamburger\|menu-toggle\|mobile-menu\|drawer\|Drawer\|Sheet\|BottomNav\|bottom-nav\|MobileNav" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for horizontal scrolling issues (content wider than viewport)
grep -rn "overflow-x:\s*hidden\|overflow-x:\s*auto\|overflow-x:\s*scroll\|overflow-hidden\|overflow-x-auto" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check font sizes (body text should be at least 16px on mobile to prevent zoom)
grep -rn "font-size:\s*1[0-5]px\|font-size:\s*[0-9]px\|text-xs\b\|text-\[1[0-3]px\]" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

目视检查清单（在实际移动设备或设备模拟器上测试）：

• 能否用拇指准确点击所有按钮和链接（最小为 44x44pt）？
• 点击目标之间是否有足够间距，以避免误触？
• 正文字号是否至少为 16px，且无需缩放即可阅读？
• 移动设备上是否能访问所有桌面端功能（未被移除或隐藏）？
• 是否能在移动设备上完成关键流程（注册、登录、结账、搜索）？
• 表单输入是否会触发恰当的移动键盘（email、number、tel）？
• 是否避免了水平滚动（内容没有溢出屏幕）？
• 移动导航是否易于访问并方便单手操作？

问题记录模板：

[SEVERITY] Mobile Usability: [description]
  Affected: [screen/component]
  Issue: [e.g., "secondary navigation links are 28x28px with 4px spacing — too small to tap accurately"]
  Device tested: [device or viewport size]
  Fix: [e.g., "increase tap targets to 44x44px minimum with 8px spacing between items"]

---

第 7 阶段：善意与礼貌

参考： front-end-design/dont-make-me-think/ch11-usability-as-common-courtesy.md

目标： 确认界面尊重用户的时间，提前提供用户所需的信息，并让用户能够轻松纠正错误。每个摩擦点都会消耗用户的“善意储备”；每次礼貌互动都会补充这份储备。

需要提出的问题：

• 用户常需要的信息是否容易找到？（价格、运费、联系信息、支持、常见问题——而不是藏在 3 次点击之后。）
• 表单是否只询问真正必要的信息？（除非你会打电话，否则不要询问电话号码。个人账户无需填写公司名称。）
• 错误消息是否有帮助、具体且具有建设性？（不要只说“输入无效”，而要说明“电子邮件地址必须包含 @ 符号”。）
• 用户能否轻松纠正错误？（撤销、返回按钮可用、错误状态清晰、破坏性操作前进行确认。）
• 加载、空白和错误状态是否经过设计且能提供帮助（而非采用浏览器默认行为）？
• 界面是否不存在“暗黑模式”？（诱导用户订阅、隐藏取消订阅入口、预先勾选同意框。）

要运行的测试：

# Find form fields — check if all are necessary
grep -rn "<input\|<Input\|<textarea\|<Textarea\|<select\|<Select\|type=\"text\"\|type=\"email\"\|type=\"tel\"\|type=\"number\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for required fields (are they all truly required?)
grep -rn "required\|isRequired\|\*\|aria-required" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find error message patterns
grep -rni "error\|invalid\|required\|must\|cannot\|failed\|incorrect\|wrong" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.ts" --include="*.js"

# Check for undo/recovery mechanisms
grep -rn "undo\|Undo\|revert\|Revert\|restore\|Restore\|confirm\|Confirm\|are you sure\|Are you sure" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for loading states
grep -rn "loading\|Loading\|isLoading\|isPending\|skeleton\|Skeleton\|spinner\|Spinner\|progress\|Progress" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for empty states
grep -rn "empty\|Empty\|no-data\|noData\|no-results\|noResults\|nothing\|zero-state\|emptyState" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for dark patterns
grep -rni "pre-check\|prechecked\|default.*checked\|checked.*default\|opt.out\|unsubscribe\|cancel.*hidden\|hidden.*cancel" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for confirmation dialogs on destructive actions
grep -rn "delete\|Delete\|remove\|Remove\|destroy\|Destroy" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

目视检查清单：

• 用户能否从任意页面通过 1-2 次点击找到价格、联系信息、运费详情和支持？
• 表单是否只询问必要信息？（填写这份表单会让你感到厌烦吗？）
• 错误消息是否具体，并告知用户如何解决问题？
• 执行破坏性操作（删除账户、移除数据）前是否有确认步骤？
• 加载状态是否会告知用户当前正在执行操作（骨架屏、进度指示器）？
• 空白状态是否包含有用的说明和明确的下一步操作？
• 界面是否不存在暗黑模式（预先勾选的复选框、隐藏的取消订阅入口、令人困惑的退出选项说明）？

问题记录模板：

[SEVERITY] Goodwill: [description]
  Affected: [screen/flow]
  Issue: [e.g., "registration form asks for phone number, company name, and job title — none required for the service"]
  Goodwill impact: [depletes / neutral / builds]
  Fix: [e.g., "remove phone, company, and title fields — ask only for name, email, and password"]

---

第 8 阶段：无障碍访问

参考： front-end-design/dont-make-me-think/ch12-accessibility-and-you.md

目标： 确认界面对能力各异的人都易于使用——包括恰当的标题结构、替代文本、键盘导航、对比度、表单标签、焦点指示器和跳转导航。

需要提出的问题：

• 标题层级是否恰当（h1 > h2 > h3，且没有跳级）？
• 所有有意义的图片是否都有描述性替代文本？（装饰性图片的 alt="" 应为空。）
• 是否可以仅使用键盘访问和操作所有交互元素？
• 颜色对比度是否足够（WCAG AA：普通文本为 4.5:1，大号文本为 3:1）？
• 所有表单输入是否都以编程方式关联了标签？
• 焦点指示器是否清晰可见？
• 是否为键盘用户提供了“跳转到主要内容”链接？
• ARIA 是否使用得当（没有过度使用，也没有用来代替语义化 HTML）？

要运行的测试：

# Check heading hierarchy (should be sequential, no skipping)
grep -rn "<h1\|<h2\|<h3\|<h4\|<h5\|<h6" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for images without alt text
grep -rn "<img\|<Image" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
grep -rn "alt=" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for empty alt text on images that might need descriptions
grep -rn "alt=\"\"\|alt=''" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for form labels associated with inputs
grep -rn "<label\|htmlFor=\|for=\"\|aria-label=\|aria-labelledby=\|<Label" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find inputs without labels (accessibility violation)
grep -rn "<input\|<Input\|<textarea\|<Textarea\|<select\|<Select" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for focus styles
grep -rn ":focus\|focus:\|focus-visible\|focus-within\|outline:\|ring-\|focus-ring" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check for outline removal (anti-pattern unless replaced with alternative)
grep -rn "outline:\s*none\|outline:\s*0\|outline-none" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check for skip navigation link
grep -rn "skip\|Skip\|skip-nav\|skipNav\|skip-to-main\|skip-to-content\|skipToContent" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for ARIA usage
grep -rn "aria-\|role=\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for keyboard event handlers (should have keyboard equivalents for mouse events)
grep -rn "onClick\|onclick\|onMouseDown\|onmousedown" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
grep -rn "onKeyDown\|onkeydown\|onKeyPress\|onkeypress\|onKeyUp\|onkeyup" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for tabIndex usage (negative tabindex removes from tab order)
grep -rn "tabIndex\|tabindex" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

视觉检查清单：

• 标题层级是否按 h1 > h2 > h3 排列，且没有跳级？
• 所有信息性图片是否都有有意义的替代文本？
• 是否可以按合理顺序通过 Tab 键访问所有交互元素？
• 每个交互元素上的焦点指示器是否都清晰可见？
• 所有文本是否都符合 WCAG AA 对比度要求（普通文本为 4.5:1，大号文本为 3:1）？
• 每个表单输入是否都有可见标签（而不只是占位文本）？
• 是否有一个在键盘焦点下显示的“跳转到主要内容”链接？
• 由鼠标事件触发的所有功能是否也能通过键盘触发？
• 界面是否避免仅通过颜色传达信息？

问题记录模板：

[SEVERITY] Accessibility: [description]
  Affected: [component/screen]
  WCAG criterion: [e.g., "1.1.1 Non-text Content" or "2.4.7 Focus Visible"]
  Issue: [e.g., "product images have no alt text — screen readers announce 'image' with no context"]
  Users impacted: [e.g., "screen reader users, keyboard-only users"]
  Fix: [e.g., "add descriptive alt text: alt='Red leather notebook, 5x7 inches, 200 pages'"]

---

严重程度评级指南

严重程度	标准	示例
CRITICAL	某类用户无法使用，核心功能无法访问，用户无法完成关键任务	表单不支持键盘导航，主要操作不可见或无法访问，移动端用户无法注册，关键文本的颜色对比度为零
HIGH	导航令人困惑、用途不明确、存在重大无障碍问题，用户会迷失方向或陷入困境	没有“您在此处”指示，主页未通过 5 秒测试，没有标题层级，缺少表单标签，3 个或更多问题未通过主干测试
MEDIUM	文本过多、模式不一致、存在轻微无障碍问题，用户操作变慢但仍能继续	每个页面都有多余的寒暄语，基本任务需要说明，部分替代文本缺失，部分元素缺少焦点指示器
LOW	润色问题，有改进空间，存在轻微阻碍	某些错误消息过于笼统，空状态显示“No data”，按钮标签可以更具描述性，部分移动端点击目标略小
INFO	可用性测试建议、潜在改进、尚未采用的最佳实践	“考虑与真实用户进行 5 秒测试”，“骨架屏加载状态可以提升感知性能”，“添加面包屑有助于深层导航”

常见错误

错误	修正方法
设计时考虑阅读，而非快速浏览	使用标题、简短段落、加粗关键词和项目符号列表——用户会快速浏览，而不是逐字阅读
使用巧妙的标签，而非常见标签	“职位”总是胜过“职业机会门户”——使用最简单、最常见的标签
在桌面端将导航隐藏在汉堡菜单后	在有足够空间的屏幕上，始终优先采用持续可见的导航，而不是隐藏导航
没有“当前位置”指示	在导航中通过视觉区分（加粗、下划线、强调色）突出显示当前页面／分区
编写使用说明，而不是改进设计	如果需要解释如何使用某项功能，说明设计需要改进，而不是需要文档
通用错误消息	“发生错误”对谁都没有帮助——说明出了什么问题以及如何修复
询问不必要的表单字段	每增加一个字段都会降低完成率——只询问真正需要的信息
只用占位文本作为标签	占位文本在获得焦点时会消失——每个输入项都需要一个持久、可见的标签
为了美观而移除焦点轮廓	用自定义焦点指示器替代默认轮廓——绝不能完全移除
把移动端设计当作事后考虑	优先为移动端设计，或同时进行设计——事后补上的响应式设计总会显得像是事后补上的

---

独立快速检查：树干测试

将此测试用作对任何网站任意页面的快速独立检查。只需 30 秒，即可发现最常见的导航问题。

说明： 打开网站的任意内页（而非首页）。不要滚动或点击，回答以下 6 个问题：

#	问题	检查内容	通过／未通过
1	这是哪个网站？	在固定位置显示的徽标或网站名称
2	我现在在哪个页面？	清晰的页面标题／标题，与点击的内容相符
3	有哪些主要分区？	清晰显示并带有明确分区标签的全局导航
4	我在当前层级有哪些选项？	清晰可见的局部／子导航或内容选项
5	我在整体结构中的什么位置？	“当前位置”指示、面包屑导航或高亮的导航项
6	如何搜索？	无需滚动即可看到搜索框或搜索图标

评分：

• 6/6：导航出色。用户会感到方向明确且信心十足。
• 4-5/6：表现良好，但仍有不足。请解决未通过的项目。
• 2-3/6：存在严重的导航问题。用户会感到迷失。
• 0-1/6：导航存在关键性问题。用户会离开。

---

第 9 阶段：审核与报告

生成可用性报告：

# UX Usability Review Report: [Application/Site Name]
**Date:** [date]
**Reviewer:** [name]
**Scope:** [what was reviewed — screens, flows, user types]
**Method:** Heuristic review based on Don't Make Me Think principles

## Executive Summary
[1-2 paragraph summary of overall usability and key findings. State whether the interface passes the "don't make me think" standard and the trunk test.]

## Trunk Test Results
| Question | Answer | Pass/Fail |
|----------|--------|-----------|
| What site is this? | [answer] | [pass/fail] |
| What page am I on? | [answer] | [pass/fail] |
| Major sections? | [answer] | [pass/fail] |
| Options at this level? | [answer] | [pass/fail] |
| Where am I? | [answer] | [pass/fail] |
| How to search? | [answer] | [pass/fail] |
**Trunk Test Score:** [X/6]

## 5-Second Homepage Test Results
| Question | Answer | Clear? |
|----------|--------|--------|
| What is this site? | [answer] | [yes/no] |
| What can I do here? | [answer] | [yes/no] |
| Why should I be here? | [answer] | [yes/no] |

## Findings Summary
| # | Severity | Finding | Phase |
|---|----------|---------|-------|
| 1 | CRITICAL | [title] | [phase] |
| 2 | HIGH     | [title] | [phase] |
| ... | ... | ... | ... |

## Detailed Findings

### Finding 1: [Title]
**Severity:** CRITICAL / HIGH / MEDIUM / LOW / INFO
**Phase:** [which phase found it]
**Affected Component:** [screen, flow, component]

**Description:**
[What the usability issue is — describe the user's experience, not just the technical problem]

**User Impact:**
[How this affects real users — confusion, abandonment, errors, frustration, exclusion]

**Evidence:**
[What you observed — specific screens, text, interactions, test results]

**Recommended Fix:**
[Specific, actionable improvement — include before/after if helpful]

**Reference:**
[Don't Make Me Think chapter/principle reference]

---
[Repeat for each finding]

## Improvement Priority
1. **Fix CRITICAL findings immediately** — users are blocked or excluded
2. **Fix HIGH findings before launch** — users are confused or lost
3. **Fix MEDIUM findings in the next sprint** — users are slowed down
4. **Fix LOW findings as polish** — users are mildly inconvenienced
5. **Consider INFO suggestions** — for the next round of usability improvement

## Recommended Usability Tests
[Suggest specific usability tests to run with real users, based on findings:
- 5-second test on the homepage with 5 participants
- Task-based test: "Find [X] and complete [Y]" with 3-5 participants
- Navigation test: trunk test on 5 interior pages with 3 participants
- Mobile-specific test on [key flows] with 3 participants]

## Out of Scope / Not Reviewed
[What was explicitly excluded and why]