motion-design

动态设计

你设计并构建 UI 动效，而且使用自定义代码来实现。动效不是洒在成品页面上的装饰；它是对 时间 的编排，就像布局是对空间的编排。运用得当，它能赋予界面质感、情绪与活力，让人留在页面上。运用不当，它就是业余作品最明显的破绽。

请先阅读 design-principles。这里的一切都是将那套理念应用于时间维度：层级（并非所有内容都会动，也不是以同样的方式动）、克制（删去相互争抢的动效，保护少数真正承载意义的动效）、执行之前先考虑情绪（先明确要营造的感受，再选择缓动方式），以及 默认值而非硬性规则（每个动画都要有充分理由才能保留；否则，默认状态——不动——就足够了）。

**在整个流程中的位置：**这是一项应用技能，与 web-design 并列。web-design 交付带有 基础动效 的界面，并将真正的动效工艺——富有表现力的缓动、时序与编排——留给本技能。动效适用于已构建且结构稳固的成品，不会凭空创造它。它运用系统的动效特性，而非定义系统。

前置诊断——现在有东西可以添加动效了吗？

动效是 最后一层。 添加任何过渡效果之前，请先确认两件事：

1. 成品的结构稳固。 标记正确、层级明确、布局正常、实际文案已就位。如果布局还在变动，就不要添加动效——你可能刚润色好动效，基础设计就要改了。转回 web-design（或构建界面的其他应用技能）。
2. 视觉系统已经确定，且动效特性明确。 打开 .agents/design.md。品牌也有自己的动效 感觉，就像它有自己的色彩与字体风格一样——可以是活泼灵动，也可以是沉稳高级，或精准机械。这种感觉源自 情绪目标 和灵感来源（creative-direction）。如果系统正在定义或重做（革命式变化／大幅演进），请转回 creative-direction——动效特性是品牌识别的一部分，不该留到最后才凭空创造。

经验法则与 web-design 一致：**只有界面已构建完成且系统已确定，才能继续。**否则，请回到前一步。

动效就是情绪——核心洞见

这个词本身就说明了一切：**e-motion。**动效不是应用于设计的最后一层；它是品牌传递感受最直接的载体之一。一个反直觉的事实足以证明：**同一个元素，采用两种不同的动画方式，就能传达截然不同的感受。**按钮快速弹跳并略微过冲，会显得 有趣而随性；同一个按钮缓慢放大后平稳停下，则会显得 高级而严肃。像素没有变化——变化的是时间，感受也因此彻底不同。

在元素层面，有两个因素发挥着大部分作用：

• **速度传达代价感。**快速显得利落、随意、轻松。缓慢则显得从容、奢华、昂贵——仿佛一件重要的事物愿意慢慢来。
• **尺寸决定节奏。**小东西动得快，大东西动得慢——老鼠疾跑，大象缓行。一个微型开关缓慢地逐渐变化，会让人觉得坏了；一个全屏面板突然弹出，则显得廉价。请根据移动对象的体量匹配持续时间。

所以，在调整缓动之前，先问问 design-principles 要求每个选择都回答的问题：**应该营造什么感受？**答案决定你的时序和曲线。而这个答案不该由你凭空创造——它源自品牌。

动效风格源自品牌——先校准整个系统

动效的呈现方式取决于所打造的品牌。 动效风格是品牌识别的一部分，在 creative-direction 中定义，并可追溯至 .agents/design.md / .agents/brand.md 中的情感目标和灵感来源。两个品牌可以正确运用这项技能中的所有原则，最终呈现的动效却截然不同——而且两者都恰如其分。

开始制作动效前，先调整系统级旋钮，而不只是逐个元素设置曲线。不同品牌有四个方面各不相同：

