拟物化
Skeuomorphism
别名:拟物化拟物风格仿真质感设计苹果早期那种真皮缝线效果带纹理立体感的老式UI皮革木纹质感界面Realistic UISkeuomorphic Design
这是什么
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
开发规格
字体
系统无衬线，贴近真实印刷
色彩
灰铝渐变底 × 蓝色高光
边框
金属描边 + 内侧高光线
阴影
外投影 + inset 内高光同时使用
间距
控件内边距模拟实物比例
动效
150–200ms 的按压实感过渡，模拟物理回弹
状态反馈
hover 加深高光；focus 用蓝色发光可见轮廓；active 用 inset 阴影表现按下；disabled 降低对比；error 用红色高光
风格演示
同一张页面，直接操作探索系列与 01/02/03 展示对应商品；搜索好物并检查无匹配结果，查看商品后加入购物袋，调整/移除并查看合计；产品、故事、手工制作、门店均有对应内容，结算不创建真实订单。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 Daily Goods 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 Daily Goods 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 用户不熟悉触屏，需要借助现实隐喻降低学习成本
- 品牌需要复古 怀旧或高端工艺感（音响 咖啡 笔记本应用）
- 表达物理操作的乐趣，如拨动 按压 旋转
✕ 不适用场景
- 信息密度高的工具类界面，装饰会挤压内容与效率
- 需要频繁换肤与多平台适配，重度纹理维护成本高
- 极简品牌语境，拟物会显得过时与俗气
常见形式
皮革缝线
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。
用当前风格完成 Daily Goods 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。 保留 Daily Goods 的相机、木桌、书与绿植原照片：桌面照片占右侧 74%，#e7ddcd 暖底与左侧米色遮罩承接文案。品牌用 Georgia，主文案为现有粗无衬线；CTA 沿用 #9b6c36→#775025 棕色渐变、内高光、细边与 .25cqw 小圆角，右侧旋转纸签保留暖纸渐变与投影。商品延续区用米色纸卡与棕色材质按钮；窄屏让文案、320px 照片、纸签依次入流。不要用程序纹理替换照片，也不要重做成铝灰笔记工具。 完整页面操作： 探索系列与 01/02/03 展示对应商品；搜索好物并检查无匹配结果，查看商品后加入购物袋，调整/移除并查看合计；产品、故事、手工制作、门店均有对应内容，结算不创建真实订单。 静态封面、详情演示与 /style-scenes/skeuomorphism/（英文 /en/style-scenes/skeuomorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件影响组件