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-tampilan, bentuk bebas, dan picture-in-picture. Perangkat foldable dapat dalam berbagai status atau postur, seperti di atas meja atau buku.

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

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

  • Pengguna dapat melakukan banyak hal saat menonton video dalam konfigurasi multi-aplikasi atau memanfaatkan layar yang lebih besar untuk menerapkan pengeditan yang lebih kompleks setelah mengambil gambar.

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

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

Perlu diingat bahwa aplikasi media Anda memiliki kode yang sama dengan yang berjalan di ponsel standar, perangkat foldable, tablet, dan perangkat 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 menjadi responsif secara default

Hindari pengalaman pengguna yang rusak di aplikasi media Anda 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 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 dapat berjalan di layar penuh atau jendela penuh dalam mode multi-aplikasi. Tidak memiliki tampilan lebar dan tidak berjalan dalam mode kompatibilitas. Aplikasi ini memberikan dukungan dasar untuk perangkat input eksternal, termasuk keyboard, mouse, dan trackpad. Untuk mengetahui informasi selengkapnya, lihat Siap digunakan di perangkat layar besar.

Tingkat 2:

Di sini, aplikasi Anda mengimplementasikan 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 yang paling baik bagi pengguna dengan aplikasi Anda, karena aplikasi ini menentukan fitur dan kemampuan premium.

Jika memungkinkan, aplikasi ini 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 perangkat layar besar tanpa tampilan lebar (karena orientasi yang membatasi) atau peregangan. Dengan mengoptimalkan tata letak aplikasi untuk media dan media sosial, Anda memperluas jangkauan aplikasi dan menciptakan pengalaman pengguna yang lebih baik di semua faktor bentuk layar besar—tablet, perangkat foldable, dan perangkat ChromeOS—serta mendukung semua ukuran ponsel.

Komponen panel samping dan panel samping navigasi menyediakan 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

Jadikan aplikasi Anda lebih bermanfaat dengan mengimplementasikan tata letak khusus media untuk detail daftar, feed, dan panel pendukung. Untuk mengetahui informasi tentang tata letak MDX, Flutter, dan Compose, lihat Resource 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 daftar-detail.

  • Feed: Tata letak feed mengatur elemen konten yang setara dalam petak yang dapat dikonfigurasi untuk melihat konten dalam jumlah besar dengan cepat dan nyaman, seperti feed musik atau film dan kios TV di aplikasi Anda. Untuk mengetahui 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, misalnya daftar scroll judul serupa, ulasan yang dipublikasikan, atau karya tambahan oleh artis atau aktor yang sama. Untuk mengetahui detail selengkapnya, lihat Tata letak panel pendukung.

Untuk mengetahui koleksi tata letak media pilihan, 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: Detail ini ideal untuk aplikasi pesan, pengelola kontak, atau browser file. Misalnya, aplikasi Anda dapat menampilkan daftar percakapan secara berdampingan dengan detail agar tetap mendapatkan informasi terkini 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 kelompok konten yang besar. Untuk informasi selengkapnya, lihat Tata letak feed.

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

Untuk mengetahui kumpulan tata letak media sosial pilihan, 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. Hal ini juga membuat aplikasi Anda lebih mudah digunakan di lebih banyak perangkat sejak awal, terutama dalam hal orientasi, pintasan keyboard, dukungan pratinjau kamera, dan postur perangkat foldable.

Orientasi dan pengubahan ukuran

Jika aplikasi media Anda mendeklarasikan orientasi dan batasan perubahan ukuran, Android akan mengaktifkan mode kompatibilitas. Meskipun mode kompatibilitas memastikan aplikasi Anda berperilaku dapat diterima, kegunaannya sangat menurun, dan pengalaman pengguna sangat terganggu.

Misalnya, jika aplikasi berada di tablet, tablet akan dipasang ke dok dalam orientasi lanskap. Jika aplikasi Anda dibatasi ke potret, ini akan menyebabkan tampilan lebar, yang tidak ideal bagi pengguna akhir. Aplikasi Anda harus memungkinkan orang 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

Pada 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 perangkat layar besar, Anda dapat memiliki lebih banyak masalah dengan peregangan, pemangkasan, dan rotasi. Jadi, Anda tidak dapat berasumsi bahwa ukuran pratinjau kamera adalah apa 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 mengetahui informasi selengkapnya, lihat pratinjau CameraX, atau pratinjau CameraX.

Postur perangkat foldable

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

Dengan postur perangkat foldable yang disertakan dalam rencana pengembangan, aplikasi Anda akan 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.