Apple 風格設計
一套從 Dribbble 上「apple-style」標籤（64 個作品，2026 年 10 月）逆向工程，並與 Apple 自身的 HIG 人機介面指南交叉驗證的完整設計語言。它涵蓋了標記（tokens）、元件、材質、動畫、佈局、文案以及各平台的實作配方。
用一句話描述這個風格：平靜的中性畫布、一個自信的重點色、以內容為主角、以柔和深度取代線條，以及具有物理感的動畫。
如何使用此技能
- 識別輸出類型（網頁、應用畫面、小工具、插件面板、圖示、海報、動畫）。選擇
references/layouts.md中對應的配方。 - 選擇模式：淺色模式（行銷、生產力、健康領域的預設值）、深色模式（媒體、專業工具、金融、遊戲、VFX），或玻璃覆蓋模式（visionOS、英雄區塊、播放器）。請見下方「模式選擇」。
- 載入標記。對於網頁，將
assets/apple-style.css複製到專案中（或直接內嵌），並使用其中的變數和.as-*類別來構建。其他平台請參閱references/platforms.md（適用於 Nuke、ComfyUI 前端、Tailwind、SwiftUI、Figma、簡報、Remotion 的 Qt/PySide QSS）。 - 使用元件組合，請參考
references/components.md。請不要為按鈕或列表行發明新的樣式；配方已經包含了微觀細節。 - 最後添加材質與動畫：
references/materials.md（液態玻璃、霧面、漸層網格、顆粒）、references/motion.md（彈簧、顯現、按壓狀態）。 - 在展示結果前，執行底部的 QA 檢查清單。
需要某個模式的證明或視覺參考？references/shot-catalog.md 列出了每個分析過的作品及其教導的重點。assets/demo.html 是一個實際運作的元件展示頁，使用樣式表構建了所有元件：打開它以查看目標品質標桿。
十二條法則（為什麼它看起來像「Apple」）
這些是幾乎每個優秀作品中都會出現的模式。每條法則都有其原因；當遇到未涵蓋的情況時，請牢記這些原因。
- 中性畫布，彩色內容。 背景為米白色
#F5F5F7/ 分組灰#F2F2F7或接近黑色#000/#1C1C1E。色彩保留給資料、狀態和一個主要操作。原因：畫布退讓，讓內容和重點色承載所有意義。 - 每個畫面一個重點色。 預設為系統藍
#007AFF；當產品有自己的品牌色時，可使用紫色#5E5CE6、粉紅、橘色或綠色。只有在資料系列中（例如橘色/粉紅交替的長條圖）才能使用第二個重點色。原因：單一重點色讓主要操作一目瞭然，無需任何標籤。 - 用層級創造深度，而非邊框。 卡片浮在柔和、寬廣、低不透明度的陰影上；分隔線是從左側邊緣內縮 0.5px 的髮絲線。厚重的 1px 灰色邊框看起來像「網頁表單」，而非 Apple。
- 處處連續圓角。 類似方形圓角的半徑：10（控制項）、14（輸入框）、20（列表組、卡片）、28（小工具、表單）、38+（裝置/視窗）、999（藥丸）。巢狀元件的半徑 = 外層半徑減去內邊距。
- 字型決定層級。 SF Pro / Inter，大字體尺寸使用緊湊的字距，粗體大字標題，灰色次要文字取代較小的字型尺寸。數字是主角：
12.203使用粗體大字體，旁邊在同一基線上搭配一個小字灰色的單位。 - 灰色是一個色階，不是一種顏色。 標籤不透明度：主要 100%，次要 74% 淺色 / 60% 深色（Apple 在淺色模式中使用了 60%，在白色背景上只有 3.44:1），三級 30%，四級 18%。絕不要發明一個隨機的
#999。 - 藥丸和圓形用於操作。 主要按鈕是完整的藥丸形狀；圖示操作是 44px 的圓形；FAB 是按鈕是帶有白色 SF 風格字型和柔和彩色陰影的實心重點色圓形。
- 材質優先於純色填充。 覆蓋層、工具列、Dock、側邊欄和播放器使用半透明的模糊材質（液態玻璃），讓背景內容可被看見。
- 寬敞、有節奏的留白。 4pt 網格；16/20 內邊距；區塊之間有呼吸空間（桌面版 96-160px）。如果覺得有點空，那大概就對了。
- 動畫具有物理感。 使用彈簧，而非線性補間。按壓 = 縮放 0.97，放開 = 彈簧回彈。顯現動畫是淡入 + 上移 8-24px + 解除模糊。任何動畫的彈跳次數不超過一次。
- 文案簡短且自信。 句子大小寫，標語句尾有句號（「Sound. Refined.」、「Coming Soon.」），雙色調標題使用灰色或重點色短語，允許小工具標題使用小寫（「steps walked」）。
- 細節中的工藝。 三級灰色的 V 形箭頭、資料的表格數字、按鍵提示（
esc、return）、狀態圓點、0.5px 髮絲線、玻璃頂部的內側高光、圖表下方的彩色光暈。這些細節是「乾淨」與「Apple」之間的差別。
模式選擇
| 產品感覺像 | 模式 | 畫布 | 表面 | 重點色建議 |
|---|---|---|---|---|
| 健康、生產力、商務、文件、SaaS 行銷 | 淺色 | #F5F5F7 / #F2F2F7 | #FFFFFF | 藍色 #007AFF |
| 媒體播放器、音樂、金融報價、專業/VFX 工具、遊戲 | 深色 | #000000 | #1C1C1E / #2C2C2E | 粉紅 #FF375F、綠色 #30D158、紫色 #5E5CE6 |
| 照片/影片上的英雄區塊、visionOS、播放器、開關 | 玻璃 | 圖片或漸層網格 | 液態玻璃 | 白色主要、重點色次要 |
| 品牌、海報、發佈頁 | 漸層 | 漸層網格 + 顆粒 | 玻璃或無 | 產品色 |
核心標記（摘要）
完整表格（含深色值與原理）：references/tokens.md。在 assets/apple-style.css 中實作。
- 字型堆疊：
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif。從 Google Fonts 載入 Inter (400/500/600/700) 作為跨平台備用字型。等寬字型："SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace。 - 字型尺寸表（應用）：Large Title 34/41 700 (-0.022em) · Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13。
- 字型尺寸表（行銷）：Hero 64-96px 700，行高 1.04，字距 -0.035em · Section 40-56px 600 -0.028em · Lead 21-24px 400 次要顏色 · Eyebrow 14-17px 600 使用重點色。
- 間距：2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160。
- 圓角半徑：6 (標籤), 10 (按鈕/控制項), 14 (輸入框), 20 (卡片/列表), 28 (小工具/表單), 38 (視窗/裝置), 999 (藥丸)。
- 陰影（淺色）：
0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08)。浮動狀態：加上0 32px 80px rgb(0 0 0/.12)。 - 緩動函數：標準
cubic-bezier(.25,.1,.25,1)，強調釋出cubic-bezier(.32,.72,0,1)，彈簧linear()曲線詳見motion.md。持續時間 150 (按壓), 250 (狀態), 400 (進入), 600-900 (英雄區塊顯現)。
反模式（在爬取中看到，請勿複製）
該標籤中也包含一些風格不符的作品。它們教導我們應該避免什麼：
- 2012 年的擬物化光澤：浮雕輸入框、斜面「登入」按鈕、亞麻紋理（OTAir app store 作品）。
- 卡通吉祥物、貼紙輪廓和厚重輪廓（Taco、Buzz Addiction）。
- 全大寫等寬字型的「科技野蠻主義」頁面（MEMBRAN）：這是一種有效的風格，但不是 Apple。
- 每個元素上都使用霓虹多色漸層按鈕，以及每張卡片超過一個漸層。
- 偏離一側的硬黑陰影（「Astro」裝置邊框使用了野蠻主義風格的偏移陰影：不適合 Apple 風格）。
- 每張卡片上預設 1px 的
#ddd邊框、#999文字、Bootstrap 藍色#0d6efd。 - 彈跳過度的動畫、到處都是旋轉加載器、與滾動衝突的視差效果。
- 在使用者的產品中使用 Apple 的標誌或商標。使用風格，絕不使用品牌。
輸出契約
當此技能產生一個設計時：
- 交付實際運作的程式碼，而非描述。網頁：語義化 HTML + 標記 CSS（內嵌或連結）+ 用於動畫的最小 JS。其他目標：遵循該平台的配方。
- 始終支援淺色和深色模式，除非模式選擇器指明僅限深色，並尊重
prefers-reduced-motion。 - 無障礙是外觀的一部分：4.5:1 文字對比度（
label-2已調整為在白色、畫布和分組灰色上都通過檢查；label-3僅用於佔位符、V 形箭頭和禁用狀態，絕不能用於必須閱讀的文字），44x44 觸控目標，可見的焦點環（3px 的accent-text輪廓，2px 偏移：使用輪廓而非 box-shadow，這樣元件陰影就不會遮住它），圖示按鈕需有標籤。 - 原始系統重點色在按鈕填充和小字文字上會對比度不足（白色在
#007AFF上 = 4.02:1，在#0A84FF上 = 3.65:1）。按鈕填充使用accent-fill，文字上色使用accent-text，將原始accent保留給光暈、開關、圖示和大形狀使用。每種色調的安全色調請見：references/tokens.md3a。 - 在交付後，用一句簡短的話說明所選的模式、重點色以及使用的 2-3 個標誌性細節，以便使用者引導。
QA 檢查清單（展示前執行）
- 畫布是中性的；只有一個重點色驅動操作。
- 重點色通過對比度檢查：按鈕填充使用
accent-fill，重點色文字使用accent-text（tokens.md 3a）；自訂色調已計算其比率。 - 卡片上沒有硬邊框；分隔線是髮絲線、內縮，且在 1x DPR 時更淡。
- 帶有長標籤或提示的單選組是帶有勾選標記的單選列表，而非擁擠的分段控制項。
- 緊湊的桌面控制項在
pointer: coarse下會增加到 44px。 - 圓角半徑遵循尺寸比例，且巢狀圓角半徑是同心圓的。
- 顯示文字有負的字距；次要文字使用灰色色階，而非改變字型尺寸。
- 英雄區塊的數字/標題很大；單位/標籤在同一基線上使用小字灰色。
- 主要操作是藥丸形狀（或重點色 FAB 按鈕）；圖示按鈕是 44px 的圓形。
- 覆蓋層/工具列使用材質模糊和內側高光，而非純灰色。
- 陰影柔和且分層；沒有任何東西看起來像是貼上去的。
- 存在按壓、懸停、焦點狀態；動畫使用彈簧/緩出；尊重減少動畫設定。
- 深色模式使用分層灰色（
#1C1C1E/#2C2C2E/#3A3A3C），而非在黑色上使用純黑色表面。 - 文案簡短、句子大小寫、自信；交付的作品中沒有範例文字。
- 行動版寬度使用 16-20px 的頁邊距且無水平滾動。