展现形式 · 概念
Overlay：文字与媒体叠放的展示方式
分析 Overlay 文字叠放在图片或视频上的适用边界、对比度、裁切与文本增长风险，并说明何时应改为 Split 或独立文字区。
Overlay 把文字、标签或控件视觉叠放在图片、视频或色块上，用共享画面形成紧凑表达。它描述的是层叠关系，不是 Modal：Modal 会阻断背景交互，普通 Overlay 不会。
适合与不适合
适合文字很短、媒体背景可控、两者共同表达同一主题的场景。不适合长段落、动态且不可预测的用户图片、密集表单、必须稳定阅读的政策信息，或任何无法保证文字与所有背景区域对比度的内容。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 媒体与标题结合紧密，画面集中 | 背景变化会让文字突然不可读 |
| 能减少额外纵向空间 | 文本增长和翻译容易破坏构图 |
| 适合短标题、标签和单一行动 | 裁切可能同时损害媒体与文字语境 |
| 可形成明确的视觉焦点 | 控件与媒体交互区域可能发生冲突 |
内容与视觉要求
叠放文字应保持短小，并有稳定的安全区域。通过实色或足够不透明的遮罩控制背景，而不是只在一张样图上调整文字阴影。媒体承担信息时仍需文本替代；关键文字使用真实文本，不烘焙进图片。
响应式与无障碍
按背景最不利区域检查文字和控件对比度。文本放大、字距和行距变化后不能裁切或覆盖其他功能。小屏无法保持安全区域时，退化为媒体与文字上下排列的 Split，不要不断缩小字号。
状态与退化
媒体缺失或加载失败时提供稳定背景色并保留完整文字。视频暂停、低电量或减少动态效果时仍应有可读静态画面。内容超出预设长度时切换为独立文字区，而不是隐藏溢出部分。
发布前检查
- 是否在所有可能背景上检查了文字和控件对比度？
- 文本翻译、放大和间距覆盖后是否仍完整？
- 关键内容是否依赖背景图才能理解？
- 小屏是否有明确的上下排列退化？
- Overlay 是否比 Split 带来实际理解收益？