拟物化设计是做什么的？

当屏幕控件的外形和行为与用户已熟悉的物理对象相似时，更易于学习。

模仿真实物体的界面：皮革、亚麻、木材、毛毡、玻璃和拉丝金属，从上方打光，带有渐变和层次阴影。其根源可追溯到 20 世纪 80 年代的桌面图标，在 iOS 1 到 6 达到顶峰，直到 2013 年被 iOS 7 取代。

时期： 2007–2013 · 时代： 触屏 · 领域： 图形与 UI 设计 · 别称： 拟物化 UI、iOS 6 风格、真实物体界面

何时加载此技能

当用户要求以下内容时加载："拟物（skeuomorphic）"、"拟物化（skeuomorphism）"、"iOS 6"、"真实世界纹理"、"皮革纹理"、"触感界面"、"逼真按钮"、"光泽按钮"、"木头和亚麻"、"复古 iOS"、"卷页效果"、"缝制皮革"。

适用于：音乐和音频应用、笔记和日记应用、带有桌面或棋盘的游戏、新奇和怀旧网站、初次使用智能手机用户的引导页面。

不适用于以下情况：

产品数据密集，任何装饰性像素都会挤占阅读空间。
品牌需要抽象、极简或原生化感受。
设计必须适配多种设备密度，并在低功耗设备上运行，而5层阴影会耗费帧率。

系统指令

以拟物化风格生成 UI 或图形布局时，必须遵循以下规则：

将每个控件建模为一个有已知用途的真实物体，例如拨动开关、记事本、书架或刻度盘，并将其比例保持在与原物相差 10% 以内。
从上方以 90 度单一光源照亮每个表面，使高光位于顶部边缘，阴影向下投射。
通过 3 到 5 层堆叠来构建深度：1px 的顶部浅色高光、2 到 4 像素的渐变主体、1px 的深色底边、内阴影和外投影。
使用 128 到 256 像素、透明度 4% 到 12% 的重复位图纹理覆盖大表面：亚麻、皮革、纸张、木纹或毛毡。
为每个按钮添加从上到下 8% 到 15% 亮度差异的渐变，并在按钮按下时反转该渐变。
在每个材质面板上添加一处缝制、浮雕或压凹细节，带有 1px 的内亮边和 1px 的外阴影。
在动效中反映真实世界：卷页过渡、翻转过渡和弹簧加载的开关，遵循其模仿对象的物理规律。

护栏

以下每一行都会破坏该风格。在返回输出前，对照列表进行检查。

绝不： 控件使用无渐变、无阴影的纯色填充。
绝不： 不同组件间光源方向改变。
绝不： 纹理平铺出现可见接缝或重复周期短于 64px。
绝不： 材质隐喻与功能不匹配，例如木质计算器。
绝不： 无填充的像素级 1px 轮廓图标。
绝不： 模糊半径为 0px 且无扩展的阴影。
绝不： 无表面纹理的纯白色背景。

矢量特征

轴	评分	1 分代表	5 分代表
装饰性	`■■■■□` 4/5	纯粹极简	极繁主义
维度感	`■■■■□` 4/5	严格 2D	全 3D / 空间
网格严谨度	`■■■□□` 3/5	混乱 / 有机	严格数学网格
拟物真实感	`■■■■■` 5/5	抽象数字	照片级材质
字体表现力	`■■■□□` 3/5	中性 / 不可见	实验性 / 说明性

保持这些分数。如果某个请求将一个轴移动 2 分或更多，则你已离开该风格：请转到“血统回退”。

空间与网格逻辑

网格机制： iPhone 上为 320 x 480pt 画布，后来为 320 x 568pt，最小触控目标为 44pt；内容以全宽分组行或放置在搁板上，边距为 10 到 20pt。
留白比例： 20%–35% 的表面保持空白，因为纹理和框架填充了其余部分；间距比例为 4、10、20、44pt。
对齐规则： 控件位于其对象隐喻的框架内，例如表格中的行、书架上的书或笔记本中的页面；按钮文本居中，行内文本左对齐。
容器几何： 圆角矩形，圆角半径为 5 到 10px；分组表格单元格的外角半径为 10px；高度为 44px 的条形带有 1px 斜边。

