apple-hig-designer

Apple HIG Designer

Gestalten Sie schöne, native iOS-Apps gemäß den Apple Human Interface Guidelines (HIG). Erstellen Sie barrierefreie, intuitive Oberflächen mit nativen Komponenten, korrekter Typografie, semantischen Farben und den Designprinzipien von Apple.

Was diese Fähigkeit tut

Hilft Ihnen beim Entwerfen und Erstellen von iOS-Apps, die sich nativen anfühlen und den Apple-Richtlinien folgen:

• iOS-Komponenten generieren - SwiftUI- und UIKit-Komponenten erstellen
• Designs validieren - Prüfung auf Konformität mit Apple HIG
• Barrierefreiheit sicherstellen - VoiceOver, Dynamic Type, Farbkontrast
• Designprinzipien anwenden - Klarheit, Zurückhaltung, Tiefe
• Semantische Farben verwenden - Automatische Unterstützung des Dunkelmodus
• Typografie implementieren - San Francisco-Schriftsystem
• Abstände einhalten - 8-Punkt-Rastersystem und Safe Areas

Apples Designprinzipien

1. Klarheit

Machen Sie Inhalte klar und fokussiert.

Text ist in jeder Größe lesbar, Symbole sind präzise und klar, Verzierungen subtil und angemessen, und der Fokus auf Funktionalität treibt das Design an.

// ✅ Klare, fokussierte Inhalte
Text("Willkommen zurück, Sarah")
    .font(.title)
    .foregroundColor(.primary)

// ❌ Unklar, überladen
Text("Willkommen zurück, Sarah!!!")
    .font(.title)
    .foregroundColor(.red)
    .background(.yellow)
    .overlay(Image(systemName: "star.fill"))

2. Zurückhaltung

Die Benutzeroberfläche hilft Menschen, Inhalte zu verstehen und mit ihnen zu interagieren, konkurriert aber nie mit ihnen.

Die Oberfläche tritt hinter den Inhalt zurück, verwendet eine leichte visuelle Behandlung, die den Fokus auf den Inhalt lenkt und ihm Raum zum Atmen gibt.

// ✅ Inhaltsfokussiert
VStack(alignment: .leading, spacing: 8) {
    Text("Artikeltitel")
        .font(.headline)
    Text("Artikelinhalt hier...")
        .font(.body)
        .foregroundColor(.secondary)
}
.padding()

// ❌ Ablenkende UI
VStack(spacing: 8) {
    Text("Artikeltitel")
        .font(.headline)
        .foregroundColor(.white)
        .background(.blue)
        .border(.red, width: 3)
}

3. Tiefe

Visuelle Ebenen und realistische Bewegungen vermitteln Hierarchie und helfen Menschen, Beziehungen zu verstehen.

Ausgeprägte visuelle Ebenen und realistische Bewegungen verleihen Vitalität und erleichtern das Verständnis. Berührung und Auffindbarkeit steigern die Freude und ermöglichen den Zugriff auf Funktionen, ohne den Kontext zu verlieren.

// ✅ Klare Tiefenhierarchie
ZStack {
    Color(.systemBackground)

    VStack {
        // Karte mit Höhe
        CardView()
            .shadow(radius: 8)
    }
}

// Unschärfe für Tiefe verwenden
Text("Inhalt")
    .background(.ultraThinMaterial)

iOS UI-Komponenten

Navigationsmuster

1. Navigationsleiste

Obere Leiste für Navigation und Aktionen.

NavigationStack {
    List {
        Text("Element 1")
        Text("Element 2")
    }
    .navigationTitle("Titel")
    .navigationBarTitleDisplayMode(.large)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Hinzufügen") {
                // Aktion
            }
        }
    }
}

Richtlinien:

• Verwenden Sie große Titel für Ansichten der obersten Ebene
• Verwenden Sie Inline-Titel für Detailansichten
• Halten Sie Aktionen relevant für den aktuellen Kontext
• Maximal 2-3 Toolbar-Elemente

2. Tab-Leiste

Untere Navigation für Ziele der obersten Ebene.

TabView {
    HomeView()
        .tabItem {
            Label("Start", systemImage: "house")
        }

    SearchView()
        .tabItem {
            Label("Suche", systemImage: "magnifyingglass")
        }

    ProfileView()
        .tabItem {
            Label("Profil", systemImage: "person")
        }
}

