Web 界面设计审计专家：功能详解
Written By
技能练习生
这款 Skill 不仅仅是一个代码检查器，它更像是一个随叫随到的“体验架构师”。它将晦涩的规范化为了具体的能力，涵盖了从首屏加载到最后点击的每一个交互环节。
核心审计维度
按照 Vercel 的官方指南，我们为你提供了一套全方位的审计矩阵。每一项检查都是为了让你的产品在用户眼中显得更专业、更靠谱。
那么，如何使用这份清单呢？作为一个产品经理，你可以通过这份清单快速判断产品的“短板”。如果你发现审计报告中总是出现“无障碍”相关的报错，那就说明团队需要在合规性上加大投入了。
这份审计表不仅是代码检查的标准，更是你与研发沟通“什么是好体验”的共同语言。你可以参考完整的在线规范原文 1来深入了解每条规则背后的逻辑。
| 审计维度 | 核心规则概要 | 交付价值（PM 视角） |
|---|---|---|
| 可访问性 (Accessibility) | 按钮 aria-label、表单 <label>、键盘处理器、语义化 HTML、图像 alt | 确保产品合规且对所有用户（包括视障人士）友好。 |
| 焦点状态 (Focus States) | 显眼的焦点环 (focus-visible)、禁止 outline-none | 键盘操作者的导航“灯塔”，确保交互状态清晰可见。 |
| 表单体验 (Forms) | autocomplete 属性、正确 type 与 inputmode、禁止阻止粘贴、点击区域优化 | 极大地降低填表焦虑，直接提升业务转化率。 |
| 动画规范 (Animation) | prefers-reduced-motion 适配、仅 animate 变换/透明度、可中断动画 | 让界面动起来既丝滑又不会给用户带来晕眩感。 |
| 精致排版 (Typography) | … 与 " 规范、Tabular Numbers、标题折行 (text-wrap: balance) | 在细节处彰显品牌的高级感和专业度。 |
| 内容处理 (Content) | 长文本截断、min-w-0 防止撑破布局、用户生成内容适配 | 确保页面在各种文字长度下都能保持原有的整齐度。 |
| 图像加载 (Images) | 显式宽高设置（防止布局偏移）、首屏 priority 与次屏 lazy | 彻底告别布局偏移 (CLS)，首屏加载速度更快。 |
| 性能基准 (Performance) | 列表虚拟化、批处理 DOM 读写、资源预加载 (preconnect/preload) | 即使面对海量数据也能保持“毫秒级”响应。 |
| 导航与状态 (Navigation) | URL 与 UI 状态同步、原生 <a> 链接支持、二次确认逻辑 | 保护用户的操作状态，防止误操作导致的数据丢失。 |
| 触控与交互 (Touch) | touch-action 优化、消除双击缩放延迟、拖拽状态锁定 | 提升手机端的“指尖灵敏度”，让 Web 像 App 一样流畅。 |
| 布局安全 (Safe Areas) | 刘海屏 env(safe-area-inset-*) 适配、防止非预期滚动条 | 让产品在各种异形屏设备上都能完美“满屏”显示。 |
| 暗黑模式 (Dark Mode) | color-scheme 设置、主题色同步、原生控件样式适配 | 保护用户视力，让你的产品在夜间也同样美观舒适。 |
| 本地化 (Locale) | Intl 格式化日期/数字、检测语言而非 IP | 真正的国际化视野，尊重不同地区用户的文化习惯。 |
| 水合安全 (Hydration) | 受控组件、日期渲染的一致性、减少水合警告 | 提升 Next.js/React 项目的稳定性，减少渲染错误。 |
| 悬停反馈 (Hover) | 悬停状态的视觉反馈、增加交互对比度 | 给用户明确的心理预期，增强界面的引导感。 |
| 文案与内容 (Content & Copy) | 主动语态、标题大小写、特定按钮标签、错误引导建议 | 用更有力、更准确的语言与用户对话。 |
| 反模式拦截 (Anti-patterns) | 禁止缩放拦截、阻止粘贴拦截、内联点击导航拦截 | 揪出那些画蛇添足、严重破坏原生系统良好体验的设定。 |