Back to Details

dark-glass-clean-layout

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dark Glass Clean Layout Skill

深色玻璃质感简洁布局 Skill

Use When

使用场景

  • Create a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.
  • 打造带有磨砂高级外壳、简洁多栏工作区结构、悬浮数据卡片以及内敛氛围感深度的深色玻璃布局系统。

Workflow

工作流程

Scope

适用范围

  • Apply this as a full design-system direction across background atmosphere, navigation, outer framing, layout columns, glass panels, floating cards, and motion.
  • Use it when the interface should feel like a premium dark workspace or intelligence console built from calm glass shells and clean structural layout.
  • This is not generic pastel glassmorphism and not a radial sci-fi instrument panel. The focus is a clean layout system with dark frosted depth and quiet hierarchy.
  • 将此作为完整的设计系统方向，应用于背景氛围、导航、外框、布局栏、玻璃面板、悬浮卡片及动效等所有环节。
  • 当界面需要呈现为一个由沉稳玻璃外壳与简洁结构化布局构建而成的高端深色工作区或智能控制台时，可使用该方案。
  • 这并非通用的马卡龙色玻璃拟态风格，也不是放射状科幻仪表板。核心是具备深色磨砂质感层次与清晰视觉层级的简洁布局系统。

Visual target

视觉目标

  • Build the page on a near-black base with soft atmospheric light or blurred WebGL texture behind the interface.
  • Use a centered max-width layout shell with thin vertical boundary rails, tiny corner markers, and subtle framing so the page feels housed inside a precise workspace.
  • Create the main hierarchy through dark frosted shells: sidebars, top navigation pills, floating data nodes, and operational cards should all feel glassy but controlled.
  • Keep the palette mostly monochrome with white, zinc, smoke gray, and charcoal. If accent color is needed, derive it from the design or use it only for small state indicators.
  • Let the center stage remain visually calm and breathable, with surrounding cards and rails supporting it rather than cluttering it.
  • 以近乎纯黑为基底构建页面，界面后方搭配柔和的氛围光或模糊WebGL纹理。
  • 使用居中的最大宽度布局外壳，搭配纤细的垂直边界导轨、微小的角落标记与微妙的框架，让页面仿佛置身于一个精准的工作空间内。
  • 通过深色磨砂外壳构建主视觉层级：侧边栏、顶部导航胶囊、悬浮数据节点及操作卡片都应呈现玻璃质感，但需保持克制。
  • 调色板以单色为主，包含白色、锌灰色、烟灰色及炭黑色。若需要强调色，需从设计中提取或仅用于小型状态指示器。
  • 让中心区域保持视觉上的沉稳与通透，周围的卡片和导轨起到支撑作用而非造成杂乱。

Implementation guidance

实施指南

  • Prefer a multi-column workspace layout, such as left navigation, central hero or visualization stage, and right operational sidebar on desktop, then stack cleanly on smaller screens.
  • Use one-pixel gradient wrappers or faint highlight edges around dark glass shells, then place darker translucent fills inside with strong backdrop blur.
  • Glass surfaces should feel smoky and premium: low-opacity dark fills, crisp top-edge highlights, soft shadow falloff, and restrained internal reflections.
  • Add floating supporting cards near the central stage for logs, intelligence notes, action plans, or system events, but keep their quantity limited and their spacing generous.
  • Use mono micro-labels, system IDs, tiny metadata, and compact operational headings to give the glass layout technical credibility.
  • Buttons, pills, and interactive rows should use clean rounded geometry, subtle hover brightening, and low-drama border emphasis instead of loud color floods.
  • Background atmosphere can include blurred particle fields, faint line motion, or abstract WebGL forms, but it should stay soft enough that the glass layout remains primary.
  • Motion should feel floating and premium: masked text reveals, slow drift on data cards, tiny parallax, and gentle blur or highlight shifts are appropriate.
  • 优先采用多栏工作区布局，例如桌面端采用左侧导航、中央核心展示/可视化区域、右侧操作侧边栏，在小屏幕上则整齐堆叠。
  • 在深色玻璃外壳周围使用1像素渐变边框或微弱高亮边缘，内部填充深色半透明背景并添加强烈的背景模糊效果。
  • 玻璃表面应呈现烟熏质感与高端感：低透明度深色填充、清晰的顶部边缘高光、柔和的阴影过渡以及内敛的内部反光。
  • 在中央区域附近添加悬浮辅助卡片，用于展示日志、智能笔记、行动计划或系统事件，但需控制数量并保证充足间距。
  • 使用单色微标签、系统ID、微小元数据及紧凑的操作标题，为玻璃布局增添技术可信度。
  • 按钮、胶囊组件及交互行应采用简洁的圆角几何造型、微妙的悬停提亮效果以及低饱和度的边框强调，而非大面积鲜艳色块填充。
  • 背景氛围可包含模糊粒子场、微弱线条动效或抽象WebGL图形，但需保持柔和，确保玻璃布局始终是视觉焦点。
  • 动效应呈现悬浮感与高端感：遮罩文本渐显、数据卡片缓慢漂移、微小视差效果以及柔和的模糊或高光变化都是合适的选择。