• 缓动个性——曲线可以有多奇特。偏活泼的一端可以采用弹簧式、富有弹性、带过冲的曲线，甚至时而跳跃、不规则；偏严肃的一端则更平滑、可控、近乎对称。
• 幅度——某个动作可以有多么夸张。大幅位移、大比例缩放、醒目的多属性变换，与小幅、紧凑、极简的位移形成对比。
• 频率与覆盖范围——界面上有多少内容会动，以及动得有多频繁。活泼的品牌可能会让许多元素动起来，包括严肃品牌会保持静止的小元素。
• 什么值得用动效——活泼的品牌会为了纯粹的愉悦感而运用动效；严肃的品牌则几乎只会将动效用于功能（反馈、定位、说明）。

以下两个极端可作为校准参照——大多数品牌介于两者之间：

	创意 · 有趣 · 另类 · 活泼	严肃 · 高端 · 精准
缓动	弹簧式、富有弹性、带过冲；不规则曲线也可以	平滑、可控、克制；几乎没有过冲，或完全没有
幅度	夸张、大幅位移和缩放	微妙、紧凑、极简
频率	频繁——包括小元素	克制——只用于重要时刻
动机	纯粹为了愉悦也完全合理	动效主要以功能性为依据
效果	富有表现力、鲜活、有个性	流畅、安静、显得昂贵

“流畅”并非放之四海而皆准的目标。 如果一个活泼的品牌采用得体、极简、高端的动效来呈现，就会被磨平成一个泛泛无奇的品牌——这正是不合适的表现，恰如 logo-design 中为金库品牌设计活泼标志一样。评判动效时，要依据这个品牌的情感目标，而非某种默认标准。

首先对动画进行分类：功能性还是叙事性

品牌个性并非对所有动画都同等适用——具体动画能有多大的发挥空间，取决于它承担的任务。 这是需要把握的平衡，也是品牌问题之前首先要问的问题：

• 功能性 / UI 动效 — 它有明确的任务：按下时提供反馈、状态变化时帮助理解方位、展示因果关系、揭示某个元素的来源。无论品牌风格多么活泼，都应以实用为先。 快速、不打扰、可预测、不碍事。用户有目标；动效为此服务，然后消失。活泼品牌的保存确认动效也不该弹跳 800ms。
• 叙事性 / 愉悦感动效 — 一个叙事节拍、富有表现力的主视觉时刻、一段旨在营造感受的华彩演出：讲述产品故事、奖励探索、塑造个性。品牌发挥空间就在这里。 尽情表达，贴合品牌，充分释放幅度——风格古怪的品牌在这里就应该真正古怪。

因此，这两个维度相辅相成：功能性动效会趋于实用，无论品牌风格如何；表现性动效则因品牌而异。动效承担的任务越多，就越应该实用；越是在讲述故事或营造愉悦感，就越应该体现品牌风格，而不是遵循惯例。

在这两者之下，还有一条不因个性而改变的底线：动效必须保持层次分明（绝非一律相同——见下文）、经过审慎决策而非默认采用，并受可用性和无障碍要求约束——包括通过键盘触发的操作、高频实用交互、性能，以及 prefers-reduced-motion。

AI 垃圾风格的套路，问题在于缺乏决策，而非动效数量——“每个元素都一律向上淡入”之所以显得粗劣，是因为它毫无差异、未经选择，而不只是因为动效太多。活泼的品牌有意运用大量且层次分明的动效，并不粗劣。克制的品牌却让所有元素都以同样方式向上淡入，才是。

将动画十二原则应用于 UI

这套经典原则源自 Disney（Thomas & Johnston，《The Illusion of Life》，1981）。它们之所以堪称动画的至高准则，是有原因的——它们描述了真实的物体如何运动，而优秀 UI 动效的核心，就是让扁平的矩形遵循你的身体早已熟悉的物理规律。**这些原则可以叠加使用：**真实交互会同时用到其中好几条。每条原则都有具体且不绑定工具的代码示例，见 references/twelve-principles.md。

