Menyesuaikan tata letak

Desain adaptif adalah praktik merancang tata letak yang beradaptasi dengan titik henti sementara dan perangkat tertentu.

Untuk menerapkan tata letak adaptif secara efektif:

• Pertama, pertimbangkan lebar class jendela perangkat untuk menentukan perubahan tata letak, lalu sesuaikan tinggi. Dukung berbagai ukuran layar.

• Android memanfaatkan konsep desain responsif, mirip dengan pengembangan web, menggunakan petak dan gambar yang fleksibel untuk membuat tata letak yang merespons secara efektif konteksnya.

• Izinkan tata letak merespons berbagai ukuran dengan metode adaptif: penyusunan ulang, pengungkapan, perubahan presentasi.

• Jangan mengunci aplikasi Anda ke potret saja. Hal ini menyebabkan tampilan lebar saat aplikasi Anda diubah ukurannya.

cancel

Larangan

Desain hanya untuk tata letak ponsel potret, yang akan membuat tampilan lebar. Aplikasi Anda akan diubah ukurannya di seluruh perangkat, mode jendela desktop, dan multitasking.

Untuk panduan desain tentang penyesuaian tata letak dengan ukuran layar yang diperluas, baca panduan developer Mendukung berbagai ukuran layar di Compose dan halaman Menerapkan Tata Letak M3. Anda juga dapat melihat galeri kanonis layar besar Android untuk mendapatkan inspirasi dan penerapan tata letak layar besar.

Berpikir adaptif

Adaptif harus menjadi default saat mendesain aplikasi Anda. Pasar seluler Android terus berkembang, jadi Anda tidak bisa hanya menganggap seluler sebagai ponsel handset. Namun, harus mencakup semuanya mulai dari ponsel handset, perangkat foldable, tablet, dan semuanya di antaranya.

Meskipun fitur dan kasus penggunaan tertentu mungkin tidak sesuai untuk setiap ukuran layar atau faktor bentuk. Desain adaptif memberi pengguna Anda lebih banyak keleluasaan terkait ergonomi, kegunaan, dan kualitas aplikasi.

Metode dan kualitas

Anda dapat memulai dengan mendesain layar utama (mengomunikasikan konsep penting atau aplikasi Anda) dengan ukuran kelas sebagai titik henti untuk bertindak sebagai panduan bagi aplikasi Anda lainnya. Pengalaman unggulan ini dapat menyoroti kualitas faktor bentuk dan adaptif yang berbeda. Atau, desain konten agar responsif di tingkat dasar dengan mencatat cara konten harus dibatasi, diperluas, atau diatur ulang.

Dalam contoh ini, navigasi dan konten diatur ulang, disesuaikan, dan diskalakan untuk navigasi ergonomis yang lebih baik. Petak tata letak diperluas dari berorientasi vertikal ke multi-kolom. Alamat di panel aplikasi dan filter diatur ulang dan disesuaikan agar sesuai dengan petak tata letak.

check_circle

Anjuran

Tetapkan lebar maksimum pada konten dan komponen untuk mencegah peregangan lebar penuh.

cancel

Larangan

Izinkan konten direntangkan ke lebar penuh.

check_circle

Anjuran

Pikirkan dalam hal penampungan atau panel.

check_circle

Anjuran

Mengizinkan komponen mengubah presentasinya. Misalnya, sheet bawah dapat menjadi sheet samping pada ukuran yang lebih besar.

cancel

Larangan

Meregangkan komponen, bukan memungkinkan komponen mengubah presentasi dan menetapkan lebar maksimum.

Pastikan input dan tombol tidak diregangkan.

Pikirkan dalam hal penampungan dan panel.

Gunakan konsep pembatasan panel untuk mengelompokkan konten tata letak adaptif. Misalnya, contoh yang digunakan adalah layar detail, satu panel yang dapat ditampilkan dalam tata letak detail daftar.

Ukuran ringkas harus menggunakan tata letak satu panel.

Medium dapat menggunakan tata letak 1–2 panel.

Besar dan ekstra besar dapat menggunakan tata letak multi-panel.

Gunakan penampung intrinsik dan visual untuk mengelompokkan elemen. Panel dapat bergerak masuk, tersembunyi, meluas, dibatasi, atau muncul. Berpikir dengan panel mempermudah desain di semua perangkat seluler.

Meskipun panel tidak penting di layar besar, Anda tetap harus memikirkan konten dalam pengelompokan penampungan untuk fleksibilitas.

Izinkan elemen bergeser dan disusun ulang dengan berfokus pada cara elemen beradaptasi dengan petak. Pertimbangkan perubahan vertikal untuk elemen dan gabungkan dengan batasan dan perubahan presentasi.

Pertimbangkan skala dan jumlah konten yang ditampilkan.

Petak kecil video di ponsel menjadi padat dan membebani di tablet. Memperbarui skala elemen UI berdasarkan ukuran layar, kepadatan, dan input.

Aplikasi berkualitas tinggi harus memenuhi tingkat yang berbeda dalam pedoman aplikasi inti dan kualitas layar besar.

Untuk mengetahui tata letak selengkapnya, lihat halaman Memahami tata letak Desain Material 3 (M3).

Manfaatkan ukuran faktor bentuk yang unik.

Jangan lupakan juga ukuran layar yang lebih kecil dan rasio aspek yang berbeda, karena ponsel Android memiliki berbagai ukuran dan perangkat foldable dapat menyertakan layar luar kecil yang dapat menampilkan aplikasi Anda.

Untuk tata letak berbasis kontrol, seperti pemutar media, izinkan kontrol untuk diatur ulang dan konten ditampilkan.

Untuk membantu pengguna menyesuaikan, gunakan elemen anchor, seperti tombol putar besar, untuk menyesuaikan konten di sekitarnya dan gambar utama menjadi latar belakang di layar cover.

Di luar class ukuran

Meskipun ukuran jendela adalah faktor umum untuk desain adaptif, aplikasi Anda juga harus siap bagi pengguna untuk mencolokkan monitor dan perangkat input, melihat dari berbagai jarak, dan mengubah postur perangkat mereka. Anda dapat memeriksa perubahan ini menggunakan API mediaQuery, yang memungkinkan Anda menambahkan nuansa saat mendesain cara aplikasi Anda menyesuaikan elemen UI tertentu untuk kasus penggunaan tertentu. Sesuaikan desain aplikasi Anda di tingkat komponen atau panel, daripada mendesain seluruh layar per ukuran, input, faktor bentuk, dan postur.

Untuk mengetahui informasi selengkapnya tentang interaksi input, baca selengkapnya di panduan interaksi pengalaman desktop.

Lihat contoh studi kasus, Pawparrazzi, yang dibuat dan didesain dengan API adaptif dan panduan desain terbaru.