blue-laser-clean-glass-layout

name	blue-laser-clean-glass-layout
description	打造干净的暗色玻璃布局系统：细蓝激光氛围、磨砂高端外壳，以及精致的仪表盘结构。

Blue Laser Clean Glass Layout 技能

何时使用

• 打造干净的暗色玻璃布局系统：细蓝激光氛围、磨砂高端外壳，以及精致的仪表盘结构。

工作流程

范围

• 把它作为完整的设计系统方向，贯穿背景氛围、导航、hero、浮动卡片、仪表盘外壳、表格与动效。
• 当界面应让人感到高端、暗色、以蓝为主、可操作，配一道克制的激光束融入干净玻璃布局时使用。
• 这不只是激光效果，也不是通用暗色玻璃拟态。激光束、雾、玻璃外壳与仪表盘构框都应支撑一个统一系统。

视觉目标

• 把页面建立在近黑底上，配细微蓝底调，界面后方是固定的氛围激光背景。
• 用细蓝或靛蓝激光束配白热核心、柔和光晕与轻体积烟雾或雾，让它读起来电影感但精确。
• 用暗磨砂外壳、边框渐变包裹、半透明胶囊与玻璃般高端卡片，把 UI 层叠在激光之上。
• 保持字体清脆、现代：白色 display 文案、柔和蓝灰辅助文字，以及干净紧凑的标签以显产品可信度。
• 让整体调性显得干净、昂贵，而非嘈杂科幻，让激光作为聚焦的空间母题而非奇观。

实现指引

• 用固定的全屏 canvas 或背景层做激光与雾，然后把所有前景 UI 保持在其上方一个独立的可滚动内容层。
• 保持激光窄而优雅。把光束粗细与发光宽度分开，让线保持细、而光晕与烟雾能柔和呼吸。
• 把导航做成浮动或吸附的玻璃暗胶囊，配 backdrop blur、细边框与平静白字。
• 用带框的中央外壳或 max-width 应用容器，配 border-x 轨、微小角标记或细微垂直边界来构建页面结构。
• 引入玻璃卡片，配暗半透明填充、一像素渐变边框、柔和阴影衰减，以及有限的蓝色强调时刻，用于图表、状态 chip 或图标。
• 仪表盘分区应显得精致、模块化：侧栏、指标卡、事件流、数据表与搜索控件应共享相同的玻璃暗面板逻辑。
• 有选择地用蓝色做活跃指示、CTA 强调、图标强调与激光氛围，而让大多数面板保持中性、暗色。
• 运动应保持平静、高端：蒙版标题显现、细微卡片飘动、柔和光束脉动，以及温和悬停变亮都合适。

推荐模式

• 固定蓝激光与雾场置于中央玻璃仪表盘或 hero 外壳之后。
• 浮动胶囊导航，配模糊暗填充、全宽圆角几何与克制白边框。
• 边框渐变指标卡与事件面板，悬浮在 hero 文案旁或上方。
• 大仪表盘容器，配磨砂头栏、柔和 tab、侧栏模块与干净数据表。
• 蓝色 CTA 按钮搭配更安静的描边或玻璃次要按钮。
• 微小蓝色实时点、底发光强调，以及光束或焦点模块附近的柔和氛围 bloom。

调节旋钮

• 激光强度：保持光束细而可读，同时分别调整光晕、脉动与烟雾。
• 蓝色氛围：根据系统应有多高端还是多有能量，在靛蓝、钴蓝与更冷的电蓝之间切换。
• 玻璃深度：调节模糊、不透明度与边缘高光，让外壳显得高端而不浑浊。
• 布局密度：选择 hero 周围出现多少浮动卡片与仪表盘模块，之后干净构图才开始显得拥挤。
• 氛围量：让雾与 bloom 支撑光束，但避免用雾霭填满整页。

避免

• 盖过布局的粗霓虹激光条。
• 有蓝色强调但无有意义玻璃深度或氛围光束逻辑的扁平暗色仪表盘。
• 打破暗色高端感的粉彩玻璃拟态、明亮斑点或半透明白卡片。
• 给每个组件都用发光、模糊或边框效果过度装饰。
• 让激光或雾降低前景内容的可读性。