关于 interface-affordances
Interface Affordances 是一项设计技能，用于检查界面操作是否清晰可见，且实际行为是否符合视觉提示。它提供针对指针、触摸、键盘和辅助技术的检查要点。
主要功能
- 01让视觉提示与实际行为一致
- 02关键操作不依赖悬停才能发现
- 03按输入方式检查目标区域
- 04检查按下、选中和禁用状态
- 05核对无障碍名称、角色和状态
适用场景
- 01检查界面控件是否易于发现
- 02检查触摸和键盘交互提示
- 03审查禁用和加载中的控件
- 04评估控件的无障碍标签与状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/interface-affordances确认已加载。
详细介绍
界面可供性
可供性让可能执行的操作变得清晰可见。如果用户无法判断自己可以做什么，那么即使代码正常运行，交互也不完整。
默认原则
- 视觉提示必须与实际行为一致。
- 关键操作不能仅依赖悬停来触发。
- 点击目标和间距应与输入方式相匹配。
- 状态变化应清楚易懂（按下、选中、展开、禁用、加载中）。
- 装饰性动画不得冒充可供性。
推荐 / 避免
| 推荐 | 避免 |
|---|---|
| 为主要操作提供常驻提示 | 只能通过悬停发现关键控件 |
| 明确显示按下、选中、展开状态 | 静止状态和激活状态的样式完全相同 |
| 提供适合光标、键盘和触控操作的目标 | 点击区域过小，图标却很大 |
| 禁用样式同时禁用相应行为 | 控件显示为灰色，但仍会触发处理程序 |
| 使用能说明操作的标签 | 只有图标、没有无障碍名称的控件 |
不同输入模式下的检查
- **指针：**悬停可以增强体验，但不能成为执行关键操作的门槛。
- **触控：**提供清晰可见的点击目标，避免依赖悬停的界面。
- **键盘：**焦点样式是可供性的一部分，不是事后补充。
- **AT：**名称、角色和状态应传达与视觉效果所表达的可能操作一致的信息。
审查清单
- 新用户能否判断哪些内容可以交互？
- 每个交互元素是否都有明显的状态变化？
- 不悬停时，关键操作是否仍然可见？
- 图标是否有名称？
- 禁用和加载状态在外观和行为上是否都体现为禁用或加载中？
- 减少动态效果或使用触控设备的用户是否仍能发现这些操作？
源文
- 关于可供性
- 产品令人愉悦的十项原则
- 关于减少动态效果
评论
支持 Markdown