Mobile Design — Vollständige Fähigkeit

Übersicht

Behandelt iOS- und Android-Design: plattformspezifische Muster, Navigation, Gesten, Typografie, Barrierefreiheit und moderne Trends. Vereint building-native-ui, expo-ui-swiftui, expo-ui-jetpack-compose, engineering-mobile-app-builder, react-native-best-practices, expo-tailwind-setup und native-data-fetching.

1. Plattformrichtlinien

1.1 iOS (Human Interface Guidelines)

Navigation: Push/Pop (UINavigationController), Tab-Leiste, modale Blätter
Typografie: SF Pro (San Francisco) — New York (Serif) zum Lesen
Raster: 4pt-Raster, Ränder: 16pt (Standard), 20pt (groß)
Farben: Systemfarben (blau, grün, rot, orange, lila, pink, blaugrün, indigoblau, grau)
Touch-Ziele: mindestens 44×44pt
Zurück-Geste: Wischen von der linken Kante
Safe Areas: Notch, Home-Indikator (safe-area-inset verwenden)
Dark Mode: UIColor { traitCollection } Systemanpassung

1.2 Android (Material Design 3)

Navigation: untere Navigation, Navigationsleiste, obere App-Leiste, Zurück-Button
Typografie: Roboto (System), Google Sans (Branding)
Raster: 4dp-Raster, Ränder: 16dp
Farben: dynamische Farbe (Material You), tonale Paletten
Touch-Ziele: mindestens 48×48dp
Zurück-Button: System-Zurück (predictive back in Android 14)
Erhebung (Elevation): Schatten repräsentieren Tiefe und Interaktionspriorität
Welleneffekt (Ripple): Touch-Feedback auf allen interaktiven Elementen

1.3 Plattformübergreifend (React Native / Expo)

Probieren Sie zuerst Expo Go für schnelles Prototyping
Verwenden Sie useWindowDimensions() anstelle von Dimensions.get()
boxShadow für plattformübergreifende Schatten (nicht das alte shadow/elevation)
expo-image für besseres Bildladen und SF Symbole
Plattformspezifischer Code: .ios.tsx / .android.tsx

2. Mobile Navigation

2.1 Navigationsmuster

Muster	Wann verwenden	Plattform
Tab-Leiste	3-5 Hauptziele	iOS (unten), Android (unten)
Untere Navigation	3-5 Hauptziele	Material Design
Navigationsleiste	Viele Ziele, seltener Zugriff	Android
Stack-Navigation	Hierarchisches Drill-Down	Beide
Modale Blätter	Fokussierte Aufgaben, schnelle Aktionen	iOS (Formblatt), Android (Bottom Sheet)
Vollbild-Modal	Mehrschrittige Abläufe	Beide
Wischaktionen	Listenelement-Aktionen (löschen, archivieren)	Beide

2.2 Tab-Leiste Regeln

Maximal 5 Tabs (iOS), maximal 5 (Material)
Aktiver Zustand: ausgefülltes Symbol + Farbänderung des Labels
Badge: roter Punkt mit Anzahl für Benachrichtigungen
Safe Area: oberhalb des Home-Indikators auf iOS

2.3 Stack-Navigation

Push: von rechts hereinschieben (iOS), überblenden+schieben (Android)
Pop: von linker Kante wischen (iOS), Zurück-Button (Android)
Übergang: 300ms (iOS), 200-300ms (Android)

2.4 Gesten

Wischen: Listenaktionen, Navigation zwischen Bildschirmen
Zum Aktualisieren ziehen: Standardmuster für Listen
Langes Drücken: Kontextmenü (300-500ms Verzögerung)
Zum Zoomen zusammenziehen: Bilder, Karten
Doppeltippen: Zoomen, Liken (soziale Apps)

3. Mobile Typografie

3.1 Schriftgrößen-Skala

Stil	Größe	Gewicht	Zeilenhöhe
Großer Titel	34pt	700	41pt
Titel 1	28pt	700	34pt
Titel 2	22pt	700	28pt
Titel 3	20pt	600	25pt
Überschrift	17pt	600	22pt
Fließtext	17pt	400	22pt
Hervorhebung	16pt	400	21pt
Unterüberschrift	15pt	400	20pt
Fußnote	13pt	400	18pt
Bildunterschrift 1	12pt	400	16pt
Bildunterschrift 2	11pt	400	13pt

3.2 Regeln

Mindestschriftgröße: 12sp (Android), 11pt (iOS)
Fließtext: 16-17pt für komfortables Lesen
Zeilenhöhe: 1,3-1,5× Schriftgröße
Nie abschneiden: Kritischer Text (Zahlen, Namen, Daten)
Zeilenlänge: maximal 40-70 Zeichen
Dynamischer Typ: Systemschriftgröße unterstützen (iOS: UIFontMetrics, Android: sp)

