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