Zum Inhalt springen

Splash Screen

Der Splash Screen ist der erste Eindruck, den Nutzer von deiner App bekommen. Hier konfigurierst du das Aussehen des Startbildschirms.

Der Splash Screen wird angezeigt, während die App lädt. Er besteht aus:

  • Hintergrund - Farbe, Gradient oder Bild
  • Logo/Bild - Dein App-Logo oder ein benutzerdefiniertes Bild
  • Ladeanimation - Optional, zeigt Ladefortschritt
  • App-Name - Optional, Textanzeige
  1. Öffne die Theme Suite
  2. Wähle den Tab “Seiten”
  3. Tippe auf “Splash Screen”

OptionBeschreibung
FarbeEinfarbiger Hintergrund
GradientFarbverlauf
BildVollbild-Hintergrundbild
EinstellungBeschreibung
HintergrundfarbeFarbe des gesamten Hintergrunds
Dark Mode FarbeSeparate Farbe für Dark Mode
EinstellungBeschreibung
StartfarbeErste Farbe des Verlaufs
EndfarbeZweite Farbe des Verlaufs
RichtungHorizontal, Vertikal, Diagonal
Dark Mode VarianteSeparate Farben für Dark Mode
EinstellungBeschreibung
Bild hochladenDein Hintergrundbild
SkalierungCover, Contain, Fill
Dark Mode BildSeparates Bild für Dark Mode

Das zentrale Element deines Splash Screens.

OptionBeschreibung
Aus BrandingVerwendet das App-Logo aus den globalen Einstellungen
Eigenes BildEin separates Splash-spezifisches Bild
Kein LogoNur Hintergrund und optional Ladeanimation
EinstellungBereichBeschreibung
Breite0-500 pxBreite des Logos (0 = automatisch)
Höhe0-500 pxHöhe des Logos (0 = automatisch)
Position-Oben, Mitte, Unten
Versatz Y-200 bis +200 pxVertikaler Versatz zur Position
Transparenz0-100%Deckkraft des Logos

Du kannst bestimmen, wie das Logo auf dem Splash Screen dargestellt wird - besonders nützlich, wenn dein Logo nicht quadratisch ist.

OptionBeschreibung
OriginalBehält das Originalseitenverhältnis des Bildes
QuadratischSchneidet das Bild auf ein Quadrat zu
KreisförmigSchneidet das Bild als Kreis aus

Bei quadratischer oder kreisförmiger Form kannst du festlegen, wie das Bild in den Container passt:

OptionBeschreibung
Einpassen (Contain)Das gesamte Bild ist sichtbar, eventuell mit Rändern
Ausfüllen (Cover)Der Container wird vollständig gefüllt, Teile des Bildes können abgeschnitten werden
Strecken (Fill)Das Bild wird auf die Containergröße gestreckt
EinstellungBereichBeschreibung
Border Radius0-100 pxRundung der Ecken (nur bei Original/Quadratisch)
EinstellungOptionenBeschreibung
AnimationstypFade, Scale, BounceArt der Einblendung
Dauer200-1000 msLänge der Animation
Verzögerung0-500 msWartezeit vor Start

Optional: Eine Animation, die den Ladeprozess visualisiert.

OptionBeschreibung
AktiviertLadeanimation anzeigen
DeaktiviertKeine Ladeanimation
OptionBeschreibung
ZirkulärRotierender Kreis
LinearHorizontaler Balken
PunktePulsierende Punkte
BenutzerdefiniertEigene Animation (Lottie)
EinstellungBereichBeschreibung
Farbe-Farbe der Animation
Größe24-64 pxGröße der Animation
Position-Unter Logo, Unten, Angepasst
Abstand0-100 pxAbstand zur Position

Optional kannst du den App-Namen anzeigen.

OptionBeschreibung
AktiviertApp-Name anzeigen
DeaktiviertKein Text
EinstellungBeschreibung
TextDer anzuzeigende Text
SchriftgrößeGröße des Textes
SchriftfarbeFarbe des Textes
SchriftgewichtLight bis Bold
PositionUnter Logo, Unten
AbstandAbstand zur Position

Steuere, wie lange der Splash Screen angezeigt wird.

EinstellungBereichBeschreibung
Mindestdauer500-5000 msMinimale Anzeigedauer
Lade-Timeout5-30 sMaximale Wartezeit

Wie der Splash Screen zur Haupt-App übergeht.

OptionBeschreibung
FadeSanftes Ausblenden
SlideZur Seite schieben
ScaleHerauszoomen
KeineDirekter Wechsel
EinstellungBereichBeschreibung
Dauer200-800 msLänge des Übergangs
Kurve-Animationskurve

Der Editor bietet eine Live-Vorschau:

  • Zeigt alle Elemente mit aktuellen Einstellungen
  • Vorschau für Light und Dark Mode
  • Animation-Vorschau per Button

AspektEmpfehlung
Dauer1.5-2.5 Sekunden (nicht länger)
Logo-GrößeNicht zu groß (max. 200 px)
AnimationDezent und schnell
HintergrundPassend zu deinem App-Design
  • Zu lange Anzeigedauer
  • Überladene Designs
  • Ablenkende Animationen
  • Schlechter Kontrast

Wenn die App sehr schnell lädt und die Mindestdauer niedrig eingestellt ist, kann der Splash Screen kaum sichtbar sein. Erhöhe testweise die Mindestdauer.

Nein, aktuell werden nur statische Bilder unterstützt. Für animierte Inhalte nutze das Logo mit Animation oder eine Lottie-Animation.

  • Format: PNG oder JPG
  • Auflösung: Mindestens 1080x1920 px (Portrait)
  • Dateigröße: Unter 2 MB für schnelle Ladezeiten
  1. Speichere deine Änderungen
  2. Schließe die App vollständig
  3. Öffne die App neu

Im Simulator/Emulator kannst du auch einen “Cold Start” erzwingen.