自訂 SF Symbols：可變範本與三個必要來源

Apple 提供超過 6,000 個 SF Symbols，且 SF Symbols 應用程式為免費，但大多數應用程式最終都會需要 Apple 沒有的圖示：品牌標誌、領域專屬字符，或是不符合系統詞彙的自訂動作。正確做法是建立自訂 SF Symbol，而非直接放入靜態 SVG，因為自訂 SF Symbols 會免費繼承系統的機制：它們會隨 Dynamic Type 縮放、參與 Symbol Effects 動畫、以四種渲染模式呈現、與 SF Pro 字體對齊,並且無需各別應用程式撰寫程式碼即可遵循無障礙設定。靜態 SVG 完全無法參與這些功能。

本文將依循 SF Symbols 應用程式的可變範本走過整套工作流程,該範本於 WWDC 2021 隨 SF Symbols 3 推出¹。文章框架是「三個必要來源設計是什麼,以及為什麼」,因為範本格式是工作流程中最具承重作用的部分,大多數設計師與工程師第一次接觸時都會錯過。後續的 SF Symbols 版本(4、5、6、7)為範本格式擴充了可變顏色、magic replace 轉場、漸層支援與動畫效果,但可變範本核心的三來源結構自 SF Symbols 3 以來一直維持穩定。

TL;DR

• 自訂 SF Symbols 從 SF Symbols 應用程式匯出的範本開始(File > Export Template,或 ⌘E)²。範本是一個 SVG,內含系統定義的尺寸參考線,以及一個待替換的占位符號設計。
• 可變範本只需要三個來源設計:Ultralight-Small、Regular-Small 與 Black-Small。SF Symbols 應用程式會自動內插出其餘 24 種變化(3 種尺度 × 9 種粗細)³。
• 路徑相容性是承重要求:每條路徑在所有三個來源中都必須有相同數量的錨點、相同的起始點,以及相同的方向。否則內插會產生畸形的字符。
• 自訂符號支援所有四種渲染模式(monochrome、hierarchical、palette、multicolor)以及圖層結構(primary、secondary、tertiary)。Symbol Editor 的渲染檢查器面板會將子路徑指派給圖層。
• 最終交付:將符號檔案以 Symbol Image Set 形式加入 Xcode 的資產目錄。SwiftUI 透過 Image(_:) 以符號名稱引用;其餘交由系統處理。

可變範本

SF Symbols 3 (WWDC 2021) 推出了可變範本³,這是一個單一 SVG 檔案,捕捉三個來源設計,SF Symbols 應用程式由此產生完整的 27 種變化網格。三個來源為:

• Ultralight-Small。 最輕的粗細,最小的尺度。
• Regular-Small。 中間粗細,最小尺度。
• Black-Small。 最重的粗細,最小尺度。

應用程式利用這三者內插出其他 24 個格子 (Ultralight-Medium、Regular-Medium、Black-Medium、Ultralight-Large、Regular-Large、Black-Large,以及各尺度間的中間粗細)。只要來源路徑具有相容結構,內插即為自動。

在 SF Symbols 3 推出可變範本之前,自訂符號需要手動繪製全部 27 種變化。可變範本將其縮減為 3 + 內插,這是「可管理的設計工作量」與「會扼殺專案的工作量」之間的差異。

相容資料的要求

路徑內插要求三個來源路徑以相同順序描述相同形狀²:

• 相同數量的錨點。 一個 Regular 粗細時有 4 個錨點的方形,在 Ultralight 與 Black 時也必須有 4 個錨點,即使可見的曲度不同。
• 相同的起始點。 路徑的第一個錨點必須在所有三個粗細中位於相同的概念位置(例如,永遠是左上角)。
• 相同的方向。 三條路徑都以相同順序遍歷形狀(順時針或逆時針)。

任一條件未滿足都會產生內插瑕疵:扭結、錯誤重疊、缺失筆劃。SF Symbols 應用程式會呈現其中一些(變體預覽會顯示內插結果),但細微問題只會在最終匯出的資產中顯現。

務實的工作流程是先設計 Regular-Small,然後在相同的路徑骨架上,透過減少筆劃寬度衍生出 Ultralight,透過增加筆劃寬度衍生出 Black。每次衍生都會在構造上保留錨點數、起始點與方向。獨立設計每個粗細所產生的相容性問題,除錯所需時間遠超過重新建構。

工作流程

從概念到可運作的資產,共五個步驟:

