mobile-ios-design

用途

该技能用于掌握 iOS Human Interface Guidelines（HIG）与 SwiftUI 模式，构建精致、原生的 iOS 应用，使其在 Apple 平台上自然融入。

主要能力

资料列出的能力范围包括：

按 Apple HIG 设计 iOS 应用界面
构建 SwiftUI 视图与布局
实现 iOS 导航模式（NavigationStack、TabView、sheets）
为 iPhone 与 iPad 创建自适应布局
使用 SF Symbols 与系统排版
构建无障碍 iOS 界面
实现 iOS 特有的手势与交互
面向 Dynamic Type 与深色模式设计

核心概念

1. Human Interface Guidelines 原则

Clarity（清晰）：内容可读、图标精确、装饰克制
Deference（尊重）：UI 帮助用户理解内容，而不与内容竞争
Depth（深度）：视觉层次与动效传达层级关系并支持导航

平台考量：

iOS：触控优先、紧凑显示、竖屏方向
iPadOS：更大画布、多任务、指针支持
visionOS：空间计算、眼/手输入

2. SwiftUI 布局系统

Stack 布局，例如：

// Vertical stack with alignment
VStack(alignment: .leading, spacing: 12) {
    Text("Title")
        .font(.headline)
    Text("Subtitle")
        .font(.subheadline)
        .foregroundStyle(.secondary)
}

// Horizontal stack with flexible spacing
HStack {
    Image(systemName: "star.fill")
    Text("Featured")
    Spacer()
    Text("View All")
        .foregroundStyle(.blue)
}

Grid 布局，例如：

// Adaptive grid that fills available width
LazyVGrid(columns: [
    GridItem(.adaptive(minimum: 150, maximum: 200))
], spacing: 16) {
    ForEach(items) { item in
        ItemCard(item: item)
    }
}

// Fixed column grid
LazyVGrid(columns: [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
], spacing: 12) {
    ForEach(items) { item in
        ItemThumbnail(item: item)
    }
}

3. 导航模式

NavigationStack（iOS 16+）：

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(items) { item in
                NavigationLink(value: item) {
                    ItemRow(item: item)
                }
            }
            .navigationTitle("Items")
            .navigationDestination(for: Item.self) { item in
                ItemDetailView(item: item)
            }
        }
    }
}

TabView（iOS 18+）：

struct MainTabView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            Tab("Home", systemImage: "house", value: 0) {
                HomeView()
            }

            Tab("Search", systemImage: "magnifyingglass", value: 1) {
                SearchView()
            }

            Tab("Profile", systemImage: "person", value: 2) {
                ProfileView()
            }
        }
    }
}

4. 系统集成

SF Symbols：

// Basic symbol
Image(systemName: "heart.fill")
    .foregroundStyle(.red)

// Symbol with rendering mode
Image(systemName: "cloud.sun.fill")
    .symbolRenderingMode(.multicolor)

// Variable symbol (iOS 16+)
Image(systemName: "speaker.wave.3.fill", variableValue: volume)

// Symbol effect (iOS 17+)
Image(systemName: "bell.fill")
    .symbolEffect(.bounce, value: notificationCount)

Dynamic Type：

// Use semantic fonts
Text("Headline")
    .font(.headline)

Text("Body text that scales with user preferences")
    .font(.body)

// Custom font that respects Dynamic Type
Text("Custom")
    .font(.custom("Avenir", size: 17, relativeTo: .body))

5. 视觉设计

颜色与材质：

// Semantic colors that adapt to light/dark mode
Text("Primary")
    .foregroundStyle(.primary)
Text("Secondary")
    .foregroundStyle(.secondary)

// System materials for blur effects
Rectangle()
    .fill(.ultraThinMaterial)
    .frame(height: 100)

// Vibrant materials for overlays
Text("Overlay")
    .padding()
    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

阴影与深度：

// Standard card shadow
RoundedRectangle(cornerRadius: 16)
    .fill(.background)
    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)

// Elevated appearance
.shadow(radius: 2, y: 1)
.shadow(radius: 8, y: 4)

使用方式

资料提供的快速上手组件示例：

import SwiftUI

struct FeatureCard: View {
    let title: String
    let description: String
    let systemImage: String

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: systemImage)
                .font(.title)
                .foregroundStyle(.blue)
                .frame(width: 44, height: 44)
                .background(.blue.opacity(0.1), in: Circle())

            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.headline)
                Text(description)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .lineLimit(2)
            }

            Spacer()

            Image(systemName: "chevron.right")
                .foregroundStyle(.tertiary)
        }
        .padding()
        .background(.background, in: RoundedRectangle(cornerRadius: 12))
        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
    }
}

适用场景

资料明确列出的适用场景为：按 Apple HIG 设计 iOS 应用界面、构建 SwiftUI 视图与布局、实现 iOS 导航模式（NavigationStack、TabView、sheets）、为 iPhone 与 iPad 创建自适应布局、使用 SF Symbols 与系统排版、构建无障碍 iOS 界面、实现 iOS 特有的手势与交互、面向 Dynamic Type 与深色模式设计。

最佳实践

资料列出的最佳实践包括：

使用语义颜色：始终使用 .primary、.secondary、.background 以获得自动深/浅色模式支持
拥抱 SF Symbols：使用系统符号以获得一致性与自动无障碍支持
支持 Dynamic Type：使用语义字体（.body、.headline）而非固定字号
添加无障碍：包含 .accessibilityLabel() 与 .accessibilityHint() 修饰符
使用安全区域：尊重 safeAreaInset，避免在屏幕边缘硬编码内边距
实现状态恢复：使用 @SceneStorage 保留用户状态
支持 iPad 多任务：为分屏视图和滑动覆盖进行设计
在真机测试：模拟器无法完整呈现触觉反馈与性能体验

常见问题与限制

资料列出的常见问题：

布局破坏：谨慎使用 .fixedSize()，优先使用灵活布局
性能问题：对长滚动列表使用 LazyVStack/LazyHStack
导航缺陷：确保 NavigationLink 的 value 符合 Hashable
深色模式问题：避免硬编码颜色；使用语义颜色或资源目录颜色
无障碍失败：开启 VoiceOver 进行测试
内存泄漏：留意闭包中的强引用循环

关于该技能的安装方式、收费与价格、平台与运行环境要求等，资料暂未提供。