Pływające przyciski akcji: kiedy używać FAB i jak go animować
Kiedy pływający przycisk akcji pomaga, kiedy przeszkadza, jeden FAB na ekran, rozszerzone FAB i menu FAB, zachowanie przewijania i ruch.
Rdzeń na wynos
Użyj pływającego przycisku akcji, aby wykonać jedną z najważniejszych czynności na ekranie, np. tworzenie lub tworzenie. Wyświetlaj tylko jeden na ekranie, pomijaj go na ekranach bez wyraźnej akcji głównej, używaj rozszerzonego FAB-a z etykietą, gdy sama ikona jest niejasna, i zachowuj celowy ruch, gdy rozwija się, zwija podczas przewijania lub otwiera menu.
Do czego służy FAB
Material Design 3 opisuje FAB jako główne działanie ekranu i odradza wyświetlanie wielu FAB-ów na jednym ekranie. Zauważa również, że FAB-y nie są potrzebne na każdym ekranie, na przykład gdy obrazy reprezentują już główne działania.
Warianty
Materiał oferuje kilka form:
- Standardowy FAB: ikona dobrze znanej akcji, takiej jak pisanie.
- Rozszerzony FAB: ikona i etykieta, wyraźniejsze w przypadku mniej oczywistych działań i na większych ekranach.
- Duży FAB: do wyróżniających się działań podstawowych, odpowiedni do szerszych okien, takich jak tablety i rozkładane składane urządzenia.
- Menu FAB: FAB otwiera krótki zestaw powiązanych działań.
Kiedy nie używać jednego
Pomiń FAB w przypadku drobnych lub destrukcyjnych działań na ekranach, na których główna akcja jest już oczywista i gdzie obejmowałaby ważną treść lub elementy sterujące. W iOS FAB nie jest wzorcem natywnym; przyciski paska narzędzi lub paska nawigacji są bardziej znane użytkownikom iPhone'a.
Ruch
FAB często zwija się z rozszerzonego do standardowego podczas przewijania, a następnie ponownie się rozwija, a po dotknięciu może przekształcić się w arkusz lub menu. Te przejścia wyjaśniają, dokąd poszła akcja i skąd wzięła się jej treść. Trzymaj je krótkie, unikaj podskakiwania przy każdym zwoju i szanuj ograniczony ruch.
Klucz Principles do zapamiętania
- Jeden FAB na ekran dla głównej akcji
- Nie każdy ekran go potrzebuje
- Użyj rozszerzonego FAB, gdy ikona nie jest oczywista
- Unikaj FAB-ów w przypadku drobnych lub destrukcyjnych działań
- Użyj ruchu, aby pokazać, skąd pochodzi zawartość FAB
Często zadawane pytania
Źródła
- FAB guidelines — Material Design 3