---
title: Surface 8 种材质物理选型与确认门禁
description: 为什么专业桌面界面需要物理材质？解析 refraction、glass、acrylic、mica 等 8 种材质的渲染管线、适用场景与开销，以及默认材质的铁律与严格的切换门禁。
---

# Surface 8 种材质物理选型与确认门禁

扁平化设计过度丢失了空间深度，而早期的拟物化又过于沉重。Tuff 提出“次表面材质学”，为现代高密度界面建立轻盈坚实的物理秩序。

## 为什么专业桌面界面需要次表面材质？

物理材质的作用不是装饰，而是提供直觉认知线索：
- **透视沉浸**：透过半透明介质感知底层内容的存在，维持工作空间连续性。
- **空间锚定**：不同折射率与模糊度明确告知当前聚焦的层级。
- **视觉减负**：相比厚重的纯色色块，透光的次表面材质减少了视网膜的压迫感。

## 8 种材质物理模型选型表

`TxBaseSurface` 的 `mode`（`BaseSurfaceMode`）有 9 个取值，其中 `pure` 与 `flat` 画的是同一种材质，所以一共 8 种。每种由几层叠成：玻璃层（`TxGlassSurface`）用于 `glass` 与 `refraction`，背景滤镜层用于 `blur`、`acrylic` 与 `refraction`，色膜层用于 `mask` 与 `acrylic`，折射描边只在 `refraction` 上；`mica` 与 `flat` 直接画在容器上，`plain` 什么都不画。

| 材质模式 | 渲染管线（默认参数） | 物理隐喻 | 适用场景与开销 |
|---|---|---|---|
| `refraction`（默认） | 玻璃层：SVG 位移贴图让 R、G、B 三个通道各自错开（色散）；其上叠背景模糊与饱和度滤镜层和按光源位置排布的高光，外加 1px 折射描边 | 冰晶 / 棱镜 | 所有带材质层组件的默认材质：卡片、翻转浮层与各类弹出面板。两层都采样背景，开销最高；运动中分层降级 |
| `glass` | 玻璃层：同样的位移贴图与色散，再 `saturate(1.8)`；在 Safari、Firefox 上退回 `blur(10px) saturate(1.8) brightness(1.06)` 与 1px 高光外环 | 棱镜玻璃 | 要折光、不要雾化的小块面板，背景简单时上面的字才读得清。只有一层采样背景，开销低于 `refraction` |
| `acrylic` | 三倍宽的背景模糊（30px），饱和度 ×1.2、亮度 ×1.06；其上一层 0.6 的色膜，色膜的 alpha 带 140px 平铺的分形噪点（88%～100%） | 漫反射亚克力 | 系统侧边栏、状态面板一类大面积的次级面板。采样背景，模糊半径是 `blur` 的三倍，开销随之上升 |
| `mica` | 不透明底：表面色混入 5% 主色，上面两道锚定视口（`background-attachment: fixed`）的宽幅色晕，视口左上角是 12% 的主色，右下角是 8% 的相邻色相（主色色相 +40°）；不读背景 | 云母薄片 | 不滚动的窗口基底底板。不采样背景，开销极低；但容器每次滚动都要重绘，不要用在会滚动的底板上 |
| `mask` | 半透明色膜（不透明度 0.75），不做模糊 | 墨色薄膜 | `blur`、`glass`、`acrylic` 运动时的默认降级态；高密度列表行。不采样背景，开销低 |
| `blur` | `backdrop-filter: blur(10px) saturate(1.5)`，叠一层 10% 的浮层底色 | 雾化毛玻璃 | 低端核显与省电环境：`autoDetect` 在省电或帧预算 `reduced` 时把 `refraction`、`glass`、`acrylic` 换成它。采样一次背景，开销中等 |
| `flat`（同 `pure`） | 不透明实色（`--tx-fill-color-lighter`），背景完全不透出 | 坚硬塑料底板 | 高对比度模式（除 `plain` 外的材质都按它绘制）、帧预算 `minimal` 时的降级目标、要求完全不透明的底盘。开销最低 |
| `plain` | 不画任何材质层，只保留圆角与溢出裁切；高对比度下也不加底色 | 空无一物 | 只需要圆角与裁切的逻辑布局容器。没有开销 |

:::TuffDemoWrapper{demo="ConceptSurfaceModesDemo"}
:::

## 默认使用 refraction 的绝对铁律

在 TuffEx 体系中，**所有带有材质层（Surface）的容器组件，默认材质一律且必须为 `refraction`（琉光/折射）**。

这是整个系统的统一视觉灵魂。无论是详情卡片、翻转浮层，还是弹出层、下拉与右键菜单、选择器面板，都必须保持高阶的晶莹折射质感，绝不允许各自为政。

组件的默认值都照这条铁律取 `refraction`：`TxBaseSurface` 的 `mode`、`TxCard` 的 `background`、`TxFlipOverlay` 的 `surface`，以及 `TxPopover`、`TxTooltip`、`TxDropdownMenu` 与 `TxContextMenu`（及各自的子菜单）、`TxSelect`、`TxSearchSelect` 的 `panelBackground`（它们都经 `TxBaseAnchor` 渲染）。`TxModal`、`TxDrawer` 等弹窗与抽屉不经过 `TxBaseSurface`，没有材质可选。

## 材质切换的手动确认门禁

若因极特殊业务场景（如某些纯后台纯白底表格、超低端工业嵌入式设备）需要把材质（`mode`、`background`、`surface`、`panelBackground`）从 `refraction` 换成其他材质（如 `flat` / `mask` / `glass` / `acrylic` / `mica`）：
- **必须经过用户手动明确确认**！
- 不得由开发人员或 AI 编码 Agent 擅自替换默认材质。
- 该门禁确保了 TuffEx 设计语言在长期协同演进中的纯净度与抗异化能力。

运行期的临时换材质不算切换：运动中的 `fallbackMode`，以及 `autoDetect` 在省电、掉帧时的降级，都不改组件声明的材质，条件解除后自动回到原材质。