design-ux

design-ux — 可用性审计（启发式评估）

何时使用

当你需要 UX / 可用性审计 —— 对交互式 UI 进行启发式评估（而不只是视觉上的打磨）时，使用此技能。当某个 UI “感觉不对劲”、“用起来很糟”、难以学习、需要一堵说明墙，或在发布交互式工具/编辑器/应用之前，与 design 一起加载。它会将渲染后的 UI 对照 Nielsen 的 10 项 +…… 进行评分。

可用性 ≠ 美观。design-system/design-spatial 让它看起来正确；这里检查的是初次使用者能否在不被告诉怎么做的情况下完成任务。只要某个 UI “用起来很糟”、需要一段说明文字，或在发布任何交互式内容之前，都可以使用它。

规则 0 —— 用全新的眼光，审视渲染后的产物（继承自 design-spatial §1）

绝不给自己打分。 构建者会为自己的 UI 找理由。将实际运行的 UI 以其默认首次加载状态渲染出来（不是手动摆拍的截图），捕获主任务的交互轨迹，并让一个独立的评判者（未参与构建的 subagent/VLM）来评分。一份描述性的变更清单不是审计 —— 审计是一个全新的评判者在真实屏幕上搜寻出错之处。

流程

1. 说出该 UI 存在的首要任务（例如“裁剪一段片段并设置其速度，然后导出”）。审计是相对于这些任务，而不是相对于抽象的漂亮程度。
2. 渲染默认状态 + 追踪任务。 对首次加载的 UI 截图（宽屏和窄屏 —— 来自 design-spatial §2 的溢出关卡）。然后实际执行首要任务，并对每一步截图。
3. 对每个启发式项评分（见下表），针对产物：通过 / 违规、严重程度（阻断 / 重大 / 轻微）、具体定位的发现，以及具体的修复方案。由独立评判者完成。
4. 排优先级：阻断 → 重大 → 轻微；将触及同一界面的修复归为一组。
5. 修复，然后重新渲染并重新评分。 未对新产物重新审计，就不要声称已修复（verify-outputs-rule）。

启发式评估——逐项评分（Nielsen 的 10 项，1994）+ 交互补充项

#	启发式原则（Nielsen）	在此 UI 中要检查什么
1	系统状态可见性	每个操作都有可见反馈；当前状态/选中项/模式始终清晰可辨；耗时操作显示进度。
2	贴合现实世界	使用已知的隐喻与惯例（如 NLE：片段、修剪手柄、播放头）——而不是用户必须学习的自定义手势。
3	用户控制与自由	撤销/重做、取消、从任何状态都能明确退出；默认可逆。
4	一致性与标准	相同的事物外观/行为一致；遵循平台惯例（⌘Z、Delete、拖拽移动）。
5	错误预防	让无效状态无法出现；破坏性操作需确认或可轻松撤销。
6	识别优于回忆	选项/可供性可见——无需记忆。一大段说明文字就是此原则的失败：如果你必须用文字解释滚动缩放/拖拽边缘/双击，说明可供性缺失。
7	灵活性与效率	默认设置照顾新手；为专家提供快捷键/加速器；无需任何配置即可合理完成首次运行。
8	美观与极简	信号优先于装饰；没有无关元素竞争；主操作界面承载最大的视觉权重。
9	识别/诊断/从错误中恢复	用平实语言描述错误（而非原始 stderr），并提供解决路径。
10	帮助与文档	若 1–9 成立则很少需要；面向任务、贴合情境，而不是页面顶部的说教。

交互补充项（组合使用，不要重复表述）：

• 别让我思考（Krug）： 可供性不言自明；UI 能自我说明。说明段落 ⇒ 可供性欠债（与第 6 条相关）。
• Fitts / 移动时间（design-spatial §3）： 控件应靠近任务结束时光标所在的位置。选中对象的属性应紧邻对象（停靠面板/弹出框），而不是放在远处的面板中——每次编辑都不该是一次往返。
• 手势的可发现性： 任何非显而易见的手势（滚轮、拖拽边缘、双击）都需要可见的可供性（手柄、悬停提示、图标），否则对大多数用户而言它就不存在。
• 视觉权重匹配（design-spatial）： 用户操作的界面（时间线、画布、编辑器）应当是视觉主角——而不是大块被动预览下方的一条细条。
• 渐进式披露（design-thinking UX）： 先呈现 essentials；高级功能按需呈现。但披露 ≠ 隐藏主要工具。
• 工具提示时机： 延迟一组中第一个工具提示（约 300–700ms 的悬停意图），这样光标扫过控件时不会闪现提示；一旦有一个打开，同组其他项立即显示（不逐个重新延迟），便于用户扫视整行。每次悬停都触发是噪音；每个相邻项都重新延迟则显得迟钝。
• 滚动位置恢复： 后退/前进应将用户带回原来的位置，而不是顶部——在详情→返回的往返后丢失位置是一种无声且反复出现的损耗。浏览器默认会这样做；缺陷在于用人工滚动重置或忘记处理客户端路由而破坏了它。
• 提交时的幂等性： 变更类操作携带幂等键，这样双击、重试或网络不稳定导致的重复发送就不会重复产生效果（第二次扣款、重复发帖）。与“请求进行中禁用提交 + 显示 spinner”搭配使用——幂等键是服务端保证，禁用是客户端礼节。

（工具提示 / 滚动恢复 / 幂等性来自 Web Interface Guidelines，vercel-labs/web-interface-guidelines @ 4e799d4，2026-04-06。）

输出格式

一个评分表——Heuristic | Finding (located) | Severity | Fix——然后是优先级修复列表（阻塞项在前）。严重程度：blocker = 无法完成任务 / 主动误导；major = 拖慢或造成困惑；minor = 打磨。

与设计其他部分的关系

• design-spatial 负责先渲染再评审的机制 + Fitts/移动距离 + 溢出检查门；本技能将这一视角专门应用于可用性，并增加了启发式评分卡。
• design-thinking 负责 UX 原则（目标/任务、信息架构、反馈、无障碍、渐进式披露）；本技能将其转化为带评分的审计 + 修复循环。
• 在宣布交互式 UI“完成”之前运行可用性审计——与视觉评审并行，而不是用它来替代。

示例

用户请求：

使用 @design-ux 审查此界面，找出影响最大的设计问题，并提出可直接实施的改进方案。

限制

• 仅当任务明确匹配其上游来源和本地项目上下文时，才使用本技能。
• 在应用更改之前，请验证命令、生成的代码、依赖项、凭据和外部服务行为。
• 不要将示例视为针对特定环境的测试、安全审查或对破坏性/高成本操作的用户批准的替代品。