液态玻璃设计指南
本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。
设计原理
在玻璃层次之上加入曲面高光、边缘扭曲或流动感,强化材料感。本图鉴是网页视觉模拟,不是原生系统材料或物理折射渲染。
适用场景
短工具栏、媒体控制和品牌主视觉里的少量悬浮控件。
不适用与取舍
正文密集区域、需要稳定数字读数的看板,以及复杂多层覆盖。
实现方法
先建立可读的实色回退,再添加半透明和背景滤镜;曲面高光置于不接收指针的伪元素。限制扭曲范围,检查移动端滚动与合成开销。
具体界面示例
图片浏览器的底部控制条有玻璃边缘,图片标题用更实的面板;模糊不可用时按钮仍有明确边界。
常见误区
把文字也做成流动或折射会牺牲识别;不要因追求透明而使控制条在亮图上消失。
继续比较
结合材料、布局或父子变体比较选择。