dark-glass-clean-layout

name	dark-glass-clean-layout
description	打造一套深色玻璃布局系统：磨砂高级外壳、干净的多列工作区结构、悬浮数据卡片，以及克制的氛围纵深。

Dark Glass Clean Layout Skill

何时使用

• 打造一套深色玻璃布局系统：磨砂高级外壳、干净的多列工作区结构、悬浮数据卡片，以及克制的氛围纵深。

工作流程

适用范围

• 将其作为一套完整的设计系统方向，贯穿背景氛围、导航、外层框架、布局列、玻璃面板、悬浮卡片和动效。
• 当界面应像一个由沉静玻璃外壳和干净结构布局构建的高级深色工作区或情报控制台时使用。
• 这不是通用的粉彩玻璃拟态，也不是径向的科幻仪表盘。重点是一套带深色磨砂纵深和安静层级的干净布局系统。

视觉目标

• 在近黑基底上构建页面，界面背后带柔和的氛围光或模糊的 WebGL 纹理。
• 使用居中的最大宽度布局外壳，配细竖向边界导轨、微小角标和微妙框架，让页面显得被安放在一个精确的工作区内。
• 通过深色磨砂外壳建立主层级：侧栏、顶部导航药丸、悬浮数据节点和运作卡片都应显得玻璃感却受控。
• 让配色以单色为主，用白色、锌灰、烟灰和炭灰。若需要强调色，从设计中衍生，或仅用于小的状态指示器。
• 让中央舞台在视觉上保持沉静、有呼吸感，让周边卡片和导轨衬托它、而非扰乱它。

实现指引

• 优先采用多列工作区布局，例如桌面端的左侧导航、中央主视觉或可视化舞台、右侧运作侧栏，然后在小屏上干净地堆叠。
• 在深色玻璃外壳周围使用一像素渐变包裹器或微弱的高光边缘，然后在其内部放置更暗的半透明填充并配强背景模糊。
• 玻璃面板应显得烟熏、高级：低不透明度深色填充、清爽的上缘高光、柔和的阴影衰减，以及克制的内部反射。
• 在中央舞台附近添加悬浮的辅助卡片，用于日志、情报笔记、行动计划或系统事件，但限制其数量、留出充裕间距。
• 使用等宽微标签、系统 ID、微小元数据和紧凑的运作标题，赋予玻璃布局技术可信度。
• 按钮、药丸和交互行应使用干净的圆角几何、微妙的悬停提亮和低戏剧性的边框强调，而非喧闹的色彩泛滥。
• 背景氛围可包含模糊的粒子场、微弱的线条运动或抽象的 WebGL 形态，但应足够柔和，让玻璃布局保持主导。
• 动效应显得漂浮、高级：遮罩式文字显现、数据卡片的缓慢漂移、微小视差，以及轻柔的模糊或高光变化皆宜。

推荐模式

• 固定的药丸形顶部导航，包裹在细渐变边缘中，配深色玻璃填充和强模糊。
• 由堆叠磨砂卡片、导航组、协议步骤或遥测模块构建的左右侧壳。
• 中央主视觉舞台，配克制的标题、文案背后的柔和径向晕染，以及一个简单的高对比 CTA。
• 在大屏上环绕中心摆放的悬浮信息卡片，使用深色玻璃包裹器和微小的元数据页脚。
• 细竖向外层导轨和微小方形角标，让工作区保持对齐、有建筑感。
• 类终端或 I/O 卡片，把磨砂外壳纵深与干净的内层行和低调的系统标签结合。

调节旋钮

• 玻璃强度：调节模糊和不透明度，让外壳清晰读作玻璃，又不显浑浊或褪色。
• 布局通透度：在列与悬浮卡片之间保留足够留白，让系统显得沉静、高级。
• 强调色克制：把强调色限制在状态圆点、激活文字或微小指示器上，而非大面积填充。
• 氛围纵深：根据布局应显得多电影感，增减背景模糊、粒子辉光或抽象 WebGL 纹理。
• 框架可见度：让外层导轨和角标足够可见以组织页面，又不至于把它变成一张硬技术网格。

应避免

• 明亮半透明玻璃卡片悬浮在彩色色块之上。
• 把界面压扁成无磨砂纵深、无布局优雅感的纯黑盒子。
• 在中心塞太多悬浮卡片，直至干净的工作区结构崩塌。
• 压过单色深色玻璃系统的沉重霓虹辉光或饱和效果。
• 只把玻璃当作一种卡片样式，而非一套贯穿导航、侧栏和辅助模块的完整布局语言。