擬物化設計 (Skeuomorphism) 是做什麼的？

當螢幕控制項長得像且行為像使用者已知的實體物件時，更容易學習。

模仿真實物件的介面：皮革、亞麻、木材、毛氈、玻璃與拉絲金屬，從上方打光，附加漸層與多層陰影。根源可追溯至 1980 年代的桌面圖示，在 iOS 1 到 6 達到巔峰，直到 2013 年 iOS 7 將其取代。

時期： 2007–2013 · 時代： 觸控螢幕 · 領域： 圖形與 UI 設計 · 別稱： 擬物化 UI、iOS 6 風格、真實物件介面

何時載入此技能

當使用者要求以下關鍵字時載入："skeuomorphic"、"skeuomorphism"、"ios 6"、"真實世界紋理"、"皮革紋理"、"觸覺介面"、"擬真按鈕"、"亮面按鈕"、"木材與亞麻"、"復古 iOS"、"頁角翻頁"、"縫線皮革"。

適合用於：音樂與音訊 App、筆記與日誌 App、有桌面或棋盤的遊戲、新奇與懷舊網站、首次使用智慧型手機使用者的入門引導。

請勿使用於：

產品資料密集，任何裝飾像素都會犧牲閱讀空間。
品牌必須感覺抽象、極簡或軟體原生。
設計必須在許多不同密度下縮放，並在低功耗裝置上運行（5 層陰影會消耗幀率）。

系統指令

以擬物化風格生成 UI 或圖形佈局時，你必須：

將每個控制項塑造成具有已知用途的真實物件，例如撥動開關、記事本、書架或旋鈕，並將其比例保持在原物的 10% 以內。
從上方以 90 度角的單一光源照亮每個表面，使高光位於頂部邊緣，陰影向下投射。
透過 3 到 5 個堆疊圖層建立深度：1px 的頂部淺色高光、2 到 4 層漸層主體、1px 的深色底部邊緣、內陰影與外陰影。
以 128 到 256px 大小、4 到 12% 不透明度的重複點陣圖紋理處理大面積表面：亞麻、皮革、紙張、木紋或毛氈。
為每個按鈕提供上下 8 到 15% 亮度差異的漸層，並在按下時反轉該漸層。
在每個材質面板上添加一個縫線、浮雕或凹陷細節，帶有 1px 的內部高光與 1px 的外部陰影。
在動畫中反映真實世界：頁角翻頁、翻轉轉場與彈簧開關遵循其模仿物件的物理特性。

護欄

以下每一行都會破壞風格。在回覆前，請檢查你的輸出是否符合此清單。

絕不： 在控制項上使用無漸層或陰影的純色填充。
絕不： 光源在不同元件之間改變方向。
絕不： 紋理拼接處有可見接縫或重複週期短於 64px。
絕不： 使用與功能不符的材質隱喻，例如木製計算機。
絕不： 使用無填充的細線 1px 輪廓圖示。
絕不： 使用模糊半徑為 0px 且無擴散的陰影。
絕不： 使用無表面紋理的純白背景。

向量風格拉動

軸線	分數	1 分代表	5 分代表
裝飾性	`■■■■□` 4/5	純粹極簡	極致繁複
立體感	`■■■■□` 4/5	嚴格 2D	全 3D / 空間
網格剛性	`■■■□□` 3/5	混沌 / 有機	嚴格數學網格
擬物寫實	`■■■■■` 5/5	抽象數位	照片級寫實材質
字體表現	`■■■□□` 3/5	中性 / 不可見	實驗性 / 插畫式

維持這些分數。如果一個請求將某個軸線移動 2 分或更多，你已脫離此風格：請前往「系譜備援」。

空間與網格邏輯

網格機制： iPhone 上為 320 x 480pt 畫布，後來擴展為 320 x 568pt，最小觸控目標為 44pt；內容以全寬分組行或放置於具有 10 到 20pt 邊距的層板上。
留白比例： 表面 20–35% 保持空白，因其餘部分由紋理與框架填滿；間距尺度為 4、10、20、44pt。
對齊規則： 控制項位於其物件隱喻的框架內，例如表格中的行、書架上的書或筆記本中的頁面；文字在按鈕上居中，在行中則靠左對齊。
容器幾何： 圓角矩形，半徑 5 到 10px；分組表格儲存格外角半徑 10px；44px 高的欄位帶有 1px 斜面。

