毛玻璃适合表达轻盈与空间层次，但字幕类应用的首要目标始终是“读得清”。听见课堂没有把所有容器统一成强模糊卡片，而是用 Hero、Card、Soft 三档 blur，结合不同表面透明度、边界和阴影控制信息层级。

一、模糊强度不能单独决定材质

同一个 backdropBlur(30)，放在高透明背景上可能几乎无效，放在复杂高对比图片上又可能产生浑浊色带。材料至少由背景透明度、模糊、边框、阴影和前景文字共同决定。

因此项目把 blur 与 surface、border、shadow 分开命名，再由组件按语义组合，而不是定义一个万能“玻璃卡”。

二、Hero 层只给最高优先级区域

GLASS_BLUR_HERO=30 配合较强阴影，适合手机底部导航、焦点区或大屏主工作台。Hero 的数量必须受限；一页出现四五个同等级主卡，会让用户无法判断真正入口。

导航壳使用 Hero 是因为它固定、跨页且承担主要动作，不是因为它面积大。

三、Card 层承载主要阅读内容

GLASS_BLUR_CARD=24 更适合课程、任务、复盘等内容卡。它需要与 SURFACE_READABLE 或可读性更高的表面组合，保证字幕、时间和状态文字不会被背景光场干扰。

Card 层可以重复，但应使用一致 padding、radius 和边界，避免列表中每项材质都不同。

四、Soft 层用于提示和辅助控制

GLASS_BLUR_SOFT=18 适合筛选标签、次级说明和轻量分组。它的视觉重量低于主要卡片，不应承担长段正文或关键错误信息。

static readonly GLASS_BLUR_HERO: number = 30;
static readonly GLASS_BLUR_CARD: number = 24;
static readonly GLASS_BLUR_SOFT: number = 18;

三个值相差不大，真正的层级仍依赖表面与空间关系。

五、可读表面比“更透明”重要

项目同时提供 SURFACE_GLASS、SURFACE_READABLE 与 SURFACE_SOFT。长字幕或 OCR 结果优先使用可读表面；氛围卡可以更透明；轻提示才使用 Soft。

无障碍页面不应为了露出更多背景而牺牲文字对比。背景是辅助，信息是主体。

六、边框用于稳定半透明边界

浅色玻璃落在亮色光场上时，卡片边缘可能消失。BORDER_GLASS 提供稳定轮廓，BORDER_FLAT_DARK 则为暗色扁平容器补充区分。

边框不仅是装饰，也帮助低视力用户识别控件范围。高对比模式下应适当增强边界，而不是继续叠加模糊。

七、阴影应该解释层级而不是制造浮夸

Hero 与 Card 分别使用不同阴影半径，颜色也区分浅色和暗色。阴影方向和强度必须一致，否则一页会出现多个互相冲突的光源。

暗色模式下纯黑重阴影容易吞掉边界，所以项目使用独立 GLASS_SHADOW_DARK，并依靠边框共同完成分层。

八、三种常见失败形态

第一种是普通白卡：完全遮住背景，视觉没有层次；第二种是过强光斑：背景抢过正文；第三种是层级过多：每个区域都发光、模糊和悬浮。

修复时应先减少主层级数量，再调整透明度和对比度，最后才微调 blur。直接把模糊从 20 调到 40 通常治标不治本。

九、高对比模式应主动降装饰

高对比不是把所有色值饱和。更稳妥的策略是提高文字与表面的对比、强化边框、减少半透明层叠，并让选中态同时使用形状或文字提示。

实时字幕的重点标记也不能只靠颜色。图标、标签文案和字重变化应共同表达状态。

十、phone 与 large 的材质密度不同

手机空间有限，连续嵌套玻璃会吞噬内容面积；大屏可以用主工作区和侧栏形成更清晰层次。项目在 phone 上使用更紧凑的扁平状态卡，在 large 上保留连续背景和分栏工作台。

共享的是材料语言，不是完全相同的卡片数量。

十一、验收必须放入真实内容

空白卡片很好看，不代表 40 字字幕、长课程名、错误说明和禁用按钮仍可读。验收应覆盖浅色、暗色、高对比、大字号、长文本和多卡列表，并检查文字对比与点击边界。

当前项目已验证应用内字幕字号和高对比联动，但系统 1.5 倍字体与真实屏幕阅读器仍是独立未验证项，不能混为一谈。

十二、总结

毛玻璃的工程目标是组织信息，而不是展示 blur 参数。Hero、Card、Soft 三档让页面有统一层级，但最终可读性仍由 surface、border、shadow、文字和真实内容共同决定。

下一篇进入响应式：为什么 840vp 只是当前项目的窗口断点，而不是某一类设备的名字。