Flydende handlingsknapper: Hvornår skal man bruge en FAB, og hvordan man animerer den
Når en svævende handlingsknap hjælper, når det gør ondt, én FAB pr. skærm, udvidede FAB'er og FAB-menuer, rulleadfærd og bevægelse.
Core Takeaway
Brug en flydende handlingsknap til den vigtigste handling på en skærm, såsom komponer eller opret. Vis kun én pr. skærm, spring den over på skærme uden en klar primær handling, brug en udvidet FAB med en etiket, når ikonet alene er uklart, og hold dets bevægelse målrettet, når det udvides, kollapser ved rulning eller åbner en menu.
Hvad en FAB er for noget
Material Design 3 beskriver FAB'en som skærmens primære handling og fraråder visning af flere FAB'er på én skærm. Den bemærker også, at FAB'er ikke er nødvendige på hver skærm, for eksempel når billeder allerede repræsenterer de primære handlinger.
Varianter
Materiale tilbyder flere former:
- Standard FAB: et ikon for en velkendt handling som f.eks.
- Udvidet FAB: ikon plus etiket, tydeligere for mindre tydelige handlinger og på større skærme.
- Stor FAB: til fremtrædende primære handlinger, velegnet til bredere vinduer såsom tablets og udfoldede foldbare.
- FAB menu: FAB åbner et kort sæt relaterede handlinger.
Hvornår skal man ikke bruge en
Spring FAB over for mindre eller destruktive handlinger på skærme, hvor hovedhandlingen allerede er indlysende, og hvor den ville dække vigtigt indhold eller kontroller. På iOS er en FAB ikke et naturligt mønster; værktøjslinje- eller navigationslinjeknapper er mere velkendte for iPhone-brugere.
Bevægelse
En FAB kollapser ofte fra udvidet til standard, når folk ruller, udvides derefter igen, og den kan forvandles til et ark eller en menu, når der trykkes på. Disse overgange forklarer, hvor handlingen gik, og hvor dens indhold kom fra. Hold dem korte, undgå at hoppe på hver rulle, og respekter reduceret bevægelse.
Tast Principles for at huske
- Én FAB pr. skærm til den primære handling
- Ikke alle skærme har brug for en
- Brug en udvidet FAB, når ikonet ikke er tydeligt
- Undgå FAB'er for mindre eller destruktive handlinger
- Brug bevægelse til at vise, hvor FAB'ens indhold kommer fra
Ofte stillede spørgsmål
Kilder
- FAB guidelines — Material Design 3