排版

分类： 人文主义无衬线体 · 粗衬线体 · 手写体
字距： 标题尺寸为 0em 到 0.01em；正文保持 0；按钮标签使用 +0.02em。
行高： 标题 1.1；正文 1.3 到 1.4；表格行高 44px，包含单行 17px 文本。
层级规则：
- 按钮和标题标签使用粗体（700），正文使用常规（400）。
- 标题和行设置为 17px，次要标签 14px，说明文字 12px。
- 添加 1px 文字阴影：深色文字下方为 60% 透明度的白色，浅色文字上方为 60% 透明度的黑色，使文字看起来像是印在表面上。
- 在对象绑定屏幕上用不同字体设置标题文字，例如书架上的粗衬线体或记事本上的手写体。

字体搭配

标题	正文	备注
Roboto Slab	Open Sans	对象标签使用粗衬线体配合人文主义正文字体，近似 iOS 6 笔记的 Marker Felt 和 Helvetica 组合。
Arvo	Lato	皮革和木板使用粗衬线体，配合圆润无衬线体保证控件清晰易读。
Caveat	Source Sans 3	记事本和日记隐喻使用手写体，配合中性无衬线体用于 UI 文字。

色彩与光照

调色板结构： 三到五种材质颜色，60% 的表面使用主材质，再加上 10% 到 15% 表面的光泽蓝色强调色用于主要控件。
对比度规则： 材质表面上的文字对比度至少为 4.5:1；皮革棕色和毛毡绿色上的浅色文字对比度约为 8:1，光泽蓝色上的文字对比度为 4.5:1。
表面处理： 摄影纹理、线性渐变（50% 硬分割以产生光泽）、3% 到 6% 透明度的噪点；玻璃上半部分使用 30% 透明度的白色高光。
光照与阴影： 单一光源来自上方；高光为顶部边缘 40% 到 70% 透明度的白色，阴影为向下指向的 25% 到 50% 透明度的黑色，偏移量为 1 到 3px。

调色板

名称	十六进制	角色
亚麻色	`#D8D4CC`	背景纹理基础
皮革棕	`#6B4A2F`	面板表面
玻璃蓝	`#2F7BE0`	主要控件渐变
铬色	`#C9CDD3`	金属条和边框
毛毡绿	`#1E5B3A`	桌面表面
墨水色	`#2B2118`	浅色材质上的文字

材质与纹理

表面模拟： 真实材质：带有缝线的皮革、亚麻、纸张、木材、毛毡、拉丝铝、玻璃和铬。
边框规则： 1px 深色外边缘，透明度 40% 到 60% 黑色；1px 白色内亮边，透明度 40% 到 60%；皮革上距离边缘 4px 处应有虚线 1px 缝线。
模糊与层级： 按钮投影为 0 1px 2px 40% 黑色，面板投影为 0 4px 10px 50% 黑色；凹槽内阴影为 inset 0 1px 3px 50% 黑色；层级使用 3 个级别。

装饰与图标

图标： 57x57px 的光泽填充图标，圆角半径 12px，顶部光泽高光覆盖 50% 高度，1px 斜边，下方带有反射阴影。
插图： 带有光照的渲染对象插图，例如书架、麦克风、胶片卷轴和磁带机，从 3/4 俯视图绘制。
装饰元素： 缝线 · 卷页 · 木质搁板 · 撕纸边缘 · 光泽高光 · 铬色边框 · 图标下方反射

动效与交互

屏幕原生： 是
过渡物理： 物体物理：卷页和翻页在 400 到 600ms 内完成；开关在 20ms 弹簧稳定效果下滑动；搁板滚动具有惯性，边缘回弹 8px。
缓动函数： cubic-bezier(0.42, 0, 0.58, 1)
持续时间（毫秒）： 350
悬停与激活： 按下状态会反转按钮渐变并移除外部阴影，使按钮看起来像是被按入表面 1 到 2px；触摸设备没有悬停状态。

代码与令牌入门

