半透明材质可读性契约

大理论

半透明材质不是一个通用视觉主题，而是一种有条件的层级机制。它适合把 transient surface、导航、popover、side rail、HUD 或沉浸式控制与底层内容保持关系；它不适合承载长文、密集表格、复杂表单和不可预测背景上的主要任务。一个健康的 glass/acrylic/mica 实现会先定义 surface role，再定义背景可变性、前景密度、材质 token、用户偏好和 CSS fallback。

小知识点

1. 先选材质：solid/opaque 是默认；acrylic/frosted glass 适合 transient/light-dismiss surfaces；mica 更像 app/window 背景上下文；smoke/scrim 用来明确 modal 阻断。
2. 保护内容层：正文、表单错误、按钮标签、数据和焦点环不能直接依赖动态背景提供对比度。忙碌图像、视频、shader 和滚动内容后面需要局部 fill、tint、scrim 或不透明 fallback。
3. 材质 token 至少包含 material-bg、material-border、material-tint、material-blur、material-saturation、material-shadow 和 material-fallback-bg，并有 light/dark/increased contrast/reduced transparency/forced-colors/print 分支。
4. Tint 只用于 primary emphasis。Apple WWDC25 对 Liquid Glass 的建议指出，所有元素都 tinted 时没有东西会突出，并且会造成混淆。
5. backdrop-filter 需要透明或半透明背景才可见；同时 MDN 说明 opacity、filter、mask、mix-blend-mode、backdrop-filter 或相关 will-change 的祖先可能成为 backdrop root，导致 blur 只影响局部背景。
6. reduced transparency 下要提高不透明度或关闭 blur 依赖；reduced motion 下要移除 elastic、refraction、parallax 和 scroll-linked material motion；forced-colors 下 box-shadow/background-image 可能被移除，必须恢复 border/outline。
7. 复合对比度才是真实对比度。只测 text token 与 surface token 不够，必须在实际背景图、视频帧、滚动状态和 dark/light 下检查。

设计判断

如果关闭透明和 blur 后，用户仍能识别导航、状态、焦点、错误和主要行动，而开启材质后只是增强层级和上下文，这个材质可入库。若 glass 是为了显得高级，或导致 hover/focus/error/disabled 只能靠光泽区分，它就是错误层级。

实现建议

建立 TranslucentMaterialContract：surfaceRole、backdropConditions、materialChoice、tokens、hierarchyRules、interactionStates、accessibilityFallbacks、implementationNotes 和 qaChecklist。CSS 中先写半透明 background 和 border，再用 @supports (backdrop-filter: blur(...)) 加 blur/saturate；@media (prefers-reduced-transparency: reduce) 提高 opacity 或使用 fallback-bg；@media (prefers-reduced-motion: reduce) 取消大型材质运动；@media (forced-colors: active) 用 Canvas、CanvasText、ButtonText、outline 和 border 接管边界。React/Tailwind 中把材质做成少量 semantic classes，不要让每张卡片都有自己的 blur 数值。

反例/风险

整页所有卡片都是 glass；把正文放在视频上只加 blur；导航透明到看不清 active 状态；焦点环被 glow 淹没；modal 用半透明白卡但背景仍能抢注意力；直接动画 blur radius；因为祖先 opacity: .9 变成 backdrop root 导致 blur 失效；reduced transparency/forced-colors 下没有不透明回退。

案例分析

Apple WWDC25 的 Liquid Glass 介绍把它定义为会弯折光线、响应触控与动态 app 的数字材质，并强调它要适配环境、维护 legibility 和 contrast；同一场分享也提醒 tint 只应用于 primary actions，steady state 中要避免内容与 Liquid Glass 发生不必要交叉，系统的 Reduced Transparency、Increased Contrast 和 Reduced Motion 会修改材质层。Fluent 2 Material 把 solid 设为最常见材质，acrylic 定义为适合 popover/menu 等 transient light-dismiss surfaces 的半透明 frosted glass，mica 则是窗口/桌面上下文相关的模式感材质，smoke 用来让 modal 下方界面后退。MDN 的 backdrop-filter 文档补上 Web 实现边界：该属性作用于元素后方像素，并受 backdrop root 影响。可学习点是：高级玻璃感不是“透明 + blur”，而是材料角色、层级、用户偏好和实现限制共同治理。

来源链接

Apple HIG Materials: https://developer.apple.com/design/human-interface-guidelines/materials Apple Liquid Glass overview: https://developer.apple.com/documentation/technologyoverviews/liquid-glass Apple WWDC25 Meet Liquid Glass: https://developer.apple.com/videos/play/wwdc2025/219/ Apple WWDC25 Get to know the new design system: https://developer.apple.com/videos/play/wwdc2025/356/ Fluent 2 Material: https://fluent2.microsoft.design/material Microsoft Acrylic material: https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic MDN backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter MDN prefers-reduced-transparency: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-transparency MDN prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion W3C WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html W3C WCAG Animation from Interactions: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html