关于 motion-design
motion-design 是一项为界面动画应用设计约束的 Skill，面向希望让动效传达反馈、方向、强调或愉悦感的设计工作，并避免无意义的运动。
主要功能
- 01按用途为动画分类
- 02依据用途设定时长范围
- 03采用一致的缓动曲线
- 04区分进入与离开的缓动方式
- 05避免干扰性的动效模式
适用场景
- 01为界面设计制定动效规则
- 02检查动画是否服务于明确目的
- 03减少分散注意力或多余的转场
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/motion-design确认已加载。
详细介绍
动效设计
动画有四种用途。如果不符合其中任何一种，就应移除。
使用方法
/motion-design将动效设计约束应用于此对话。
约束
四种用途
- 反馈（50-150ms）：确认已收到操作。按钮按下、切换开关、提交表单。
- 方向指引（200-400ms）：展示空间关系。侧边栏滑入、模态框从触发位置缩放展开。
- 强调（300-600ms）：吸引注意力。通知脉冲、新元素淡入。应少用且有意义。
- 愉悦（时长不定）：营造情感效果。个性化的加载动画、完成时的庆祝效果。应简短、可跳过，且绝不阻塞操作。
- MUST 按用途为每个动画分类。如果不符合任何一种用途，就应移除。
动效设计的品味标志
- 克制。动效设计最出色的界面，是那些让人察觉不到动画存在的界面。
- 整个系统使用一致的缓动曲线。
- 基于物理规律的运动（进入时使用缓出，离开时使用缓入，UI 动效绝不使用线性缓动）。
- 时长应与用途相称：越偏向功能性，速度越快。
反模式
- 时长超过实际加载时间的加载动画
- 延迟内容访问的页面过渡效果
- 为每个元素都添加悬停效果（动效应引导注意力，而不是制造噪声）
- 在功能性元素上使用弹跳／弹性缓动（活泼的缓动应用于庆祝效果，而非导航）
- 为了动效而动效
评论
支持 Markdown