拟物化Skeuomorphism
木纹、皮革、金属与多层渐变还原真实材质，控件通过高光和倒角提示可按下。识别成本低但风格年代感强，现代产品多用于局部点缀。
典型场景怀旧产品 · 教育演示 · 品牌彩蛋
编号13
年代2007-2012 iOS
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
木纹、皮革、金属与多层渐变还原真实材质，控件通过高光和倒角提示可按下。识别成本低但风格年代感强，现代产品多用于局部点缀。
关键词
Realistictexturedepth3D appearancereal-world metaphorsshadowsgradientstactiledetailedmaterial
效果与动效
Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)
设计系统变量
--gradient-stops8-12--texture-overlaynoise+grain--shadow-layers3+--animation-duration300-500ms--depth-effectpronounced--tactiletrue配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects
辅色 / Secondary
Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors
强调色在页面底色上的对比度约 4.5:1，可用于正文与图标。
适用场景
适合 / Best For
- Legacy apps
- gaming
- immersive storytelling
- premium products
- luxury
- realistic simulations
- education
避开 / Do Not Use For
- Modern enterprise
- critical accessibility
- low-performance
- web (use Flat/Modern)
框架兼容
css-in-jscustom
能力矩阵
浅色模式有条件支持
深色模式有条件支持
移动适配不建议
转化导向中Medium
渲染成本高animation / large-images
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Realistic textures applied,
- Complex gradients 8-12 stops,
- Multi-layer shadows,
- Texture overlays present,
- Tactile animations smooth,
- Depth effect pronounced
CSS / 技术关键词
background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)
AI 提示词
Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.