Tata letak dan pola navigasi

Jika aplikasi Anda berisi beberapa tujuan yang dapat dijelajahi pengguna, sebaiknya gunakan pasangan tata letak dan navigasi yang umum digunakan oleh aplikasi lain. Karena banyak pengguna sudah memiliki model mental untuk pasangan ini, aplikasi Anda akan lebih intuitif bagi mereka.

Pasangan tata letak dan navigasi

Panel navigasi dan panel navigasi modal digunakan sebagai pola navigasi utama untuk tampilan tata letak induk dan tujuan navigasi utama.

UI navigasi utama

Bilah navigasi dapat menampung tiga hingga lima tujuan navigasi di seluruh tingkat hierarki yang sama. Komponen ini diterjemahkan ke kolom samping navigasi untuk layar besar.

Meskipun panel navigasi dapat menampung lebih dari lima tujuan navigasi, pola ini tidak seideal menu navigasi. Hal ini karena pengguna harus menjangkau panel atas pada ukuran ringkas.

Tab navigasi sekunder

Tab Material 3 dan panel aplikasi bawah adalah pola navigasi sekunder yang dapat Anda gunakan untuk melengkapi navigasi utama atau muncul di tampilan turunan.

Di sini, tab berfungsi sebagai lapisan navigasi sekunder untuk mengelompokkan konten selevel.

Tindakan tata letak

Berikan kontrol untuk memungkinkan pengguna menyelesaikan tindakan. Pola umum mencakup tindakan panel atas, tombol tindakan mengambang (FAB), dan menu.

Untuk tindakan yang paling penting, FAB menyediakan tombol besar dan menonjol bagi pengguna. Berikan hanya satu tindakan dalam satu waktu di tingkat ini. FAB dapat muncul dalam berbagai ukuran dan bentuk yang diperluas, yang mencakup label. Gunakan Scaffold untuk menyematkan FAB, guna memastikan FAB selalu terlihat meskipun saat men-scroll.

Tata letak dengan FAB

Tombol tindakan mengambang (FAB) yang memungkinkan pengguna menambahkan tanaman ke galeri tanaman

Anda dapat menempatkan tindakan sekunder di dalam panel atas atau, jika dikelompokkan di dekat konten terkait, di dalam halaman.

Tindakan peringatan di panel atas pada detail acara (kiri) dan ikon menu tambahan sebaris dengan item daftar (kanan)

Untuk tindakan tambahan yang tidak diperlukan dengan segera atau sering, tambahkan tindakan tersebut di menu tambahan.

Navigasi adaptif

Gunakan tata letak yang tepat untuk class ukuran jendela. Hindari penggunaan panel navigasi bawah yang sama di berbagai ukuran.

Anjuran

Sesuaikan navigasi Anda untuk menggunakan panel navigasi di perangkat layar besar. Kolom samping navigasi lebih ergonomis dan seimbang secara visual karena penempatan tangan pada perangkat yang lebih besar dan jarak yang besar antara item nav.

Larangan

Gunakan menu navigasi bawah pada ukuran layar besar.

Navigasi pada mode lanskap Ukuran sedang dapat menggunakan item navigasi horizontal atau kolom samping navigasi.

Navigasi di layar sampul Meskipun ringkas, kolom samping navigasi mungkin lebih ergonomis di layar luar. Sampul yang lebih besar dapat memanfaatkan orientasi navigasi. Pertimbangkan cara pengguna berinteraksi dengan konten.