什么是 Motion-first 设计思维？
Motion-first 不是"加动效"——它是一种设计思维方式：在界面设计初期就将动效作为核心设计语言，而不是在静态稿完成后作为"点缀"添加。这意味着每一个 UI 状态转换、每一次内容进入和退出，都需要在设计阶段有意识地规划其时间曲线、延迟和物理感。
在技术层面，GSAP（GreenSock）、Framer Motion、CSS Scroll-Driven Animations 等工具的成熟，使复杂的交互动效可以高效实现。而 Awwwards 年度最佳网站中，超过 80% 都具有强烈的 Motion 设计特征——这不是巧合，而是动效能力已成为顶级 Web 设计的标配门槛。
"Motion is not decoration. Motion is communication. It tells users where they came from, where they are going, and what they can expect next."
— Jonas Daehnert (uxdesign.cc)动效时序系统
Motion-first 设计的核心是建立一套一致的时序系统——就像字体系统一样，动效也需要标准化。以下是目前业界最常用的时序架构：
关键原则：进入动效比退出动效慢 20-30%（让用户有时间感知新内容）；相关元素的 stagger delay 保持在 50-80ms 之间（太短感觉同时出现，太长感觉卡顿）；Hover 交互必须在 250ms 内完成（超过这个值用户会感觉"迟钝"）。
核心设计原则
用 Intersection Observer 或 ScrollTrigger 让元素在进入视口时以 translateY(40px) → translateY(0) + opacity: 0 → 1 的方式出现。关键：不是所有元素都 reveal，只有重要节点才需要——否则整页都在"跳舞"，用户反而感到烦躁。
背景元素的滚动速度 = 前景的 0.5-0.7 倍，产生视差深度感。注意：parallax 只适用于装饰元素（光晕、背景纹理），绝不用于文字和功能性 UI——视差文字会让用户感到不适。保持克制是 parallax 好坏的分水岭。
UI 状态变化时用 morph（形变）代替 fade（消隐）——比如按钮从"提交"变为"✓ 完成"时，高度轻微压缩再回弹，宽度自然过渡。这种物理感让用户感知到"状态发生了真实的变化"，比突变更有说服力。
用 spring 弹性曲线（Framer Motion: type:"spring", stiffness:300, damping:25）代替传统 ease 曲线，让元素在到达目标位置后有轻微的超调和回弹。这 0.1 秒的物理感是让界面从"软件"变成"产品"的关键。
代表工具与案例
Design
其他值得深入研究的：Stripe.com（精致的 scroll-driven 卡片动效）、Linear.app（所有过渡都有 spring 物理感）、Framer.com（morphing 页面转场的教科书级应用）。
如何提升你的 Motion 设计能力
从 Hover 开始：把所有交互元素的 hover 状态从即时切换改为有过渡——按钮 transform: scale(1.02) + box-shadow 变化，这是 Motion 训练最快的切入点。
学习 Framer Motion：在 React 项目中用 motion.div + AnimatePresence 实现 stagger reveal。官方文档有完整示例，一个周末就能掌握基础用法。
建立 Motion Token：在设计系统中定义 5 个 duration（50/100/200/400/600ms）和 3 个 easing（ease-in/ease-out/spring），所有动效只从这个 token 库中取值，保证系统一致性。
作品集中的展示策略：录制 30 秒以内的 Prototype 演示视频，重点展示关键状态转换的动效逻辑，解释"为什么是这个时间曲线、这个 delay"——这比展示静态截图要有说服力得多。