Recommended patterns

推荐模式

  • Fixed pill-shaped top navigation wrapped in a thin gradient edge with dark glass fill and strong blur.
  • Left and right side shells built from stacked frosted cards, navigation groups, protocol steps, or telemetry modules.
  • Central hero stage with restrained headline, soft radial wash behind the copy, and a simple high-contrast CTA.
  • Floating info cards positioned around the center on large screens, using dark glass wrappers and tiny metadata footers.
  • Thin vertical outer rails and tiny square corner marks to keep the workspace feeling aligned and architectural.
  • Terminal-like or I/O cards that combine frosted shell depth with clean inner rows and muted system labels.
  • 固定胶囊形顶部导航，外覆纤细渐变边框，内部为深色玻璃填充并带有强烈模糊效果。
  • 左右侧边外壳由堆叠的磨砂卡片、导航组、协议步骤或遥测模块构成。
  • 中央核心区域搭配内敛的标题、文本后方的柔和径向渐变以及简洁高对比度的CTA按钮。
  • 在大屏上，于中心区域周围放置悬浮信息卡片，采用深色玻璃外壳与微小元数据页脚。
  • 纤细的垂直外导轨与微小方形角落标记，让工作空间保持对齐感与建筑感。
  • 类终端或I/O卡片，结合磨砂外壳层次与简洁内部行结构及低饱和度系统标签。

Tuning knobs

调节要点

  • Glass intensity: tune blur and opacity so shells read clearly as glass without becoming muddy or washed out.
  • Layout openness: preserve enough negative space between columns and floating cards so the system feels calm and premium.
  • Accent restraint: keep accent color limited to status dots, active text, or tiny indicators rather than large fills.
  • Atmospheric depth: add or reduce background blur, particle glow, or abstract WebGL texture depending on how cinematic the layout should feel.
  • Frame visibility: make outer rails and corner markers visible enough to organize the page without turning it into a hard technical grid.
  • 玻璃质感强度：调整模糊度与透明度，确保外壳清晰呈现玻璃质感，同时避免显得浑浊或褪色。
  • 布局开阔度：在栏与悬浮卡片之间保留足够留白，让系统呈现沉稳高端的感觉。
  • 强调色克制：将强调色限制在状态点、激活文本或微小指示器上，而非大面积填充。
  • 氛围深度：根据布局所需的电影感，增加或减少背景模糊、粒子光晕或抽象WebGL纹理。
  • 框架可见度：让外导轨与角落标记足够清晰以规整页面，但不要使其变成生硬的技术网格。

Avoid

避坑指南

  • Bright translucent glass cards floating over colorful blobs.
  • Flattening the interface into plain black boxes with no frosted depth or layout elegance.
  • Overcrowding the center with too many floating cards until the clean workspace structure collapses.
  • Heavy neon glows or saturated effects that overpower the monochrome dark-glass system.
  • Treating glass as a card style only instead of a full layout language spanning nav, sidebars, and supporting modules.
  • 避免在彩色模糊背景上放置明亮的半透明玻璃卡片。
  • 避免将界面简化为纯黑盒子，完全失去磨砂质感与布局美感。
  • 避免在中心区域放置过多悬浮卡片，破坏简洁工作区结构。
  • 避免使用浓重的霓虹光晕或饱和效果，盖过单色深色玻璃系统的视觉焦点。
  • 避免仅将玻璃效果作为卡片样式，而应将其作为覆盖导航、侧边栏及辅助模块的完整布局语言。