micro-interactions

Name: micro-interactions
Author: dylantarre

github.com/dylantarre设计与 UI1341.4k 次安装43 周前更新

代码仓库

关于 micro-interactions

这项技能将迪士尼 12 条动画原则用于细小的 UI 反馈和界面细节，并提供按钮、开关、复选框和工具提示的交互模式及时序建议。

主要功能

01微交互的 12 条动画原则
02按钮、开关和复选框模式
03按交互类型提供时长与缓动参考
04关注焦点和动效一致性的指导
05减少动态效果及动画实践建议

适用场景

01为按钮按压和悬停添加反馈
02为开关、复选框和徽标变化制作动画
03设计错误、成功和工具提示反馈
04检查界面对减少动态效果的支持

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions

安装后在 Claude Code 中输入/micro-interactions确认已加载。

详细介绍

微交互动画

将迪士尼的 12 条动画原则应用于细微的 UI 反馈时刻和界面细节。

快速参考

原则	微交互实现方式
挤压与拉伸	按钮按下时压缩，切换开关弹跳
预备动作	悬停状态提示，点击前反馈
演出布局	将注意力聚焦在活动元素上
连续动作 / 关键帧动作	进度变化与状态变化
跟随动作 / 重叠动作	涟漪效果、稳定动作
慢入 / 慢出	灵敏且平滑的过渡
弧线	切换开关、圆形菜单
次要动作	图标响应父级状态
时间	大多数交互为 100-300ms
夸张	清晰但不分散注意力
扎实绘制	一致的变换行为
吸引力	令人愉悦且恰到好处的反馈

原则应用

挤压与拉伸：按钮按下时略微压缩（scaleY: 0.95）。切换开关的滑块碰到边界时会挤压。通知徽标更新时会弹跳。保持微妙——这是 UI，不是卡通动画。

预备动作：悬停状态为点击做好准备。按钮在按下动画前略微上移或放大。可拖动项在开始抓取时抬起。加载旋转器在旋转前先蓄势。

演出布局：清晰地区分活动表单字段。错误状态需要引起注意。成功确认要一目了然。每次只展示一种交互反馈。

连续动作与关键帧动作：进度指示器连续动画（连续动作）。复选框在状态间快速切换（关键帧动作）。两者结合：加载指示器结束时快速切换状态。

跟随动作与重叠动作：涟漪效果从点击位置向外扩散。切换开关略微过冲后稳定下来。复选框填充后，勾号稍作延迟再绘制。菜单项依次错开出现。

慢入 / 慢出：使用快速缓出，营造灵敏的感觉。100ms 的缓出效果让人感觉即时。避免使用线性动画——看起来像是坏了。进入时迅速，稳定时柔和。

弧线：切换开关沿略微弯曲的弧线移动。圆形操作按钮沿径向展开。下拉箭头平滑旋转。菜单项可以沿曲线路径移动。

次要动作：按钮状态变化时，图标颜色随之变化。徽标计数随父级通知更新。输入框聚焦时显示辅助文本。阴影随高度变化。

时间：即时反馈：50-100ms。标准过渡：100-200ms。复杂微交互：200-300ms。对于小型 UI，超过这个时长会显得迟缓。

夸张：足够明显，但不要造成干扰。错误抖动：3-5px，而不是 20px。成功缩放：1.05-1.1，而不是 1.5。微妙但清晰可辨。

扎实绘制：变换原点很重要——按钮从中心缩放，工具提示从指针位置缩放。相似元素的行为应保持一致。动画过程中保持视觉完整性。

吸引力：微交互增添个性，但不会喧宾夺主。用户应感受到界面响应灵敏、充满活力。细小的惊喜会逐步提升整体体验质量。

组件模式

按钮状态

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

切换开关

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

复选框

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

时间参考

交互	时长	缓动
悬停	100ms	ease-out
点击/轻触	100ms	ease-out
切换开关	150-200ms	spring/elastic
复选框	150ms	ease-out
焦点环	100ms	ease-out
显示工具提示	150ms	ease-out
隐藏工具提示	100ms	ease-in
徽标更新	200ms	elastic
表单错误	200ms	ease-out

最佳实践

每个交互元素都需要反馈
禁用状态：不播放动画，降低不透明度
将相关反馈组合在一起
不要在每次变化时都播放动画——过滤不必要的更新
测试关闭动画后的效果——功能不应依赖动画
遵循 prefers-reduced-motion

支持 Markdown

登录后评论