用途
本条目是拟物化（Skeuomorphism）设计风格的参考指南，面向希望创建模仿真实世界材质（皮革、金属、木材、玻璃、纸张）的数字界面的设计师与开发者。其核心理念是让界面元素具备材质真实性、深度与真实感、熟悉感以及怀旧与奢华感，使用户能凭直觉理解交互方式，并传达工艺感与高端触感。
主要能力
- 材质视觉语言：提供皮革、金属、木材、玻璃、纸张五种材质的 CSS 样式定义，包括背景渐变、纹理、阴影与边框处理。
- 核心设计原则：涵盖 4–6 个色标的真实渐变、多层复杂阴影、通过背景图或图案添加纹理、用 text-shadow 实现浮雕/凹陷文字、用伪元素实现高光与光泽、以及材质专属属性（如金属锐利边缘与阴影、皮革柔和边缘与暖色调）。
- 组件模式：给出金属按钮、皮革卡片、纸质输入框等组件的完整 CSS 代码，含悬停/激活/聚焦状态处理。
- 代码生成指引：列出生成拟物化设计时的步骤，包括先选材质、按光照方向创建渐变、分层阴影、添加纹理、用 text-shadow 做浮雕、用伪元素做高光。
- 框架示例：附带 React 组件示例，如皮革钱包组件与金属音频均衡器旋钮。
- 无障碍说明：提醒渐变文字对比度需满足 WCAG AA（4.5:1）、纹理不得用于传达关键信息、阴影不能作为可点击性的唯一提示、衬线字体需保证行高与字号、所有交互元素需有可见焦点指示。
使用方式
使用者可参照条目中的 CSS 代码片段直接应用于样式表，或按“代码生成指引”的步骤自行构建拟物化界面。对于 React 项目，可参考提供的内联样式组件示例进行改造。使用时需先确定目标材质，再依据其对应的色板与阴影策略进行设计。
适用场景
拟物化风格适合需要传达奢华、熟悉感或怀旧感的产品界面，例如奢侈品牌应用、音频设备界面、复古风格产品、金融应用卡片等。条目中特别展示了奢华金融应用卡片与音频均衡器旋钮的示例。
限制
- 纹理与阴影应仅作装饰，不得用于传达关键信息。
- 渐变上的文字需确保满足 WCAG AA 对比度要求，并测试渐变端点。
- 不得仅依赖阴影作为可点击性的提示，需提供清晰的焦点状态。
- 使用衬线字体时需保证行高不低于 1.5 倍、字号不小于 16px。
- 所有交互元素需有可见的轮廓或 box-shadow 焦点指示，不能仅依赖渐变变化。
- 关于该条目的作者、版本、许可或官方支持信息，资料中暂未提供。