Mobile Ios Design

作者 wshobson46891e7e60da無授權條款收錄於 2026年10月8日更新於 2026年10月8日

Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

僅含說明Design & Creative Software Development

AI 產生的概覽

依循 Apple 人機介面指南，指導 iOS 介面設計與 SwiftUI 實作。

功能: 這項技能提供 Apple 人機介面指南與 SwiftUI 模式的指引，用來打造原生 iOS 應用程式。內容涵蓋堆疊與格狀佈局、以 NavigationStack 和 TabView 實作的導覽、SF Symbols、動態字級、語意色彩與材質、陰影，以及無障礙支援。它也列出最佳實務與常見問題，例如佈局、效能、導覽、深色模式與無障礙方面的缺失。
適用情境: 適合在設計 iOS 介面、建構 SwiftUI 檢視與佈局、實作 iOS 導覽模式，或讓應用程式符合 Apple 設計原則時使用。也適用於自適應佈局、SF Symbols、系統字體、無障礙、手勢、動態字級與深色模式等相關工作。
執行需求: 不需要指令碼或特殊工具，僅包含說明與參考資料。其中的 SwiftUI 程式碼以 iOS 16 以上版本的 API 為對象，實際套用時需要 Xcode 等 iOS 開發環境。

iOS Mobile Design

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

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

Core Concepts

1. Human Interface Guidelines Principles

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

2. SwiftUI Layout System

Stack-Based Layouts:

swift

// Vertical stack with alignmentVStack(alignment: .leading, spacing: 12) {    Text("Title")        .font(.headline)    Text("Subtitle")        .font(.subheadline)        .foregroundStyle(.secondary)}
// Horizontal stack with flexible spacingHStack {    Image(systemName: "star.fill")    Text("Featured")    Spacer()    Text("View All")        .foregroundStyle(.blue)}

// Vertical stack with alignmentVStack(alignment: .leading, spacing: 12) {    Text("Title")        .font(.headline)    Text("Subtitle")        .font(.subheadline)        .foregroundStyle(.secondary)}
// Horizontal stack with flexible spacingHStack {    Image(systemName: "star.fill")    Text("Featured")    Spacer()    Text("View All")        .foregroundStyle(.blue)}

Grid Layouts:

swift

// Adaptive grid that fills available widthLazyVGrid(columns: [    GridItem(.adaptive(minimum: 150, maximum: 200))], spacing: 16) {    ForEach(items) { item in        ItemCard(item: item)    }}
// Fixed column gridLazyVGrid(columns: [    GridItem(.flexible()),    GridItem(.flexible()),    GridItem(.flexible())], spacing: 12) {    ForEach(items) { item in        ItemThumbnail(item: item)    }}

// Adaptive grid that fills available widthLazyVGrid(columns: [    GridItem(.adaptive(minimum: 150, maximum: 200))], spacing: 16) {    ForEach(items) { item in        ItemCard(item: item)    }}
// Fixed column gridLazyVGrid(columns: [    GridItem(.flexible()),    GridItem(.flexible()),    GridItem(.flexible())], spacing: 12) {    ForEach(items) { item in        ItemThumbnail(item: item)    }}

3. Navigation Patterns

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

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+):

swift

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

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. System Integration

SF Symbols:

swift

// Basic symbolImage(systemName: "heart.fill")    .foregroundStyle(.red)
// Symbol with rendering modeImage(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)

// Basic symbolImage(systemName: "heart.fill")    .foregroundStyle(.red)
// Symbol with rendering modeImage(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 fontsText("Headline")    .font(.headline)
Text("Body text that scales with user preferences")    .font(.body)
// Custom font that respects Dynamic TypeText("Custom")    .font(.custom("Avenir", size: 17, relativeTo: .body))

// Use semantic fontsText("Headline")    .font(.headline)
Text("Body text that scales with user preferences")    .font(.body)
// Custom font that respects Dynamic TypeText("Custom")    .font(.custom("Avenir", size: 17, relativeTo: .body))

5. Visual Design

Colors and Materials:

swift

// Semantic colors that adapt to light/dark modeText("Primary")    .foregroundStyle(.primary)Text("Secondary")    .foregroundStyle(.secondary)
// System materials for blur effectsRectangle()    .fill(.ultraThinMaterial)    .frame(height: 100)
// Vibrant materials for overlaysText("Overlay")    .padding()    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

// Semantic colors that adapt to light/dark modeText("Primary")    .foregroundStyle(.primary)Text("Secondary")    .foregroundStyle(.secondary)
// System materials for blur effectsRectangle()    .fill(.ultraThinMaterial)    .frame(height: 100)
// Vibrant materials for overlaysText("Overlay")    .padding()    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

Shadows and Depth:

swift

// Standard card shadowRoundedRectangle(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)

// Standard card shadowRoundedRectangle(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)    }}

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

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

來源與署名

來源：wshobson/agents位於plugins/ui-design/skills/mobile-ios-design提交46891e7

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Mobile Ios Design

iOS Mobile Design

When to Use This Skill

Core Concepts

1. Human Interface Guidelines Principles

2. SwiftUI Layout System

3. Navigation Patterns

4. System Integration

5. Visual Design

Quick Start Component

Best Practices

Common Issues

來源與署名

更多來自 wshobson/agents 的技能

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design