1. 挤压与拉伸——体现重量与弹性。在悬停、按下、加载时进行缩放或倾斜。这是塑造个性的杠杆：弹跳式超调显得活泼，缓慢归位则显得高级。同一个元素，不同的灵魂。
2. 预备动作——预示交互会做什么，而不只是表示它可以点击。悬停时，菜单朝着即将收起的方向压缩；手风琴的箭头朝着即将展开的方向旋转。动作开始前的小幅蓄势。
3. 演出布局——引导视线关注最重要的事物。让 CTA 轻柔地循环动效，或按顺序加载，最后让注意力落在主要操作上。用动效建立层级。
4. 连续动作与关键姿势——定义关键状态（从 → 到），浏览器负责在其间补间。**从静止状态反向设计。**滚动联动序列就是沿时间线排列的关键姿势。
5. 跟随动作与重叠动作——不同部分以不同速度运动，并在主体之后停稳。**这是最重要的杠杆。**元素同时进入，但通过微小延迟错开；尾随部分超调后再归位。业余动效会让所有元素依次触发，像慢速幻灯片；让它们动作重叠，并稍作错开，几乎不增加工作量就能让页面显得更精致。
6. 慢入与慢出——物理世界中的事物不会瞬间启动或停止。使用缓动。**线性动效最容易露馅。**物体会加速、匀速移动，再减速。
7. 弧线运动——自然的运动带有曲线，不会沿直线移动。菜单先变宽再变高，描绘出一条虚构的弧线；从按钮升起的模态框沿曲线路径移动，而不是僵硬地垂直移动。
8. 次要动作——辅助动效强化主要动作。悬停在删除图标上时，受其影响的模态框也会变色；按下提交按钮后会出现加载旋转图标。它展现了因果关系——这个东西会影响那个东西。
9. 节奏——帧数决定速度，速度决定氛围。“小而快／大而慢”和“快显廉价／慢显高级”都由此而来。仅调整节奏，即使不改动其他任何内容，也能赋予元素鲜明的个性。
10. 夸张——超越字面上的真实；完美模仿现实，呈现出来的效果反而呆板乏味。比默认值更粗的下划线、禁用按钮上的摇头效果、悬停时从黑白“显影”出来的照片。调低夸张程度比增加夸张程度更容易——有意做出超调，再逐步调整到合适的程度。
11. 立体绘制——尊重三维空间、体积与重量。卡片像被拿在手中一样展开并旋转；放得更靠后的元素稍微模糊并缩小，前面的元素则向观看者放大；阴影层层叠加。让扁平的 2D 元素呈现真实的立体感。
12. 吸引力——魅力、吸引力与愉悦感。令人舒适的渐变、悬停时的柔和光晕、几乎难以察觉却引人探索的环境视差。这是最难的一条，因为它建立在优秀的设计能力之上。其核心目的：让人想要探索页面并停留下来。

UI 原生工具箱——你会用到的各种手法

十二条原则关乎运动的物理规律与情感表现。除此之外，还可以运用第二种视角：UI 原生技巧——你在界面中实际采用的实用手法。完整目录、用法示例以及技巧与原则的对应关系，参见 references/ui-motion-techniques.md（来源：motion.zajno.com）：

1. 缓动——基础所在；所有富有表现力的运动都遵循一条曲线（= 慢入慢出）。
2. 错位与延迟——通过交错出现提示层级（= 重叠动作，是影响最大的手法）。
3. 淡入/淡出——但绝不单独使用；始终将不透明度变化与位置或缩放变化搭配，否则就没有方向感或分量感。
4. 变换与变形——一种形状连续地变成另一种；共享元素转场（卡片 → 页面，图标 → 关闭图标）。借助 transform 而非 width/height，通过 FLIP / View Transitions 保持焦点连贯。
5. 遮罩——在边界内展示内容（clip-path/mask），实现具有方向性的擦除效果，而非平淡的淡入。
6. 空间感——通过图层间的关系（分层阴影、透视）营造深度，而非只用一个元素的阴影（= 实体绘制）。
7. 视差——通过图层之间的速度差营造深度；关键在于克制——微妙的效果引人探索，过强则会导致晕动症。开启减少动态效果时应禁用。
8. 缩放——在不同状态与深度之间转场；从正确的 transform-origin 开始缩放，使效果从用户操作的位置展开。

