| name | skeuomorphic-ui |
| description | 创建拟物化的 Web UI 面板：分层渐变、叠加的内外阴影、反光渐变边框、微纹理，以及浮雕文字或图标细节。当被要求按下、雕刻、有质感、真实、软塑料、软金属或高级实体界面样式时使用。 |
拟物 UI
何时使用
- 卡片、按钮、开关、旋钮、输入框、工具栏或控件应显得有质感。
- 扁平面板需要物理纵深，但又不显得油亮或卡通。
- 设计需要按下、雕刻、凸起、软塑料、软金属或高级硬件感的 UI。
面板配方
- 从一个圆角形状和柔和的垂直渐变开始：顶部更亮、底部更暗。
- 添加一个 1px 渐变边框包裹器以模拟反光边缘。
- 叠加外阴影以营造抬升感，内嵌阴影以营造雕刻纵深。
- 添加一条细顶边高光和一条更暗的下边。
- 有节制地使用文字阴影和图标阴影，营造浮雕感。
- 仅当尺度支持时才添加微细节：点、颗粒、接缝或微小的镜面反光。
- 保持过渡平滑而短促：
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，且不压过内容。
- 文字和图标在阴影效果后仍保持可读。
