# Design UX

> UX / 可用性审计 —— 对交互式 UI（不只盯视觉）做启发式评估。当界面"用着别扭""难以上手"，需要长篇说明才能让人会用，或在交互式工具/编辑器/应用上线前，配套 design 一起加载。按 Nielsen 10 项启发式对真实渲染的界面打分，并附...

- Skill: `kscz0000/design-ux` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/design-ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/design-ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/design-ux

---


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

需要做 UX / 可用性审计、对交互式 UI（不只盯视觉）做启发式评估时使用本技能。当界面"用着别扭""难以上手"，需要写一大段说明才能讲清楚，或在交互式工具/编辑器/应用上线前，配套 design 一起加载。按 Nielsen 10 项启发式对真实渲染的界面打分，并附...


可用性 ≠ 美观。design-system/design-spatial 关注的是"看起来对不对"；本技能关注的是**没人教的情况下**，首次使用者能否完成任务。当 UI"用着别扭"、需要一段操作说明才能上手，或在交互式产品上线前，用它。

## 规则 0 —— 用全新的眼光，看真实渲染产物（沿用 design-spatial §1）

**绝不自己打分。** 构建者会本能地给自己做的界面找理由。要用**首次加载的默认状态**（不是精心摆拍好的截图）渲染*实时* UI，捕捉主要任务的**交互轨迹**，由**单独的裁判**（没用参与构建的子代理/VLM）来打分。罗列改动清单不算审计 —— 审计必须是有新鲜感的裁判在真实界面上找出问题。

## 流程

1. **明确界面存在的首要任务**（例如"裁剪一段素材并设置速度，然后导出"）。审计相对这些任务，而不是抽象的"好不好看"。
2. **渲染默认状态 + 追踪任务。** 截首次加载的 UI（宽屏和窄屏都截 —— overflow 闸门见 design-spatial §2）。然后实际跑一遍主要任务，每一步截图。
3. **对每条启发式打分**（见下表）：通过 / 违规、**严重度**（阻塞 / 严重 / 轻微）、定位精准的问题描述、可落地的修复方案。由独立裁判打分。
4. **排优先级**：阻塞 → 严重 → 轻微；把改动集中在同一界面上。
5. **改完，重新渲染并重新打分。** 不重新审计新产物不能声称已修复（验证输出规则）。

## 启发式 —— 逐项打分（Nielsen 1994 年 10 项 + 交互补充）

| # | 启发式（Nielsen）| 在本界面中检查什么 |
|---|---|---|
| 1 | **系统状态可见性** | 每个操作都有可见反馈；当前状态/选中/模式始终清晰；耗时操作有进度提示。 |
| 2 | **匹配真实世界** | 使用公认的隐喻和约定（例如 NLE：片段、裁剪手柄、播放头），不发明需要用户学的自定义手势。 |
| 3 | **用户控制和自由** | 支持撤销/重做、取消、随时退出；默认可逆。 |
| 4 | **一致性和标准化** | 同一事物外观/行为一致；遵循平台约定（⌘Z、Delete、拖动）。 |
| 5 | **错误预防** | 让非法状态不可能出现；破坏性操作要二次确认或可轻松撤销。 |
| 6 | **识别优于回忆** | 选项/操作提示**看得见** —— 不需要记忆。*必须用一大段文字说明就是这一条的失败：如果要解释"滚轮缩放/拖边/双击"这种操作，说明操作提示缺失。* |
| 7 | **灵活性和效率** | 默认值照顾新手；为专家提供快捷键/加速键；首次启动无需配置即可上手。 |
| 8 | **美观和极简** | 信号压过装饰；无关元素不抢戏；*主要工作面* 视觉权重最高。 |
| 9 | **识别/诊断/恢复错误** | 用通俗语言报错（不是赤裸的 stderr），并提供恢复路径。 |
| 10 | **帮助和文档** | 前 9 条做到位就几乎不需要；面向任务、就地呈现，而不是页面顶部一大段讲座。 |

**交互补充项（叠加，不要重复）：**
- **别让我思考（Krug）**：操作提示不言自明；UI 自解释。需要文字说明 → 操作提示债（与第 6 条相关）。
- **Fitts / 移动时间（design-spatial §3）**：控件放在光标完成操作后顺路到达的位置。选中对象的属性面板应该**贴近对象**（贴边/浮层），而不是放在远处的面板 —— 每次编辑都不应该走回头路。
- **手势可发现性**：任何不直观的手势（滚轮、拖边、双击）都需要**可见的操作提示**（手柄、悬停提示、图标），否则对大多数用户来说就不存在。
- **视觉权重匹配（design-spatial）**：用户*操作*的界面（时间线、画布、编辑器）应该是视觉主角 —— 不是夹在大预览图下面的细条。
- **渐进式披露（design-thinking UX）**：核心优先；高级项按需展开。但"披露"≠"藏起来主要工具"。
- **Tooltip 节奏**：组内*首个* tooltip 延迟出现（悬停意图约 300–700ms），避免光标扫过控件时一齐弹出；一旦有一个弹出，**同组成员立即显示**（不重新计算延迟）让用户扫视时连贯。每次悬停都弹是噪音；每个邻居重新延迟又迟钝。
- **滚动位置恢复**：前进/后退让用户回到原位，而不是顶部 —— 详情 → 返回后丢失位置就是隐性重复税。浏览器默认就是这样；用手动重置滚动或客户端路由忘了这事就是 bug。
- **提交的幂等性**：变更操作携带幂等键，保证双击、重试、网络抖动重发不会重复生效（重复扣款、重复发帖）。配对使用"提交中禁用按钮 + 转圈" —— 幂等键是服务端保证，禁用按钮是客户端礼貌。

*（Tooltip / 滚动恢复 / 幂等性条目来源：Web Interface Guidelines，`vercel-labs/web-interface-guidelines` @ `4e799d4`, 2026-04-06。）*

## 输出格式

一张打分表 —— `启发式 | 问题描述（带定位）| 严重度 | 修复方案` —— 然后是按优先级排列的修复清单（阻塞项优先）。严重度：**阻塞** = 无法完成任务 / 主动误导；**严重** = 拖慢或让人困惑；**轻微** = 表面修饰。

## 与 design 体系其他技能的关系

- **design-spatial** 负责"先渲染再审视"机制 + Fitts/移动时间 + overflow 闸门；本技能把这个视角专门落到*可用性*，并加上启发式打分卡。
- **design-thinking** 负责 UX *原则*（目标/任务、信息架构、反馈、可访问性、渐进式披露）；本技能把它们变成*带打分的审计 + 修复闭环*。
- 在宣布交互式 UI "完成"**之前**做可用性审计 —— 与视觉审视并行，而不是替代。

## 使用限制

- 仅在任务明确匹配上游来源与本地项目上下文时使用本技能。
- 应用前，请先验证命令、生成的代码、依赖、凭证及外部服务行为。
- 不要把示例当作环境专属测试、安全审查，或破坏性/高成本操作的用户审批的替代品。