UI FLOWKNOWLEDGE SYSTEM

色彩与装饰 · Color & Decoration

玻璃拟态
Glassmorphism

通过半透明表面、背景模糊、细边框、柔和高光和层级阴影制造玻璃般的浮层空间。

A layered glass-like style using translucent surfaces, background blur, fine borders, soft highlights, and depth shadows.

交互预览

这是 mianhua UI Glossary 的原生 Preview Runtime,不是静态截图。

可以直接对 Agent 说

请以「玻璃拟态 / Glassmorphism」为核心视觉方向重设计这个界面。

角色:你是一名精通半透明材质、层级和可读性的 UI/UX 设计师兼前端工程师。

设计理念:玻璃拟态的重点是空间层次,而不是把所有容器都调透明。用户应该能感到前景浮在背景之上,同时文字仍然清楚。

适用场景:AI 产品、创意工具、音乐/媒体、个人仪表盘、轻量营销页和需要未来感的界面。不适合高密度表格和低性能移动页面。

视觉要求:使用半透明 surface、backdrop blur、1px 高光边框、柔和投影和低噪声背景;背景要有足够明暗变化,但不能影响正文阅读。

可读性要求:正文不要直接压在复杂背景上;重要信息需要实色或更高不透明度容器;所有对比度要达标。

交互要求:hover 可以提高不透明度、边框亮度或轻微上浮;focus 状态要比玻璃边框更明显。减少移动端模糊层数。

输出格式:先判断哪些层适合玻璃化,再给背景、surface、透明度、模糊、边框、阴影、状态、性能策略和反例。

相关可运行档案研究

Liquid Glass Agency

以指针响应光场、液态玻璃叠层与编辑式滚动节奏构成的原创数字工作室体验。

page · 94%

Glassmorphic Feature Tabs

以玻璃功能面板、标签切换和指针光场构成的原创功能系统体验。

section · 92%

Liquid Glass Features

以玻璃功能预设、模糊深度和色彩参数联动构成的原创材料实验页。

section · 94%

返回术语实验室 · 浏览完整馆藏 · 读取术语 API