Bilah Tab dan Navigasi Bawah: Aturan Desain yang Tahan Lama
Cara mendesain bilah tab dan navigasi bawah di iOS dan Android: 3 hingga 5 tujuan, navigasi bukan tindakan, label, lencana, visibilitas, dan status aktif animasi.
Pengambilan Inti
Gunakan bilah tab atau navigasi bawah untuk tiga hingga lima tujuan tingkat atas, bukan untuk tindakan. Berikan ikon dan label pada setiap tab, jaga agar bilah tetap terlihat saat orang berpindah antar bagian, hindari melimpahkan tab "Lainnya" jika Anda bisa, dan gunakan lencana sesedikit mungkin. Menganimasikan status aktif secara halus sehingga orang dapat melihat di mana mereka berada.
Apa yang dikatakan platform tersebut
Material Design 3 mengatakan bilah navigasi menyediakan akses ke tiga hingga lima tujuan, masing-masing dengan ikon dan label, dan satu tujuan selalu aktif. Pedoman Apple mengatakan untuk menggunakan bilah tab untuk navigasi, bukan untuk memberikan tindakan, agar tetap terlihat saat orang berpindah antar bagian (kecuali jika modal menutupinya), dan untuk menghindari tab yang meluap.
Memilih tab
Tab mewakili struktur aplikasi:
- Pilih bagian yang paling sering digunakan orang, bukan setiap bagian yang Anda miliki.
- Gunakan kata benda untuk tujuan (“Perpustakaan”), bukan kata kerja untuk tindakan (“Unggah”).
- Letakkan tindakan di layar itu sendiri, di toolbar, atau tombol tindakan mengambang.
- Jika Anda memerlukan lebih dari lima, pertimbangkan kembali struktur Anda sebelum menambahkan tab "Lainnya".
Label dan lencana
Tab yang hanya berisi ikon menghemat ruang tetapi memaksa orang untuk menebak. Label membuat navigasi lebih jelas, terutama untuk ikon yang kurang umum. Lencana harus menandakan sesuatu yang perlu ditindaklanjuti oleh orang-orang; lencana yang selalu ada tidak lagi diperhatikan.
Pertahankan status per tab
Apple mencatat bahwa bilah tab memungkinkan orang berpindah bagian sambil mempertahankan status navigasi saat ini dalam setiap bagian. Kembali ke tab akan menunjukkan di mana mereka tinggalkan, bukan mengatur ulang ke atas.
Gerakan
Transisi kecil pada indikator aktif, seperti pil yang dapat digeser atau ikon yang terisi, membantu orang melacak keberadaan mereka. Pertahankan kecepatannya, kurang dari 250 milidetik, hindari memantulkan setiap ikon pada setiap ketukan, dan sederhanakan saat pengurangan gerakan aktif.
Kunci Principles untuk Diingat
- Tiga hingga lima destinasi tingkat atas
- Navigasi, bukan tindakan
- Ikon plus label untuk setiap tab
- Jaga agar tetap terlihat dan pertahankan status setiap tab
- Gerakan keadaan aktif yang halus dan cepat
Pertanyaan yang Sering Diajukan
Sumber
- Navigation bar guidelines — Material Design 3
- Tab bars — Pedoman Antarmuka Manusia Apple