Informationen zu den Compose-Layoutvorlagen und Beispieldesignlayouts, um individuelle App-Bildschirme zu entwerfen und zu erstellen.
Die meisten Apps verwenden entweder ein nicht scrollbares oder ein scrollbares Layout, das aus den folgenden Elementen besteht:
- Zeitanzeige:Da es sich bei dem Gerät um eine Smartwatch handelt, empfehlen wir, die Zeitanzeige auch während einer App-Navigation anzuzeigen (optional, aber empfohlen).
- Seitentitel:Orientierung und Erinnerungen daran, wo sich der Nutzer gerade befindet (optional, aber empfohlen).
- Scrollanzeige:Nur bei Scroll-Layouts; gibt an, dass sich unterhalb des sichtbaren Bereichs noch mehr Inhalte befinden.
- Aktionsschaltflächen: Empfohlen am unteren Bildschirmrand; bestätigen, abschließen oder den Nutzerfluss fortsetzen.
Abschnitte für App-Layouts
Oberer Bereich
Der obere Bereich enthält die Option „Uhrzeittext“, eine kompakte Schaltfläche und einen Titel, die als Wegweiser und für eine klare Navigation dienen. Alle sind optional.
Eine kompakte Schaltfläche kann in Sonderfällen verwendet werden, in denen die Seite sehr lang ist. Eine Such- oder Aktionsschaltfläche hilft den Nutzern, sich durch die Liste zu bewegen, ohne ganz nach unten scrollen zu müssen.
Mittlerer Abschnitt
Der mittlere Bereich kann eine Liste mit beliebigen verfügbaren Compose-Komponenten (nicht im Vollbildmodus) oder benutzerdefinierten Komponenten enthalten. Dieser Bereich kann zusätzliche Überschriften zum Gruppieren von Inhalten und die Bildlaufleiste enthalten.
Alle Komponenten im mittleren Inhaltsbereich sollten responsiv sein und die verfügbare Breite bis zu den prozentualen Rändern ausfüllen. Bei allen Scroll-Layouts wird das Verhalten der Lazy-Skalierungsspalte verwendet, bei dem die Komponenten skaliert und ausgeblendet werden.
Unterer Bereich
Der untere Bereich bietet Platz für primäre und sekundäre Schaltflächen für Aktionen. Er kann auch leer bleiben, wenn dies das Ende eines Navigationspfads ist.
Wir empfehlen, eine am Rand anliegende Schaltfläche am Ende der Liste zu verwenden, da sie den begrenzten Platz optimal nutzt und das runde Display ergänzt.
Es kann mehr als eine Aktion erforderlich sein, die in einem Schaltflächen-Stack oder einer Schaltflächengruppe mit zwei Symbolen angezeigt werden kann.
App-Aufrufe ohne Scrollen
Mit Titel
Ohne Titel
Mit Titel und ohne unteren Abschnitt
Ohne Titel oder unteren Abschnitt
App-Ansichten scrollen
Mit Titel
Ohne Titel
Mit Titel und ohne unteren Abschnitt
Ohne Titel oder unteren Abschnitt