Flytande åtgärdsknappar: När ska man använda en FAB och hur man animerar den
När en flytande åtgärdsknapp hjälper, när det gör ont, en FAB per skärm, utökade FABs och FAB-menyer, rullningsbeteende och rörelse.
Core Takeaway
Använd en flytande åtgärdsknapp för den enskilt viktigaste åtgärden på en skärm, till exempel skriv eller skapa. Visa endast en per skärm, hoppa över den på skärmar utan en tydlig primär åtgärd, använd en utökad FAB med en etikett när enbart ikonen är otydlig, och håll dess rörelse målmedveten när den expanderar, kollapsar vid rullning eller öppnar en meny.
Vad en FAB är till för
Material Design 3 beskriver FAB som skärmens primära åtgärd och avråder från att visa flera FABs på en skärm. Den noterar också att FAB inte behövs på varje skärm, till exempel när bilder redan representerar de primära åtgärderna.
Varianter
Materialet erbjuder flera former:
- Standard FAB: en ikon för en välkänd handling som t.ex.
- Utökad FAB: ikon plus etikett, tydligare för mindre uppenbara åtgärder och på större skärmar.
- Stor FAB: för framträdande primära åtgärder, lämpad för bredare fönster som surfplattor och utfällda hopfällbara enheter.
- FAB-meny: FAB öppnar en kort uppsättning relaterade åtgärder.
När man inte ska använda en
Hoppa över FAB för mindre eller destruktiva handlingar, på skärmar där huvudåtgärden redan är uppenbar och där den skulle täcka viktigt innehåll eller kontroller. På iOS är en FAB inte ett inbyggt mönster; knapparna i verktygsfältet eller navigeringsfältet är mer bekanta för iPhone-användare.
Rörelse
En FAB kollapsar ofta från utökad till standard när människor rullar, expanderar sedan igen, och den kan förvandlas till ett ark eller en meny när den trycks. Dessa övergångar förklarar var handlingen tog vägen och var dess innehåll kom ifrån. Håll dem korta, undvik att studsa på varje rullning och respektera reducerad rörelse.
Nyckel Principles att komma ihåg
- En FAB per skärm, för den primära åtgärden
- Inte alla skärmar behöver en
- Använd en utökad FAB när ikonen inte är tydlig
- Undvik FABs för mindre eller destruktiva handlingar
- Använd rörelse för att visa var FAB:s innehåll kommer ifrån
Vanliga frågor
Källor
- FAB guidelines — Material Design 3