交互与动效规范
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_b668f0b7/interaction-motion-ux。
技能介绍
要解决什么问题
界面「点了没反应」、动效拖泥带水、手势和点击抢事件,往往在评审阶段才暴露,却缺少可执行的验收口径。本技能把交互反馈、动效参数与手势约束写成工程师能直接对照实现的规范,并要求交付物里带上关键帧说明与完成标准,避免只停留在口头「再顺一点」。
技能如何工作
技能按四条主线组织输出与自检:
- 反馈:
点击/提交在 100ms 内应有可感知反馈;长操作用进度或骨架屏;错误就近展示且可纠正;成功不打断用户主任务。 - 动效:常见时长 150–300ms;大区域过渡可略长但避免拖沓;进入/离开曲线区分;尊重
prefers-reduced-motion,提供减弱或关闭。 - 手势:热区符合平台规范;滑动与点击不冲突;撤销行为可预期。
- 交付:给出关键帧说明或参考链接,并写明验收标准(何时算完成)。
在实现或走查 UI 时,按上述条目逐条对照,把动效与交互决策落到可测的指标上。
适用边界
本技能是设计与实现之间的约定清单,不替代具体组件库 API、也不规定视觉品牌;平台手势规范(如 iOS/Android)仍以官方文档为准,技能强调的是冲突避免与可验收的输出格式。
使用场景
- 新功能上线前,按 100ms 反馈与错误就近展示逐项走查点击与提交流程
- 为列表页长加载补进度条或骨架屏,并写明动效时长与减弱动效方案
- 设计侧滑删除与点击跳转并存时,核对热区与滑动/点击不冲突及撤销预期
- 交付动效稿时附带关键帧说明与「何时算完成」的验收条目供研发对照
适合人员
- 负责 Web/App 表单与提交链路的前端,需要把反馈时延写进实现与 Code Review 清单
- 出交互说明的 UX 设计师,希望动效时长与成功/错误态有统一口径而非逐页口头约定
- 做无障碍合规的工程师,需在方案里落实 prefers-reduced-motion 与可关闭动效
- 主导版本验收的产品或设计负责人,要用可勾选的验收标准替代「感觉再顺一点」