UE 交互体验审查

要解决什么问题

frontend-design 关心页面「好不好看」，但很多产品问题出在交互：用户不知道能不能点、点了有没有生效、流程要多走几步。本技能用 UE（User Experience / 交互体验） 视角，把「好不好用」拆成可检查的条目，避免审查变成主观吐槽。

典型痛点包括：点击无反馈导致重复提交、弹窗挡住需要对照的背景内容、触屏仍依赖 hover、破坏性操作缺少确认等——这些在 SKILL 里对应 8 个维度 的检查项与常见反模式。

技能如何工作

提供两种模式，共用同一套评估框架：

• 审查模式（Review）：你给出页面代码、截图 URL、组件描述或路由路径，技能按维度逐项审查，输出结构化 Markdown 报告，并必须说明维度覆盖率（哪些查了、哪些因资料不足跳过）。
• 指导模式（Guidance）：你在编码阶段描述功能或组件，技能按 checklist 原则给出交互设计建议，同样要标注建议主要覆盖哪些维度（例如 D4 弹窗、D3 操作流程）。

八个维度概览：

1. D1 交互反馈 — 操作后是否有视觉/Toast/加载态等明确反馈
2. D2 状态可见性 — 步骤、Tab、互斥状态是否让用户知道「现在在哪」
3. D3 操作流程与效率 — 步骤是否可减、批量与快捷键等
4. D4 弹窗与覆盖层 — ESC/蒙层关闭、焦点回归、避免嵌套弹窗
5. D5 布局与空间利用 — 宽屏利用、滚动区、响应式与触控目标尺寸
6. D6 一致性 — 同类操作、文案、空/加载/错误态是否统一
7. D7 错误预防与恢复 — 确认、即时校验、错误文案与输入保留
8. D8 可发现性 — 可点元素是否可识别、隐藏操作是否有暗示

严重等级分为 🔴 严重、🟡 一般、🟢 建议，便于排修复优先级。

适用边界与注意点

• 与 frontend-design 分工明确：需要视觉/样式评估时，应在本技能完成 UE 后再调用 frontend-design，不要混在一轮里当成同一类问题。
• Checklist 来自真实项目审查经验，但若你未提供完整交互路径或仅给静态截图，部分维度可能被标注为未覆盖——以报告中的覆盖率说明为准，勿默认「全绿」。
• 指导模式输出的是设计原则与 checklist 引用，不是替代你的产品决策或用户研究。