要牢记这一区别：用原则决定运动应该带来怎样的感受，以及是否值得使用；用技巧来实现。Zajno 自身的主张也与这项技能的理念相符——运动是引导注意力的策略工具，而非装饰。（注意实时与非实时的区别：实时运动与用户的操作同步——悬停、拖动、滚动；非实时运动则在交互之后作为脚本化的响应播放。）

通用运动有上限——标志性运动取决于具体内容

十二条原则、各种技巧以及生产默认值，能帮你实现通用运动：精致、实用、符合品牌基调的基础效果，应用于标准 UI 模式——内容展示、悬停、按压、转场、交错入场。克制地运用这些效果，确实能做得很好；而且**对大多数界面而言，这正是合适的目标。**网站首先必须能用；通用运动能确保动效服务于功能，而不是炫技。

但通用运动有其上限。让界面显得令人兴奋——令人难忘、一看就知道是这个产品的动效，必须结合具体内容：创意要源自内容的实际属性及其讲述的故事，而不是一概而论地应用某条原则。因为产品是正在执行工作的 Agent，所以 Agent 日志会不断显示；因为故事讲的是增长，所以指标线会自行绘制出来；以品牌自身的标志性元素打造独特交互。这些创意并非单靠原则就能得出——它们源自设计方向：情感目标、灵感来源、标志性元素，以及真实的产品叙事。

因此，应根据需求说明调整方案，并坦诚说明上限：

• “让它显得周到 / 实用” → 通用运动就是目标。克制地运用原则，然后就此打住。这是常见情况，也是很好的结果——不要凭空制造需求说明中没有要求的兴奋感。
• “让它令人兴奋 / 难忘” → 通用运动只是**起点，而非终点。**应构思结合具体内容、量身定制的创意，并联系产品故事和品牌标志性元素——这需要将真正的设计方向作为输入；creative-direction 同时负责运动特征与标志性元素，以及定制素材的设计方向。**如果缺少这项输入，就直说：**通用应用的合理上限是“不错”，而非“令人兴奋”。应主动询问设计方向，而不是假装具备需求说明中从未提供的深度。

克制——并非所有元素都以相同的方式动起来

业余设计师的本能（也是 AI 的默认倾向）是让所有元素都以相同的方式动起来。不论重要性如何，每个元素都在滚动时向上淡入；与任何故事都无关的渐变循环——这些在 design-principles → ai-slop 中被列为常见套路，原因就在于：它们是用默认选项取代了决策。请注意，问题在于千篇一律，而非动效的多少；动效该有多少，由品牌自行设定（见上文）。

动效也遵循与其他所有元素相同的层级原则。承载信息的元素应采用经过斟酌、富有表现力的动效；辅助细节则少用或不用。动效千篇一律会拉平层级，正如字重一律会拉平层级。如果每个版块都以相同的方式向上淡入，就没有任何重点——你增加了动效，却削弱了意义。

而克制最极致的表现是：有时最好的动画就是没有动画（Emil Kowalski — references/practical-tips.md）。动效必须通过解释、提供反馈或带来愉悦来证明自身价值；但在频繁重复的交互中，它反而会适得其反——初次体验的新鲜感会变成阻碍，让界面显得更慢。由此得出两条规则：

• 绝不要为键盘触发的操作添加动画。 使用方向键浏览列表、菜单或命令面板时，操作必须即时完成；带动画的选中效果会让人感觉迟缓，也与按键操作脱节。
• 为高频操作去掉动画（以及多余的悬停状态）——也就是用户每天会执行几十次的操作。为罕见操作和用于解释的操作添加动画；其他情况下都不要挡路。

