Design para Mobile iOS

Domine as Diretrizes de Interface Humana (HIG) do iOS e os padrões do SwiftUI para criar aplicativos iOS nativos e polidos que se encaixam perfeitamente nas plataformas da Apple.

Quando Usar Esta Habilidade

• Projetar interfaces de aplicativos iOS seguindo as HIG da Apple
• Construir visualizações e layouts SwiftUI
• Implementar padrões de navegação do iOS (NavigationStack, TabView, sheets)
• Criar layouts adaptáveis para iPhone e iPad
• Usar SF Symbols e tipografia do sistema
• Construir interfaces iOS acessíveis
• Implementar gestos e interações específicos do iOS
• Projetar para Tipografia Dinâmica e Modo Escuro

Conceitos Essenciais

1. Princípios das Diretrizes de Interface Humana

Clareza: O conteúdo é legível, os ícones são precisos, os adornos são sutis Deferência: A UI ajuda os usuários a entender o conteúdo sem competir com ele Profundidade: Camadas visuais e movimento transmitem hierarquia e permitem a navegação

Considerações de Plataforma:

• iOS: Foco no toque, telas compactas, orientação retrato
• iPadOS: Tela maior, multitarefa, suporte a ponteiro
• visionOS: Computação espacial, entrada por olhos/mãos

2. Sistema de Layout SwiftUI

Layouts Baseados em Pilhas (Stacks):

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

Layouts em Grade:

// 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. Padrões de Navegação

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. Integração com o Sistema

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)

Tipografia Dinâmica:

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

Cores e Materiais:

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

Sombras e Profundidade:

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

Componente de Início Rápido

…