1. 找一個類似的現有符號

SF Symbols 應用程式的資料庫有 6,000 多個符號。找一個結構上與你概念類似的(圓形含內容、方形含覆蓋層、線條含裝飾)。匯出範本路徑會以現有符號的幾何形狀作為起點。

2. 匯出範本

File > Export Template… 或 ⌘E。選擇「Variable」作為範本類型。結果是一個 SVG 檔案,內含該符號三個來源粗細的排版,以及顯示 cap height、baseline 與視覺邊界(SF Symbols 用以與 SF Pro 文字對齊)的參考幾何。

3. 替換範本路徑

在向量編輯器(Sketch、Figma、Illustrator、Affinity Designer、Inkscape)中開啟該 SVG。範本的具名圖層包含三個來源設計。將每一個替換為你的自訂設計,同時保留圖層名稱以及 cap-height/baseline 對齊。

路徑相容性要求在此處非常重要:從同一條路徑骨架設計每個粗細,變化筆劃寬度或填色重量,而非重新繪製。向量工具的「複製並修改」工作流程是阻力最小的路徑。

4. 重新匯入並驗證

將修改後的 SVG 拖回 SF Symbols 應用程式。應用程式會產生 27 種變化並在變體網格中顯示。在多個縮放層級下檢查每個粗細與尺度的組合;內插瑕疵常出現在中間粗細,並不會立即顯而易見。

對於具有多個視覺元素的符號(本體加徽章、圓形加內部形狀),開啟渲染檢查器面板,將子路徑指派給圖層(primary、secondary、tertiary)。圖層指派決定了符號在 hierarchical、palette 與 multicolor 模式下如何渲染。

5. 加入 Xcode

將符號檔案 (.svg,從 SF Symbols 匯出) 拖入 Xcode 的資產目錄。Xcode 會將其視為 Symbol Image Set。從程式碼引用:

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:) (沒有 systemName: 參數) 會從資產目錄載入。在系統符號上能運作的 .symbolRenderingMode、.foregroundStyle、.symbolEffect 與 Dynamic Type 行為,在自訂符號上也都能運作,前提是符號被正確地建立。

渲染模式與圖層結構

SF Symbols 公開的四種渲染模式在自訂符號上的運作方式與系統符號相同⁴:

• Monochrome。 單一顏色 (foregroundStyle)。最簡單的模式,也最常見。
• Hierarchical。 單一顏色,依圖層改變不透明度。在渲染檢查器面板中定義的圖層會獲得預設的不透明度;開發者套用一個色調,即可自動獲得視覺層次。
• Palette。 每個圖層明確的顏色。開發者傳入多個 foregroundStyle 參數;每個圖層獲得自己的顏色。
• Multicolor。 Apple 為每個圖層定義的固定顏色。對於自訂符號,顏色是設計者在 Symbol Editor 的 Multicolor 設定中指派的。

圖層結構是讓 hierarchical、palette 與 multicolor 能運作的關鍵。一個沒有圖層指派的自訂符號會將所有路徑塌陷到 primary 圖層;該符號在 monochrome 下仍能渲染,但在其他模式下不會產生視覺層次。請花時間在渲染檢查器面板中為任何受益於深度的符號指派圖層。

常見失敗

來自自訂符號失敗紀錄的三種模式:

路徑相容性違規。 最常見的問題。一個「在 Regular 粗細看起來沒問題」但中間粗細卻產生瑕疵的符號,幾乎都有路徑相容性問題。診斷方法:開啟 SF Symbols 應用程式的變體網格,觀察中等粗細的變體;若它們顯示扭結或不符合預期內插的筆劃,則三個來源路徑中的某一個違反了相容性。

baseline 或 cap height 未對齊。 設計時未顧及範本 baseline 參考線的符號,放在文字旁時會顯得突兀。視覺症狀:符號與 .body 文字樣式的 Text 內聯放置時,顯得太高或太低。修正:使用範本的參考幾何;將符號的視覺中心定位在 cap-height 中點。

沒有圖層指派。 一個具有豐富內部結構(多個視覺元素)但沒有圖層指派的符號,只在 monochrome 下能正確渲染。選擇 hierarchical 或 palette 模式的應用程式會看到平面的輸出。修正:開啟渲染檢查器面板,將每條子路徑指派給圖層 (primary 給主要形狀、secondary 給輔助、tertiary 給三級細節)。

此模式對 iOS 26+ 應用程式的意義

