动效
:::tip 核心原则 Plaud Web 刻意使用几乎为零的动效。大多数交互（页面切换、弹窗、Toast）直接即时渲染，不使用过渡动画。唯一的例外是 Layout Transition —— 用于结构性布局变化（如侧边栏折叠/展开）。 :::
Layout Transition（布局过渡）
这是系统中唯一的动效 Token，用于结构性布局变化。
| 参数 | 值 | 说明 |
|---|---|---|
| Type | Spring | Framer 内置弹簧曲线 |
| Based On | Time | 基于时间（非物理模拟） |
| Time | 0.4s (400ms) | 弹簧稳定时长 |
| Bounce | 0.2 | 轻微回弹 —— 自然减速，无可见弹跳 |
| Delay | 0 | 无延迟 |
当前应用场景
| 状态 | 场景 | 说明 |
|---|---|---|
| 🟢 CURRENT | 导航侧边栏 | 侧栏/菜单折叠 ↔ 展开 |
| 🔵 FUTURE | 可复用场景 | 可复用面板组、排版变化、分屏布局调整 |
CSS 实现
/* Framer Spring (time-based) 的 CSS 近似 */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
Bounce 0.2 产生轻微的 overshoot，呈现自然减速效果，不产生可见弹跳 —— 与 Plaud 的"从容、克制"品牌气质一致。
Brand Constraints（品牌约束）
所有未来新增动效必须遵守以下硬性规则：
| 规则 | 说明 |
|---|---|
| Motion = 反馈，非表演 | 动效用于传达状态变化，不是视觉炫技 |
| 沉默有效就不动 | 如果不加动效也能清晰传达，就不加 |
| 最大时长 500ms | 任何动效不超过 500ms，避免拖沓 |
Prohibited Patterns（禁止的动效模式）
| 模式 | 禁止原因 |
|---|---|
| Bounce（弹跳） | 活泼、幼稚 —— 与"从容、专业"气质冲突 |
| Flip（翻转） | 花哨、分散注意力 |
| Shake（抖动） | 攻击性反馈，对用户不尊重 |
| Scale Bounce（缩放弹跳） | Bounce 的变体，同样过于活泼 |
| Parallax Scrolling（视差滚动） | 触发前庭觉障碍 |
| Intense Loading（旋转/脉冲加载） | 传递焦虑感，与"从容"气质矛盾 |
| Cartoon Motion（卡通动效） | 与专业产品定位不兼容 |
Accessibility（无障碍）
prefers-reduced-motion
当用户在操作系统中开启"减少动画"时，Layout Transition 必须立即降级为瞬时切换（无动画）。这是强制要求。
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0s !important;
animation-duration: 0s !important;
}
}
No Information via Motion（不通过动效传达信息）
布局状态通过尺寸和图标变化传达，而非通过过渡动画本身。所有动效完全禁用的用户也能完整理解界面状态。
Design Checklist（设计检查清单）
每次设计评审前确认：
- Layout Transition 使用 Framer Spring（Time 0.4s / Bounce 0.2）—— 无自定义参数
- 未添加本文档定义之外的任何动效
- 所有新增动效避开禁止模式列表
- 所有动效时长不超过 500ms
-
prefers-reduced-motion已处理 —— 降级为瞬时切换
Plaud Web 是目前最精简的动效基线之一：默认即时渲染。任何动效的添加都是例外，需要有充分的理由。