克制地使用动效：让网站有生命力但不喧闹

动效可以让网站显得灵敏、有层次，也更符合当下的视觉语言。同样的动效也可能让页面更难阅读、使用速度更慢。

区别通常不只是动画数量，而是每一个动作是否承担了明确任务。

给每一个动作分配职责

网站里真正有用的动效大致承担四类职责：

• 方向提示：说明元素从哪里来、去了哪里。
• 操作反馈：确认用户动作已经发生。
• 状态连续性：连接两个界面状态。
• 氛围营造：建立情绪，但不承载关键信息。

如果一段动画不属于这些职责，它大概率只是装饰。装饰并不是问题，但不应该占据主要的注意力预算。

只选择一种主导动效语言

当一页只由一种动效语言主导时，整体会更完整。它可以是缓慢的氛围背景、干净的编辑式揭示动画，也可以是有触感的悬停反馈。

不要在同一屏里叠加多个主导行为。动态背景、浮动卡片、动画标题、磁性光标和循环标签单独都可能成立，放在一起却会让视线失去稳定落点。

把动态背景当成一个图层

动态背景应该支撑前景内容，而不是变成第二套界面。

保证足够的文字对比，避免高细节区域落在文字背后，并在画面过于活跃时增加轻微遮罩。还要考虑不同宽高比下的裁切，尤其是手机端可能完全失去原视频的视觉焦点。

选择 动态背景 时，除了颜色，也要关注素材本身的运动方式。

提前定义停止条件

一条可用于生产的提示词应该包含：

• 尊重 prefers-reduced-motion 设置
• 暂停或简化屏幕外的视频
• 不用动画阻挡阅读和输入
• 高频操作使用更短、更安静的过渡
• 媒体加载时提供稳定的封面或静态帧

这些不是最后补上的优化，而是从一开始就会影响体验的设计条件。

建立动效层级

动效也需要像字体一样分层。把最明显的运动留给最重要的时刻，让日常反馈更快、更轻，让氛围动画慢到不会不断把注意力从内容上拉走。

目标不是证明页面“会动”，而是在运动过程中仍然保持完整和连贯。