mcpField
F
feedback-indicators

feedback-indicators

github.com/dylantarre设计与 UI132499 次安装43 周前更新
代码仓库

关于 feedback-indicators

一项运用迪士尼 12 条动画原则设计操作确认动画的设计技能，涵盖成功与错误反馈的时序、动效、无障碍要求和实现模式。

主要功能

  1. 01基于 12 条原则的反馈指导
  2. 02按反馈类型提供时序建议
  3. 03成功与错误动效模式
  4. 04文本标签与减少动态效果指导

适用场景

  1. 01设计表单验证动画
  2. 02制作成功与错误通知
  3. 03添加无障碍的保存状态指示

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill feedback-indicators

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

详细介绍

反馈指示动画

将迪士尼 12 条原则应用于操作确认动画。

原则应用

挤压与拉伸（Squash & Stretch）：成功勾选标记可以缩放并产生过冲。绘制时压缩，完成时扩展。

预备动作（Anticipation）：反馈出现前短暂蓄势。在确认前准备 50ms。

演出布局（Staging）：反馈出现在操作位置。按钮显示勾选标记，字段显示验证结果。

连续动作与关键姿势（Straight Ahead vs Pose-to-Pose）：定义反馈状态：中性 → 处理中 → 成功/错误。

跟随动作与重叠动作（Follow Through & Overlapping）：图标先动起来，随后显示标签。错开确认元素的出现时间。

缓入缓出（Slow In/Slow Out）：成功：缓出（自信地呈现）。错误：缓入缓出（摇晃后平稳停下）。

弧线运动（Arcs）：勾选标记沿弧线绘制，而不是沿直线。错误 X 自然交叉。

次要动作（Secondary Action）：绘制勾选标记 + 颜色变化 + 缩放弹跳，呈现丰富反馈。

时间：

  • 即时反馈：100-200ms（表单验证）
  • 成功确认：300-500ms（勾选标记绘制）
  • 错误提示：400ms（摇晃 + 消息）
  • 自动消失：出现后 2000-4000ms

夸张（Exaggeration）：成功值得庆祝。缩放过冲至 1.2，使用醒目的颜色和自信的动作。

扎实绘制（Solid Drawing）：反馈图标必须一目了然。在 100ms 或更短时间内识别。

吸引力（Appeal）：积极反馈应让人感到愉悦。负面反馈应坚定但不具惩罚性。

时间建议

反馈类型持续时间自动消失缓动
行内验证150ms否缓出
勾选标记绘制400ms3000ms缓出
成功提示框300ms4000ms缓出
错误摇晃400ms否缓入缓出
错误提示框300ms6000ms缓出
保存指示器200ms2000ms缓出

实现模式

/* Checkmark draw */
.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 400ms ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Success with scale */
.success-icon {
  animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.error-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inline validation */
.field-valid {
  animation: valid-pop 200ms ease-out;
}

@keyframes valid-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

SVG 勾选标记模式

<svg class="checkmark" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#10B981"/>
  <path
    class="check-path"
    d="M7 13l3 3 7-7"
    stroke="white"
    stroke-width="2"
    fill="none"
  />
</svg>

自动消失模式

// Show success, auto-hide
element.classList.add('success-visible');

setTimeout(() => {
  element.classList.remove('success-visible');
  element.classList.add('success-hidden');
}, 3000);

关键规则

  1. 反馈必须在操作后 100ms 内出现
  2. 成功状态：短暂庆祝，不要停留太久
  3. 错误状态：持续显示，直到用户确认
  4. 为保证无障碍性，图标旁始终提供文本
  5. prefers-reduced-motion：立即切换状态，不播放动画

评论

支持 Markdown