Zwevende actieknoppen: wanneer moet u een FAB gebruiken en hoe kunt u deze animeren?
Als een zwevende actieknop helpt, als het pijn doet, één FAB per scherm, uitgebreide FAB's en FAB-menu's, scrollgedrag en beweging.
Kern afhaalmaaltijd
Gebruik een zwevende actieknop voor de belangrijkste actie op een scherm, zoals opstellen of maken. Toon er slechts één per scherm, sla deze over op schermen zonder een duidelijke primaire actie, gebruik een uitgebreide FAB met een label als alleen het pictogram onduidelijk is, en houd de beweging doelgericht wanneer deze uitvouwt, inklapt bij scrollen of een menu opent.
Waar een FAB voor is
Material Design 3 beschrijft de FAB als de primaire actie van het scherm en raadt af om meerdere FAB's op één scherm weer te geven. Het merkt ook op dat FAB's niet op elk scherm nodig zijn, bijvoorbeeld wanneer afbeeldingen al de primaire acties vertegenwoordigen.
Varianten
Materiaal biedt verschillende vormen:
- Standaard FAB: een icoon voor een bekende actie zoals componeren.
- Uitgebreide FAB: icoon plus label, duidelijker voor minder voor de hand liggende acties en op grotere schermen.
- Grote FAB: voor prominente primaire acties, geschikt voor bredere vensters zoals tablets en ongevouwen foldables.
- FAB-menu: de FAB opent een korte reeks gerelateerde acties.
Wanneer je er geen moet gebruiken
Sla de FAB over voor kleine of destructieve acties, op schermen waar de hoofdactie al duidelijk is en waar deze belangrijke inhoud of bedieningselementen zou omvatten. Op iOS is een FAB geen native patroon; werkbalk- of navigatiebalkknoppen zijn meer bekend bij iPhone-gebruikers.
Beweging
Een FAB klapt vaak in van uitgebreid naar standaard terwijl mensen scrollen, en vouwt vervolgens weer uit, en kan veranderen in een blad of menu wanneer erop wordt getikt. Deze overgangen leggen uit waar de actie naartoe ging en waar de inhoud vandaan kwam. Houd ze kort, voorkom stuiteren bij elke scroll en respecteer verminderde beweging.
Toets Principles in om te onthouden
- Eén FAB per scherm, voor de primaire actie
- Niet elk scherm heeft er één nodig
- Gebruik een uitgebreide FAB als het pictogram niet duidelijk is
- Vermijd FAB's voor kleine of destructieve acties
- Gebruik beweging om te laten zien waar de inhoud van de FAB vandaan komt
Veelgestelde vragen
Bronnen
- FAB guidelines — Material Design 3