字體排印

分類： 人文主義無襯線體 · 粗襯線體 · 手寫體
字間距： 顯示尺寸為 0em 到 0.01em；內文保持 0；按鈕標籤增加 +0.02em。
行高： 顯示 1.1；內文 1.3 到 1.4；表格行維持 44px 高度，單行 17px。
層級規則：
- 按鈕與標題標籤使用粗體（700），內文使用常規（400）。
- 標題與行設定 17px，次要標籤 14px，說明文字 12px。
- 添加 1px 文字陰影：深色文字下方為 60% 不透明度的白色，淺色文字上方為 60% 不透明度的黑色，使文字看起來像壓印在表面上。
- 在物件導向的螢幕上，標題文字使用不同的字型，例如書架上的粗襯線體或記事本上的手寫體。

字型配對

顯示字型	內文字型	備註
Roboto Slab	Open Sans	物件標籤用粗襯線體搭配人文主義文字字型，接近 iOS 6 筆記中 Marker Felt 與 Helvetica 的組合。
Arvo	Lato	皮革與木材面板用粗襯線體，搭配圓潤無襯線體以確保控制項清晰可讀。
Caveat	Source Sans 3	記事本與日誌隱喻使用手寫體，搭配中性無襯線體作為 UI 文字。

色彩與照明

調色板結構： 三到五種材質顏色，表面 60% 由主導材質覆蓋，再加上 10 到 15% 表面的亮面藍色強調色用於主要控制項。
對比規則： 材質表面上的文字至少保持 4.5:1 的對比度；皮革棕與毛氈綠上的淺色文字約達 8:1，亮面藍上的文字達 4.5:1。
表面處理： 照片級紋理、為產生光澤而帶有 50% 硬切分的線性漸層、以及 3 到 6% 不透明度的雜訊；玻璃使用上半部 30% 不透明度的白色高光。
光線與陰影： 單一光源從頂部照射；高光在頂部邊緣為 40 到 70% 不透明度的白色，陰影為 25 到 50% 不透明度的黑色，向下偏移 1 到 3px。

調色板

名稱	十六進位色碼	角色
亞麻色	`#D8D4CC`	背景紋理基底
皮革棕	`#6B4A2F`	面板表面
玻璃藍	`#2F7BE0`	主要控制項漸層
鉻色	`#C9CDD3`	金屬欄與邊框
毛氈綠	`#1E5B3A`	桌面表面
印墨色	`#2B2118`	淺色材質上的文字

材質與紋理

表面模擬： 真實材質：帶有縫線的皮革、亞麻、紙張、木材、毛氈、拉絲鋁、玻璃與鉻。
邊框規則： 1px 深色外邊緣（40 到 60% 黑色）、1px 白色內部高光（40 到 60% 不透明度）、以及皮革上距離邊緣 4px 的 1px 虛線縫線。
模糊與高度： 按鈕使用 0 1px 2px 搭配 40% 黑色的陰影，面板使用 0 4px 10px 搭配 50% 黑色的陰影；凹槽使用 inset 0 1px 3px 搭配 50% 黑色的內陰影；高度分為 3 個層級。

裝飾與圖示

圖示風格： 亮面填充圖示，尺寸 57 x 57px，圓角半徑 12px，頂部光澤高光覆蓋高度 50%，1px 斜面，下方有倒影陰影。
插畫： 渲染的物件插畫，帶有光影效果，例如書架、麥克風、電影膠捲與卡式錄音座，以 3/4 俯視角度繪製。
裝飾元素： 縫線 · 頁角翻頁 · 木質層板 · 撕紙邊緣 · 光澤高光 · 鉻製邊框 · 圖示下方倒影

動畫與互動性

原生螢幕： 是
轉場物理： 物件物理：頁面在 400 到 600ms 內翻頁，開關以 20ms 的彈簧穩定時間滑動，層板滾動具有慣性與 8px 的邊緣反彈。
緩動函數： cubic-bezier(0.42, 0, 0.58, 1)
持續時間（毫秒）： 350
懸停與激活： 按下狀態反轉按鈕漸層並移除外部陰影，使按鈕看起來被按入表面 1 到 2px；觸控裝置無懸停效果。

程式碼與 Token 入門

