Die App-Leiste und die Kopfzeilenkomponente sind eine spezielle Leiste am oberen Rand der App-Oberfläche, die individuell angepasst werden kann, um wichtige App-bezogene Funktionen anzuzeigen, wie z. B. Branding, die Navigation auf oberster Ebene und den Zugriff auf die App-Steuerelemente.
Verwenden Sie einheitliche App-Leisten- und Kopfzeilenlayouts, um wichtige Steuerelemente wie die In-App-Suche an einer Standardposition in der gesamten Benutzeroberfläche zu platzieren.
Anatomie
Die App-Leiste und der Header können verschiedene Elemente enthalten. Sie können auf eine der folgenden Arten konfiguriert werden:
- App-Kopfzeile: Wenn die Komponente als App-Kopfzeile konfiguriert ist, bietet sie Platz für optionalen Text und verwendet nur wenige Symbole und Schaltflächen. Typischerweise enthält sie einen Bildschirmtitel und einen Zurück-Pfeil.
- App-Leiste: Wenn sie als App-Leiste konfiguriert ist, kann sie Symbole, Registerkarten und Schaltflächen enthalten. Typische Elemente sind ein App-Symbol und Navigationsoptionen.
Beide Versionen können auch App-Steuerelemente wie die In-App-Suche und Einstellungen beinhalten.
1. Zurück-Pfeil
2. Bildschirmtitel
3. Knopf
4. App-Steuerung
5. App-Symbol
6. Primäre Navigation (Registerkarten)
Spezifikationen – App-Leiste
App-Leiste mit primärer Navigation – zentriert
App-Leiste mit primärer Navigation – linksbündig
App-Leiste mit primärer Navigation – zusammengeklappt (Drawer statt Tabs)
Spezifikationen – App-Kopfzeile
App-Überschrift mit zentriertem Titel
App-Kopfzeile mit Einzel-App-Steuerung
App-Kopfzeile mit mehreren App-Steuerelementen
App-Kopfzeile mit einzelner Schaltfläche
App-Kopfzeile mit mehreren Schaltflächen
App-Header mit Textüberlauf
App-Header mit separater Tab-Leiste
Anpassung
Sie können Ihre Marke zum Ausdruck bringen, indem Sie das visuelle Erscheinungsbild der App-Leiste und des Headers anpassen. Mögliche Anpassungen sind beispielsweise:
- Benutzerdefinierte Symbole
- Benutzerdefinierte Schriftarten
- Festlegen des Erscheinungsbilds von aktiven, inaktiven und deaktivierten Schaltflächen
- Einstellen von Tastenabmessungen und -positionen
Beispiele
