Tata letak tampilan aplikasi yang tidak dapat di-scroll mencakup pemutar media, dialog konfirmasi, pemilih, pengalih, dan layar kebugaran atau pelacakan khusus menggunakan indikator progres. Anda dapat membatasi tinggi layar, yang memastikan pengguna berfokus pada satu tugas atau kumpulan kontrol, bukan harus menjelajahi daftar opsi. Untuk mengakomodasi perangkat dengan ukuran layar yang lebih kecil, desain dengan mempertimbangkan ukuran yang terbatas, memastikan keterlihatan dan menggunakan layar melingkar jika relevan.
Membuat desain yang responsif dan dioptimalkan
Tampilan non-scroll berfokus pada informasi yang mudah dilihat dan menawarkan nilai kepada pengguna dengan interaksi minimal. Namun, membuat perilaku responsif ke dalam tata letak ini mungkin sulit. Untuk mengatasi hal ini, kami telah memperbarui tata letak dan komponen library UI Android dengan perilaku responsif bawaan, termasuk margin dan padding berbasis persentase. Jika menggunakan komponen Compose, Anda dapat otomatis mewarisi responsivitas ini.
Untuk desain layar yang unik, uji secara menyeluruh di berbagai ukuran layar, untuk memastikan komponen dan elemen beradaptasi dengan lancar dan menghindari pemotongan konten. Margin persentase kami membantu pengatur jarak diskalakan secara efektif, dan sebaiknya gunakan titik henti sementara di 225dp untuk memperkenalkan informasi tambahan dan fungsi yang ditingkatkan di layar smartwatch yang lebih besar.
Pastikan komponen beradaptasi dengan lebar dan tinggi yang tersedia
Semua komponen dibuat secara responsif, yang berarti komponen tersebut beradaptasi dengan lebar yang tersedia (dan tinggi saat layar penuh). Pastikan Anda memiliki margin yang diperlukan untuk memastikan konten tidak terpotong oleh kurva pembulatan layar. Selain itu, pastikan perilaku tata letak yang diperlukan untuk memastikan konten layar yang tidak di-scroll tidak mendorong tata letak untuk di-scroll atau terpotong.
Membuat desain adaptif dan terdiferensiasi
Untuk menggunakan ruang tambahan dengan sebaik mungkin pada ukuran layar yang lebih besar, tambahkan titik henti sementara ukuran di 225dp. Titik henti sementara ini memungkinkan untuk menampilkan konten tambahan, menyertakan informasi, opsi, data lainnya, atau mengubah tata letak agar lebih sesuai dengan ukuran layar yang lebih besar.
Hal ini memerlukan desain yang berbeda untuk setiap titik henti sementara. Desain layar yang lebih besar (225+) dapat menyertakan elemen tambahan berikut:
Meningkatkan ukuran atau mengubah status komponen yang ada
Gunakan titik henti sementara untuk menampilkan detail selengkapnya atau membuat konten lebih mudah dilihat. Cukup pastikan pengalaman atau fungsi tidak rusak di layar kecil dan perubahan layar besar hanya tambahan.
Menambahkan konten dalam tata letak saat ini
Dengan menambahkan komponen atau konten, tata letak akan memberikan opsi, detail, dan pada akhirnya, nilai tambahan.
Hal ini tidak boleh mengorbankan kemudahan dilihat.
Menggunakan penomoran halaman
Dalam skenario saat pengalaman memerlukan lebih banyak konten, tetapi ingin mempertahankan tata letak non-scroll, pertimbangkan tata letak multi-halaman dengan penomoran halaman vertikal atau horizontal.
Perilaku responsif dan adaptif
Semua komponen dalam library Compose akan otomatis beradaptasi dengan ukuran layar yang lebih lebar, serta mendapatkan lebar dan tinggi. Khusus untuk tampilan ini, penggunaan titik henti sementara dapat memberikan pengalaman yang sangat kaya dan berharga bagi semua pengguna. Tentukan semua margin dalam persentase, dan tentukan batasan vertikal sehingga konten utama di tengah dapat diregangkan untuk mengisi area tampilan yang tersedia.
Sebaiknya bagi layar non-scroll menjadi bagian atas, tengah, dan bawah saat mendesain. Dengan cara ini, Anda dapat menambahkan margin dalam ke bagian atas dan bawah untuk menghindari pemotongan, tetapi memungkinkan bagian tengah memanfaatkan lebar penuh layar. Pertimbangkan penggunaan tombol scroll putar untuk mengontrol elemen layar jika ukurannya terbatas, karena interaksi ketuk saja mungkin tidak memberikan pengalaman terbaik.
Checklist
- Buat tata letak fleksibel yang terlihat wajar di semua ukuran layar.
- Terapkan margin atas, bawah, dan samping yang direkomendasikan.
- Tentukan margin dalam nilai persentase di tempat konten mungkin terpotong.
- Manfaatkan batasan tata letak sehingga elemen memanfaatkan ruang dalam layar sebaik mungkin dan mempertahankan keseimbangan di berbagai ukuran perangkat.
- Menyesuaikan Teks Waktu jika digunakan, tetapi tidak tumpang-tindih dengan bagian atas halaman (lihat indikator progres dengan celah atas untuk mengetahui informasi selengkapnya)
- Pertimbangkan untuk menggunakan tombol yang menempel di tepi untuk memanfaatkan lebih banyak ruang yang terbatas.
- Pertimbangkan untuk menerapkan titik henti sementara di 225dp untuk memperkenalkan konten tambahan atau membuat konten yang ada lebih mudah dilihat saat menggunakan ukuran layar yang lebih besar.
Indikator progres layar penuh
Tidak ada perubahan perilaku pada indikator progres karena indikator tersebut otomatis menyesuaikan dengan ukuran layar. Namun, pertimbangkan untuk menerapkan margin proporsional (persentase) dan padding di area tengah untuk memanfaatkan ruang sebaik mungkin. Pertimbangkan juga titik henti sementara untuk meningkatkan ukuran atau jumlah komponen di layar yang lebih besar.
Membuat pengalaman yang berbeda
Tata letak non-scroll dapat disesuaikan, tetapi lebih terbatas dalam jumlah konten yang dapat ditambahkan ke layar dan jenis komponen yang paling sesuai. Menggunakan Tombol Icon bukan Tombol berbentuk pil yang lebih lebar akan lebih memanfaatkan ruang yang terbatas, dan grafik visual seperti Indikator Progres dan titik data besar membantu menyampaikan informasi penting dengan cara grafis. Semua elemen yang memeluk bezel layar akan otomatis bertambah dengan ukuran layar, sehingga menjadi lebih berpengaruh.
