Flytende handlingsknapper: Når du skal bruke en FAB og hvordan du animerer den
Når en flytende handlingsknapp hjelper, når det gjør vondt, én FAB per skjerm, utvidede FAB-er og FAB-menyer, rulleadferd og bevegelse.
Kjerne takeaway
Bruk en flytende handlingsknapp for den viktigste enkelthandlingen på en skjerm, for eksempel komponer eller opprette. Vis bare én per skjerm, hopp over den på skjermer uten en klar primærhandling, bruk en utvidet FAB med etikett når ikonet alene er uklart, og hold bevegelsen målrettet når den utvides, kollapser ved rulling eller åpner en meny.
Hva en FAB er for noe
Material Design 3 beskriver FAB som skjermens primære handling og fraråder å vise flere FAB-er på én skjerm. Den bemerker også at FAB-er ikke er nødvendig på hver skjerm, for eksempel når bilder allerede representerer de primære handlingene.
Varianter
Materialet tilbyr flere former:
- Standard FAB: et ikon for en velkjent handling som for eksempel å skrive.
- Utvidet FAB: ikon pluss etikett, tydeligere for mindre åpenbare handlinger og på større skjermer.
- Stor FAB: for fremtredende primære handlinger, egnet for bredere vinduer som nettbrett og utfoldede brett.
- FAB-meny: FAB åpner et kort sett med relaterte handlinger.
Når du ikke skal bruke en
Hopp over FAB for mindre eller destruktive handlinger, på skjermer der hovedhandlingen allerede er åpenbar, og hvor den vil dekke viktig innhold eller kontroller. På iOS er en FAB ikke et naturlig mønster; verktøylinje- eller navigasjonslinjeknapper er mer kjent for iPhone-brukere.
Bevegelse
En FAB kollapser ofte fra utvidet til standard når folk ruller, for så å utvide seg igjen, og den kan forvandles til et ark eller en meny når den trykkes. Disse overgangene forklarer hvor handlingen gikk og hvor innholdet kom fra. Hold dem korte, unngå å sprette på hver rull, og respekter redusert bevegelse.
Tast Principles å huske
- Én FAB per skjerm, for den primære handlingen
- Ikke alle skjermer trenger en
- Bruk en utvidet FAB når ikonet ikke er tydelig
- Unngå FAB-er for mindre eller destruktive handlinger
- Bruk bevegelse for å vise hvor FABs innhold kommer fra
Ofte stilte spørsmål
Kilder
- FAB guidelines — Material Design 3