Skeuomorphism
拟物化
Aliases:拟物化拟物风格仿真质感设计苹果早期那种真皮缝线效果带纹理立体感的老式UI皮革木纹质感界面Realistic UISkeuomorphic Design
What is it
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".
Design spec
Typography
System sans close to print
Color
Aluminium gradients with blue highlights
Border
Metal outlines with inner highlight lines
Shadow
Outer shadows plus inset highlights
Spacing
Padding mimics physical proportions
Motion
150–200ms pressed-feel transitions mimicking a physical rebound
States
Hover deepens the highlight; focus shows a visible blue glow outline; active presses via inset shadow; disabled lowers contrast; error uses a red highlight
Style in action
The same page, ready to useExplore 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.
Full-page preview · interact directly
What to look for
- 01Use Daily Goods’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Daily Goods task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ When to use
- Unfamiliar users who learn controls from real-world metaphors
- Brands seeking vintage, nostalgic or crafted-premium feel
- Playful physical interactions — flipping, pressing, turning
✕ When not to use
- Dense productivity tools where decoration crowds out content
- Multi-platform products — heavy textures are costly to maintain
- Minimal brand contexts where skeuomorphism reads as dated
Variants
Leather
皮革缝线
Leather grain with stitching — early iOS Calendar and Notes
Brushed Metal
拉丝金属
Metal gradients with beveled highlights — classic iTunes
Paper
纸质
Paper corners and embossed type — the iBooks shelf
Implementation
background-image: url(texture)box-shadow: inset 0 1px 0linear-gradientborder-radiustext-shadowThree 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.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
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. Keep 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. Full-page operations: 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. Share 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. Interaction 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. Provide 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. Add 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. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA visual language that strips out all simulation: solid color blocks, simple geometry, no gradients, shadows or textures. Hierarchy comes from color, shape and typography alone. The opposite of skeuomorphism — the interface admits it is a glowing plane and trades decoration for clarity.
StylesSimilarThe future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsAffects