Pulsanti di azione mobili: quando utilizzare un FAB e come animarlo
Quando un pulsante di azione mobile aiuta, quando fa male, un FAB per schermo, FAB estesi e menu FAB, comportamento di scorrimento e movimento.
Punto chiave
Utilizza un pulsante di azione mobile per la singola azione più importante su una schermata, ad esempio comporre o creare. Mostrane solo uno per schermata, saltalo sulle schermate senza un'azione primaria chiara, usa un FAB esteso con un'etichetta quando l'icona da sola non è chiara e mantieni il suo movimento mirato quando si espande, si comprime durante lo scorrimento o apre un menu.
A cosa serve un FAB
Material Design 3 descrive il FAB come l'azione principale dello schermo e sconsiglia di visualizzare più FAB su uno schermo. Si rileva inoltre che i FAB non sono necessari su ogni schermo, ad esempio quando le immagini rappresentano già le azioni primarie.
Varianti
Il materiale offre diverse forme:
- FAB standard: un'icona per un'azione nota come la composizione.
- FAB esteso: icona più etichetta, più chiara per azioni meno ovvie e su schermi più grandi.
- FAB grande: per azioni primarie prominenti, adatto a finestre più ampie come tablet e pieghevoli aperti.
- Menu FAB: il FAB apre una breve serie di azioni correlate.
Quando non usarne uno
Salta il FAB per azioni minori o distruttive, su schermate in cui l'azione principale è già ovvia e dove coprirebbe contenuti o controlli importanti. Su iOS, un FAB non è un modello nativo; i pulsanti della barra degli strumenti o della barra di navigazione sono più familiari agli utenti iPhone.
Movimento
Un FAB spesso collassa da esteso a standard mentre le persone scorrono, quindi si espande nuovamente e può trasformarsi in un foglio o un menu quando viene toccato. Queste transizioni spiegano dove è andata a finire l'azione e da dove proviene il suo contenuto. Mantienili corti, evita di rimbalzare su ogni scorrimento e rispetta il movimento ridotto.
Principi chiave da ricordare
- Un FAB per schermo, per l'azione principale
- Non tutti gli schermi ne hanno bisogno
- Utilizzare un FAB esteso quando l'icona non è evidente
- Evita i FAB per azioni minori o distruttive
- Usa il movimento per mostrare da dove proviene il contenuto del FAB
Domande frequenti
Fonti
- FAB guidelines — Material Design 3