4. Mobile Komponenten

4.1 Häufige Komponenten

Komponente	iOS	Android (Material)
Button	UIButton (gefüllt, getönt, grau)	Erhöht, gefüllt, tonal, umrandet, Text
Liste	UITableView (gruppiert, eingesetzt)	RecyclerView (Liste, Karte)
Eingabe	UITextField	TextField (gefüllt, umrandet)
Schalter	UISwitch	Switch
Schieberegler	UISlider	Slider
Auswahl	Radauswahl / Dropdown	Dropdown-Menü
Tab-Leiste	UITabBar	BottomNavigationView
Suche	UISearchBar	SearchBar
Toast	N/A (benutzerdefiniert verwenden)	Snackbar

4.2 Listenmuster

Standard: Symbol + Titel + Untertitel + Chevron
Aktion: nach links wischen → löschen/archivieren/teilen
Gruppiert: Abschnittsüberschriften mit gruppierten Elementen
Karte: Bild + Titel + Beschreibung + Aktionen
Unendliches Scrollen: Mehr laden beim Scrollen (mit Ladeindikator)

4.3 Formularmuster

Einspaltig immer (mobil)
Labels: oberhalb der Eingaben (nicht nur schwebend)
Tastaturtyp: passend zur Eingabe (numerisch, E-Mail, Telefon)
Tastaturvermeidung: Formular scrollen, wenn Tastatur erscheint
Validierung: inline unterhalb des Feldes, Farbänderung
Absenden: fixierter unterer Button oder Formularaktion

5. Mobiles Layout

5.1 Safe Areas

// Expo / React Native
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();
<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }} />

5.2 Bildschirmdichte

iPhone SE: 375×667pt (kleinste)
iPhone 14: 390×844pt
iPhone 14 Pro Max: 430×932pt
Android: 360×640dp (üblich), variiert stark

5.3 Touch-Ziele

Minimum: 44×44pt (iOS), 48×48dp (Android)
Bevorzugt: 48×48pt für daumenfreundliche Zonen
Abstand: mindestens 8pt zwischen benachbarten Touch-Zielen

5.4 Daumenzonen

Beste Zone: untere Bildschirmhälfte (natürliche Daumenreichweite)
Primäre Aktionen: unteres 1/3 (besonders auf großen Telefonen)
Destruktive Aktionen: weg von der primären Zone

6. Mobiles Designsystem

6.1 Farbsystem

/* Heller Modus */
--primary: #007AFF;        /* iOS Blau / Android Blau */
--background: #FFFFFF;
--surface: #F2F2F7;
--text-primary: #000000;
--text-secondary: #8E8E93;
--separator: #C6C6C8;
--success: #34C759;
--error: #FF3B30;
--warning: #FF9500;

/* Dunkler Modus */
--primary: #0A84FF;
--background: #000000;
--surface: #1C1C1E;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;

6.2 Dunkler Modus

