Panel navigasi adalah komponen penting dalam setiap aplikasi TV karena memungkinkan pengguna mengakses tujuan dan fitur yang berbeda. Panel navigasi adalah tulang belakang arsitektur informasi aplikasi, yang menyediakan cara yang jelas dan intuitif untuk menavigasi aplikasi.
Berbeda dengan panel navigasi seluler, panel navigasi di TV memiliki status diperluas dan diciutkan yang terlihat oleh pengguna.
Referensi
| Jenis | Link | Status |
|---|---|---|
| Desain | Sumber desain (Figma) | Tersedia |
| Penerapan |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Tersedia |
Sorotan
- Tujuan diurutkan menurut kepentingan pengguna, dengan tujuan yang sering dikelompokkan terlebih dahulu dan tujuan terkait yang dikelompokkan bersama.
- Kolom samping navigasi diperlukan untuk panel navigasi standar dan modal saat diciutkan.
Varian
Ada dua jenis gaya panel navigasi:
- Panel navigasi standar — Diluaskan untuk membuat ruang tambahan bagi navigasi, yang mendorong konten halaman ke samping.
- Panel navigasi modal — Muncul sebagai overlay di atas konten aplikasi dengan scrim yang membantu meningkatkan keterbacaan saat panel samping diperluas.
Panel navigasi standar
Anatomi
- Bagian atas: Menampilkan logo aplikasi. Berfungsi sebagai tombol untuk beralih profil atau memicu tindakan penelusuran. Dalam status diciutkan, hanya ikon yang tetap terlihat di penampung atas.
- Item navigasi: Setiap item di kolom samping navigasi menampilkan kombinasi ikon dan teks, dengan hanya ikon yang terlihat dalam status diciutkan.
- Kolom samping navigasi: Kolom Samping Navigasi adalah kolom yang menampilkan 3 hingga 7 tujuan aplikasi, yang bertindak sebagai menu utama. Setiap tujuan memiliki label teks dan ikon opsional, dengan opsi pengelompokan item menu untuk kontekstualitas yang lebih baik.
- Bagian bawah: Dapat memiliki satu hingga tiga tombol tindakan, yang ideal untuk halaman seperti setelan, bantuan, atau profil.
Perilaku
- Perluasan panel navigasi: Saat diluaskan, panel navigasi standar akan mendorong konten halaman untuk menyediakan ruang bagi versi yang diperluas bagi navigasi.
- Pembaruan navigasi: Pindah dari satu item navigasi ke item navigasi lainnya, halaman akan otomatis diperbarui ke tujuan baru.
Panel navigasi modal
Anatomi
- Bagian atas: Menampilkan logo aplikasi. Berfungsi sebagai tombol untuk beralih profil atau memicu tindakan penelusuran. Dalam status yang diciutkan, hanya ikon yang tetap terlihat di penampung atas.
- Item navigasi: Setiap item di kolom samping navigasi menampilkan kombinasi ikon dan teks, dengan hanya ikon yang terlihat dalam status yang diciutkan.
- Kolom samping navigasi: Kolom yang menampilkan tiga hingga tujuh tujuan aplikasi, yang bertindak sebagai menu utama. Setiap tujuan memiliki label teks dan ikon opsional, dengan opsi pengelompokan item menu untuk konteks yang lebih baik.
- Scrim: Agar teks item navigasi lebih mudah dibaca.
- Bagian bawah: Dapat memiliki satu hingga tiga tombol tindakan, yang ideal untuk halaman seperti setelan, bantuan, atau profil.
Perilaku
- Perluasan panel samping: Muncul sebagai overlay di atas konten aplikasi, dengan scrim yang meningkatkan keterbacaan saat panel samping diperluas.
- Update navigasi: Terjadi saat pengguna memilih item navigasi.
Scrim
Untuk panel navigasi modal, scrim di belakang panel samping memastikan konten panel samping dapat dibaca. Anda dapat menggunakan gradien atau permukaan solid di belakang panel navigasi untuk membuat berbagai variasi UI.
Scrim gradien
Scrim padat
Spesifikasi
Penggunaan
Indikator Aktif
Indikator aktif adalah isyarat visual yang menyoroti tujuan panel navigasi yang ditampilkan. Indikator biasanya diwakili oleh bentuk latar belakang yang secara visual berbeda dari item lain di panel samping. Indikator aktif membantu pengguna memahami di mana mereka berada di aplikasi dan tujuan mana yang mereka jelajahi. Pastikan indikator aktif terlihat jelas dan lebih mudah dibedakan dari item lain di panel navigasi.
Pembagi (opsional)
Pemisah dapat digunakan untuk memisahkan grup tujuan dalam panel navigasi untuk pengaturan yang lebih baik. Namun, Anda perlu menggunakannya seperlunya karena terlalu banyak pemisah dapat menimbulkan derau visual dan menambah beban kognitif yang tidak perlu bagi pengguna.
Badge
Badge adalah isyarat visual yang dapat ditambahkan ke item navigasi untuk memberikan informasi tambahan. Misalnya, badge dapat digunakan untuk menunjukkan jumlah film baru yang tersedia di aplikasi streaming. Gunakan badge seperlunya dan hanya jika diperlukan, karena badge dapat membuat UI tampak sibuk dan berantakan. Saat menggunakan badge, pastikan badge terlihat jelas dan lebih mudah dipahami, serta tidak mengganggu kemampuan pengguna untuk membuka aplikasi.
Badge diluaskan
Badge diciutkan
Label
Label di panel navigasi harus jelas dan ringkas sehingga lebih mudah dibaca.
Perhatian
Larangan
Larangan
Larangan
Panel navigasi adalah elemen dasar yang mewakili hierarki aplikasi dan harus digunakan untuk mencantumkan hanya lima hingga enam tujuan navigasi utama.
Anjuran
