Skeuomorphism 拟物设计
Skeuomorphism carries real-world materials and objects into digital UI: controls are rendered as if physically made of something — glossy plastic, brushed metal, leather, paper — with the lighting, texture, and affordances of the real thing. A skeuomorphic app teaches itself: a page that looks tearable invites turning, a raised glossy button invites pressing. It peaked in early iOS and Mac OS X, and was largely displaced by flat design around 2013.
拟物设计把真实世界的材质和物件搬进数字界面：控件被渲染得像真的由某种材料做成 —— 亮面塑料、拉丝金属、皮革、纸张 —— 带着实物的光照、质感和可操作性暗示。拟物的 App 自带说明：看起来像能撕的页面会邀请你翻页，一颗凸起的光面按钮会邀请你按下去。它在早期 iOS 和 Mac OS X 达到巅峰，2013 年前后基本被扁平设计取代。
Scope: This entry covers the visual style. The interaction-metaphor sense (a 'trash can' you drag files to) is the same idea one level up, and NN/g treats both together — but the atlas signals below are about pixels, not metaphors.
范围：本条只覆盖视觉风格。「把文件拖进废纸篓」这类交互隐喻是同一个想法往上一层，NN/g 把两者放在一起讨论 —— 但下面图鉴里的信号讲的是像素，不是隐喻。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Simulated real materials仿真真实材质 surface defining定义特征
Surfaces look made of something physical — leather, paper, linen, brushed metal, green felt — usually with visible texture or grain.
表面看起来像由实体材料做成 —— 皮革、纸张、亚麻、拉丝金属、绿呢绒 —— 通常带有可见的纹理或颗粒。
-
Physical lighting model物理光照模型 depth defining定义特征
Gloss highlights, bevels, and inner shadows imply a light source: buttons bulge outward, fields sink inward, edges catch light.
高光、斜面和内阴影暗示着光源的存在：按钮向外鼓起，输入框向内凹陷，边缘会接住光。
-
Real-object metaphors实物隐喻 imagery defining定义特征
The UI is drawn AS the object it replaces: a notepad with ruled paper, a bookshelf of covers, a dial you rotate.
界面直接画成它所替代的那个实物：带横线纸张的记事本、摆满封面的书架、可以拧的旋钮。
-
Crafted physical details手工感的实体细节 geometry defining定义特征
Stitching, torn-paper edges, embossed or letterpress text, rivets — ornamental traces of how the 'real' object would be manufactured.
缝线、撕纸边缘、压印或凸版文字、铆钉 —— 这些装饰性痕迹模拟「实物」被制造出来的工艺。
-
Glossy gradient controls光面渐变控件 depth supporting辅助特征
Buttons and bars carry vertical gradients with a specular top highlight — the 'gel' or 'aqua' look of pressable plastic.
按钮和栏使用纵向渐变，顶部带一道镜面高光 —— 也就是可按压塑料的「凝胶」或 Aqua 质感。
-
Palette follows the material配色跟随材质 color variable可变特征
Color comes from the simulated material (tan leather, grey linen), so almost any palette can be skeuomorphic.
颜色取自模拟的材质（棕黄皮革、灰亚麻），所以几乎任何配色都可以是拟物的。
-
Flat unshaded fills无光影的平涂色块 surface avoid避免
Large flat single-color surfaces with no lighting break the illusion — that's the doorway to Flat Design.
大面积没有光影的单色表面会打破真实幻觉 —— 那就是通往扁平设计的门。
Often confused with: Neumorphism最容易混淆：新拟态
Skeuomorphism拟物设计
Neumorphism新拟态
This is skeuomorphism because surfaces imitate REAL, nameable materials — leather, paper, metal — with rich lighting, texture, and object metaphors.
这是拟物设计，因为它的表面模仿的是真实的、叫得出名字的材质 —— 皮革、纸张、金属 —— 带有丰富的光照、质感和实物隐喻。
It would become neumorphism if every material and texture vanished and all controls were instead extruded from one continuous matte surface with soft dual shadows.
如果所有材质和纹理都消失，控件全部改由一块连续的哑光表面挤出、只靠柔和的双阴影塑形，就变成新拟态了。
In code — optional starting points代码写法 —— 可选起点
Raised glossy control: top highlight + drop shadow
background: linear-gradient(#fdfdfd, #d8d8d8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35);Recessed field: inner shadow sinks it into the surface
box-shadow: inset 0 2px 4px rgba(0,0,0,.35); background: #f3efe6;Letterpress/embossed text on light materials
text-shadow: 0 1px 0 rgba(255,255,255,.6);Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using skeuomorphism. Defining signals: controls rendered as simulated physical materials (e.g. leather, paper, brushed metal) with visible texture; a consistent lighting model — gloss highlights on raised elements, inner shadows on recessed fields; real-object metaphors for whole surfaces (a notepad drawn as ruled paper); crafted physical details like stitching or embossed text. Keep the specific material palette and density flexible. Use layered gradients with specular highlights, inset box-shadows for recessed fields, and subtle texture images or noise. Do not drift into neumorphism: the decisive difference is that skeuomorphic surfaces imitate real nameable materials, not one uniform soft-extruded surface. Preserve readable text contrast on textured backgrounds, visible controls and focus states, and reduced-motion support.
用拟物设计（skeuomorphism）创建这个界面。决定性信号：控件渲染成仿真的实体材质（如皮革、纸张、拉丝金属），带可见纹理；一致的光照模型 —— 凸起元素上有高光，凹陷输入框有内阴影；整个表面使用实物隐喻（记事本画成横线纸）；缝线、压印文字这类手工感实体细节。具体的材质配色和密度保持灵活。使用带镜面高光的多层渐变、用 inset box-shadow 做凹陷区域，以及细腻的纹理图片或噪点。不要滑向新拟态：决定性区别在于拟物表面模仿的是真实的、叫得出名字的材质，而不是一块统一的柔和挤出表面。保证纹理背景上的文字对比度可读、控件和焦点状态可见，并支持 reduced-motion。
Accessibility & misuse可访问性与误用
Text over textures (leather, linen, wood) needs a measured 4.5:1 contrast against the BUSIEST region of the texture, not its average color.
纹理（皮革、亚麻、木纹）上的文字需要对着纹理最杂乱的区域实测 4.5:1 对比度，而不是对着它的平均色。
Decorative bevels and gloss must not be the only pressed/unpressed signal — pair states with a color or content change.
装饰性的斜面和高光不能是按下/未按下的唯一信号 —— 状态变化要同时配上颜色或内容变化。
Heavy texture images add page weight; ship them compressed and let the UI stand without them.
大尺寸纹理图片会增加页面体积；压缩后再发布，并且界面在没有它们时也要立得住。
Origin起源
As old as the GUI itself (the 1980s desktop metaphor), but the style label usually points at Apple's 2007–2012 era — iOS's leather calendars, felt Game Center, and reel-to-reel Podcasts app under Scott Forstall — ended publicly by iOS 7's flat redesign in 2013.
它和 GUI 本身一样老（上世纪 80 年代的桌面隐喻），但这个风格标签通常指 Apple 2007–2012 年那段时期 —— Scott Forstall 主导下 iOS 的皮革日历、绿呢 Game Center、开盘磁带式的播客 App —— 2013 年 iOS 7 的扁平化重设计公开终结了它。