apple-hig-designer

Apple HIG Designer

按照 Apple 人機介面指南 (HIG) 設計精美、原生的 iOS App。使用原生元件、恰當的排版、語意色彩和 Apple 的設計原則，打造無障礙、直覺的介面。

此技能的功能

協助您設計和建置感覺原生且遵循 Apple 指南的 iOS App：

• 生成 iOS 元件 - 建立 SwiftUI 和 UIKit 元件
• 驗證設計 - 檢查是否符合 Apple HIG
• 確保無障礙性 - VoiceOver、動態字型、色彩對比
• 應用設計原則 - 清晰、順從、深度
• 使用語意色彩 - 自動支援深色模式
• 實作排版 - San Francisco 字體系統
• 遵循間距 - 8pt 網格系統和安全區域

Apple 的設計原則

1. 清晰

讓內容清楚且聚焦。

文字在各個尺寸下都清晰易讀，圖示精確明瞭，裝飾細膩恰當，設計專注於功能性。

// ✅ 清楚、聚焦的內容
Text("歡迎回來，Sarah")
    .font(.title)
    .foregroundColor(.primary)

// ❌ 不清楚、雜亂的內容
Text("歡迎回來，Sarah!!!")
    .font(.title)
    .foregroundColor(.red)
    .background(.yellow)
    .overlay(Image(systemName: "star.fill"))

2. 順從

UI 應幫助使用者理解和與內容互動，但永遠不與內容競爭。

介面順從於內容，使用輕量的視覺處理，讓焦點保持在內容上，並給內容呼吸的空間。

// ✅ 以內容為中心
VStack(alignment: .leading, spacing: 8) {
    Text("文章標題")
        .font(.headline)
    Text("文章內容放在這裡...")
        .font(.body)
        .foregroundColor(.secondary)
}
.padding()

// ❌ 干擾性的 UI
VStack(spacing: 8) {
    Text("文章標題")
        .font(.headline)
        .foregroundColor(.white)
        .background(.blue)
        .border(.red, width: 3)
}

3. 深度

視覺層次和真實的動畫能傳達階層，並幫助使用者理解關係。

清晰的視覺層次和真實的動畫賦予生命力並促進理解。觸感和可發現性增加愉悅感，並能在不失去上下文的情況下存取功能。

// ✅ 清晰的深度階層
ZStack {
    Color(.systemBackground)

    VStack {
        // 具有高度的卡片
        CardView()
            .shadow(radius: 8)
    }
}

// 使用模糊來表現深度
Text("內容")
    .background(.ultraThinMaterial)

iOS UI 元件

導覽模式

1. 導覽列

頂部用於導覽和動作的列。

NavigationStack {
    List {
        Text("項目 1")
        Text("項目 2")
    }
    .navigationTitle("標題")
    .navigationBarTitleDisplayMode(.large)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("新增") {
                // 動作
            }
        }
    }
}

指南：

• 在頂層檢視使用大標題
• 在詳細資料檢視使用內聯標題
• 讓動作與當前上下文相關
• 最多 2-3 個工具列項目

2. 標籤列

用於頂層目的地的底部導覽。

TabView {
    HomeView()
        .tabItem {
            Label(\