在根元素上设置 data-style="skeuomorphism" 并粘贴令牌。文件 tokens.css 包含相同的令牌和一组参考规则。

[data-style="skeuomorphism"] {
  --color-bg: #D8D4CC;
  --color-surface: #6B4A2F;
  --color-text: #2B2118;
  --color-muted: #6E6659;
  --color-primary: #2F7BE0;
  --color-accent: #C9A24B;
  --color-border: rgba(0, 0, 0, 0.5);
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --border-radius: 8px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);
  --duration: 350ms;
  --gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
  --gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  --touch-target: 44px;
  --color-on-bg: #2B2118;
  --color-on-surface: #D8D4CC;
  --color-on-primary: #000000;
  --color-on-accent: #2B2118;
  --color-muted-on-bg: #5F574E;
  --color-muted-on-surface: #CDC6BC;
  --color-link: #2B2118;
  --color-link-on-surface: #D8D4CC;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: 0em;
  --display-leading: 1.1;
  --display-case: none;
  --body-leading: 1.55;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwind 模式：

元素	类名
页面	`min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
标题	`font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
面板	`rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)]`
按钮	`h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)]`
输入框	`h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]`

视觉资源包

该风格的图片和图标为文件形式。按原样使用它们，或将其作为规范阅读并自行绘制风格相同的图形。

文件	内容
`pack/hero.svg`	主题图像，800 x 600。以该风格视觉语言绘制的抽象图片。
`pack/pattern.svg`	图案瓦片，80 x 80。双向重复。
`pack/icons.svg`	图标精灵：主页、搜索、心形、星形、铃铛、用户、邮件、日历、图像、闪电、播放、勾选、关闭、滑块。

图标： 实心，24px 方框内描边 2，圆头端点，圆角连接，容器：圆角。使用：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。图标继承 currentColor。
图标家族： 该精灵来自 Phosphor (Fill)，由 Phosphor Icons 制作，MIT 许可证。原因：真实物体的完整实心轮廓。容器提供材质和光照。它是一个用于演示的开源替代表。对于产品，请使用品牌图标库并根据以下规则选择家族。
显示类型： 字重 700，字距 0em，行高 1.1，大小写：无。
字重： 显示 700，副标题 700，正文 400，加粗文字 700，标签和按钮 700。该风格使用两种字重（400, 700），不使用其他。显示比正文重 300。强调靠字重：较重的词提供强调，因此各字重之间的差别清晰。
正文类型： 16px，行高 1.55。
页面： 主图左右分割，左对齐，常规密度，强调倾斜 0°。
文字颜色： --color-text 仅用于主要阅读区域。每个区域使用其对应令牌：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何选择图标包

图标包是一种用于图片的字体。选择时应与选择正文字体一样谨慎。以下规则适用于开源集和许可库。

描边与字干匹配。 在文字大小下，将图标放在正文字体旁边。图标的线条与字母的字干粗细相同。
终端和角点遵循圆角令牌。 平端点和平角连接配合零圆角半径使用。圆头端点和圆角连接配合软圆角半径使用。
填充模式跟随时代技术。 印刷时代切割实心形状。具有深度的屏幕时代填充并着色形状。当前产品界面绘制轮廓。
隐喻不比风格年轻。 每个图片都是该时代已知的对象。具有后来隐喻的图标会破坏时代感。
一个家族，一个网格。 所有图标来自一个家族和一个变体，在一个方框上绘制。不要在一个表面混合不同家族。
家族涵盖产品。 在确定使用前，列出产品所需的每个概念。缺少任一概念图标的家族都是错误的选择。
颜色是令牌。 图标继承 currentColor。第二种色调来自令牌，而不是文件。
许可证允许使用。 阅读该集的许可证。在许可证要求的地方注明出处。有品牌的产品使用其许可库，并应用相同规则选择家族。

血统回退

当用户要求变体时，不要即兴发挥。向这里命名的相邻风格融合，并加载其技能。

如果用户要求更扁平：向 flat-design（扁平设计）融合。移除所有渐变、纹理和阴影，设置纯色填充，保留颜色和 5

…

[因翻译而截断]

拟物化设计