适合审查页面是否“好看且耐看”。视觉效果要帮助建立层级、反馈和空间关系，不能掩盖内容或把静态导出变成静止页面。
视觉系统的四个信号
- 纸张
- 背景
- 墨色
- 正文
- 信号色
- 状态
- 运动
- 反馈
形成安静的阅读基底
保证长文对比度
用于焦点、链接和选择
解释变化而非持续炫技
动效应该回答什么
1 / 4抽屉、浮层和内容进入应保留空间来源。
选择、加载和成功状态要有及时反馈。
动效结束后，焦点与主要操作保持清楚。
减少动态时关闭自动运动，内容仍完整可用。
主题检查
| 维度 | 浅色 | 深色 |
|---|---|---|
| 背景层级 | 纸张与卡片轻微分离 | 避免纯黑与高亮边框泛滥 |
| 正文 | 接近墨色 | 柔和高对比，不刺眼 |
| 信号色 | 链接与焦点清晰 | 降低发光面积 |
| 图片 | 保持真实色彩 | 必要时增加边界，不整体压暗 |
CSS 动效基线
.interactive-card {
transition: transform 180ms ease, border-color 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
.interactive-card { transition: none; }
}不要为了证明页面会动而持续运动
自动漂浮、无限粒子和滚动绑架会消耗注意力。首页可以有品牌场景，文档正文应以操作反馈和关系解释为主。