三個重點。

1. 應用程式內圖示請使用自訂 SF Symbols,而非原始 SVG。 自訂符號工作流程是真正的工程工作,但系統整合 (Dynamic Type、Symbol Effects、渲染模式、無障礙性) 對於任何長期存在於 UI 的圖示都讓這份成本物有所值。靜態 SVG 適合一次性的行銷資產,而非核心 UI。

2. 從單一骨架設計;改變筆劃粗細,而非路徑結構。 路徑相容性違規是承重的失敗模式。防禦性的設計流程是從一個粗細 (Regular-Small) 開始,從相同的路徑幾何透過減少筆劃衍生 Ultralight、增加筆劃衍生 Black。相容性在構造上即成立。

3. 為任何受益於渲染模式的符號明確指派圖層。 一個只在 monochrome 下渲染的符號,等於放棄了 SF Symbols 系統的一半。渲染檢查器面板只需幾分鐘;結果是符號能與系統符號並列,參與 hierarchical、palette 與 multicolor 模式。

完整的 Apple 生態系叢集:類型化的 App Intents;MCP servers;路由問題;Foundation Models;執行期 vs 工具 LLM 區分;三個介面;單一真實來源模式;兩個 MCP 伺服器;Apple 開發的 hooks;Live Activities;watchOS 執行期;SwiftUI 內部機制;RealityKit 的空間心智模型;SwiftData 結構紀律;Liquid Glass 模式;多平台出貨;平台矩陣;Vision 框架;Symbol Effects;Core ML 推論;Writing Tools API;Swift Testing;Privacy Manifest;無障礙作為平台;SF Pro 字體系統;visionOS 空間模式;Speech 框架;SwiftData 遷移;tvOS 焦點引擎;@Observable 內部機制;SwiftUI Layout 協定;我拒絕撰寫的內容。中心位於 Apple 生態系系列。如需更廣泛的 iOS 與 AI 代理人脈絡,請參閱 iOS Agent Development guide。

FAQ

我需要 SF Symbols 應用程式,還是可以用其他方式建立自訂符號?

SF Symbols 應用程式是官方工具,也是唯一能產生經過驗證、相容於 App Store 的自訂符號的工具。第三方工具與線上轉換器確實存在,但產生的 SVG 不一定能滿足範本格式的要求。對於正式發布的應用程式,請使用 SF Symbols 應用程式。

我可以在 Windows 上建立自訂符號嗎?

SF Symbols 應用程式僅限 macOS。你可以在任何具備向量編輯器的平台上編輯匯出的 SVG 範本,但匯出與重新匯入步驟需要 macOS。多數團隊至少有一位設計師在 macOS 上,可以處理這些步驟;遠端團隊工作流程則透過版本控制或共用儲存傳遞 SVG 檔案。

如何在自訂符號上支援 .symbolEffect?

如果符號的結構良好,大多數符號效果會自動運作:bounce、pulse、scale 與其餘效果不論來源為何都會套用到符號上。.replace 內容轉場需要起始符號與目標符號具有相容結構(類似的圖層數、類似的整體形狀)。叢集中的 Symbol Effects 文章詳細涵蓋了效果詞彙。

Symbol Image Set 與 Xcode 中的一般 Image Set 有什麼差別?

Symbol Image Set 會匯入符號的完整範本(全部 27 種變化),並透過 SF Symbols 的渲染管線公開它們。該符號會隨 Dynamic Type 縮放、參與渲染模式,並可與 .symbolEffect 配合運作。一般 Image Set 是靜態的點陣或 SVG 資源,完全不參與這些功能。自訂 SF Symbols 請使用 Symbol Image Set。

自訂符號如何處理 visionOS 與 watchOS?

方式與系統符號相同:它們會以平台預期的尺寸渲染(watchOS 為小型、visionOS 為大型)、參與平台的無障礙功能,並遵循平台的色彩與效果慣例。自訂符號的建立是一次性的;跨平台行為是自動的。叢集中的 Apple Platform Matrix 與 visionOS spatial patterns 文章涵蓋各平台的考量。

對 App Store 審查有什麼影響?

沒有。自訂 SF Symbols 的審查方式與其他資產目錄資產相同。視覺風格指引(不要冒用 Apple 的 UI 模式、不要侵犯品牌商標)同樣適用於自訂符號,如同適用於其他自訂美術作品;此外,審查流程將其視為標準圖像資產。

參考資料