Systemweiter Umschalter (folgt OS-Einstellung)
Reines Schwarz (#000) für OLED (iOS) oder Dunkelgrau (#121212) für Android
Kontrast im dunklen Modus leicht reduzieren
Beide Modi für jeden Bildschirm testen

6.3 Ikonografie

iOS: SF Symbole (System), benutzerdefinierte Symbole (app-spezifisch)
Android: Material Icons (System), benutzerdefiniert
Größe: 24×24dp Standard, 18×18dp klein, 28×28dp groß
Stil: gefüllt (aktiv), umrandet (inaktiv)

7. Bewegung & Animation

7.1 Prinzipien

Dauer: 250-350ms (Standard), 150-200ms (schnell), 500ms+ (komplex)
Beschleunigung: cubic-bezier(0.2, 0, 0, 1) (Material), ease-out (iOS)
Zweck: Navigation anzeigen, Aktion bestätigen, Laden zeigen, erfreuen

7.2 Häufige Muster

Animation	Dauer	Verwendung
Seite push/pop	300ms	Stack-Navigation
Modal präsentieren/verwerfen	300ms	Modale Blätter
Einblenden	200ms	Inhalt laden
Hochschieben	250ms	Unteres Blatt
Hochskalieren	200ms	Button-Druck-Feedback
Skelett	1,5s Schleife	Inhalt laden
Zum Aktualisieren ziehen	200ms	Liste aktualisieren

7.3 Plattformspezifisch

iOS: Feder-Physik (natürlich, federnd)
Android: Standard-Beschleunigung (vorhersehbar, glatt)
Haptik: leichter Impuls (Tastendruck), mittel (Auswahl), Erfolgs-/Fehlermuster

8. Mobile UX-Muster

8.1 Onboarding

Maximal 3-5 Bildschirme: Wertversprechen → Funktionen → Berechtigungen → Handlungsaufforderung
Überspringen-Option: immer verfügbar
Fortschrittsanzeige: Punkte oder Fortschrittsbalken
Berechtigungsanfragen: VOR der Anfrage erklären, WARUM

8.2 Leere Zustände

Illustration oder Symbol
Klare Nachricht
Schaltfläche mit Handlungsaufforderung
Beispiele: "Keine Ergebnisse", "Ihr Warenkorb ist leer", "Keine Benachrichtigungen"

8.3 Ladezustände

Skelettbildschirme (bevorzugt gegenüber Drehspulen)
Fortschrittsbalken für messbare Vorgänge
Zum Aktualisieren ziehen für Listen
Optimistische Benutzeroberfläche für Aktionen (sofort aktualisieren, bei Fehler rückgängig machen)

8.4 Fehlerzustände

Inline: Feld-level Validierungsfehler
Vollbild: Kritische Fehler mit Wiederholen-Button
Toast/Snackbar: Vorübergehende Fehler (3-5 Sekunden)
Offline: zwischengespeicherter Inhalt + Banner "Sie sind offline"

8.5 Benachrichtigungen

Push: Berechtigungsanfrage mit Erklärung
In-App: Badge, Banner oder Posteingang
Einstellungen: granulare Steuerung (pro Kategorie)

9. Barrierefreiheit

9.1 Checkliste

9.2 Bildschirmleser

iOS VoiceOver: accessibilityLabel, accessibilityHint, accessibilityTraits
Android TalkBack: contentDescription, accessibilityRole
Test: Bildschirmleser aktivieren und vollständige App navigieren

10. Leistung

10.1 Wichtige Kennzahlen

TTI (Time to Interactive): < 2s
Bildrate: 60 FPS (16,67ms pro Frame)
App-Größe: Bundle minimieren
Speicher: keine Speicherlecks, ordnungsgemäße Bereinigung

10.2 Optimierung

FlatList verwenden (nicht ScrollView) für lange Listen
Teure Komponenten memoieren (React.memo, useMemo, useCallback)
Bildschirme und Bilder lazy laden
Neuberechnungen reduzieren (korrekte Key-Props, anonyme Funktionen in Props vermeiden)
Bild-Caching und Komprimierung
Hermes Engine für React Native

11. Expo Native UI-Komponenten

11.1 Expo UI — SwiftUI (iOS)

npx expo install @expo/ui

import { Host, SwiftUIButton } from '@expo/ui/swift-ui';

export default function Screen() {
  return (
    <Host>                                 {/* Jeder SwiftUI-Baum benötigt Host */}
      <SwiftUIButton title="Drück mich" action={onPress} />
    </Host>
  );
}

⚠️ Jeder SwiftUI-Baum muss in Host eingeschlossen werden — sonst wird nichts gerendert
React Native Komponenten innerhalb eines SwiftUI-Baums mit RNHostView einbetten
Lesen Sie die .d.ts des Pakets und die Komponentendokumentation vor der Verwendung — Modifikatoren ändern sich zwischen SDK-Versionen

11.2 Expo UI — Jetpack Compose (Android)

import { Host, Button } from '@expo/ui/jetpack-compose';
import { composeModifiers } from '@expo/ui/jetpack-compose/modifiers';

<Host>
  <Button title="Drück mich" modifiers={[composeModifiers.padding(16)]} onPress={onPress} />
</Host>

⚠️ Jeden Compose-Baum in Host einschließen (gleiche Regel wie bei SwiftUI)
Lange Listen → LazyColumn; Symbole → Icon mit lokalen XML-Dateien
Lesen Sie die .d.ts der Komponente, bevor Sie Modifikatoren verwenden — API ist SDK-Version-spezifisch

11.3 NativeWind v5 + Tailwind v4 (plattformübergreifendes Styling)

npm i nativewind react-native-css tailwindcss @tailwindcss/postcss

// src/tw/index.tsx — eingeschlossene Komponenten mit className-Unterstützung
import { styled } from 'nativewind';
export const View = styled(NativeView);

Keine babel.config.js Änderungen erforderlich — react-native-css führt die Transformation zur Laufzeit durch
Ausgabe befindet sich in src/tw/ (eingeschlossene View, Text, Image, animated)
Überall className verwenden; für Einzelfälle auf style zurückfallen
Web-Ziel: gleiches className funktioniert mit React Native Web — eine Codebasis, drei Plattformen

11.4 Wann welche verwenden

Bedarf	Verwenden
Natives Aussehen (SwiftUI/Compose)	`@expo/ui` mit `Host`
Plattformübergreifend + schnelle Iteration	NativeWind v5
Benutzerdefinierte Zeichnungen / Animationen	Reanimated + Skia
Standard-RN-Komponenten	Eingebaute `View`/`Text`/`Pressable`

In Ihrer bevorzugten KI fragen

Dokumentation