Πλωτά κουμπιά δράσης: Πότε να χρησιμοποιήσετε ένα FAB και πώς να το κάνετε κίνηση
Όταν ένα αιωρούμενο κουμπί δράσης βοηθά, όταν πονάει, ένα FAB ανά οθόνη, εκτεταμένα μενού FAB και FAB, συμπεριφορά κύλισης και κίνηση.
Core Takeaway
Χρησιμοποιήστε ένα αιωρούμενο κουμπί δράσης για τη μοναδική πιο σημαντική ενέργεια σε μια οθόνη, όπως τη σύνταξη ή τη δημιουργία. Εμφανίστε μόνο ένα ανά οθόνη, παραλείψτε το σε οθόνες χωρίς σαφή κύρια ενέργεια, χρησιμοποιήστε ένα εκτεταμένο FAB με ετικέτα όταν μόνο το εικονίδιο είναι ασαφές και διατηρήστε την κίνησή του σκόπιμη όταν επεκτείνεται, συμπτύσσεται σε κύλιση ή ανοίγει ένα μενού.
Τι είναι το FAB
Το Material Design 3 περιγράφει το FAB ως την κύρια ενέργεια της οθόνης και συμβουλεύει να μην εμφανίζονται πολλά FAB σε μία οθόνη. Σημειώνει επίσης ότι τα FAB δεν χρειάζονται σε κάθε οθόνη, για παράδειγμα όταν οι εικόνες αντιπροσωπεύουν ήδη τις κύριες ενέργειες.
Παραλλαγές
Το υλικό προσφέρει διάφορες μορφές:
- Τυπικό FAB: ένα εικονίδιο για μια γνωστή ενέργεια όπως η σύνθεση.
- Εκτεταμένο FAB: εικονίδιο συν ετικέτα, πιο καθαρό για λιγότερο εμφανείς ενέργειες και σε μεγαλύτερες οθόνες.
- Μεγάλο FAB: για εμφανείς κύριες ενέργειες, κατάλληλο για ευρύτερα παράθυρα, όπως tablet και ξεδιπλωμένα πτυσσόμενα.
- Μενού FAB: το FAB ανοίγει ένα σύντομο σύνολο σχετικών ενεργειών.
Πότε δεν πρέπει να χρησιμοποιείτε ένα
Παραλείψτε το FAB για μικρές ή καταστροφικές ενέργειες, σε οθόνες όπου η κύρια ενέργεια είναι ήδη εμφανής και όπου θα κάλυπτε σημαντικό περιεχόμενο ή στοιχεία ελέγχου. Στο iOS, ένα FAB δεν είναι εγγενές μοτίβο. Τα κουμπιά της γραμμής εργαλείων ή της γραμμής πλοήγησης είναι πιο γνωστά στους χρήστες iPhone.
Κίνηση
Ένα FAB συχνά συμπτύσσεται από εκτεταμένο σε τυπικό καθώς τα άτομα κάνουν κύλιση, μετά επεκτείνεται ξανά και μπορεί να μετατραπεί σε φύλλο ή μενού όταν πατηθεί. Αυτές οι μεταβάσεις εξηγούν πού πήγε η δράση και από πού προήλθε το περιεχόμενό της. Κρατήστε τα σύντομα, αποφύγετε την αναπήδηση σε κάθε κύλιση και σεβαστείτε τη μειωμένη κίνηση.
Κλειδί Principles για να θυμάστε
- Ένα FAB ανά οθόνη, για την κύρια ενέργεια
- Δεν χρειάζεται κάθε οθόνη
- Χρησιμοποιήστε ένα εκτεταμένο FAB όταν το εικονίδιο δεν είναι εμφανές
- Αποφύγετε τα FAB για μικρές ή καταστροφικές ενέργειες
- Χρησιμοποιήστε την κίνηση για να δείξετε από πού προέρχεται το περιεχόμενο του FAB
Συχνές Ερωτήσεις
Πηγές
- FAB guidelines — Material Design 3