Dokumentation

Design

Theme, Farben, Darkmode, Splashscreen und Komponenten-Styles einer App.

Im Manager

Das App-Design wird unter Apps > App bearbeiten > Theme gepflegt. Dort werden App-Icon, Splashscreen, Farben, Darkmode, Fonts und Komponenten-Styles definiert.

Die Theme-Daten werden beim App-Start geladen und global verwendet. Dadurch wirken Änderungen am Theme auf Standard-Screens, eigene Builder-Screens und viele wiederverwendbare Komponenten.

Farben und Darkmode

Im Theme werden zentrale Farben wie Hintergrund, Text, Primärfarbe, Sekundärfarbe und Statusfarben gepflegt. Diese Farben werden von Buttons, Karten, Texten, Formularen und anderen Standardkomponenten verwendet.

Wenn Darkmode aktiviert ist, sollte das Design immer auf hellen und dunklen Hintergründen geprüft werden. Wichtig sind insbesondere Lesbarkeit, Kontrast, Button-Zustände und Formularelemente.

Komponenten-Styles

Viele App-Komponenten können über Komponenten-Styles angepasst werden. Dazu gehören unter anderem Buttons, Karten, Card-Header, Card-Body, Card-Footer, Texte, Eingabefelder, Listen, Links, Modals, Switches, Segmented Controls und globale Styles.

Diese Einstellungen sind sinnvoll, wenn eine App markenspezifisch aussehen soll, ohne eigene Standardfunktionen neu zu bauen. Eigene Builder-Screens verwenden ebenfalls diese Theme-Grundlagen, sofern ihre Elemente keine eigenen Styles überschreiben.

Prüfung

Nach Designänderungen sollten App-Start, Splashscreen, Login, Navigation, Shop, Checkout, Account-Bereich und eigene Screens auf einem echten Gerät geprüft werden. Zusätzlich sollten lange Texte, Buttons, Fehlerzustände und leere Zustände kontrolliert werden, weil diese Bereiche häufig erst im echten Layout auffallen.