Richtlinien:

• Maximal 3-5 Tabs
• Verwenden Sie SF Symbols für Symbole
• Beschriftungen sollten prägnant sein (ein Wort)
• Blenden Sie Tabs niemals aus oder deaktivieren Sie sie
• Verwenden Sie Tab-Leiste nicht zusammen mit Toolbar in derselben Ansicht

3. Liste

Bildlaufbare Liste von Elementen.

List {
    Section("Heute") {
        ForEach(items) { item in
            NavigationLink {
                DetailView(item: item)
            } label: {
                HStack {
                    Image(systemName: item.icon)
                        .foregroundColor(.accentColor)
                    Text(item.title)
                }
            }
        }
    }
}
.listStyle(.insetGrouped)

Listenstile:

• .plain - Randlose Zeilen
• .insetGrouped - Abgerundete, eingerückte Abschnitte (iOS-Standard)
• .sidebar - Für Navigationsseitenleisten

4. Blatt (Modal)

Inhalte modal darstellen.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Details anzeigen") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            DetailView()
                .presentationDetents([.medium, .large])
        }
    }
}

Blatthöhen:

• .medium - Halber Bildschirm
• .large - Ganzer Bildschirm
• Benutzerdefinierte Höhen möglich

Formularsteuerelemente

1. Schaltfläche

Primäres Aktionssteuerelement.

// Ausgefüllte Schaltfläche (primäre Aktion)
Button("Weiter") {
    // Aktion
}
.buttonStyle(.borderedProminent)

// Gerahmte Schaltfläche (sekundäre Aktion)
Button("Abbrechen") {
    // Aktion
}
.buttonStyle(.bordered)

// Einfache Schaltfläche (tertiäre Aktion)
Button("Mehr erfahren") {
    // Aktion
}
.buttonStyle(.plain)

Schaltflächenhierarchie:

1. Prominent - Primäre Aktion (eine pro Bildschirm)
2. Bordered - Sekundäre Aktionen
3. Plain - Tertiäre Aktionen, Links

Richtlinien:

• Minimale Berührungsfläche: 44x44 Punkte
• Verwenden Sie Verben für Schaltflächenbeschriftungen
• Lassen Sie destruktive Aktionen eine Bestätigung erfordern

2. Textfeld

Texteingabesteuerelement.

@State private var username = ""
@State private var password = ""

VStack(alignment: .leading, spacing: 16) {
    // Standard-Textfeld
    TextField("Benutzername", text: $username)
        .textFieldStyle(.roundedBorder)
        .textContentType(.username)
        .textInputAutocapitalization(.never)
        .autocorrectionDisabled()

    // Sicheres Feld
    SecureField("Passwort", text: $password)
        .textFieldStyle(.roundedBorder)
        .textContentType(.password)
}

Textinhaltsarten:

• .username - Benutzernamenfeld
• .password - Passwortfeld
• .emailAddress - E-Mail-Feld
• .telephoneNumber - Telefonnummer
• .creditCardNumber - Kreditkarte

3. Schalter

Boolesches Steuerelement (Kippschalter).

@State private var isEnabled = false

Toggle("Benachrichtigungen aktivieren", isOn: $isEnabled)
    .toggleStyle(.switch)

Richtlinien:

• Die Beschriftung beschreibt, was der Schalter steuert
• Der Effekt sollte sofort eintreten
• Nur für binäre Entscheidungen verwenden

4. Auswahlsteuerelement

Auswahlsteuerelement.

@State private var selectedSize = "Mittel"
let sizes = ["Klein", "Mittel", "Groß"]

// Menüstil
Picker("Größe", selection: $selectedSize) {
    ForEach(sizes, id: \.self) { size in
        Text(size).tag(size)
    }
}
.pickerStyle(.menu)

// Segmentierter Stil (für 2-5 Optionen)
Picker("Größe", selection: $selectedSize) {
    ForEach(sizes, id: \.self) { size in
        Text(size).tag(size)
    }
}
.pickerStyle(.segmented)

Picker-Stile:

• .menu - Dropdown-Menü (Standard)
• .segmented - Segmentiertes Steuerelement (2-5 Optionen)
• .wheel - Bildlaufrad
• .inline - Inline-Liste (in Formularen)

Karten und Container

Kartenansicht

struct CardView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Titel")
                .font(.headline)

            Text("Beschreibung hier mit einigen Details zum Inhalt.")
                .font(.subheadline)
                .foregroundColor(.secondary)
                .lineLimit(2)

            Spacer()

            Button("Aktion") {
                // Aktion
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        .frame(width: 300, height: 200)
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
    }
}

Typografie

San Francisco-Schriftsystem

Apples Systemschnittstelle, optimiert für optimale Lesbarkeit.

// Dynamic Type-Textstile
Text("Großer Titel").font(.largeTitle)      // 34pt
Text("Titel").font(.title)                 // 28pt
Text("Titel 2").font(.title2)              // 22pt
Text("Titel 3").font(.title3)              // 20pt
Text("Überschrift").font(.headline)           // 17pt halbfett
Text("Fließtext").font(.body)                   // 17pt normal
Text("Hervorhebung").font(.callout)             // 16pt
Text("Unterüberschrift").font(.subheadline)     // 15pt
Text("Fußnote").font(.footnote)           // 13pt
Text("Bildunterschrift").font(.caption)             // 12pt
Text("Bildunterschrift 2").font(.caption2)          // 11pt

Benutzerdefinierte Schriftarten mit Dynamic Type

// Benutzerdefinierte Schrift, die mit Dynamic Type skaliert
Text("Benutzerdefinierter Text")
    .font(.custom("YourFont-Regular", size: 17, relativeTo: .body))

Schriftstärken

Text("Leicht").fontWeight(.light)
Text("Normal").fontWeight(.regular)
Text("Mittel").fontWeight(.medium)
Text("Halbfett").fontWeight(.semibold)
Text("Fett").fontWeight(.bold)
Text("Schwer").fontWeight(.heavy)

Typografie-Richtlinien

Tun:

• ✅ Systemschriftart (San Francisco) für Konsistenz verwenden
• ✅ Dynamic Type für Barrierefreiheit unterstützen
• ✅ Semantische Textstile verwenden (.headline, .body, etc.)
• ✅ Mindestgröße für Fließtext: 17pt
• ✅ Zeilenabstand: 120-145% der Schriftgröße

Nicht tun:

• ❌ Zu viele Schriftgrößen verwenden (bei Systemstilen bleiben)
• ❌ Text kleiner als 11pt machen
• ❌ Großbuchstaben für lange Texte verwenden
• ❌ Dynamic Type deaktivieren

Farben

Semantische Farben

Farben, die sich automatisch an den hellen/dunklen Modus anpassen.

// UI-Elementfarben
Color(.label)                    // Primärtext
Color(.secondaryLabel)           // Sekundärtext
Color(.tertiaryLabel)            // Tertiärtext
Color(.quaternaryLabel)          // Wasserzeichentext

Color(.systemBackground)         // Primärer Hintergrund
Color(.secondarySystemBackground) // Sekundärer Hintergrund
Color(.tertiarySystemBackground)  // Tertiärer Hintergrund

Color(.systemFill)               // Füllfarben
Color(.secondarySystemFill)
Color(.tertiarySystemFill)
Color(.quaternarySystemFill)

Color(.separator)                // Trennlinien
Color(.opaqueSeparator)          // Nicht transparente Trennlinie

Systemfarben

// Standard-Systemfarben (passen sich an den Dunkelmodus an)
Color(.systemRed)
Color(.systemOrange)
Color(.systemYellow)
Color(.systemGreen)
Color(.systemMint)
Color(.systemTeal)
Color(.systemCyan)
Color(.systemBlue)
Color(.systemIndigo)
Color(.systemPurple)
Color(.systemPink)
Color(.systemBrown)
Color(.systemGray)

Benutzerdefinierte Farben mit Dunkelmodus

// Adaptive Farbe definieren
extension Color {
    static let customBackground = Color("CustomBackground")
}

// In Assets.xcassets Farbset erstellen mit:
// - Helle Darstellung: #FFFFFF
// - Dunkle Darstellung: #000000

Farbkontrastrichtlinien

