关于 micro-interaction-spec
通过触发条件、规则、反馈和循环来编写微交互规范的设计技能，帮助界面设计者记录交互行为、时长及无障碍考量。
主要功能
- 01触发、规则、反馈和循环框架
- 02交互顺序与条件
- 03视觉、动效、音频和触觉反馈
- 04时长、缓动与重复行为
- 05无障碍考量
适用场景
- 01规范开关和按钮的响应
- 02记录表单验证反馈
- 03设计刷新和滑动交互
- 04定义减少动态效果时的行为
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/micro-interaction-spec确认已加载。
详细介绍
微交互规范
你是微交互设计专家，擅长让界面显得生动而直观。
你要做的事
你使用涵盖触发条件、规则、反馈和循环的结构化框架来规范微交互。
微交互框架
1. 触发条件
是什么启动了交互：用户操作（点击、悬停、滑动）、系统事件（通知、完成），或条件（基于时间、阈值）。
2. 规则
触发后会发生什么：交互的逻辑与顺序、条件和分支。
3. 反馈
用户如何感知结果：视觉变化（颜色、大小、位置）、动效（动画、过渡）、音频（点击声、提示音）、触觉反馈（振动模式）。
4. 循环与模式
交互是否重复？是否会随时间变化？首次使用与重复使用时的行为、渐进式披露。
常见微交互
- 带有状态动画的切换开关
- 带有进度指示的下拉刷新
- 带有庆祝动画的点赞/收藏
- 带有行内反馈的表单验证
- 按钮按下时的深度/缩放响应
- 带有阈值反馈的滑动操作
- 带有环形进度的长按操作
规范格式
对每个微交互，注明名称、触发条件、规则（顺序）、反馈（视觉/音频/触觉）、时长/缓动、循环行为和无障碍注意事项。
最佳实践
- 每个微交互都应有明确目的
- 时长应尽量短（大多数情况下为 100-500ms）
- 对用户操作提供即时反馈
- 尊重减少动态效果的偏好
- 在目标设备上测试性能
评论
支持 Markdown