拟物化
Skeuomorphism
别名:拟物化拟物风格仿真质感设计苹果早期那种真皮缝线效果带纹理立体感的老式UI皮革木纹质感界面Realistic UISkeuomorphic Design
这是什么
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
开发规格
字体
系统无衬线，贴近真实印刷
色彩
灰铝渐变底 × 蓝色高光
边框
金属描边 + 内侧高光线
阴影
外投影 + inset 内高光同时使用
间距
控件内边距模拟实物比例
动效
150–200ms 的按压实感过渡，模拟物理回弹
状态反馈
hover 加深高光；focus 用蓝色发光可见轮廓；active 用 inset 阴影表现按下；disabled 降低对比；error 用红色高光
风格演示
先看整页效果，再试交互场景整页预览
好物，
让生活更真实
从真实的材料出发，感受物品本身的温度。
我们相信，好的设计经得起时间的触摸。
源于真实的细节。
交互场景
正在加载演示…
✓ 适用场景
- 用户不熟悉触屏，需要借助现实隐喻降低学习成本
- 品牌需要复古 怀旧或高端工艺感（音响 咖啡 笔记本应用）
- 表达物理操作的乐趣，如拨动 按压 旋转
✕ 不适用场景
- 信息密度高的工具类界面，装饰会挤压内容与效率
- 需要频繁换肤与多平台适配，重度纹理维护成本高
- 极简品牌语境，拟物会显得过时与俗气
常见形式
皮革缝线
Leather
皮革纹理加缝线描边，早期 iOS 日历 记事本
拉丝金属
Brushed Metal
金属渐变与高光倒角，iTunes 老播放器
纸质
Paper
纸张折角与压印文字，iBooks 书架
实现要点
background-image: url(texture)box-shadow: inset 0 1px 0linear-gradientborder-radiustext-shadow三层立体感：基础材质层（纹理图或细密渐变），顶部 1px 高光内阴影模拟受光 上缘，底部外投影表现厚度。按钮按下时反转内阴影方向制造"压下去"。渐变 范围要窄（3%～8% 明度差），否则像廉价塑料。文字用压印效果：深色投影 1px 加同色 1px 高光。深色模式降低材质明度但保留高光结构。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用拟物化风格（Skeuomorphism）实现一组立体按钮与开关。 先检查现有 Design Token 与主题变量，材质参数做成可配置变量而非写死。 要求： - 按钮与开关用渐变 + 内高光 + 投影呈现立体按压感，:active 反转内阴影 - 材质用程序化渐变或内联 SVG，不引入大体积贴图资源 - 支持键盘聚焦态，对比度满足可读性 - 深色模式降低材质明度并保留高光结构 - 若有过渡动画，尊重 prefers-reduced-motion - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件影响组件