mcpField
A
attention-management

attention-management

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

关于 attention-management

这是一项运用 Disney 原则，通过动画诊断和引导用户注意力的设计技能，帮助界面设计师明确视觉层级并减少干扰性动效。

主要功能

  1. 01围绕单一焦点安排动效
  2. 02按重要程度设置动画节奏
  3. 03用预备动作引导视线
  4. 04减少装饰性动效
  5. 05检查动效是否符合层级

适用场景

  1. 01突出主要 CTA
  2. 02安排界面动画顺序
  3. 03找出分散内容注意力的动效

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill attention-management

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

详细介绍

注意力管理

运用 Disney 的原则正确引导用户注意力。

问题表现

  • 用户会错过重要内容
  • 装饰元素会抢夺注意力
  • CTA 不够突出
  • 用户会先关注错误的内容
  • 信息层级不清晰

按原则诊断

舞台呈现

问题：多个元素争夺注意力 修复：一次只让一个元素动起来。为最重要的元素添加动画；让其他元素保持静止。

时机

问题：所有元素的动画速度都相同 修复：主要内容采用更快的动画。次要内容采用更慢或延迟的动画。速度体现重要性。

夸张

问题：不同层级的元素动作都一样 修复：为重要元素添加更醒目的动画。背景元素采用细微的动态效果。

预期

问题：缺少引导视线的铺垫 修复：利用预期引导注意力。主要动作发生前，轻微的动作就能吸引视线。

吸引力

问题：视觉上有趣的是错误的元素 修复：让重要元素在视觉上最吸引人。动画应强化层级，而不是与层级争夺注意力。

快速修复

  1. 一次只播放一个动画 - 依次播放，不要并行播放
  2. 按重要性错开播放 - 最重要的元素先动起来
  3. 减少装饰性动态效果 - 让背景保持平静
  4. 增强 CTA 动画对比度 - 使其在周围内容中脱颖而出
  5. 用动态效果引导阅读顺序 - 从上到下、从左到右

故障排查清单

  • 用户首先会看哪里？（眼动追踪或测试）
  • 动画顺序是否符合重要性层级？
  • 装饰性动画是否足够细微？
  • 主要 CTA 是否具有最强的动态效果？
  • 统计同时播放的动画数量（应为 1-2 个）
  • 测试：隐藏动画后，层级是否仍然清晰？
  • 动态效果是在引导注意力，还是在分散注意力？
  • 静止是否在需要的地方营造了强调效果？

代码模式

/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}

通过动态效果体现层级

优先级动画风格
主要快速、醒目、可能循环播放
次要中速、播放一次
第三级缓慢、细微或静止
背景非常缓慢或不播放动画

评论

支持 Markdown