mobile-ios-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

iOS Mobile Design

iOS移动设计

Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.

精通iOS人机界面指南（HIG）与SwiftUI模式，构建在Apple平台上体验自然、精致的原生iOS应用。

When to Use This Skill

何时使用此技能

Designing iOS app interfaces following Apple HIG
Building SwiftUI views and layouts
Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
Creating adaptive layouts for iPhone and iPad
Using SF Symbols and system typography
Building accessible iOS interfaces
Implementing iOS-specific gestures and interactions
Designing for Dynamic Type and Dark Mode

遵循Apple HIG设计iOS应用界面
构建SwiftUI视图与布局
实现iOS导航模式（NavigationStack、TabView、sheets）
为iPhone和iPad创建自适应布局
使用SF Symbols与系统排版
构建无障碍iOS界面
实现iOS特定手势与交互
为动态字体与深色模式设计

Core Concepts

核心概念

1. Human Interface Guidelines Principles

1. 人机界面指南原则

Clarity: Content is legible, icons are precise, adornments are subtle Deference: UI helps users understand content without competing with it Depth: Visual layers and motion convey hierarchy and enable navigation

Platform Considerations:

iOS: Touch-first, compact displays, portrait orientation
iPadOS: Larger canvas, multitasking, pointer support
visionOS: Spatial computing, eye/hand input

清晰性：内容易读，图标精准，装饰简洁 顺从性：UI帮助用户理解内容，而非与之竞争 层次感：视觉层级与动效传达结构，支持导航

平台考量：

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

2. SwiftUI Layout System

2. SwiftUI布局系统

Stack-Based Layouts:

swift

// 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 Layouts:

swift

// 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)
    }
}

基于栈的布局：

swift

// 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)
}

网格布局：

swift

// 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. Navigation Patterns

3. 导航模式

NavigationStack (iOS 16+):

swift

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:

swift

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

    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SearchView()
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
                .tag(1)

            ProfileView()
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
                .tag(2)
        }
    }
}

NavigationStack (iOS 16+)：

swift

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：

swift

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

    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SearchView()
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
                .tag(1)

            ProfileView()
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
                .tag(2)
        }
    }
}

4. System Integration

4. 系统集成

SF Symbols:

swift

// 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:

swift

// 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))

SF Symbols：

swift

// 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)

动态字体：

swift

// 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. Visual Design

5. 视觉设计

Colors and Materials:

swift

// 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))

Shadows and Depth:

swift

// 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)

颜色与材质：

swift

// 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))

阴影与层次感：

swift

// 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)

Quick Start Component

快速开始组件

swift

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)
    }
}

swift

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)
    }
}

Best Practices

最佳实践

Use Semantic Colors: Always use
```
.primary
```
,
```
.secondary
```
,
```
.background
```
for automatic light/dark mode support
Embrace SF Symbols: Use system symbols for consistency and automatic accessibility
Support Dynamic Type: Use semantic fonts (
```
.body
```
,
```
.headline
```
) instead of fixed sizes

Add Accessibility: Include

.accessibilityLabel()

and

.accessibilityHint()

modifiers

Use Safe Areas: Respect
```
safeAreaInset
```
and avoid hardcoded padding at screen edges
Implement State Restoration: Use
```
@SceneStorage
```
for preserving user state
Support iPad Multitasking: Design for split view and slide over
Test on Device: Simulator doesn't capture full haptic and performance experience

使用语义化颜色：始终使用
```
.primary
```
、
```
.secondary
```
、
```
.background
```
以自动支持亮/深色模式
采用SF Symbols：使用系统图标确保一致性与自动无障碍支持
支持动态字体：使用语义化字体（
```
.body
```
、
```
.headline
```
）而非固定字号
添加无障碍支持：包含
```
.accessibilityLabel()
```
与
```
.accessibilityHint()
```
修饰符
使用安全区域：遵循
```
safeAreaInset
```
，避免在屏幕边缘使用硬编码内边距
实现状态恢复：使用
```
@SceneStorage
```
保存用户状态
支持iPad多任务：为分屏与侧滑设计
在设备上测试：模拟器无法完全还原触觉反馈与性能体验

Common Issues

资源

Layout Breaking: Use
```
.fixedSize()
```
sparingly; prefer flexible layouts
Performance Issues: Use
```
LazyVStack
```
/
```
LazyHStack
```
for long scrolling lists
Navigation Bugs: Ensure
```
NavigationLink
```
values are
```
Hashable
```
Dark Mode Problems: Avoid hardcoded colors; use semantic or asset catalog colors
Accessibility Failures: Test with VoiceOver enabled
Memory Leaks: Watch for strong reference cycles in closures

Resources

—