玻璃拟态之后：界面质感的下一次进化

质感设计这几年走得很快。从最早的扁平化把一切阴影都抹掉，到 Material Design 把光重新请回界面，再到今天几乎每个新产品都会放一块毛玻璃——我们似乎又回到了「拟物」的门口，只是这一次，拟的不再是材质，而是光。

一、毛玻璃的三个阶段

如果把玻璃在界面里的用法分个代，大概是这样：

装饰期：玻璃只是背景上的一块好看的噪点，把它删掉，界面功能完全不受影响。
层级期：玻璃开始承担「我浮在内容之上」的信息，导航条、浮层、弹窗都用它来表态。
叙事期：玻璃知道自己背后是什么。它折射的是页面的内容本身，而不是一张固定的图。

真正让第三阶段成立的，是 backdrop-filter 的普及。在它之前，所有的「毛玻璃」都是假的——设计师用一张预先模糊好的图铺在底下，滚动时立刻穿帮。

二、玻璃要能被看见，背后必须有东西

这是我们在做这次专题时最一致的结论：一块白得发灰的玻璃，放在一块白得发灰的背景上，等于没有玻璃。

所以所有好看的毛玻璃页面，都会在底层埋一层彩色光斑：

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.ambient .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: .25;
}

颜色不需要多。三到五种，低透明度，彼此错开位置，让页面滚动时玻璃背后的色相持续变化——质感的「活」就是这么来的。

判断一个玻璃效果做得对不对，有个很粗暴的标准：把背景换成纯白，如果整页立刻变得平庸，说明你做的其实是「背景」。

三、别忽略内阴影

多数人做玻璃只写 background 和 backdrop-filter，然后觉得「差一点意思」。差的就是内阴影。

真实玻璃的边缘会捕捉光：顶边有一道很细的高光，底边有微微的反射。这两条一加，玻璃立刻从「一块半透明的矩形」变成「一个有厚度的物件」。

.glass {
  background: rgba(255, 255, 255, .48);
  backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 -1px 1px rgba(255, 255, 255, .35),
    0 24px 48px -10px rgba(31, 61, 135, .14);
}

顺序也很重要：内阴影放前面，投影放最后。

四、性能是隐藏成本

backdrop-filter 的代价比想象中大。它会强制浏览器为元素建立一个独立的合成层，并且每次背后内容变化都要重新采样。

几条我们踩过的经验：

同屏可见的玻璃元素不要超过 8 个，尤其是带滚动的列表
玻璃不要嵌玻璃，嵌套的背景模糊会让开销指数级上升
固定定位的玻璃导航条很便宜，滚动列表里的玻璃卡片很贵
记得给 will-change 慎用——它会把「可能变化」变成「一直占用」

五、下一站

聊到最后，问题变成了：如果所有产品都用玻璃，玻璃还成立吗？

一位设计师的回答我记了很久。他说，材质本身从来不是设计，材质和内容的关系才是。玻璃好用，是因为它天然表达「层次」和「穿透」——如果你的信息结构里没有这两件事，那你要的可能不是玻璃，只是一块好看的颜色。

下一站大概不是更复杂的材质，而是更克制的使用。