Desain untuk perangkat layar besar sejak awal

Perangkat Android hadir dalam berbagai faktor bentuk—ponsel, tablet, perangkat foldable, perangkat ChromeOS—yang memiliki berbagai ukuran layar. Android mendukung banyak mode tampilan, termasuk multi-aplikasi, multi-layar, bentuk bebas, dan picture-in-picture. Perangkat foldable dapat berada dalam berbagai status atau postur, seperti di atas meja atau buku.

Pertimbangkan berbagai kasus penggunaan untuk aplikasi Anda saat Anda mulai mendesainnya. Contoh:

  • Perangkat Layar Besar memberi pengguna lebih banyak ruang untuk berinteraksi dengan konten aplikasi media Anda dengan berbagai cara.

  • Pengguna mungkin melakukan multitasking sambil menonton video dalam konfigurasi multi-aplikasi atau memanfaatkan layar yang lebih besar untuk menerapkan pengeditan yang lebih kompleks setelah mengambil gambar.

  • Pengguna mungkin beralih ke tablet untuk tetap terhubung dengan panggilan video dan melihat teman dan keluarga mereka secara lebih mendetail. Aplikasi Anda dapat menampilkan konteks yang lebih lengkap tentang judul atau adegan dalam overlay pemutaran kustom atau menawarkan lebih banyak opsi kontrol di layar.

  • Carousel dalam tampilan penjelajahan dapat menampilkan lebih banyak variasi untuk daya tarik visual yang lebih besar, atau aplikasi media Anda dapat membuat pengguna tetap berinteraksi dengan menawarkan feed yang dapat dijelajahi secara berdampingan dengan pemutaran.

Perlu diingat bahwa aplikasi media Anda memiliki kode yang sama yang berjalan di ponsel standar, perangkat foldable, tablet, dan ChromeOS, sehingga Anda harus mendesain untuk layar besar sejak awal pengembangan aplikasi. Untuk informasi dan contoh visual selengkapnya, lihat Galeri perangkat layar besar.

Membuat aplikasi media Anda responsif secara default

Hindari pengalaman pengguna yang rusak di aplikasi media dengan membuat tata letak aplikasi adaptif di seluruh ponsel, tablet, perangkat foldable, dan perangkat ChromeOS.

Aplikasi Anda harus responsif untuk memperhitungkan berbagai ukuran layar, orientasi, dan faktor bentuk. Tata letak adaptif berubah berdasarkan ruang layar yang tersedia untuknya. Untuk mengetahui informasi selengkapnya, lihat Mendukung ukuran layar yang berbeda.

Mendesain sesuai dengan panduan

Kualitas aplikasi inti adalah dasar dari semua aplikasi Android, terlepas dari ukuran layar, postur perangkat, atau pertimbangan khusus perangkat lainnya. Aplikasi Anda harus memenuhi persyaratan dasar ini sebelum Anda mulai mendesain untuk perangkat layar besar. Untuk mengetahui informasi selengkapnya, lihat Kualitas aplikasi inti.

Aplikasi Anda harus menawarkan pengalaman pengguna yang sangat baik, apa pun faktor bentuk perangkat, ukuran layar, mode tampilan, atau posturnya. Oleh karena itu, desain aplikasi Anda sesuai dengan panduan Tingkat 1, 2, dan 3 berikut.

Pedoman ini menentukan serangkaian persyaratan kualitas yang komprehensif untuk sebagian besar jenis aplikasi Android.

Tingkat 3:

Pada tingkat dasar ini, aplikasi Anda masih harus mematuhi persyaratan UI dan grafis. Aplikasi Anda siap digunakan di perangkat layar besar, dan pengguna dapat menyelesaikan alur tugas penting, tetapi dengan pengalaman pengguna yang kurang optimal.

Tata letak aplikasi mungkin tidak ideal, tetapi aplikasi tersebut berjalan dalam layar penuh, atau jendela penuh dalam mode multi-aplikasi. Aplikasi tidak memiliki tampilan lebar dan tidak berjalan dalam mode kompatibilitas. Aplikasi menyediakan dukungan dasar untuk perangkat input eksternal, termasuk keyboard, mouse, dan trackpad. Untuk mengetahui informasi selengkapnya, lihat Siap untuk perangkat layar besar.

Tingkat 2:

