Schwebende Aktionsschaltflächen: Wann man ein FAB verwendet und wie man es animiert
Wenn eine schwebende Aktionstaste hilft, wenn sie wehtut, ein FAB pro Bildschirm, erweiterte FABs und FAB-Menüs, Scrollverhalten und Bewegung.
Kernaussage
Verwenden Sie eine schwebende Aktionsschaltfläche für die wichtigste Einzelaktion auf einem Bildschirm, z. B. Verfassen oder Erstellen. Zeigen Sie nur eines pro Bildschirm an, überspringen Sie es auf Bildschirmen ohne klare primäre Aktion, verwenden Sie ein erweitertes FAB mit einer Beschriftung, wenn das Symbol allein unklar ist, und sorgen Sie für eine zielgerichtete Bewegung, wenn es beim Scrollen erweitert, reduziert oder ein Menü geöffnet wird.
Wozu ein FAB da ist
Material Design 3 beschreibt den FAB als primäre Aktion des Bildschirms und rät davon ab, mehrere FABs auf einem Bildschirm anzuzeigen. Außerdem wird darauf hingewiesen, dass FABs nicht auf jedem Bildschirm erforderlich sind, beispielsweise wenn Bilder bereits die primären Aktionen darstellen.
Varianten
Material bietet verschiedene Formen:
- Standard-FAB: ein Symbol für eine bekannte Aktion wie „Verfassen“.
- Erweitertes FAB: Symbol plus Beschriftung, klarer für weniger offensichtliche Aktionen und auf größeren Bildschirmen.
- Großes FAB: für prominente Hauptaktionen, geeignet für breitere Fenster wie Tablets und aufgeklappte faltbare Geräte.
- FAB-Menü: Das FAB öffnet eine kurze Reihe verwandter Aktionen.
Wann sollte man keinen verwenden?
Überspringen Sie den FAB für kleinere oder destruktive Aktionen auf Bildschirmen, auf denen die Hauptaktion bereits offensichtlich ist und wichtige Inhalte oder Steuerelemente abdecken würde. Auf iOS ist ein FAB kein natives Muster; Symbolleisten- oder Navigationsleistenschaltflächen sind iPhone-Benutzern vertrauter.
Bewegung
Ein FAB wird beim Scrollen häufig von der erweiterten zur Standardansicht verkleinert, dann wieder erweitert und kann sich durch Antippen in ein Arbeitsblatt oder Menü verwandeln. Diese Übergänge erklären, wohin die Aktion ging und woher ihr Inhalt kam. Halten Sie sie kurz, vermeiden Sie es, bei jedem Scrollen zu hüpfen, und respektieren Sie reduzierte Bewegungen.
Wichtige Prinzipien
- Ein FAB pro Bildschirm für die primäre Aktion
- Nicht jeder Bildschirm braucht einen
- Verwenden Sie ein erweitertes FAB, wenn das Symbol nicht offensichtlich ist
- Vermeiden Sie FABs für geringfügige oder destruktive Aktionen
- Verwenden Sie Bewegung, um zu zeigen, woher der Inhalt des FAB kommt
Häufige Fragen
Quellen
- FAB guidelines — Material Design 3