Tombol Aksi Mengambang: Kapan Menggunakan FAB dan Cara Menganimasikannya
Ketika tombol tindakan mengambang membantu, ketika sakit, satu FAB per layar, menu FAB dan FAB yang diperluas, perilaku gulir dan gerakan.
Pengambilan Inti
Gunakan tombol tindakan mengambang untuk satu tindakan paling penting di layar, seperti menulis atau membuat. Tampilkan hanya satu per layar, lewati di layar tanpa tindakan utama yang jelas, gunakan FAB yang diperluas dengan label ketika ikonnya saja tidak jelas, dan pertahankan gerakannya terarah ketika meluas, menciut saat menggulir, atau membuka menu.
Untuk apa FAB itu
Material Design 3 menjelaskan FAB sebagai tindakan utama layar dan menyarankan agar tidak menampilkan beberapa FAB pada satu layar. Hal ini juga mencatat bahwa FAB tidak diperlukan di setiap layar, misalnya ketika gambar sudah mewakili tindakan utama.
Varian
Materi menawarkan beberapa bentuk:
- FAB Standar: ikon untuk tindakan terkenal seperti menulis.
- FAB yang Diperluas: ikon plus label, lebih jelas untuk tindakan yang kurang jelas dan pada layar yang lebih besar.
- FAB Besar: untuk tindakan utama yang menonjol, cocok untuk jendela yang lebih lebar seperti tablet dan perangkat lipat yang tidak dilipat.
- Menu FAB: FAB membuka serangkaian tindakan terkait singkat.
Kapan tidak menggunakannya
Lewati FAB untuk tindakan kecil atau destruktif, di layar yang tindakan utamanya sudah jelas, dan yang mencakup konten atau kontrol penting. Pada iOS, FAB bukanlah pola asli; tombol toolbar atau bilah navigasi lebih familiar bagi pengguna iPhone.
Gerakan
FAB sering kali menyusut dari diperluas ke standar saat orang menggulir, lalu meluas lagi, dan dapat berubah menjadi lembar atau menu saat diketuk. Transisi ini menjelaskan ke mana arah tindakan tersebut dan dari mana kontennya berasal. Jaga agar tetap pendek, hindari memantul pada setiap gulungan, dan hargai gerakan yang dikurangi.
Kunci Principles untuk Diingat
- Satu FAB per layar, untuk tindakan utama
- Tidak semua layar membutuhkannya
- Gunakan FAB yang diperluas jika ikonnya tidak terlihat jelas
- Hindari FAB untuk tindakan kecil atau merusak
- Gunakan gerakan untuk menunjukkan dari mana konten FAB berasal
Pertanyaan yang Sering Diajukan
Sumber
- FAB guidelines — Material Design 3