Di sini, aplikasi Anda menerapkan pengoptimalan tata letak untuk semua ukuran layar dan konfigurasi perangkat, beserta dukungan yang ditingkatkan untuk perangkat input eksternal. Untuk mengetahui detailnya, lihat Dioptimalkan untuk perangkat layar besar.

Tingkat 1:

Ini adalah tingkat dukungan terbaik dan menawarkan pengalaman terbaik kepada pengguna dengan aplikasi Anda, karena menentukan fitur dan kemampuan premium.

Jika memungkinkan, aplikasi akan mendukung multitasking, postur perangkat foldable, tarik, dan input stilus. Pada tingkat ini, aplikasi sangat terdiferensiasi, jadi perhatikan pedoman untuk hal-hal seperti postur multi-tasking dan foldable. Untuk mempelajari lebih lanjut, lihat Terdiferensiasi di perangkat layar besar.

Tata letak yang dioptimalkan

Manfaatkan ruang yang lebih besar pada layar besar tanpa tampilan lebar (karena orientasi yang dibatasi) atau peregangan. Dengan mengoptimalkan tata letak aplikasi untuk media dan media sosial, Anda akan memperluas jangkauan aplikasi dan menciptakan pengalaman pengguna yang lebih baik di semua faktor bentuk perangkat layar besar—tablet, perangkat foldable, dan perangkat ChromeOS—serta mendukung semua ukuran ponsel.

Komponen kolom samping dan panel navigasi memberikan navigasi yang canggih untuk kemudahan dan kontrol UI. Komponen-komponen tersebut juga melengkapi tata letak kanonis (daftar-detail, feed, dan panel pendukung) dengan memosisikan tujuan navigasi utama dalam jangkauan yang dekat sekaligus menempati ruang minimum layar.

Tata letak media

Buat aplikasi Anda lebih mudah digunakan dengan menerapkan tata letak khusus media untuk panel detail daftar, feed, dan pendukung. Untuk informasi tentang tata letak MDX, Flutter, dan Compose, lihat Referensi tata letak.

  • Daftar-detail: Mendesain aplikasi Anda dengan browser media interaktif memungkinkan pengguna menjelajahi berbagai media sambil menonton atau mendengarkan. Judul media ditampilkan berdampingan dengan file video atau audio yang diputar. Jika orientasi perangkat berubah, tata letak daftar-detail akan merespons untuk mempertahankan status aplikasi. Untuk mempelajari lebih lanjut, lihat Tata letak detail daftar.

  • Feed: Tata letak feed mengatur elemen konten yang setara dalam petak yang dapat dikonfigurasi agar konten dalam jumlah besar dapat dilihat dengan cepat dan nyaman, seperti feed musik atau kios film dan TV di aplikasi Anda. Untuk informasi selengkapnya, lihat Tata letak feed.

  • Panel pendukung: Dengan area tampilan utama dan sekunder, aplikasi Anda dapat menyematkan panel pendukung untuk konteks, relevansi, atau referensi, seperti daftar yang dapat di-scroll berisi judul yang serupa, ulasan yang dipublikasikan, atau karya tambahan oleh artis atau aktor yang sama. Untuk mengetahui detail selengkapnya, lihat Mendukung tata letak panel.

Untuk koleksi pilihan tata letak media, lihat Galeri media.

Tata letak Media Sosial

Perangkat layar besar memberi pengguna media sosial lebih banyak ruang kerja untuk berkarya, multitasking, menarik konten antar-aplikasi, dan membagikannya. Dengan fitur dan kemampuan khusus yang tidak mungkin dilakukan di perangkat layar kecil, aplikasi media layar besar dapat memanfaatkan daftar-detail, feed, dan tata letak panel pendukung.

  • Daftar-detail: Tata letak ini ideal untuk aplikasi pesan, pengelola kontak, atau file browser. Misalnya, aplikasi Anda dapat menampilkan daftar percakapan secara berdampingan dengan detail agar tetap mendapatkan informasi terbaru tentang pesan terbaru. Untuk informasi selengkapnya, lihat Tata letak daftar-detail.

  • Feed: Komponen umum dalam gaya tata letak ini adalah kartu dan daftar. Misalnya, buat kolase postingan dalam format petak yang fleksibel, atau gunakan ukuran dan posisi untuk menarik perhatian ke postingan yang menonjol. Pengguna dapat dengan cepat melihat grup konten yang besar. Untuk mengetahui informasi selengkapnya, lihat Tata letak feed.

  • Panel pendukung: Aplikasi penelusuran dan referensi atau aplikasi produktivitas dapat memanfaatkan gaya tata letak ini. Alat ini memudahkan pengguna mengakses alat pembuat konten. Misalnya, aplikasi Anda dapat memungkinkan pengguna menyesuaikan setelan, mengakses palet warna, menerapkan efek, dan melihat perubahan secara instan. Untuk mengetahui informasi selengkapnya, lihat Mendukung tata letak panel.

