减少动效
Prefers Reduced Motion
初级网页App减少动效（Prefers Reduced Motion）是设备向网站或 App 表达的用户偏好：希望界面少一些动态变化。产品据此调整动画，能让容易受大幅移动或闪烁影响的人更舒适地使用界面，同时保留操作所需的状态反馈。
你可能会说：「有些用户看着页面滑来滑去会不舒服，能不能让网站按他们的设备设置少动一点？」
动手看看账单页面切换
切换动效偏好，看看同一张账单页面如何出现；改参数会自动重播，也可以点重播再看一次。这里模拟设备偏好，不会修改你设备的设置。
普通动效让页面从右侧滑入，能交代导航方向，但大幅移动也可能让部分人感到不适。
要点减少动效是怎样起作用的？
- 1
读取用户已有的系统偏好
用户可以在设备设置中选择减少动态效果。我们做网页时，可以通过 prefers-reduced-motion 媒体查询读取这个偏好，再给界面提供另一套动效表现；不必让用户在每个网站重新设置一次。
- 2
优先调整大幅和持续运动
比如后台侧栏打开时，原本从屏幕外快速滑入；检测到减少动效偏好后，可以直接显示，或用简短的透明度变化代替。这样侧栏仍然可用，用户却不用跟着整块内容移动。
- 3
保留看得懂的状态反馈
减少动效不是把所有反馈都删掉。提交表单后，按钮仍要呈现处理中和完成状态；只是反馈不必依赖旋转、弹跳或反复闪动。你可以让 AI Agent 检查：去掉动画后，用户还能不能判断发生了什么。
容易混淆的地方
减少动效是一种用户偏好，不等于网站的“关闭所有动画”开关：它提示我们提供更平稳的呈现方式，而不是规定每个元素都静止。它也不是性能优化；缩短动画可能顺带减少渲染负担，但核心问题是动态画面给人的影响。若用户需要自行暂停某段内容，还得提供对应的播放控制。
什么时候用
适合用
- 做单页网站时，页面切换和滚动触发的元素移动较多，想为开启系统减少动效的用户提供平稳版本。
- 做 AI 工具时，回答生成伴随持续跳动的装饰动画，想保留生成状态，但减少不必要的运动。
- 做 App 导航时，抽屉和弹窗有大幅滑动效果，想按用户的设备偏好调整呈现方式。
不适合用
- 页面从头到尾都是静态文本和图片，没有动态效果需要调整；先把阅读顺序和排版做好。
- 用户主动打开一段教学视频，需求是随时停下或重看；给播放器提供播放、暂停和进度控制。
- 页面卡顿是因为一次渲染了大量数据；先排查渲染和加载性能，减少动效不能替代性能优化。
练一练选一个答案，看看解释
你的网站在打开侧栏时会让整块页面横向移动。用户开启了设备的减少动效设置，你会怎样调整？
让 AI 帮你做复制给 AI Agent 直接用
请为这个网站加入减少动效支持：读取用户设备的 prefers-reduced-motion 偏好，检查页面切换、侧栏、弹窗和加载反馈；对大幅或持续运动提供平稳版本，同时保留可辨认的操作状态。请说明改了哪些效果，以及如何验证。