WCAG-AA-Konformität:

• Normaler Text: Mindestkontrastverhältnis 4,5:1
• Großer Text (24pt+): Mindestkontrastverhältnis 3:1
• UI-Komponenten: Kontrastverhältnis 3:1

Benutzerdefinierte Farben:

• Testen Sie mit aktiviertem „Kontrast erhöhen“
• Streben Sie 7:1 für kritischen Text an
• Sorgen Sie für ausreichenden Kontrast in beiden Modi

Abstände und Layout

8-Punkt-Rastersystem

Alle Abstände sollten ein Vielfaches von 8 sein.

// Abstandswerte
.padding(8)      // 8pt
.padding(16)     // 16pt (Standard)
.padding(24)     // 24pt
.padding(32)     // 32pt
.padding(40)     // 40pt
.padding(48)     // 48pt

// Kantenspezifischer Abstand
.padding(.horizontal, 16)
.padding(.vertical, 24)
.padding(.top, 16)
.padding(.bottom, 16)

Safe Areas

Respektieren Sie die sicheren Bereiche des Geräts.

// Inhalt innerhalb des sicheren Bereichs (Standard)
VStack {
    Text("Inhalt")
}

// Über den sicheren Bereich hinaus
VStack {
    Color.blue
}
.ignoresSafeArea()

// Nur oben erweitern
VStack {
    Color.blue
}
.ignoresSafeArea(edges: .top)

Berührungsziele

Minimale interaktive Größe: 44x44 Punkte.

Button("Tippen") {
    // Aktion
}
.frame(minWidth: 44, minHeight: 44)

Abstandsrichtlinien

// Komponentenabstand
VStack(spacing: 8) {       // Enger Abstand
    Text("Zeile 1")
    Text("Zeile 2")
}

VStack(spacing: 16) {      // Standardabstand
    Text("Abschnitt 1")
    Text("Abschnitt 2")
}

VStack(spacing: 24) {      // Großer Abstand
    SectionView()
    SectionView()
}

Barrierefreiheit

VoiceOver-Unterstützung

Bildschirmlesegerät für blinde und sehbehinderte Benutzer.

// Barrierefreies Label
Image(systemName: "heart.fill")
    .accessibilityLabel("Favorit")

// Barrierefreier Wert
Slider(value: $volume)
    .accessibilityLabel("Lautstärke")
    .accessibilityValue("\(Int(volume * 100))%")

// Barrierefreier Hinweis
Button("Teilen") {
    share()
}
.accessibilityHint("Teilt dieses Element mit anderen")

// Elemente gruppieren
HStack {
    Image(systemName: "person")
    Text("Max Mustermann")
}
.accessibilityElement(children: .combine)

// Vor VoiceOver verstecken
Image("decorative")
    .accessibilityHidden(true)

Dynamic Type

Unterstützen Sie die bevorzugte Textgröße des Benutzers.

// Automatisch mit Systemschriftarten unterstützt
Text("Dieser Text skaliert")
    .font(.body)

// Skalierung begrenzen (falls nötig)
Text("Dieser Text hat Grenzen")
    .font(.body)
    .dynamicTypeSize(...DynamicTypeSize.xxxLarge)

// Benutzerdefinierte Schriftart mit Dynamic Type
Text("Benutzerdefinierte Schrift")
    .font(.custom("YourFont", size: 17, relativeTo: .body))

Farbenblindheit

Entwerfen Sie für farbenblinde Benutzer.

// Verlassen Sie sich nicht nur auf Farben
HStack {
    Image(systemName: "checkmark.circle.fill")
        .foregroundColor(.green)
    Text("Erfolg")
}

// Nicht nur Farbe
Circle()
    .fill(.green)
// ❌ Nur Farbe

// Besser mit Form/Symbol
HStack {
    Image(systemName: "checkmark.circle.fill")
    Circle().fill(.green)
}
// ✅ Farbe + Form

Bewegung reduzieren

Respektieren Sie die Bewegungseinstellungen des Benutzers.

@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation {
    reduceMotion ? .none : .spring()
}

Button("Animieren") {
    withAnimation(animation) {
        // Animieren
    }
}

Kontrast erhöhen

Unterstützen Sie den Modus mit hohem Kontrast.*

…