# 拟物化 / Skeuomorphism

> 风格 · `id: skeuomorphism`

用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。

**别名:** 拟物化 · 拟物风格 · 仿真质感设计 · 苹果早期那种真皮缝线效果 · 带纹理立体感的老式UI · 皮革木纹质感界面 · Realistic UI · Skeuomorphic Design

**分类:** Style / Visual Language

## 适用场景

- 用户不熟悉触屏，需要借助现实隐喻降低学习成本
- 品牌需要复古 怀旧或高端工艺感（音响 咖啡 笔记本应用）
- 表达物理操作的乐趣，如拨动 按压 旋转

## 不适用场景

- 信息密度高的工具类界面，装饰会挤压内容与效率
- 需要频繁换肤与多平台适配，重度纹理维护成本高
- 极简品牌语境，拟物会显得过时与俗气

## 常见形式

- **皮革缝线** (Leather) — 皮革纹理加缝线描边，早期 iOS 日历 记事本
- **拉丝金属** (Brushed Metal) — 金属渐变与高光倒角，iTunes 老播放器
- **纸质** (Paper) — 纸张折角与压印文字，iBooks 书架

## 开发规格

- **typography:** 系统无衬线，贴近真实印刷
- **color:** 灰铝渐变底 × 蓝色高光
- **border:** 金属描边 + 内侧高光线
- **shadow:** 外投影 + inset 内高光同时使用
- **spacing:** 控件内边距模拟实物比例
- **motion:** 150–200ms 的按压实感过渡，模拟物理回弹
- **states:** hover 加深高光；focus 用蓝色发光可见轮廓；active 用 inset 阴影表现按下；disabled 降低对比；error 用红色高光

## 实现要点

**CSS:** `background-image: url(texture)` `box-shadow: inset 0 1px 0` `linear-gradient` `border-radius` `text-shadow`

三层立体感：基础材质层（纹理图或细密渐变），顶部 1px 高光内阴影模拟受光 上缘，底部外投影表现厚度。按钮按下时反转内阴影方向制造"压下去"。渐变 范围要窄（3%～8% 明度差），否则像廉价塑料。文字用压印效果：深色投影 1px 加同色 1px 高光。深色模式降低材质明度但保留高光结构。

## 交给 Agent 的任务 Prompt

```text
在当前项目中用拟物化风格（Skeuomorphism）实现一组立体按钮与开关。

先检查现有 Design Token 与主题变量，材质参数做成可配置变量而非写死。
要求：
- 按钮与开关用渐变 + 内高光 + 投影呈现立体按压感，:active 反转内阴影
- 材质用程序化渐变或内联 SVG，不引入大体积贴图资源
- 支持键盘聚焦态，对比度满足可读性
- 深色模式降低材质明度并保留高光结构
- 若有过渡动画，尊重 prefers-reduced-motion
- 不新增任何依赖
完成后运行项目现有检查，并列出修改的文件。
```

### 其余层级 Prompt

**Basic:** 用拟物化风格（Skeuomorphism）设计界面：控件采用真实材质质感——皮革 金属 木材， 按钮有立体按压感，开关像实物拨杆。

**Design:** 拟物化设计规范：底色用皮革纹或木纹材质图；按钮为窄幅线性渐变（上下明度差 8% 以内）+ 1px 顶部高光内阴影 + 底部投影；控件圆角 6～10px；文字用压印 效果（1px 深影 + 1px 高光）；缝线用 dashed 描边模拟；按下态反转内阴影并 下移 1px。深色模式整体降明度 20%，高光保留。

**Implementation:** 用 CSS 实现拟物化按钮：background: linear-gradient(#f5f0e6, #d8d0c0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.35); border: 1px solid rgba(0,0,0,0.4); :active 时改为 box-shadow: inset 0 2px 4px rgba(0,0,0,0.4)。材质纹理优先用程序化渐变 或内联 SVG，避免大体积贴图；控件保持可聚焦态与对比度达标。

## 相关概念

- [glassmorphism](/interface-atlas-web/styles/glassmorphism) — 相似概念
- [flat-design](/interface-atlas-web/styles/flat-design) — 相似概念
- [retro-futurism](/interface-atlas-web/styles/retro-futurism) — 相似概念
- [button](/interface-atlas-web/components/button) — 影响组件
- [switch](/interface-atlas-web/components/switch) — 影响组件

## Sources

- [Nielsen Norman Group — Flat Design and Skeuomorphism](https://www.nngroup.com/articles/death-of-flat-design/)
- [Apple HIG — Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

---

JSON: `/interface-atlas-web/api/concept/styles/skeuomorphism.json` · 站点: /interface-atlas-web/styles/skeuomorphism