从目的到落地：motion-design-skill四级决策框架完整教程

从目的到落地：motion-design-skill四级决策框架完整教程

【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill

motion-design-skill 是一个面向 AI 智能体的通用UI 动效设计原则包，把 timing、easing、多元素编排（choreography）和迪士尼 12 条动画原理翻译成了界面动画的“导演思维”。它的核心是一套四级决策框架：先回答“这个动效为什么存在”，再依次确定运动个性、运动方向和落地属性。本文带你完整走一遍这条从目的到落地的决策流水线。

为什么动效需要"先想清楚再做"？

直接让 AI 写动画，最常见的翻车方式是：所有元素同时线性运动、到处用淡入淡出、没有任何品牌性格。motion-design-skill 的解法是"哲学先行、实现无关"——在写任何一行代码之前，先通过三个支柱和四级决策来锁定设计意图（详见 core-philosophy.md）：

🎯 记住一句话：先定情绪，再选属性。下面进入正题——四级决策框架。

Level 1：确定运动类别（它在做什么？）

框架的第一级是把动效归类。不同类别有不同的"优先级"，完整对照表在 decision-framework.md：

在归类之前，框架还要求先回答三个前置问题：目的（提供反馈？引导顺序？营造氛围？）、受众（高压场景要克制，浏览场景可以更丰富）、上下文（忙碌的布局用简单动效，留白多的页面可以大胆）。

Level 2：选择运动个性（它像谁？）

第二级是为整个项目选定一个运动个性原型，并始终贯彻。四种原型各自的时长、曲线、过冲幅度都有明确规定（完整说明见 motion-personality.md）：

💡 默认规则：UI 组件选 Corporate，插画元素选 Playful。品牌动效身份只需锁定三个常量——一条签名曲线（覆盖 80% 动画）、三档时长（快/标准/慢）、一种入场模式。

Level 3：决定运动方向（它往哪走？）

运动方向本身就在"说话"。第三级决策依据方向传达的语义来选择（见 decision-framework.md）：

🧭 实用经验：前进类导航用"向右/向外"，关闭类操作用"向内/向下"，让运动方向和用户心智模型保持一致。

Level 4：选择落地属性（它怎么实现？）

前三级定完后，第四级才轮到具体的动画属性、时长与缓动（选型指南见 property-selection.md、时长速查见 timing-easing-tables.md）：

属性选择——效果目标对应属性组合，比如"入场/离场 → 位移为主 + 透明度/缩放为辅"，"状态变化 → 透明度 + 颜色"。遵守简洁阈值：1 个属性 = 直接，2 个 = 精致，3 个以上 = 可能过载。

时长速查——

方向性缓动规则——入场用减速（ease-out 家族）、退场用加速（ease-in 家族）、屏内运动首尾平滑（ease-in-out）、循环氛围用正弦曲线。并且入场比退场长 30-50%——用户更关心"出现了什么"。

实战：5 步决策快速路径

把四级框架压缩成一条日常执行路径（出自 decision-framework.md）：

1. 目的：反馈 → 短促 + ease-out；入场 → ease-out；退场 → ease-in，时长约为入场的 70%；氛围 → 慢速正弦循环
2. 个性：关键词匹配原型（fun/bouncy → Playful；elegant/luxury → Premium）
3. 属性：取最小必要集合，两个属性是甜点区
4. 时长：查时长表，再按距离和视觉重量调整
5. 缓动：入 = ease-out，出 = ease-in，屏内 = ease-in-out，循环 = sine

📦 多元素场景还有两条"三分之一法则"：任何运动超过 1/3 屏就要加中间关键帧；3 个以上元素同时存在时，同时活跃的不能超过 1/3，stagger 总预算控制在 500ms 以内（详见 choreography.md）。

交付前自检：7 项验收清单

motion-design-skill 要求动效"交付前必须过检"，核心问题来自 quality-checklist.md：

• 目的：功能清晰吗？
• 个性：与品牌/上下文一致吗？
• 重复：看 100 次还会舒服吗？
• 注意力：尊重了用户的焦点吗？
• 层级：强化了重要性排序吗？
• 层次：主运动 + 次级运动 + 氛围层都齐了吗？
• 时长：与元素类型匹配吗？

四条绝不触犯的红线：空间位移禁用线性缓动；重要状态变化禁止只用透明度；运动不超过 1/3 屏不加关键帧；三个运动层缺一不可。遇到"机械感""廉价感"等问题，可对照 troubleshooting.md 查"动画坏味道"与修复方案。

上手方式与资料导航

motion-design-skill 支持 40+ 智能体（Claude Code、Cursor、Codex、GitHub Copilot 等），在 AI 编码工具中安装后，当你编写按钮、卡片、弹窗、加载态、页面过渡或品牌动效时会自动激活。典型提示词比如："为这个卡片组件加一个俏皮的入场动画"、"为表单提交按钮创建 加载 → 成功 → 错误 的状态过渡"。

核心文件导航：

• 主入口与 8 步检查清单：SKILL.md
• 四级决策框架全文：director/decision-framework.md
• 四大个性原型与品牌身份：director/motion-personality.md
• 常用动效配方（入场/退场、状态反馈、多元素）：patterns/
• 时长/缓动速查表：reference/timing-easing-tables.md

🎬 一句话总结：motion-design-skill 的四级决策框架，就是把"我随手写了个动画"变成"我像动效导演一样做了决定"——先定目的，再定个性，然后定方向，最后才谈实现。

【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill