SF Symbols 基礎指南：Apple 設計語言的視覺符號系統

作為一名 iOS 開發者，過去我們總是在處理各種尺寸（@1x, @2x, @3x）的點陣圖和應對無盡的微調中循環往復。任何顏色的變更或線條的粗細調整，都意味著一次繁瑣的「匯出-匯入」流程。

SF Symbols 的出現，為我們提供了一套共享的「視覺語言」。設計師只需標註符號名稱，如 gearshape.fill，開發者便能用一行程式碼實現，並在程式中動態調整顏色、字重與大小。這種與系統字體 San Francisco 無縫整合的模式，不僅大幅提升了開發效率，更確保了圖示與文字在視覺上的完美和諧，讓我們的 App 能輕易達到 Apple 等級的設計質感。

而這套強大的符號系統，其實早已融入你我生活中的每個角落。每當打開 Apple 裝置，你是否曾注意到那些精美、一致且富有表現力的小圖示？從 iOS 的主畫面、macOS 的選單列到 watchOS 的複雜功能，它們不僅美觀，更與 Apple 生態系統完美契合。

這些，正是 SF Symbols 的魅力所在。

SF Symbols 是 Apple 於 2019 年推出的一套 icon library，專為旗下所有平台設計。它不僅僅是圖片檔案，更是一套與系統字體 San Francisco 無縫整合的設計語言，確保符號在任何尺寸和字重下都能保持清晰與和諧。

在這篇文章中，我們將帶你探索 SF Symbols 的世界，提升 App 的設計質感與開發效率。

什麼是 SF Symbols？ 

SF Symbols 是 Apple 設計的 icon library，專為 iOS、iPadOS、macOS、tvOS 和 watchOS 平台設計。與傳統的點陣圖示不同，SF Symbols 是向量圖形，這意味著它們可以無損縮放到任何尺寸。

核心特色 

1. 無縫整合 San Francisco 字體

SF Symbols 的設計與 Apple 系統字體 San Francisco 完美對齊，包括 baseline、x-height 和其他字體測量標準。這確保了文字和符號的視覺和諧。

2. Font Weight支援

就像 San Francisco 字體有不同的字重一樣，SF Symbols 也提供了 9 種不同的 font weight：

• Ultralight
• Thin
• Light
• Regular
• Medium
• Semibold
• Bold
• Heavy
• Black

3. 可配置性

每個符號都可以調整大小、顏色、透明度等屬性，讓開發者能根據設計需求進行客製化。

4. 多國語言支援

SF Symbols 7 開始支援多國語言的變體，確保符號在不同文化背景下都能正確表達意思。

在 Xcode 中使用 SF Symbols 

基本使用方式 

在 SwiftUI 中使用 SF Symbols 非常簡單：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 基本符號
            Image(systemName: "heart.fill")
                .font(.largeTitle) // 調整大小
                .foregroundColor(.red) // 調整顏色
        }
    }
}

在 UIKit 中的使用方式：

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 建立 SF Symbol 圖片
        let heartImage = UIImage(systemName: "heart")
        let heartFilledImage = UIImage(systemName: "heart.fill")
        
        // 設定 ImageView
        let imageView = UIImageView(image: heartImage)
        imageView.tintColor = .systemRed
        
        // 調整 Config
        let config = UIImage.SymbolConfiguration(pointSize: 30, weight: .bold)
        let configuredImage = UIImage(systemName: "heart.fill", withConfiguration: config)
    }
}

Symbol Configuration 

SF Symbols 提供了強大的 Config System，讓你能精確控制符號的外觀：

// 設定大小和 font weight
let config = UIImage.SymbolConfiguration(pointSize: 24, weight: .semibold)

// 設定比例尺
let scaleConfig = UIImage.SymbolConfiguration(scale: .large)

// 設定文字樣式
let textStyleConfig = UIImage.SymbolConfiguration(textStyle: .headline)

// 組合多個 config
let combinedConfig = config.applying(scaleConfig)

// 套用 config
let image = UIImage(systemName: "gear", withConfiguration: combinedConfig)

SF Symbols 7.0 新功能 

Draw 動畫 

Draw 動畫讓符號看起來像是被逐步繪製出來，創造出生動的視覺效果：

import SwiftUI

struct DrawAnimationView: View {
    @State private var isDrawing = false
    
    var body: some View {
        Image(systemName: "heart")
            .font(.system(size: 100))
            .symbolEffect(.drawline, isActive: isDrawing)
            .onTapGesture {
                isDrawing.toggle()
            }
    }
}

變量渲染 (Variable Rendering) 

某些符號支援變量渲染，可以顯示不同的填充程度或狀態：

struct VariableRenderingView: View {
    @State private var progress: Double = 0.5
    
    var body: some View {
        VStack {
            Image(systemName: "wifi", variableValue: progress)
                .font(.system(size: 50))
            
            Slider(value: $progress, in: 0...1)
                .padding()
        }
    }
}

Magic Replace 

Magic Replace 功能讓符號之間的轉換更加平滑自然：

struct MagicReplaceView: View {
    @State private var isPlaying = false
    
    var body: some View {
        Image(systemName: isPlaying ? "pause.fill" : "play.fill")
            .font(.system(size: 50))
            .symbolEffect(.replace, isActive: isPlaying)
            .onTapGesture {
                isPlaying.toggle()
            }
    }
}

漸層效果 

SF Symbols 7.0 支援多種漸層效果：

struct GradientSymbolView: View {
    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "heart.fill")
                .font(.system(size: 50))
                .foregroundStyle(
                    LinearGradient(
                        colors: [.red, .pink],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
            
            Image(systemName: "star.fill")
                .font(.system(size: 50))
                .foregroundStyle(
                    RadialGradient(
                        colors: [.yellow, .orange],
                        center: .center,
                        startRadius: 5,
                        endRadius: 25
                    )
                )
        }
    }
}

符號修飾器 

SF Symbols 支援多種修飾器來改變符號的外觀：

struct SymbolModifiersView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 基本符號
            Image(systemName: "heart")
            
            // 填充版本
            Image(systemName: "heart.fill")
            
            // 圓圈版本
            Image(systemName: "heart.circle")
            
            // 圓圈填充版本
            Image(systemName: "heart.circle.fill")
            
            // 正方形版本
            Image(systemName: "heart.square")
            
            // 正方形填充版本
            Image(systemName: "heart.square.fill")
        }
        .font(.title)
    }
}

結語 

SF Symbols 不僅僅是一套圖示庫，更是 Apple 設計哲學的體現。它提供了一致、美觀且功能豐富的視覺元素，讓開發者能夠輕鬆打造出符合 Apple 設計標準的 App。

從基本的符號使用到進階的動畫效果，從標準符號到客製化設計，SF Symbols 為開發者提供了無限的可能性。隨著每次更新，Apple 都在持續改進和擴展這套系統，讓它變得更加強大和靈活。

無論你是剛開始接觸 iOS 開發的新手，還是經驗豐富的開發者，掌握 SF Symbols 的使用技巧都能讓你的 App 在視覺設計上更上一層樓。

記住，好的設計不在於使用了多少華麗的效果，而在於如何恰到好處地傳達資訊，提升用戶體驗。SF Symbols 正是幫助你達成這個目標的強大工具。

現在就開始探索 SF Symbols 的世界吧！下載 SF Symbols app，在你的專案中嘗試不同的符號和效果，讓你的 App 散發出純正的 Apple 風格！

參考資料 

• SF Symbols 7 - Apple Developer
• Human Interface Guidelines - SF Symbols
• Apple Design Resources