从情绪到动效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-skillmotion-design-skill 是一个面向 AI Agent 的通用动效设计技能库核心就是教你或你的 AI 助手在写动画之前先想清楚用户应该感受到什么。它的灵魂工具正是本篇主角——情绪映射表与颜色心理学把快乐、紧迫感、优雅这类抽象感受翻译成具体的时长、缓动曲线和运动路径让每一次界面动效都带着明确的情绪意图。为什么情绪映射是动效设计的第一步传统做法是先调参数再碰运气而 core-philosophy.md 提出的三支柱哲学认为情绪意图Emotional Intent必须排在所有技术决策之前支柱回答的问题决定什么情绪意图观看者应该感受到什么缓动、时长、幅度视觉叙事这个微故事讲什么铺垫 → 动作 → 收尾动效工艺怎么让它可信物理感、次级运动、路径一句话先定情绪再选参数。这就是情绪映射表存在的全部意义。核心速查10种情绪 → 动效参数对照表完整表格位于 emotion-mapping.md这里整理了一份新手友好的速查版情绪性格特征运动路径缓动曲线时长 喜悦/惊喜弹跳、过冲向上弧线ease-out-back200-400ms 平静/安宁顺滑、流动平缓曲线sine ease-in-out500-1000ms⚡ 紧迫/警示干脆、快速直线ease-out100-200ms 悲伤/沉重缓慢、下沉下垂曲线cubic ease-in-out600-1200ms 惊讶/冲击突然、扩散径向向外ease-out-expo150-300ms 优雅/精致缓慢、克制长弧线(0.4, 0, 0.2, 1)400-700ms 俏皮弹跳、不规则波浪弧线ease-out-back200-350ms 自信直接、果断水平直线ease-out200-400ms 好奇探索、多样混合、环形varied300-500ms 温柔柔和、细腻极淡曲线soft ease-in-out600-1000ms使用技巧做成功提示选喜悦 自信做错误提示选轻微紧迫做加载态选平静——先查表定情绪再取对应参数动效就不会没灵魂。路径即情绪语言8种运动轨迹的情绪暗示除了参数元素走什么路线也在偷偷表达情绪路径类型情绪暗示棱角/锐利紧张、紧迫、机械感圆润/平滑放松、友好、有机感螺旋俏皮、幻想感斜向直线动感、有目的垂直向上成长、成就垂直向下沉降、重力感水平方向旅程、进度径向向外爆发、释放径向向内聚焦、收束举个例子表单提交成功的对勾用向上弧线 弹跳过冲传达达成而删除元素的离场动作用向下的下沉曲线传达一种体面的告别。颜色心理学7种颜色 × 动效搭配公式颜色是情绪的另一个入口。emotion-mapping.md 中的颜色心理学部分给出了一张经典对照表颜色情绪联想推荐动效搭配 蓝信任、平静平滑、中等时长的过渡 绿成功、成长向上、扩张、轻微过冲 红警示、紧急锐利、快速、水平抖动 橙能量、温暖弹跳、斜向路径 紫高端、神秘缓慢揭示、优雅缓动 黄乐观、注意快速脉冲 青现代、清晰干净、干脆的过渡4条颜色过渡黄金法则颜色怎么变比变成什么颜色更重要✅成功态过渡到绿色不要一开始就是绿色错误态红色闪烁一下再回落不要持续红着警告态用黄色/琥珀色脉冲传达紧迫感⚪中性态改用透明度变化而不是换色场景化默认情绪遇到问题直接查表不确定某个场景该用什么情绪项目内置了场景默认值拿来就用场景默认情绪组合表单成功喜悦 自信校验错误轻微紧迫页面加载平静 自信导航切换自信通知提醒轻微惊讶加载中平静新手引导好奇 惊喜仪表盘平静 自信购买完成喜悦 自信删除/移除平静体面离场情绪强度分档别把日常动效做成烟花同样的情绪劲儿要对强度特征适用场景低细微的透明度变化、极小位移氛围感、日常操作中可见但不抢戏大多数 UI 交互高吸引注意力、大幅度位移错误、庆祝、引导⚠️ 新手最常见的翻车点给复制成功这种日常反馈用了高强度动效。记住——高强度留给真正重要的时刻用户才能被真正的情绪打中。三步上手把情绪映射表用起来结合 SKILL.md 中的 8 步检查清单新手可以这样简化成三步定情绪— 用上面的场景表锁定情绪如表单成功 喜悦 自信取参数— 从情绪映射表抄走时长、缓动、路径再对照 motion-personality.md 的四大人格Playful / Premium / Corporate / Energetic确认品牌调性一致补细节— 按 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考