Butoane de acțiune plutitoare: când să utilizați un FAB și cum să îl animați
Când un buton de acțiune plutitor ajută, când doare, un FAB pe ecran, FAB extinse și meniuri FAB, comportamentul de defilare și mișcare.
Core Takeaway
Utilizați un buton de acțiune plutitor pentru cea mai importantă acțiune de pe un ecran, cum ar fi scrierea sau crearea. Afișați doar unul pe ecran, omiteți-l pe ecrane fără o acțiune principală clară, utilizați un FAB extins cu o etichetă atunci când pictograma este neclară și păstrați-i mișcarea intenționată când se extinde, se restrânge la defilare sau deschide un meniu.
Pentru ce este un FAB
Material Design 3 descrie FAB ca fiind acțiunea principală a ecranului și nu recomandă afișarea mai multor FAB pe un singur ecran. De asemenea, observă că FAB-urile nu sunt necesare pe fiecare ecran, de exemplu atunci când imaginile reprezintă deja acțiunile principale.
Variante
Materialul oferă mai multe forme:
- FAB standard: o pictogramă pentru o acțiune binecunoscută, cum ar fi compunerea.
- FAB extins: pictogramă plus etichetă, mai clar pentru acțiuni mai puțin evidente și pe ecrane mai mari.
- FAB mare: pentru acțiuni primare proeminente, potrivite pentru ferestre mai largi, cum ar fi tabletele și pliabilele desfăcute.
- Meniul FAB: FAB deschide un set scurt de acțiuni asociate.
Când să nu folosești unul
Sari peste FAB pentru acțiuni minore sau distructive, pe ecrane în care acțiunea principală este deja evidentă și unde ar acoperi conținut sau comenzi importante. Pe iOS, un FAB nu este un model nativ; butoanele din bara de instrumente sau bara de navigare sunt mai familiare utilizatorilor de iPhone.
Mişcare
Un FAB se prăbușește adesea de la extins la standard pe măsură ce oamenii derulează, apoi se extinde din nou și se poate transforma într-o foaie sau meniu atunci când este atins. Aceste tranziții explică unde a mers acțiunea și de unde a venit conținutul acesteia. Păstrați-le scurte, evitați să sari pe fiecare pergament și respectați mișcarea redusă.
Cheie Principles de reținut
- Un FAB pe ecran, pentru acțiunea principală
- Nu orice ecran are nevoie de unul
- Utilizați un FAB extins atunci când pictograma nu este evidentă
- Evitați FAB-urile pentru acțiuni minore sau distructive
- Folosiți mișcarea pentru a arăta de unde provine conținutul FAB
Întrebări frecvente
Surse
- FAB guidelines — Material Design 3