MotionHierarchy [fact] v1.0.0

屏幕上同时活跃的动效需要分层：一个屏幕只能有 1-2 个'主动效'承载用户注意力，其他元素必须用极短或零动效'退场'到背景。所有元素同时动等于没有动效——视觉噪音抵消信息层级。

在任意一个时刻，UI 中应该最多只有 1-2 个动效在表达'主要状态变化'（即视觉焦点位置）；其余元素的动效应被压缩到极短（< 150ms）或被禁用，否则用户的注意力被多个并行运动撕扯，每个动效的信息量都被稀释为零。这是 motion 设计的'信噪比'原则。

Confidence

strong

Applies To

• 页面进场动效编排（hero / sub-content / chrome 三层）
• list / grid stagger reveal 时的'焦点项'选择
• modal 打开 + background blur + content fade 的协同时序
• dashboard 多卡片同时更新时的'谁先动'决策
• audit：任意一帧截图查看是否有 > 2 个元素正在动

Quantitative

• Max Concurrent Focal Motion: 1-2 elements at any given frame
• Ambient Motion Duration Cap: < 150ms (perceived as 'instant settle')
• Stagger Cap Per Screen: ≤ 8-10 staggered items (above this becomes noise)
• Decoration Density Target: decorative animations ≤ 10% of interactive surface

Counter Conditions

• 数据可视化场景（图表渐入、数字 counting up）天然就是多元素同时动——这种'集体运动'本身就是信息，不适用焦点收敛原则
• Brand-expressive marketing 首屏可以违反此原则，用整页协奏制造冲击——但这是一次性场景，dashboard / app 内部 UI 必须遵守
• loading / progress 类持续动画（spinner、shimmer）算 ambient layer，不占用 focal 配额

MotionHierarchy [fact] v1.0.0

屏幕上同时活跃的动效需要分层：一个屏幕只能有 1-2 个'主动效'承载用户注意力，其他元素必须用极短或零动效'退场'到背景。所有元素同时动等于没有动效——视觉噪音抵消信息层级。

在任意一个时刻，UI 中应该最多只有 1-2 个动效在表达'主要状态变化'（即视觉焦点位置）；其余元素的动效应被压缩到极短（< 150ms）或被禁用，否则用户的注意力被多个并行运动撕扯，每个动效的信息量都被稀释为零。这是 motion 设计的'信噪比'原则。

Confidence

strong

Applies To

• 页面进场动效编排（hero / sub-content / chrome 三层）
• list / grid stagger reveal 时的'焦点项'选择
• modal 打开 + background blur + content fade 的协同时序
• dashboard 多卡片同时更新时的'谁先动'决策
• audit：任意一帧截图查看是否有 > 2 个元素正在动

Quantitative

• Max Concurrent Focal Motion: 1-2 elements at any given frame
• Ambient Motion Duration Cap: < 150ms (perceived as 'instant settle')
• Stagger Cap Per Screen: ≤ 8-10 staggered items (above this becomes noise)
• Decoration Density Target: decorative animations ≤ 10% of interactive surface

Counter Conditions

• 数据可视化场景（图表渐入、数字 counting up）天然就是多元素同时动——这种'集体运动'本身就是信息，不适用焦点收敛原则
• Brand-expressive marketing 首屏可以违反此原则，用整页协奏制造冲击——但这是一次性场景，dashboard / app 内部 UI 必须遵守
• loading / progress 类持续动画（spinner、shimmer）算 ambient layer，不占用 focal 配额

Sources

Confidence

strong

Source

• Pasquale D'Silva, 'Transitional Interfaces' (2013) — focal motion vs ambient motion
• Apple HIG — Motion: 'Use motion to draw attention, not to entertain'
• Material Design Motion principles — 'Movement is purposeful' / focal point primacy
• Val Head, 'Designing Interface Animation' (Rosenfeld, 2016) — Ch. 'Choreographing motion'

Applies To

• 页面进场动效编排（hero / sub-content / chrome 三层）
• list / grid stagger reveal 时的'焦点项'选择
• modal 打开 + background blur + content fade 的协同时序
• dashboard 多卡片同时更新时的'谁先动'决策
• audit：任意一帧截图查看是否有 > 2 个元素正在动

Quantitative

• Max Concurrent Focal Motion: 1-2 elements at any given frame
• Ambient Motion Duration Cap: < 150ms (perceived as 'instant settle')
• Stagger Cap Per Screen: ≤ 8-10 staggered items (above this becomes noise)
• Decoration Density Target: decorative animations ≤ 10% of interactive surface

Counter Conditions

• 数据可视化场景（图表渐入、数字 counting up）天然就是多元素同时动——这种'集体运动'本身就是信息，不适用焦点收敛原则
• Brand-expressive marketing 首屏可以违反此原则，用整页协奏制造冲击——但这是一次性场景，dashboard / app 内部 UI 必须遵守
• loading / progress 类持续动画（spinner、shimmer）算 ambient layer，不占用 focal 配额