skeuomorphic-ui

name	skeuomorphic-ui
description	创建拟物化的 Web UI 面板：分层渐变、叠加的内外阴影、反光渐变边框、微纹理，以及浮雕文字或图标细节。当被要求按下、雕刻、有质感、真实、软塑料、软金属或高级实体界面样式时使用。

拟物 UI

何时使用

• 卡片、按钮、开关、旋钮、输入框、工具栏或控件应显得有质感。
• 扁平面板需要物理纵深，但又不显得油亮或卡通。
• 设计需要按下、雕刻、凸起、软塑料、软金属或高级硬件感的 UI。

面板配方

1. 从一个圆角形状和柔和的垂直渐变开始：顶部更亮、底部更暗。
2. 添加一个 1px 渐变边框包裹器以模拟反光边缘。
3. 叠加外阴影以营造抬升感，内嵌阴影以营造雕刻纵深。
4. 添加一条细顶边高光和一条更暗的下边。
5. 有节制地使用文字阴影和图标阴影，营造浮雕感。
6. 仅当尺度支持时才添加微细节：点、颗粒、接缝或微小的镜面反光。
7. 保持过渡平滑而短促：160ms 到 240ms。

基础令牌

按品牌和主题调节这些。

:root {
  --sk-bg-top: #f8fafc;
  --sk-bg-mid: #e9eef5;
  --sk-bg-bottom: #cfd7e4;
  --sk-edge-top: rgba(255, 255, 255, 0.82);
  --sk-edge-bottom: rgba(79, 93, 122, 0.34);
  --sk-shadow: rgba(31, 41, 55, 0.18);
  --sk-shadow-deep: rgba(31, 41, 55, 0.28);
  --sk-highlight: rgba(255, 255, 255, 0.72);
}

凸起面板

用于卡片、面板、主按钮、标签页和控件外壳。

.sk-surface {
  position: relative;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--sk-bg-top), var(--sk-bg-mid) 48%, var(--sk-bg-bottom)) padding-box,
    linear-gradient(180deg, var(--sk-edge-top), rgba(255, 255, 255, 0.22) 45%, var(--sk-edge-bottom)) border-box;
  box-shadow:
    0 18px 34px var(--sk-shadow),
    0 5px 12px rgba(31, 41, 55, 0.12),
    inset 0 1px 0 var(--sk-highlight),
    inset 0 -1px 0 rgba(79, 93, 122, 0.24);
  transition:
    box-shadow 200ms ease,
    transform 200ms ease,
    background 200ms ease;
}

.sk-surface {
  : ;
  : absolute;
  :   auto;
  : ;
  : inherit;
  : (, (, , , ), transparent);
  : none;
}

按下面板

用于激活的按钮、切换态控件、选中的标签页和内嵌凹槽。

.sk-surface.is-pressed {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, #d5dce8, #eef2f7 52%, #f8fafc) padding-box,
    linear-gradient(180deg, rgba(72, 84, 112, 0.38), rgba(255, 255, 255, 0.62)) border-box;
  box-shadow:
    inset 0 4px 10px rgba(31, 41, 55, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.72),
    0 4px 10px rgba(31, 41, 55, 0.10);
}

浮雕文字与图标

用于有质感控件内部的标签。保持微妙。

.sk-label {
  color: #334155;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(31, 41, 55, 0.12);
}

.sk-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 -1px 0 rgba(31, 41, 55, 0.14));
}

微纹理

以低不透明度使用微纹理。它应被感受到，而不被注意到。

.sk-texture {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(31, 41, 55, 0.08) 0 1px, transparent 1.5px);
  background-size: 18px 18px, 22px 22px;
}

审美准则

• 每个组件用一种物理材质：软塑料、搪瓷、陶瓷、金属或橡胶。
• 保持纵深有方向性：光来自顶部、阴影在下方。
• 避免纯黑阴影；用带色的灰或带品牌色的深色。
• 不要在同一组件中混用玻璃拟态、新拟态和拟物化。
• 把厚重的按下效果保留给交互态，而非每个面板。
• 在小控件上减少纹理，让 UI 保持清爽。

快速检查

• 凸起态有更亮的顶边和更暗的下边。
• 按下态用内嵌阴影反转纵深。
• 圆角在实际渲染尺寸下保持平滑。
• 渐变边框为 1px，且不压过内容。
• 文字和图标在阴影效果后仍保持可读。