dither-laser-dark-mode

抖色激光暗色模式技能

使用时机

• 创建一套高端暗色设计系统，结合近黑色表面、细腻的有序抖色纹理，以及纤细的强调色激光氛围。

工作流

范围

• 将其作为完整的设计系统方向，应用于背景、表面、面板、控件、间距、边框和动效。
• 当界面需要呈现高端、技术感、富有氛围且深邃的观感，同时带有克制的激光元素和细腻的抖色纹理时使用。
• 这不仅仅是背景效果。整个 UI 都应围绕暗色模式的层次感、精准的边框和克制的发光强调，呈现统一的风格。

视觉目标

• 以近黑色或炭灰色为基础，在其上叠加高端暗色表面，构建界面。
• 在背景或低优先级表面图层中加入细腻的有序抖色、粗颗粒像素或柔和的数字颗粒纹理，让深色显得有质感，而非平淡无物。
• 使用纤细的激光束或扫描线营造聚焦的视觉元素，并采用设计的主强调色或最鲜明的强调色，而不是硬编码为蓝色。
• 让激光效果富有电影感且克制：核心线条狭窄、亮白，带有柔和的强调色光晕，以及轻微的体积雾或辉光，而非粗重的霓虹光条。
• 将氛围背景与清晰的面板、深色玻璃卡片、柔和的描边、渐变边框和局部辉光搭配，让 UI 呈现精致的指挥界面质感。

实施指南

• 使用带有细腻色调层次的暗色表面：深黑色底层、略亮的面板、低调的半透明覆盖层，以及纤细的白色或强调色描边。
• 少量在背景、大面积空白区域或次要填充中加入抖色或颗粒纹理。纹理应增添质感和氛围，但不要让界面显得嘈杂或像复古游戏。
• 如果使用 WebGL、canvas 或着色器图层，应将其固定在 UI 后方，并设置 pointer-events: none，同时将内容放在更高的堆叠上下文中。
• 激光光晕、烟雾氛围或辉光应取自当前强调色，但要让最亮的激光核心接近白色，以保证清晰度。
• 将激光用作构图锚点：居中的线条、偏移的光束、汇聚于角落的线条，或扫过背景的光束。它应辅助视觉层级，而非喧宾夺主。
• 面板、仪表盘和导航应采用精准的间距、柔和的模糊效果、暗淡的高光和含蓄的层次感，而不是夸张的玻璃拟态或千篇一律的卡片。

推荐模式

• 悬浮式深色导航外壳，带有背景模糊、纤细边框和克制的强调色活动状态。
• 仪表盘容器带边框标记、细网格线或垂直边界线，并置于带有柔和抖色的暗色底面上。
• 暗色玻璃卡片或近乎不透明的卡片，采用一像素渐变边框、柔和阴影和有限的强调色辉光。
• 在主视觉区域后方、沿中心轴，或在焦点区域附近汇聚的纤细激光或光束元素，配以淡淡的烟雾或薄雾。
• 数据表面应使用白色或中性色文本，确保易读；强调色则用于状态标签、活动标签页、图标、进度条或焦点控件。

调节参数

• 抖色密度：纹理应足够清晰，为背景增添丰富度；同时也要足够柔和，以免在内容后方喧宾夺主。
• 激光强度：将光束粗细与光晕宽度分开调节，让光束保持纤细，同时使辉光柔和舒展。
• 强调色克制：有选择地使用品牌色，让中性暗色调主导整个系统。
• 表面反差：调整页面背景、面板和覆盖层之间的明暗差异，让界面具有层次感而不显浑浊。
• 氛围效果：仅在激光焦点区域附近添加薄雾、辉光和烟雾，不要铺满整个屏幕。

避免

• 过粗的霓虹激光光条、过强的泛光，或破坏可读性的全屏雾效。
• 在设计明显使用其他强调色时，仍硬编码靛蓝色或青色。
• 到处使用重度抖动，让界面显得脏乱、复古或低分辨率，而非高端。
• 缺乏纹理、纵深或材质区分的纯黑布局。
• 忽视激光与抖动视觉系统的通用 SaaS 卡片和渐变。