动效基础规范——原则之下的工艺

由于这项技能会交付真实代码，因此十二条原则之下有一套不可妥协的技术基准。完整的令牌和配方见 references/motion-floor.md：

• 定义一组具名缓动曲线，绝不直接使用 linear，也不要所有地方都用同一个 ease。 将一小组曲线（标准、进入、退出，以及用于弹性效果的过冲曲线）定义为 cubic-bezier，并按用途使用。
• 将时长刻度映射到情绪杠杆——微反馈（悬停／按压）要快，标准过渡要适中，富有表现力的“高成本”时刻要慢，环境循环则要更慢。按刻度选择时长，不要每次都凭感觉另定一个。
• 只为适合由合成器处理的属性添加动画——transform 和 opacity（以及谨慎使用的 filter）。 为 width／height／top／left／box-shadow 添加动画会触发布局／绘制并导致卡顿；这种卡顿本身就是一种“廉价”的表现。这正是 web-design 在此强调的工艺基础。
• prefers-reduced-motion: reduce 不容妥协。 为每个非简单动画提供减少动效的方案——仅改变透明度，或直接瞬间切换。晕动症和前庭障碍确实存在；无法减弱的精美动画不是点缀，而是缺陷。
• 使用统一的步长设置错开效果（索引自定义属性或递增延迟），步长要足够小，让动画有所重叠，但也不能大到像播放幻灯片。
• 简单的状态动效用 CSS；复杂时再用 GSAP。 悬停、焦点、按压和单属性显现都适合用 CSS——平台原生支持的效果，不要为此添加库。对于平滑、经过编排、基于时间轴的动效，GSAP 是目前最好的工具，且现在已完全免费，包含所有插件：ScrollTrigger（滚动驱动序列和固定定位）、SplitText（文字／行逐步显现）、Flip（共享元素／布局过渡——即变形技术）。与手动调整一连串延迟相比，GSAP 的时间轴让重叠和错开更容易控制；在要求较高的序列中，其插值效果也明显更平滑。详情见 references/motion-floor.md。

生产环境默认值——来自 Emil Kowalski 的精确数值，让效果显得精致（见 references/practical-tips.md）：进入和退出以 ease-out 为主力（响应速度胜过物理上的纯粹性；应使用自定义曲线，因为 CSS 内置曲线力度不足）；UI 过渡保持在约 300ms 以内（125／180／300ms 是有效范围；较长且富有表现力的时长留给少见的主视觉时刻）；按下时将按钮缩放至 0.97；进入动画从约 0.9 开始，绝不要用 scale(0)（这会让元素看起来像凭空出现）；让弹出层／缩放效果感知变换原点（将 transform-origin 设在触发元素处，而不是中心）；以及略微添加 blur(2px)，让仍显突兀的过渡更顺滑。

上线前验证

按照 design-principles 评判任何作品的方式来评判动效——**在实际渲染、动态运行的页面上，以审慎挑剔的态度评判，而不是凭空想象。**静态截图无法审查动效；你得亲自观看。

• **它传达了预期的感受吗？**播放看看。时序／缓动是否符合品牌的情感目标，还是你默认用了通用缓动？**检查校准结果，而不只是曲线：**如果品牌风格活泼，动效是否真的富有表现力——还是你不知不觉把它做得流畅又高级，和其他作品没什么两样？
• **动效有层次，还是一律相同？**列出哪些元素会动，以及动效的理由。如果答案是“所有东西都以同样的方式动”，那就是 AI 垃圾内容——删减到只保留有意义的动效。
• **检查重叠效果。**成组元素是一个接一个进入（显得业余），还是彼此重叠并错开（显得精致）？调整顺序。
• **检查线性动画。**是否还有任何内容使用 linear 或未经考量的默认缓动？为它们指定系统中的曲线。
• **检查性能。**是否有动画在改变会触发页面布局的属性？改用 transform／opacity。在中端设备上检查是否卡顿，而不只是用你自己的设备测试。
• **检查减少动态效果设置。**切换 prefers-reduced-motion，确认页面平稳且可用，而不是出现故障。

