VISUAL LANGUAGE / DESIGN GUIDE

液态玻璃

Liquid Glass

在玻璃层次之上加入曲面高光、边缘扭曲或流动感,强化材料感。本图鉴是网页视觉模拟,不是原生系统材料或物理折射渲染。

液态玻璃设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

在玻璃层次之上加入曲面高光、边缘扭曲或流动感,强化材料感。本图鉴是网页视觉模拟,不是原生系统材料或物理折射渲染。

适用场景

短工具栏、媒体控制和品牌主视觉里的少量悬浮控件。

不适用与取舍

正文密集区域、需要稳定数字读数的看板,以及复杂多层覆盖。

实现方法

先建立可读的实色回退,再添加半透明和背景滤镜;曲面高光置于不接收指针的伪元素。限制扭曲范围,检查移动端滚动与合成开销。

具体界面示例

图片浏览器的底部控制条有玻璃边缘,图片标题用更实的面板;模糊不可用时按钮仍有明确边界。

常见误区

把文字也做成流动或折射会牺牲识别;不要因追求透明而使控制条在亮图上消失。

延伸阅读

下列技术规范或官方文档可用于核对实现;本站示例与设计取舍由本站编写。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。