{
  "id": "skeuomorphism",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "拟物化",
    "en": "Skeuomorphism"
  },
  "aliases": [
    "拟物化",
    "拟物风格",
    "仿真质感设计",
    "苹果早期那种真皮缝线效果",
    "带纹理立体感的老式UI",
    "皮革木纹质感界面",
    "Realistic UI",
    "Skeuomorphic Design"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，\"看起来像什么\"直接暗示\"能怎么用\"。",
    "en": "A visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make \"what it looks like\" teach \"how it works\"."
  },
  "use_when": [
    {
      "zh": "用户不熟悉触屏，需要借助现实隐喻降低学习成本",
      "en": "Unfamiliar users who learn controls from real-world metaphors"
    },
    {
      "zh": "品牌需要复古 怀旧或高端工艺感（音响 咖啡 笔记本应用）",
      "en": "Brands seeking vintage, nostalgic or crafted-premium feel"
    },
    {
      "zh": "表达物理操作的乐趣，如拨动 按压 旋转",
      "en": "Playful physical interactions — flipping, pressing, turning"
    }
  ],
  "avoid_when": [
    {
      "zh": "信息密度高的工具类界面，装饰会挤压内容与效率",
      "en": "Dense productivity tools where decoration crowds out content"
    },
    {
      "zh": "需要频繁换肤与多平台适配，重度纹理维护成本高",
      "en": "Multi-platform products — heavy textures are costly to maintain"
    },
    {
      "zh": "极简品牌语境，拟物会显得过时与俗气",
      "en": "Minimal brand contexts where skeuomorphism reads as dated"
    }
  ],
  "tags": [
    "skeuomorphism",
    "texture",
    "realism",
    "depth",
    "metaphor"
  ],
  "variants": [
    {
      "id": "leather",
      "name": {
        "zh": "皮革缝线",
        "en": "Leather"
      },
      "note": {
        "zh": "皮革纹理加缝线描边，早期 iOS 日历 记事本",
        "en": "Leather grain with stitching — early iOS Calendar and Notes"
      }
    },
    {
      "id": "metal",
      "name": {
        "zh": "拉丝金属",
        "en": "Brushed Metal"
      },
      "note": {
        "zh": "金属渐变与高光倒角，iTunes 老播放器",
        "en": "Metal gradients with beveled highlights — classic iTunes"
      }
    },
    {
      "id": "paper",
      "name": {
        "zh": "纸质",
        "en": "Paper"
      },
      "note": {
        "zh": "纸张折角与压印文字，iBooks 书架",
        "en": "Paper corners and embossed type — the iBooks shelf"
      }
    }
  ],
  "applicable_components": [
    "button",
    "switch",
    "input",
    "card"
  ],
  "related": [
    {
      "id": "glassmorphism",
      "relation": "similar_to"
    },
    {
      "id": "flat-design",
      "relation": "similar_to"
    },
    {
      "id": "retro-futurism",
      "relation": "similar_to"
    },
    {
      "id": "button",
      "relation": "affects"
    },
    {
      "id": "switch",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "skeuomorphism",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "playground": {
    "task": {
      "zh": "探索系列与 01/02/03 展示对应商品；搜索好物并检查无匹配结果，查看商品后加入购物袋，调整/移除并查看合计；产品、故事、手工制作、门店均有对应内容，结算不创建真实订单。",
      "en": "Explore the collection and 01/02/03 show matching objects. Search including no matches, inspect an object and add it to the bag, adjust/remove items and inspect totals. Objects, Stories, Craft and Stores have matching content; checkout creates no real order."
    },
    "checks": [
      {
        "zh": "逐一操作 Daily Goods 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use Daily Goods’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "完成上述 Daily Goods 操作后修改输入或撤销，检查结果与状态同步。",
        "en": "Complete the Daily Goods task, then change inputs or undo and inspect the matching result/state."
      },
      {
        "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。",
        "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries."
      }
    ]
  },
  "sources": [
    {
      "name": "Nielsen Norman Group — Flat Design and Skeuomorphism",
      "url": "https://www.nngroup.com/articles/death-of-flat-design/"
    },
    {
      "name": "Apple HIG — Materials",
      "url": "https://developer.apple.com/design/human-interface-guidelines/materials"
    }
  ],
  "implementation": {
    "css": [
      "background-image: url(texture)",
      "box-shadow: inset 0 1px 0",
      "linear-gradient",
      "border-radius",
      "text-shadow"
    ],
    "notes": {
      "zh": "三层立体感：基础材质层（纹理图或细密渐变），顶部 1px 高光内阴影模拟受光 上缘，底部外投影表现厚度。按钮按下时反转内阴影方向制造\"压下去\"。渐变 范围要窄（3%～8% 明度差），否则像廉价塑料。文字用压印效果：深色投影 1px 加同色 1px 高光。深色模式降低材质明度但保留高光结构。",
      "en": "Three depth layers: a material base (texture image or a fine gradient), a 1px inset top highlight for the lit upper edge, and an outer bottom shadow for thickness. On press, flip the inset shadow to feel pushed in. Keep gradient bands narrow (3–8% luminance) or it reads as cheap plastic. Emboss text with a 1px dark shadow plus a 1px same-hue highlight. Dark mode darkens the material but keeps the highlight structure."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用拟物化风格（Skeuomorphism）设计界面：控件采用真实材质质感——皮革 金属 木材， 按钮有立体按压感，开关像实物拨杆。",
      "en": "\"Design an interface in Skeuomorphism style: controls rendered in real materials — leather, metal, wood — with pressable dimensional buttons and switch-like toggles.\""
    },
    "design": {
      "zh": "拟物化设计规范：底色用皮革纹或木纹材质图；按钮为窄幅线性渐变（上下明度差 8% 以内）+ 1px 顶部高光内阴影 + 底部投影；控件圆角 6～10px；文字用压印 效果（1px 深影 + 1px 高光）；缝线用 dashed 描边模拟；按下态反转内阴影并 下移 1px。深色模式整体降明度 20%，高光保留。",
      "en": "\"Skeuomorphism design spec: leather-grain or wood texture backgrounds; buttons with a narrow linear gradient (under 8% luminance swing), 1px inset top highlight and a bottom drop shadow; 6–10px radii; embossed type (1px dark shadow + 1px highlight); dashed borders for stitching; pressed state flips the inset shadow and shifts down 1px. Dark mode drops material luminance ~20% and keeps highlights.\""
    },
    "implementation": {
      "zh": "用当前风格完成 Daily Goods 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n保留 Daily Goods 的相机、木桌、书与绿植原照片：桌面照片占右侧 74%，#e7ddcd 暖底与左侧米色遮罩承接文案。品牌用 Georgia，主文案为现有粗无衬线；CTA 沿用 #9b6c36→#775025 棕色渐变、内高光、细边与 .25cqw 小圆角，右侧旋转纸签保留暖纸渐变与投影。商品延续区用米色纸卡与棕色材质按钮；窄屏让文案、320px 照片、纸签依次入流。不要用程序纹理替换照片，也不要重做成铝灰笔记工具。\n\n探索系列与 01/02/03 展示对应商品；搜索好物并检查无匹配结果，查看商品后加入购物袋，调整/移除并查看合计；产品、故事、手工制作、门店均有对应内容，结算不创建真实订单。\n\n静态封面、详情演示与 /style-scenes/skeuomorphism/（英文 /en/style-scenes/skeuomorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete Daily Goods page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nKeep Daily Goods’ original camera/wood/book/plant photograph, occupying the right 74% on desktop, with #e7ddcd warmth and the left cream overlay supporting copy. Use Georgia for the brand and the existing bold sans copy; retain the #9b6c36→#775025 brown CTA gradient, inset highlight, thin rim and .25cqw radius, plus the rotated warm-paper note and shadow. Continue with cream product cards and brown material buttons; on narrow screens flow copy, the 320px-high photograph and note in sequence. Do not replace the photograph with procedural texture or rebuild an aluminium-grey note tool.\n\nExplore the collection and 01/02/03 show matching objects. Search including no matches, inspect an object and add it to the bag, adjust/remove items and inspect totals. Objects, Stories, Craft and Stores have matching content; checkout creates no real order.\n\nShare one renderer between static covers, the detail experience and /style-scenes/skeuomorphism/ (English /en/style-scenes/skeuomorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion."
    },
    "agent": {
      "zh": "用当前风格完成 Daily Goods 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n保留 Daily Goods 的相机、木桌、书与绿植原照片：桌面照片占右侧 74%，#e7ddcd 暖底与左侧米色遮罩承接文案。品牌用 Georgia，主文案为现有粗无衬线；CTA 沿用 #9b6c36→#775025 棕色渐变、内高光、细边与 .25cqw 小圆角，右侧旋转纸签保留暖纸渐变与投影。商品延续区用米色纸卡与棕色材质按钮；窄屏让文案、320px 照片、纸签依次入流。不要用程序纹理替换照片，也不要重做成铝灰笔记工具。\n\n完整页面操作：\n探索系列与 01/02/03 展示对应商品；搜索好物并检查无匹配结果，查看商品后加入购物袋，调整/移除并查看合计；产品、故事、手工制作、门店均有对应内容，结算不创建真实订单。\n\n静态封面、详情演示与 /style-scenes/skeuomorphism/（英文 /en/style-scenes/skeuomorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete Daily Goods page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nKeep Daily Goods’ original camera/wood/book/plant photograph, occupying the right 74% on desktop, with #e7ddcd warmth and the left cream overlay supporting copy. Use Georgia for the brand and the existing bold sans copy; retain the #9b6c36→#775025 brown CTA gradient, inset highlight, thin rim and .25cqw radius, plus the rotated warm-paper note and shadow. Continue with cream product cards and brown material buttons; on narrow screens flow copy, the 320px-high photograph and note in sequence. Do not replace the photograph with procedural texture or rebuild an aluminium-grey note tool.\n\nFull-page operations:\nExplore the collection and 01/02/03 show matching objects. Search including no matches, inspect an object and add it to the bag, adjust/remove items and inspect totals. Objects, Stories, Craft and Stores have matching content; checkout creates no real order.\n\nShare one renderer between static covers, the detail experience and /style-scenes/skeuomorphism/ (English /en/style-scenes/skeuomorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "系统无衬线，贴近真实印刷",
      "en": "System sans close to print"
    },
    "color": {
      "zh": "灰铝渐变底 × 蓝色高光",
      "en": "Aluminium gradients with blue highlights"
    },
    "border": {
      "zh": "金属描边 + 内侧高光线",
      "en": "Metal outlines with inner highlight lines"
    },
    "shadow": {
      "zh": "外投影 + inset 内高光同时使用",
      "en": "Outer shadows plus inset highlights"
    },
    "spacing": {
      "zh": "控件内边距模拟实物比例",
      "en": "Padding mimics physical proportions"
    },
    "motion": {
      "zh": "150–200ms 的按压实感过渡，模拟物理回弹",
      "en": "150–200ms pressed-feel transitions mimicking a physical rebound"
    },
    "states": {
      "zh": "hover 加深高光；focus 用蓝色发光可见轮廓；active 用 inset 阴影表现按下；disabled 降低对比；error 用红色高光",
      "en": "Hover deepens the highlight; focus shows a visible blue glow outline; active presses via inset shadow; disabled lowers contrast; error uses a red highlight"
    }
  },
  "preview": {
    "order": 7,
    "keywords": {
      "en": "REAL TEXTURES",
      "zh": "质感 · 拟真 · 凹凸"
    },
    "url": "https://woodnote.app",
    "scene": "generic",
    "brand": "Daily Goods",
    "nav": [
      {
        "zh": "笔记",
        "en": "Notes"
      },
      {
        "zh": "图书馆",
        "en": "Library"
      },
      {
        "zh": "同步",
        "en": "Sync"
      }
    ],
    "navExt": [
      {
        "zh": "⚙︎",
        "en": "⚙︎"
      }
    ],
    "heroTitle": {
      "zh": "Real as Physical",
      "en": "Real as Physical"
    },
    "heroSub": {
      "zh": "像真实物件一样可靠、可触。",
      "en": "As dependable and tangible as a real object."
    },
    "cta": {
      "zh": "打开面板",
      "en": "Open the panel"
    },
    "heroCaption": {
      "zh": "皮革纹理 · 纸张质感 · 金属旋钮",
      "en": "Leather textures · Paper surfaces · Metal dials"
    },
    "features": [
      {
        "t": {
          "zh": "拟真书架",
          "en": "Lifelike shelves"
        },
        "s": {
          "zh": "木纹与皮革",
          "en": "Woodgrain and leather"
        }
      },
      {
        "t": {
          "zh": "真实纸张",
          "en": "Real paper"
        },
        "s": {
          "zh": "书写有阻力",
          "en": "A tactile writing surface"
        }
      },
      {
        "t": {
          "zh": "物理旋钮",
          "en": "Physical dials"
        },
        "s": {
          "zh": "转动见反馈",
          "en": "Feedback with every turn"
        }
      }
    ],
    "panel": "screen",
    "tokens": {
      "bg": "linear-gradient(180deg,#E9ECEF,#D7DBE0)",
      "fg": "#2C3E50",
      "sub": "#7F8C8D",
      "accent": "#3498DB",
      "accentFg": "#fff",
      "card": "linear-gradient(180deg,#FFFFFF,#EDEFF2)",
      "cardBorder": "#B9C0C7",
      "radius": "12px",
      "shadow": "0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 #fff",
      "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif",
      "heroSize": "22px"
    }
  }
}