在根元素上設定 data-style="skeuomorphism" 並貼上 Token。檔案 tokens.css 包含相同的 Token 與一組參考規則。

[data-style="skeuomorphism"] {
  --color-bg: #D8D4CC;
  --color-surface: #6B4A2F;
  --color-text: #2B2118;
  --color-muted: #6E6659;
  --color-primary: #2F7BE0;
  --color-accent: #C9A24B;
  --color-border: rgba(0, 0, 0, 0.5);
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --border-radius: 8px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);
  --duration: 350ms;
  --gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
  --gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  --touch-target: 44px;
  --color-on-bg: #2B2118;
  --color-on-surface: #D8D4CC;
  --color-on-primary: #000000;
  --color-on-accent: #2B2118;
  --color-muted-on-bg: #5F574E;
  --color-muted-on-surface: #CDC6BC;
  --color-link: #2B2118;
  --color-link-on-surface: #D8D4CC;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: 0em;
  --display-leading: 1.1;
  --display-case: none;
  --body-leading: 1.55;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwind 模式：

元素	Classes
page	`min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
heading	`font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
panel	`rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)]`
button	`h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)]`
input	`h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]`

視覺資源包

此風格的圖片與圖示為檔案。請依原樣使用它們，或將其視為規格並自行以相同語言繪製。

檔案	內容
`pack/hero.svg`	Hero 面板，800 x 600。以該風格的視覺語言繪製的抽象圖片。
`pack/pattern.svg`	圖案瓷磚，80 x 80。可雙向無限重複。
`pack/icons.svg`	圖示精靈：home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders。

圖示： 實心，描邊 2，位於 24px 區域，圓頭端點，圓角連接，容器：圓角。使用方式：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。圖示使用 currentColor。
圖示家族： 精靈來自 Phosphor Icons 的 Phosphor（Fill），授權 MIT。原因：完整實心剪影呈現真實物體。容器提供材質與光影。這是用於示範的開源替代品。對於產品，請使用品牌的圖示庫並根據以下規則選擇家族。
顯示字型： 字重 700，字間距 0em，行高 1.1，大小寫：無。
字重： 顯示 700，副標題 700，內文 400，文字中的粗體 700，標籤與按鈕 700。此風格僅使用 2 種字重（400, 700）。顯示字重比內文重 300。強調來自字重：較重的單詞即為強調，因此字重之間的過渡清晰。
內文字型： 16px，行高 1.55。
頁面： Hero 分割，靠左對齊，常規密度，強調傾斜 0°。
文字顏色： --color-text 僅用於主要閱讀區域。在每個區域上，使用其對應的 Token：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何選擇圖示包

圖示包是圖片的字型。請以與選擇文字字型相同的謹慎態度選擇它。這些規則適用於開源套件與授權庫。

描邊與主幹匹配。 將圖示與內文文字並排放置在文字大小下。圖示的線條與字母的主幹應有相同的粗細。
端子與角落遵循半徑 Token。 平頭端點與斜角連接搭配半徑為零；圓頭端點與圓角連接搭配柔和的半徑。
填充模式遵循時代技術。 印刷時代切割實體形狀。螢幕時代透過深度填充與陰影塑造形狀。當代產品介面則繪製輪廓。
隱喻不比風格更年輕。 每個圖片都是該時代所知的物體。帶有後期隱喻的圖示會破壞時代感。
一個家族，一個網格。 所有圖示來自同一個家族與同一種變體，繪製在同一個區域上。請勿在同一表面上混合不同家族。
家族涵蓋產品需求。 在承諾使用前，列出產品所需的每個概念。如果一個家族缺少其中任何一個概念的圖示，它就是錯誤的家族。
顏色是一個 Token。 圖示使用 currentColor。第二種色調來自 Token，而非來自檔案。
授權允許使用。 閱讀套件的授權。若授權要求，請給予註明。有品牌的產品應使用其授權庫，並套用相同的規則來選擇家族。

系譜備援

當使用者要求變體時，請勿即興創作。轉向此處命名的相鄰風格，並載入其技能。

如果使用者要求更扁平：轉向 flat-design（扁平設計）。移除所有漸層、紋理與陰影，設定純色填充，保留顏色與 5

…

[為翻譯而截斷]

擬物化設計 (Skeuomorphism)