Apple Liquid Glass — 設計語言，適用於任何平台
適用範圍：任何應具備 Apple Liquid Glass 外觀的介面——網頁、網頁應用程式、Electron 或 Tauri 桌面應用程式、Android 或 Flutter 應用程式，或原生 Apple 應用程式。以下設計規則在所有地方皆相同；只有獲取背景、模糊和彎曲效果的方式不同。請先選擇路線：
| 建置平台 | 路線 |
|---|---|
| Web、Electron、Tauri、WebView | assets/tokens.css + assets/refraction.js（此檔案及相關參考資料） |
| iOS、iPadOS、macOS 26+ 原生 | 系統材質：SwiftUI glassEffect、UIKit UIGlassEffect——絕不使用偽造效果 |
| Android (Compose) | Haze haze-glass 配方 |
| Flutter | BackdropFilter + ImageFilter.shader |
| Windows / Linux 原生 | 在應用程式內繪製；視窗材質（Mica、Acrylic）並非 Liquid Glass |
各平台代碼、版本限制和備援方案：references/platforms.md。
應用程式流程、導航和畫面規格請使用 mobile-ux-designer。
此技能的存在是為了讓您無需從頭開始重新推導 Apple 的設計語言。此處所有內容均直接取自 Apple 自己的《人機介面指南》及其圖示，而非憑記憶或關於 Apple 的部落格文章。在 Apple 未明確說明之處，此技能會如實說明，而非自行發明規則——這種誠實是關鍵，因為大多數「Apple 風格」的作品之所以失敗，正是因為自信地應用了虛構的規則。
所有其他規則所遵循的核心概念
Apple 的介面是兩層結構，整個語言的關鍵在於保持它們的區別：
- 內容層——應用程式的實際內容。不透明。實心表面、真實陰影，無玻璃效果。文字位於此處，且絕不能放置在移動背景上。
- 功能層——工具列、側邊欄、標籤列、彈出視窗、選單、浮動控制項。這是 Liquid Glass 所在之處。它浮於內容之上，折射內容，且絕不與之競爭。
Apple 直接說明了這一點：「請勿在內容層中使用 Liquid Glass……將其包含在內容層中可能導致不必要的複雜性和令人困惑的視覺層次。」
如果您只能記住一件事：玻璃效果用於 Chrome 元素，絕不用於卡片。「Apple 風格」作品最常見的失敗就是將所有東西都加上毛玻璃效果，這破壞了該材質旨在建立的層次結構。
輸出
提供使用者要求的內容——一個固定的頁面、一個診斷、一個元件——以他們要求的篇幅和格式呈現。不要在修復方案中填充未經要求的設計理念說明，也不要為了簡潔而省略實際需求：即使未被要求，也要驗證對比度、點擊目標尺寸和下方的備援方案，因為一個看起來正確但卻不符這些要求的结果，正是此技能旨在預防的「偽 Apple」結果。
2026 年的優化也很重要。Apple 的 macOS 27 Golden Gate 頁面（apple.com/os/macos，檢查日期 2026-09-27）：「Liquid Glass 的更新確保了出色的可讀性，具有更均勻的折射和更佳的對比度。」 它還列出了統一的工具列、邊到邊的側邊欄和更新的視窗形狀。因此：更重的色調、可見的折射邊緣、一條連續的橫列而非浮動島嶼。如果您製作的是最初版本的淡薄玻璃，那麼您製作的正是 Apple 已經修正過的版本。
從 Token 開始（網頁）
assets/tokens.css 是一個可運作的 token 層——淺色和深色調色盤、帶有折射邊緣的玻璃基本元素、滾動邊緣效果，以及針對減少透明度、減少動態效果和完全不支援 backdrop-filter 的備援方案。由此開始，而不是手動撰寫數值，但要根據實際的設計簡報進行驗證，而不是不加閱讀地直接貼上：請檢查在您的上下文中它是否仍符合下方的對比度和點擊目標規則，並調整數值（特別是顏色——Apple 重申它們可能會在各個版本之間變更），而不是將該檔案視為不容置疑的真理。
其中有兩點值得理解而非僅是使用：
玻璃基本元素 是一個帶有色調的半透明背景 + backdrop-filter: saturate(180%) blur(28px) + 一個內嵌的頂部高光。這個高光使其看起來像是彎曲的光線；沒有它，表面看起來就像普通的透明度，這正是模仿的玻璃擬態的跡象。Apple 自己的材質圖示顯示出一條明顯的亮邊緣沿著邊界。
邊緣（.glass::before）是一個 1px 的漸層環，左上角最亮，側邊較暗，右下角再次變亮。均勻的白色邊框看起來像貼紙；不均勻的邊緣看起來像捕捉光線的厚斜角。
環境背景。 玻璃需要背後有東西可折射，否則它會渲染成平坦的灰色。頁面背景上一個微妙的、多階段的漸層為材質提供了可呈現的內容。Apple 從壁紙和照片中免費獲得這一點；在網頁上，您必須提供它。
折射：模糊無法偽造的部分
Apple：「這種半透明材質會反射和折射其周圍環境。」 放大任何 Apple 自己的圖片，到達玻璃控制項邊緣的文字或形狀會沿其輪廓彎曲和拉伸，而中間部分保持清晰。這就是 Liquid Glass 與 2020 年代的玻璃擬態的不同之處，也是使用者在缺少此效果時首先會察覺到的。預設情況下，應為玻璃控制項建置此效果；不要等到被要求才做。
- 機制（所有平台）：在邊緣帶內，顯示來自更深處的內容，在輪廓處最強，遵循實際形狀（膠囊形末端、圓角）。
- 網頁：在玻璃元素上添加
data-refract並載入assets/refraction.js。在 Chromium 引擎（Chrome、Edge、Android WebView、Electron、Windows 上的 Tauri）中，它會彎曲即時背景。Safari 和 Firefox 無法在backdrop-filter中執行url()濾鏡，因此對於位於已知區域上的玻璃，添加data-refract-source="#id"：腳本會改為複製並彎曲該區域，在所有瀏覽器中皆可運作。兩者都沒有的玻璃只會使用純模糊效果。務必為主要玻璃和展示玻璃提供來源，否則大多數訪客（Safari、Firefox）將完全看不到任何彎曲效果。 - 清晰玻璃是文字明顯彎曲的地方（模糊很少）；在一般玻璃上，彎曲效果顯示在模糊圖片的形狀和顏色邊緣中。
- 彎曲玻璃使用較淺的色調（
--glass-refract），以便彎曲效果顯現。承載文字的玻璃——選單、彈出視窗、工作表、側邊欄——添加.glass-text以保持完整的色調；否則，在明亮的內容上，其標籤可能會低於對比度要求。 - 在「減少透明度」模式下關閉，在「減少動態效果」模式下永不動畫。
- 檢查方法：將控制項放在一行文字上方並截圖。邊緣處的文字會彎曲和拉伸；中間部分保持可讀。
數值、調整表和測試方法：references/materials.md（「折射與邊緣」）。Android、Flutter 和原生平台：references/platforms.md。
不可妥協的事項
以下是違反時會使結果看起來不像 Apple 的規則。
- 玻璃效果僅用於功能層。 內容卡片使用不透明表面和陰影。
- 顏色要節制使用。 Apple：「請謹慎地將顏色應用於 Liquid Glass 材質……將顏色保留給真正需要強調的元素，例如狀態指示器或主要操作。」 它們的圖示顯示一個工具列，其中有三個帶色調的按鈕被標記為不正確，而同一個工具列只有主要操作帶有色調則被標記為正確。每個工具列內只使用一種顏色。
- 強調色應用於背景，而非圖示。 「若要強調主要操作，請將顏色應用於背景，而非符號或文字。」 例外情況是選取的標籤：Apple 會為圖示和標籤上色，並讓工具列保持中性。
- 極細線，而非邊框。 分隔線為 0.5px，不透明度約 12%，在列表中會縮排，避開前導圖示。1px 的實心灰色邊框是網頁的慣例，而非 Apple 的。
- 不使用細字重。 Apple：「建議使用 Regular、Medium、Semibold 或 Bold 字重，避免使用 Ultralight、Thin 和 Light。」
- 句子大小寫，而非全大寫加字距。 全大寫的微型標籤搭配寬字距是儀表板/編輯的慣例。Apple 的章節標題使用句子大小寫，並依賴字重和顏色。
- 透過大小、字重和顏色建立層級——絕不使用線條和方框。 標題不添加底線，章節不使用外框。Apple 自己的 Mail 圖示僅使用這三個變數就建立了四個層級。
- 圖示在同一個群組內要嘛全有，要嘛全無。 Apple 的選單規則：「群組中的每個項目要嘛都有圖示，要嘛都沒有。」 部分有圖示的列表看起來未完成。
- 每個自訂控制項都需要一個按下狀態。 Apple 明確指出了這一點——沒有按下狀態的控制項「可能會給人反應遲鈍的感覺。」
- 內容延伸至 Chrome 元素下方。 使用滾動邊緣效果，使內容在經過橫列下方時逐漸淡出，並將背景延伸到側邊欄下方（見下方）。內容在側邊欄邊緣處嘎然而止，正是 Apple 自己那組正確/不正確的圖示對比所要說明的問題。
- 每個
backdrop-filter的使用都需要一個@supports not (...)不透明備援方案，並與減少透明度的 media query 分開——一個處理瀏覽器不支援的情況，另一個處理使用者設定。忽略這點是一個常見且容易漏掉的錯誤：橫列會悄悄地渲染得過於透明且沒有模糊效果。 - 玻璃需彎曲並帶有邊緣。 具有均勻 1px 白色邊框且無折射效果的玻璃控制項是玻璃擬態，而非 Liquid Glass。在平台允許的地方使用邊緣漸層和折射效果，在不允許的地方使用乾淨的模糊備援方案。
- iOS 上的點擊目標至少為 44×44pt（macOS 較密集，但仍需舒適的點擊目標）。破壞性操作（刪除、移除帳戶）應使用破壞性/紅色角色，絕不使用中性角色。
字體
Apple 的字體比例不是裝飾性的——它是一個固定的階梯，遵循它就是讓排版看起來像原生的主要原因。iOS 預設（Large）樣式：
| 樣式 | 字重 | 大小 | 行高 |
|---|---|---|---|
| Large Title | Regular | 34 | 41 |
| Title 1 | Regular | 28 | 34 |
| Title 2 | Regular | 22 | 28 |
| Title 3 | Regular | 20 | 25 |
| Headline | Semibold | 17 | 22 |
| Body | Regular | 17 | 22 |
| Callout | Regular | 16 | 21 |
| Subhead | Regular | 15 | 20 |
| Footnote | Regular | 13 | 18 |
| Caption 1 | Regular | 12 | 16 |
| Caption 2 | Regular | 11 | 13 |
macOS 使用更緊湊的階梯（Body 13/16、Large Title 26/32），其 Headline 使用 Bold 而非 Semibold。以桌面為主的網頁佈局通常需要介於兩者之間的設定：iOS 的大小用於標題和閱讀文字，macOS 的密度用於側邊欄和中繼資料。
最小值是真實存在的：iOS 11pt、macOS 10pt。低於此數值，Apple 認為文字無法辨識，且網頁像素小於點數，因此請將約 11px 視為您的下限。
字型堆疊：-apple-system, BlinkMacSystemFont, 'SF Pro Text', … 可在 Apple 硬體上提供真實的 SF 字型。在其他任何地方，您都需要一個備援字型——Inter 是最接近且廣泛可用的替代品。切勿從 CDN 連結 SF 字型；它未獲得該用途的授權。
Apple 的字距是根據大小進行光學補償的：12pt 以下較鬆散，正好 12pt 時為零，在 19–20pt 左右最緊（約 -0.45pt），然後從約 24pt 開始變為正值（29–34pt 時約 +0.40pt），最後在顯示大小時衰減為零。系統字型在 Apple 硬體上會自動套用此功能。Token 檔案中的網頁數值（-0.022em 標題、-0.012em 正文、0 說明文字）是網頁慣例，旨在讓備援字型（如 Inter）看起來不會過於鬆散——並非 Apple 表格的轉換，因此請勿將其引用為 Apple 的數值。
完整表格、字距曲線和 SF Symbols 字重/大小配對：references/typography.md。
顏色
Apple 提供了確切的數值，但也表示*「避免對系統顏色值進行硬編碼……實際顏色值可能會在各版本之間波動。」*因此，請將它們用作基準，而非絕對真理。
語義集合比調色盤更有用：label / secondaryLabel / tertiaryLabel / quaternaryLabel 用於文字，separator 用於極細線，以及兩個背景系列——system 和 grouped——每個都有 primary / secondary / tertiary。當內容位於卡片中時，應使用 Grouped：頁面使用 grouped 背景（淺灰色），卡片使用白色。這種與網頁預設相反的設定——灰色頁面、白色卡片——是 Apple 佈局看起來像 Apple 的主要原因。
深色模式不是反色。Apple 使用基礎和升高表面：近黑色用於後退的最底層，明顯較淺的木炭色用於任何應顯得凸起的元素。將所有東西都塗成純黑色是錯誤的，Apple 自己的圖示對比證明了這一點。
Apple 規定的對比度最小值：17pt 以下為 4.5:1，18pt 及以上為 3:1，任何大小的粗體字為 3:1。
每個系統顏色在淺色、深色以及兩者高對比度變體中的確切 RGB 值，以及 iOS 和 macOS 的完整語義列表：references/color.md。
材質
兩種變體，錯誤的選擇會很明顯：
- 一般——模糊並調整其背後內容的亮度。幾乎所有東西都使用這個。在 Apple 的圖示中，它接近不透明；背景顯示為柔和的顏色，而非圖片。
- 清晰——高度半透明，用於懸浮在照片和影片上的控制項，媒體必須保持突出。如果背後的內容很亮，Apple 指定在其下方使用一個不透明度為 35% 的深色暗化層，以便標籤能夠清晰可見。
材質也會適應：在淺色內容上，玻璃及其符號會變暗；在深色內容上，它們會變亮。在網頁上，這意味著您的玻璃 tokens 需要根據主題使用真正不同的數值，而不是一個具有不同不透明度的數值。
配方、四種標準材質和活力等級：references/materials.md。
元件
元件形狀承載了許多訊息。簡要說明：
- 工具列——一條統一的橫列，單色，操作以圓形或膠囊形晶片呈現，相關操作分組到一個共享的膠囊中。標題（和可選的副標題）可以位於其中。
- 側邊欄——邊到邊，玻璃效果，SF Symbol 圖示使用強調色調色，圓形選取
…
[已截斷以進行翻譯]