Aplikasi yang menggunakan tata letak responsif dan otomatis beradaptasi dengan berbagai ukuran layar menawarkan nilai tambahan kepada pengguna dan memberikan pengalaman pengguna yang lebih produktif dan menarik.
Tata letak responsif secara dinamis memformat dan memosisikan elemen seperti tombol, kolom teks, dan dialog untuk pengalaman pengguna yang optimal. Secara otomatis tawarkan nilai tambahan kepada pengguna aplikasi Anda di perangkat layar besar dengan memanfaatkan praktik desain responsif. Baik lebih banyak teks yang terlihat sekilas, lebih banyak tindakan di layar, atau target ketuk yang lebih besar dan lebih mudah diakses, praktik responsif memberikan pengalaman yang lebih baik bagi pengguna layar yang lebih besar.
Menambahkan nilai melalui desain responsif
Anjuran
- Gunakan library komponen Compose M3 yang memiliki perilaku responsif dan adaptif bawaan.
- Gunakan tata letak responsif, yang otomatis dan lancar menyesuaikan untuk mengisi ruang yang tersedia di seluruh ukuran layar.
Larangan
- Luaskan elemen UI—termasuk kolom teks, tombol, dialog—untuk mengisi ruang yang masih tersisa.
- Perbesar ukuran font, kecuali jika font tersebut terutama berfungsi sebagai tujuan grafis.
Mem-build aplikasi dan kartu responsif untuk Wear OS
UI responsif meregang dan berubah untuk memanfaatkan semua ruang layar yang tersedia sebaik mungkin, terlepas dari ukuran layar tempatnya dirender.
Saat mendesain tata letak responsif di layar bulat, tampilan scroll dan non-scroll masing-masing memiliki persyaratan unik untuk mempertahankan penskalaan elemen UI dan mempertahankan tata letak dan komposisi yang seimbang. Untuk tampilan scroll, gunakan persentase untuk menentukan semua margin atas, bawah, dan samping untuk menghindari pemangkasan dan memberikan penskalaan proporsional elemen. Untuk tampilan yang tidak di-scroll, gunakan persentase dan batasan vertikal untuk semua margin. Dengan begitu, konten utama di tengah dapat diregangkan untuk mengisi area yang tersedia.
Tampilan bergulir
Semua margin atas, bawah, dan samping harus ditentukan dalam persentase untuk menghindari pemangkasan dan memberikan penskalaan proporsional elemen.
Tampilan non-scroll
Semua margin harus ditentukan dalam persentase dan batasan vertikal harus ditentukan sehingga konten utama di tengah dapat diregangkan untuk mengisi area yang tersedia.
Contoh
Gambar berikut menunjukkan contoh aplikasi yang responsif dan dioptimalkan.
Tombol yang menempel di tepi
Daftar kartu
Daftar tombol dan pengalih
Kartu gambar dengan kartu gambar
Daftar kartu dengan gambar
Kartu dengan grafik
