企业官网建设流程全解析

从情绪到动效：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 Agent 的通用动效设计技能库，核心就是教你（或你的 AI 助手）在写动画之前先想清楚"用户应该感受到什么"。它的灵魂工具正是本篇主角——情绪映射表与颜色心理学：把"快乐、紧迫感、优雅"这类抽象感受，翻译成具体的时长、缓动曲线和运动路径，让每一次界面动效都带着明确的情绪意图。

为什么情绪映射是动效设计的第一步

传统做法是先调参数再碰运气；而 core-philosophy.md 提出的"三支柱"哲学认为，情绪意图（Emotional Intent）必须排在所有技术决策之前：

一句话：先定情绪，再选参数。这就是情绪映射表存在的全部意义。

核心速查：10种情绪 → 动效参数对照表

完整表格位于 emotion-mapping.md，这里整理了一份新手友好的速查版：

📌使用技巧：做成功提示选"喜悦 + 自信"，做错误提示选"轻微紧迫"，做加载态选"平静"——先查表定情绪，再取对应参数，动效就不会"没灵魂"。

路径即情绪语言：8种运动轨迹的情绪暗示

除了参数，元素走什么"路线"也在偷偷表达情绪：

举个例子：表单提交成功的对勾，用向上弧线 + 弹跳过冲传达"达成"；而删除元素的离场动作用向下的下沉曲线，传达一种"体面的告别"。

颜色心理学：7种颜色 × 动效搭配公式

颜色是情绪的另一个入口。emotion-mapping.md 中的颜色心理学部分给出了一张经典对照表：

4条颜色过渡黄金法则

颜色"怎么变"比"变成什么颜色"更重要：

1. ✅成功态：过渡到绿色（不要一开始就是绿色）
2. 🔴错误态：红色闪烁一下再回落（不要持续红着）
3. 🟡警告态：用黄色/琥珀色脉冲传达紧迫感
4. ⚪中性态：改用透明度变化，而不是换色

场景化默认情绪：遇到问题直接查表

不确定某个场景该用什么情绪？项目内置了场景默认值，拿来就用：

情绪强度分档：别把日常动效做成烟花

同样的情绪，"劲儿"要对：

⚠️ 新手最常见的翻车点：给"复制成功"这种日常反馈用了高强度动效。记住——高强度留给真正重要的时刻，用户才能被真正的情绪打中。

三步上手：把情绪映射表用起来

结合 SKILL.md 中的 8 步检查清单，新手可以这样简化成三步：

1. 定情绪— 用上面的场景表锁定情绪（如：表单成功 = 喜悦 + 自信）
2. 取参数— 从情绪映射表抄走时长、缓动、路径；再对照 motion-personality.md 的四大人格（Playful / Premium / Corporate / Energetic）确认品牌调性一致
3. 补细节— 按 state-feedback.md 中的配方叠加次级动效（阴影、图标位移）和氛围层，最后用 timing-easing-tables.md 校准时长

💡 进阶提示：选定一个人格原型后，给项目定"品牌动效三件套"——一条签名缓动曲线（覆盖 80% 的动画）、三档时长（快/标准/慢）、一种入场模式，整套产品的气质立刻就统一了。

结语

动效设计的秘诀不是背公式，而是先有情绪，后有参数。motion-design-skill 的情绪映射表和颜色心理学，本质上是把资深动效师脑中"感觉对了"的直觉，变成了人人可查、AI 可用的决策表。下次再写一段界面动画，不妨先问自己一句：这个动效，想让用户感受到什么？

【免费下载链接】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