Untuk koleksi pilihan tata letak media sosial, lihat halaman Galeri media sosial.

Praktik terbaik untuk aplikasi media layar besar

Menggunakan praktik terbaik untuk perangkat layar besar membantu Anda menghindari pengerjaan ulang aplikasi yang tidak perlu. Praktik ini juga membuat aplikasi Anda lebih mudah digunakan di lebih banyak perangkat sejak awal, terutama terkait orientasi, pintasan keyboard, dukungan pratinjau kamera, dan postur perangkat foldable.

Orientasi dan pengubahan ukuran

Jika aplikasi media Anda mendeklarasikan batasan orientasi dan pengubahan ukuran, Android akan mengaktifkan mode kompatibilitas. Meskipun mode kompatibilitas memastikan aplikasi Anda berperilaku secara wajar, kegunaannya sangat berkurang, dan pengalaman pengguna akan terpengaruh.

Misalnya, jika aplikasi Anda berada di tablet, tablet akan di-dock dalam orientasi lanskap. Jika aplikasi Anda dibatasi untuk potret, hal ini akan menyebabkan letterboxing, yang tidak ideal untuk pengguna akhir. Aplikasi Anda harus memungkinkan pengguna menggunakan orientasi pilihan mereka, jadi manfaatkan ukuran layar besar yang tersedia dalam desain Anda.

Setiap batasan orientasi akan mengurangi cara pengguna berinteraksi dengan konten atau mengonsumsi media, yang membatasi penggunaan aplikasi Anda. Mengubah orientasi dapat memengaruhi ukuran hingga batas tertentu, tetapi mengubah ukuran tidak akan mengubah orientasi.

Pintasan keyboard

Di layar yang lebih besar, pintasan keyboard pada keyboard fisik, seperti mulai, berhenti, jeda, mundur, dan maju, lebih mungkin digunakan, sehingga membuat pengalaman pengguna konsisten dengan keyboard.

Pengguna mengharapkan fungsi ini di aplikasi media mereka. Untuk mengurangi titik hambatan bagi pengguna, pertimbangkan untuk menguji aplikasi Anda dengan keyboard fisik. Hal ini membantu Anda memperhatikan dan menyertakan pintasan penting ini dalam aplikasi pada awal desain.

Dukungan pratinjau kamera

Dengan layar besar, Anda dapat mengalami lebih banyak masalah terkait peregangan, pemangkasan, dan rotasi. Jadi, Anda tidak dapat mengasumsikan bahwa ukuran pratinjau kamera adalah yang sebenarnya dirender oleh UI di aplikasi media Anda.

Misalnya, jika pengguna mengambil gambar dengan tablet, tetapi merendernya secara terbalik di layar tablet, hal ini akan menjadi pengalaman yang kurang optimal. Menyertakan dukungan pratinjau kamera untuk perangkat layar besar.

Untuk informasi selengkapnya, lihat Pratinjau CameraX, atau Pratinjau Camera2.

Postur perangkat foldable

Mendesain aplikasi media untuk perangkat layar besar menyertakan postur perangkat foldable. Aplikasi Anda, misalnya, dapat memungkinkan pengguna memiliki konfigurasi mode di atas meja untuk pemutaran media atau menggunakan tampilan belakang dan mode layar ganda untuk pratinjau dan pengambilan.

Dengan postur perangkat foldable yang disertakan dalam rencana pengembangan, aplikasi Anda tersedia untuk lebih banyak perangkat dan memiliki dampak yang lebih luas. Anda memperbesar pengalaman media bagi pengguna dengan cara yang tidak dapat dilakukan perangkat lain tanpa postur perangkat foldable. Untuk mengetahui informasi selengkapnya, lihat Postur perangkat foldable.