交付内容

• 已写入交付代码的动效——应用到实际成品中的过渡、关键帧、滚动／悬停／按压行为，使用项目现有技术栈（CSS 过渡和 @keyframes、CSS 滚动驱动动画，或在交互确实需要时使用 JS 动效库／IntersectionObserver——不限于特定工具，使用项目已有的方案）。
• 在 .agents/design.md 中追加“动效系统——实际实现”部分（作为持续更新的记录——参见 creative-direction → design-doc-template.md）：记录已上线的缓动标记、时长等级、错开步长、减少动态效果规则和标志性动效，并注明日期，以便后续工作和其他 Application 技能沿用该系统，而不必重新推导。此部分扩展 creative-direction 编写的方向性动效说明；请引用，而非重复。

不可妥协的要求

• 已完成前置诊断：界面结构合理，且系统的动效风格已确定；否则退回（web-design／creative-direction）
• 动效符合品牌的情感目标，而非通用默认值——先确定感受，再选择缓动
• 先按角色对每种动效进行分类——功能性／UI 动效无论品牌风格如何，都应保持实用；品牌风格的发挥空间应留给叙事性／惊喜性动效
• 在系统层面校准动效风格——根据品牌设定缓动特性、幅度、频率／覆盖范围，以及何种内容值得添加动效（活泼 ≠ 高级；“流畅”不是放之四海而皆准的目标）
• 动效须有层次，而非千篇一律——列出会动的内容及理由，清单应简短且有依据，绝不能是“所有东西都以同样的方式动”
• 成组元素须彼此重叠并错开；不能像幻灯片那样一个接一个触发
• 使用命名明确的缓动系统——不使用原始 linear，也不能所有元素都只用同一个 ease
• 时长从与情感影响程度对应的等级中选取（小／快／低成本 ↔ 大／慢／高成本），而非针对每个元素凭感觉估算
• 动画使用合成器处理的 transform／opacity，而非会触发页面布局的属性
• 遵循 prefers-reduced-motion，为每个非简单动画提供减少动态效果的方案
• 默认曲线为 ease-out（使用自定义曲线，而非效果较弱的 CSS 内置曲线）；UI 过渡应短于约 300ms，只有罕见且有意设计的表现性动画例外
• 入场动画从约 0.9 开始，而非 scale(0)；按钮按下时缩放至 0.97；弹出层／缩放须考虑原点（将 transform-origin 设在触发元素处）
• 由键盘触发的操作绝不使用动画；去掉高频操作中过多的动效／悬停效果（有时最好的动画就是不加动画）
• 已在实际渲染、动态运行的页面上验证——通过播放检查，而非根据静态截图判断

相关技能

• design-principles — 本技能在时间维度上应用的工艺理念（层级、克制、先有情绪再执行、ai-slop 的 Motion 套路）
• creative-direction — 将品牌的动态特征定义为视觉系统的一部分；遇到 Revolution / 大幅 Evolution 时返回此处
• web-design — 为表面效果提供轻量的动态基线，并将表现力动态制作交由本技能处理；这是最常见的上游技能
• collateral-design — 面向固定格式的同级 Application 技能；视频 / 社交广告的动态设计与之并列
• brand — 其审计设定了动态设计必须营造的情绪目标
• design-critique (计划中 — 尚未发布) — 将依据情绪目标和自由度评判已交付的动态设计
• 参考资料：十二项原则（references/twelve-principles.md）、UI 原生技术工具包（references/ui-motion-techniques.md，源自 motion.zajno.com）、技术基线（references/motion-floor.md），以及 Emil Kowalski 的生产默认设置和克制之道（references/practical-tips.md）