mcpField
U
urgency-action

urgency-action

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

关于 urgency-action

面向界面设计者的紧迫感与行动导向动画技能，提供吸引注意力、突出行动号召的动效原则和实现建议，并强调只在真实限时情境中使用紧迫感。

主要功能

  1. 01快速且有力的动效
  2. 02突出行动号召
  3. 03脉冲、摇晃与弹跳模式
  4. 04CSS 缓动曲线建议

适用场景

  1. 01限时促销提示
  2. 02库存不足警告
  3. 03倒计时与通知徽标
  4. 04表单错误反馈

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill urgency-action

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

详细介绍

紧迫感与行动动画

创建能够激励用户立即响应并传达时间紧迫性的动画。

情感目标

紧迫感会让人产生必须立即行动的强烈需求。推动行动的动画通过动态、向前的运动吸引注意力、营造势头并消除犹豫。

紧迫感的迪士尼动画原则

挤压与拉伸

进行锐利、有冲击力的形变。落地时快速挤压（15-25%）以营造冲击感。运动过程中快速拉伸以表现速度和力量。

预备动作

时间极短或没有预备动作（0-50ms）。紧迫感意味着没有时间准备。动作应直接、即时。跳过蓄势过程，以便立即响应。

演出布局

将注意力集中在号召行动上。采用高对比度，并隔离动作。其他所有元素都应弱化。突出紧急元素。

连贯动作

营造难以预测、吸引注意力的运动。用于脉冲、抖动或紧急指示器动画。

跟随动作与重叠动作

尽量减少跟随动作。干脆利落地停止，传达果断感。不要拖延——立即结束才能推动行动。

缓入与缓出

采用不对称节奏：快速开始，突然结束。使用初始速度较高的 ease-out。使用 cubic-bezier(0.0, 0, 0.2, 1) 实现强烈加速。

弧形运动

使用直接的直线路径来表现速度。紧迫感应走最短路径。弯曲路径显得悠闲——请使用直线。

次要动作

使用吸引注意力的脉冲、辉光或抖动。让徽标计数器弹跳。细微但持续的运动能吸引视线。

时间

快速有力（100-200ms）。快速动画能营造活力。脉冲间隔：1-2 秒，以持续吸引注意力而不令人厌烦。

夸张

中等到较强（20-40%）。放大的运动能吸引注意力。通知出现时使用幅度较大的弹跳，错误提示时加强抖动。

扎实的造型

使用有力、醒目的形状。采用能吸引注意力的高对比度图形。不要含蓄——清晰度至关重要。

魅力

使用醒目的颜色（红色、橙色）。采用强烈对比。使用不对称、动态的构图，营造活跃而非静止的感觉。

时间建议

元素时长缓动
注意力脉冲150-200msease-out
CTA 弹跳200-300msease-out-back
倒计时跳动100mslinear
错误抖动300-400msease-in-out

CSS 缓动

--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

吸引注意力的模式

@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes urgent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

适用场景

  • 限时优惠和促销
  • 库存不足警告
  • 倒计时
  • 表单验证错误
  • 通知徽标
  • 号召行动按钮
  • 结账紧迫提示

伦理提示

诚实地使用紧迫感。虚假的稀缺性会损害信任。仅用于真正有时效性的情况。

评论

支持 Markdown