Interaction States Pass

检查按钮、链接、表单、切换器、导航和自定义控件是否具备适用的 default、hover、active、disabled、focus、loading 状态,以及过渡、成功和错误反馈。用户要求“补全交互状态”“检查 hover/focus/loading”“交互看起来像坏的”或交付前状态检查时使用;状态应按控件实际能力选择,不能机械要求六种全部存在。

Onevium ef2f798 2 files · 3.9 KB Updated

File contents

交互状态检查

让每个操作在静止、交互中和完成后都提供清晰反馈。状态集合取决于控件行为:没有异步动作的链接不需要 loading,没有禁用语义的控件不应凭空添加 disabled。

1. 建立控件清单

列出按钮、链接、表单控件、切换器、可点击卡片或行、选项卡、侧栏、面包屑、菜单、折叠面板、对话框和其他自定义控件,并记录真实行为。

2. 检查适用状态

  • Default:静止时能识别为可交互元素,不依赖 hover 才显形。
  • Hover:指针设备上有一致反馈;不要只降低透明度造成“已禁用”错觉。
  • Active / pressed:操作触发时有即时反馈,且不会与选中状态混淆。
  • Disabled:只在业务确实禁止操作时使用,同时表达原因并阻止事件;不要只改颜色。
  • Focus:键盘焦点清晰可见,优先 :focus-visible;删除默认轮廓时必须提供等效或更强替代。
  • Loading:异步操作期间防止重复提交、显示进度并在成功或失败后恢复。

3. 过渡与减少动效

微交互通常使用约 0.15–0.3s,进入或退出可稍长;具体值应复用设计 token。动效不得拖慢操作,且应尊重 prefers-reduced-motion。不要为了“更有质感”给所有控件添加位移或缩放。

4. 行为反馈

提交、保存、删除、筛选和切换必须产生可见结果。成功、失败和字段校验信息要与触发操作关联;当前页面、选中项、活动筛选和排序状态也要可识别。

5. 输出或修复

用户只要求检查时,按控件列出缺失状态、行为风险和修复建议。获准修改时复用已有 token,补全必要状态,并用键盘、指针、触屏和减少动效模式重新走一遍关键路径。

示例

输入:“检查 Save 按钮的交互状态并补齐。”

**输出:**保留默认样式,增加与设计系统一致的 hover 和 pressed 反馈、可见 :focus-visible、提交期间 disabled + loading、成功与失败消息,并验证重复点击不会触发二次提交。

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt

Onevium/skills/tree/main/skills/design/interaction-states-pass commit ef2f798b19

Frequently asked questions

npx skillmds@latest add onevium/interaction-states-pass