high-contrast-skeuomorphic-clean

name	high-contrast-skeuomorphic-clean
description	创建一个高对比、干净的拟物设计系统，带有模塑感的暗色面板、清晰的明暗分隔、有触感的内嵌纵深，以及克制的信号强调。

High Contrast Skeuomorphic Clean Skill

何时使用

• 创建一个高对比、干净的拟物设计系统，带有模塑感的暗色面板、清晰的明暗分隔、有触感的内嵌纵深，以及克制的信号强调。

工作流程

范围

• 将其作为一套完整的设计系统方向，贯穿页面外壳、主视觉、卡片、控件、辅助模块与微可视化。
• 当界面应显得有触感、高级且工业干净，具有真实的表面纵深与对比，而非扁平极简卡片时使用。
• 这不是俏皮的新拟态，也不是光泽的消费级拟物。成果应保持锐利、现代且系统化。

视觉目标

• 围绕一种强对比关系来构建体验：用浅色或中性的外层页面框住一个深黑或炭灰的主应用外壳。
• 使用带微妙竖向或径向渐变的暗色高级面板，使面板显得被模塑且有立体感，而非扁平。
• 通过内嵌高光、柔和内阴影、反光边缘提示与嵌套的物件式模块营造真正的拟物纵深，但让一切保持干净可控。
• 让一种从设计或品牌派生的克制信号强调色，驱动状态灯、激活标记、微小的进度细节与焦点强调。
• 将干净的无衬线排版与偶尔的等宽标签或实用文字相搭配，使系统显得精准而非装饰性。

实现指引

• 优先使用一个主导性的圆角或轻微斜切的主容器，将整个界面容纳在一个更暗、高级的外壳之内。
• 用一像素包裹、顶缘高光、由暗到更暗的填充、内阴影堆叠与柔和的外阴影衰减来构建卡片与模块，营造有触感的层级。
• 保持高对比：黑色外壳上的白色或近白文字、柔和的灰色辅助文案，以及交互面板与被动面板之间的清晰分隔。
• 在系统内有选择地使用拟物物件，如浏览器式窗口、搜索框、进度条、轨道小组件、文档瓦片或显得像被物理组装的仪器模块。
• 按钮、输入框与标签应显得可触碰：分层填充、微妙的斜面或内嵌边缘、干净的圆角几何，以及分寸得当的悬停亮度，而非喧闹的辉光。
• 用安静的边框线、角标或内部引导轨添加精细的结构框架，使有触感的面板仍处于一套有纪律的布局之内。
• 运动应支撑材质感：遮罩显现、温和的物件抬升、缓慢的轨道细节、高光上微妙的微光，以及平静的粒子漂移都很合适。

推荐模式

• 大型暗色工业外壳置于较浅背景之上，带宽裕的圆角与高级的阴影分量。
• 圆角卡片包裹在纤细的白到透明渐变边框中，带暗色内填充与柔和的内嵌照明。
• 微视觉模块，如轨道图、搜索面板、文档窗框或状态小组件，做成有触感的物件而非扁平插画。
• 在大体单色的系统中，克制地使用所选品牌强调色的信号点、进度细条或激活标签。
• 分栏构图，一侧承载醒目的编辑排版文案，另一侧堆叠模塑感的产品或系统模块。
• 主外壳内的 canvas 或粒子背景纹理保持淡淡的，使其增添氛围而不削弱干净的表面层级。

调节旋钮

• 对比水平：让外壳足够暗、文字足够亮，即便渐变与阴影很微妙，系统也能被立即读懂。
• 拟物纵深：根据系统应有的触感与极简程度，增强或减弱斜面、内阴影与高光强度。
• 强调强度：让品牌信号色点缀构图，但避免把界面变成霓虹调色板。
• 表面柔度：调节圆角与阴影模糊，使组件显得高级且有制造感，而非鼓胀或玩具般。
• 结构框架：根据呈现应有的技术感，增删引导线、分隔线与外层导轨。

避免

• 对比弱、边缘糊烂的柔和褪色新拟态。
• 塞满假材质、皮革或镀铬噱头的过度光泽复古拟物。
• 无视触感分层表面特征的扁平单色暗色 UI。
• 破坏干净工业氛围的过多强调色或明亮辉光。
• 把每个模块都堆满纵深效果，直到层级变得嘈杂。