用途:在涉及动画、交互、动效设计、转场、滚动效果、微 UX 或沉浸式体验,以及任何视觉表达或基于时序的 UI 行为时使用该技能。其目标是把运动、交互与视觉体验转化为可实现的约束,同时保留无障碍与性能。
主要能力与原则:体验是状态转换与时序,而不只是视觉,需设计事物随时间如何变化;约束优先,尊重无障碍(prefers-reduced-motion)与性能(GPU 负载、INP/LCP);从最小实现起步,先做小型原型,只保留有价值的动画。决策规则包括:运动是信息也可能是噪音,需明确目的(视觉引导、状态变化理解或愉悦感);不要为所有东西加动画,只动画重要时刻以形成对比;不破坏无障碍,支持减少动效、保持对比度、保留焦点与可操作性;性能即体验,避免布局抖动,优先轻量技术;让动画可逆,实现为可开关的特性。
使用方式:先澄清目的(用户应从运动理解什么)、预期环境(移动端、低配设备、慢网络)、触发方式(悬停、点击、滚动、路由变化)、是否需要减少动效支持(如需要则为强制)。输出按顺序包含:目的、规格(触发、状态、时长、缓动、停止条件)、实现方案(最小起步,按需增强)、无障碍考虑(减少动效、焦点、可操作性)、性能考虑(测量点)、后续动作(原型到集成)。
限制与常见陷阱:过度动画会降低信息密度;忽略减少动效可能造成不适或危险;重实现(滥用滚动处理器)会降低 INP。