Liquid Glass Lab · iOS 26 风格 · 浏览器近似实现

液态玻璃实验室

把 iOS 26 的 Liquid Glass 用在本产品的真实控件上，并且实时调参。 下面的底图可以移动——注意玻璃背后的内容会被折射并流动，这是它和普通毛玻璃的关键差别。

01实时演示

底图是一张制图风格的示意图（等高线 + 水系 + 院校点）。玻璃浮层用的是本产品的真实组件。

GIS ASCENT地信考研就业信息服务系统 工科 0816 一区 985 英语一
支撑检测中…
+−◎
找到 87 所院校湖北 12
武汉大学10486
081602 摄影测量与遥感 · 英语一 · 数学一 · 拟招 3 人
中国地质大学（武汉）10491
070503 地图学与地理信息系统 · 不考数学 · 拟招 6 人
院所分布87
985 34211 51双一流 62
数据更新 2026-10-08

02调参台

调完你觉得对味的值，告诉我，我直接写进 docs/UIUX.md 的玻璃规范里。

材料

26
0.006
14px
180%
112%
0.10
0.55

高光与动效

0.60

移动底图（看折射）

浏览器的诚实边界：这里做的是近似——backdrop-filter 取背景色 → SVG feDisplacementMap 做湍流位移 → 渐变高光边 → 指针跟随。 真正的 Liquid Glass 是 Apple 在系统层用 GPU 做的逐像素光线弯折，Web 做不到。所以它只在小面积、压在"有结构的背景"（地图/图表）之上才好看，一大就露馅。

03好用吗？——实用边界

用法好看实用结论
地图之上的浮动结果卡好好采纳 面积小、背景是地图（有结构），折射语义成立
地图工具按钮 / 缩放控件好好采纳 圆形小面积，最像 iOS 的观感
移动端底部筛选抽屉好中可用 抽屉面积大、文字多，需把底色不透明度调高保证可读
顶部导航/筛选条好中可用 只在内容会从其下滚过时才有意义
院校详情页正文表格差差禁止 文字密集区放玻璃，可读性直接崩
整个页面背景差差禁止 会变成噪声；玻璃的意义来自"浮在什么之上"

04落进 UIUX.md 的规则

  1. 允许清单：只允许出现在地图 / 图表之上的浮层——浮动结果卡、地图控件、底部抽屉、会滚过内容的顶栏。共性是：它有一个"视觉上有结构"的背景可折射。
  2. 禁止清单：正文表格、长文、整页背景。玻璃的区域里不放超过 2 行文字。
  3. 可读性护栏：文字压玻璃时，底色不透明度不低于 0.10，模糊不低于 8px；暗色底图上必须能通过 4.5:1——这条不因"好看"让步。
  4. 必须降级：用 @supports + prefers-reduced-motion 两道检测。不支持 backdrop-filter: url() 的环境退回"模糊毛玻璃"；再不行退回不透明白底。不是为低端机妥协，是因为 Safari 支持度不一致。
  5. 性能放宽（按你的要求）：不再为低端安卓牺牲效果，但保留两条底线：同时可见的玻璃层不超过 4 个；位移滤镜只在浮层上（不要用在会滚动的长列表上）。
  6. 不要照抄 Apple 的行为：iOS 的 tab bar 合并/分裂、随滚动形变，依赖的是它自己的导航模型。我们只取材料（折射 + 高光边 + 层次），不取行为。