Tata letak kanonis ini telah terbukti sebagai tata letak aplikasi serbaguna yang memberikan pengalaman pengguna yang optimal di perangkat dengan ukuran layar yang lebih besar.
Kartu
Kartu menyediakan akses cepat ke informasi dan tindakan yang diperlukan pengguna untuk menyelesaikan berbagai aktivitas. Dengan menggeser dari tampilan jam, pengguna dapat melihat progres mencapai target kebugaran, memeriksa cuaca, dan lainnya. Luncurkan aplikasi atau selesaikan tugas penting dengan cepat dari kartu.
Penyesuaian melalui penggunaan komponen dan gaya visual kami
Anda dapat menerapkan gaya merek ke komponen tertentu. Hal ini mencakup warna primer, ikon aplikasi, font, ikon, dan aset visual apa pun yang berlaku untuk pengalaman kartu Anda.
Membuat untuk tata letak responsif (layar tinggi tetap dan margin persentase)
Untuk menyesuaikan kode dan tata letak desain ke ukuran layar yang lebih besar, kami telah memperbaruinya agar memiliki perilaku responsif bawaan, termasuk margin berbasis persentase dan padding. Jika menggunakan template, Anda dapat mewarisi perubahan ini secara otomatis melalui Tiles API, dan hanya perlu menyediakan tata letak tempat Anda telah menambahkan konten atau komponen tambahan setelah titik henti sementara ukuran layar. Untuk panduan dan rekomendasi lengkap tentang cara memanfaatkan ukuran layar yang lebih besar, lihat panduan Kartu kami.
Semua template dibuat dengan dua titik henti sementara ukuran layar default: 192dp dan 225dp. Margin telah disetel ke nilai persentase, berdasarkan ukuran layar, agar baris dapat mengisi ruang yang tersedia tetapi tidak terlalu jauh dan dipotong oleh layar melengkung di bagian atas dan bawah. Kartu memiliki tinggi layar tetap, jadi kita telah menyesuaikan padding untuk memaksimalkan real estate layar yang terbatas tanpa membuat pemotongan yang tidak diinginkan.
Dua template utama, Tata Letak Utama dan Tata Letak Konten Edge (dengan cincin progres)—memiliki margin yang berbeda, tetapi semua tata letak desain dibuat untuk dipetakan ke salah satu template tersebut. Ada tiga bagian utama untuk setiap kartu, dan slot yang dialokasikan untuk setiap kartu. Dalam beberapa kasus, mungkin ada margin dan padding bawaan tambahan untuk membantu konten mengisi ruang yang tersedia sambil mempertahankan desainnya yang mudah dilihat dan seimbang.
Menciptakan pengalaman yang berbeda
Memiliki empat tata letak kanonis utama, dengan lebih dari 80 permutasi yang ada di dalamnya, memungkinkan penyesuaian yang praktis tanpa batas. Kartu dibuat di sistem berbasis slot, sehingga Anda dapat mengganti slot dari tata letak kanonis dengan konten apa pun pilihan Anda. Dalam hal ini, pertahankan perilaku responsif dan ikuti rekomendasi desain kami.
Penyesuaian ini harus dibatasi, dan tidak boleh merusak struktur template kartu. Hal ini untuk mempertahankan konsistensi saat pengguna men-scroll carousel kartu di perangkat Wear OS mereka.
Menambahkan nilai setelah titik henti sementara ukuran pada ukuran layar yang lebih besar
Untuk menggunakan ruang tambahan pada ukuran layar yang lebih besar, tambahkan titik henti sementara ukuran dengan 225 dp. Dengan titik henti sementara ini, Anda dapat menampilkan konten tambahan, menyertakan lebih banyak tombol atau data, atau mengubah tata letak agar lebih sesuai dengan layar yang lebih besar.
Tata letak aplikasi dengan scroll dan non-scroll
Saat mendesain untuk tata letak adaptif di layar berbentuk lingkaran, masing-masing tampilan scroll dan non-scroll memiliki persyaratan unik untuk menskalakan elemen UI serta mempertahankan tata letak dan komposisi yang seimbang.
Tata letak aplikasi non-scroll
Tata letak kanonis dan komponen layar penuh (termasuk media dan kebugaran)
Tata letak tampilan aplikasi non-scroll mencakup pemutar media, dialog konfirmasi, alat pilih, pengalih, dan layar kebugaran atau pelacakan khusus menggunakan indikator progres. Anda dapat membatasi tinggi layar apa pun, yang memastikan pengguna fokus pada satu tugas atau serangkaian kontrol, daripada perlu melihat-lihat daftar opsi. Untuk mengakomodasi perangkat dengan ukuran layar yang lebih kecil, buat desain dengan mempertimbangkan ukuran yang terbatas, sehingga memastikan keterlihatan dan menggunakan layar lingkaran jika relevan.
Panduan responsivitas (margin persentase)
Tentukan semua margin dalam persentase, dan tentukan batasan vertikal sehingga konten utama di tengah dapat direntangkan untuk mengisi area tampilan yang tersedia.
Sebaiknya bagi layar yang tidak dapat di-scroll menjadi bagian atas, tengah, dan bawah saat mendesain. Dengan cara ini, Anda dapat menambahkan margin dalam ke bagian atas dan bawah agar tidak terpotong, tetapi biarkan bagian tengah memanfaatkan lebar penuh layar. Pertimbangkan penggunaan tombol scroll putar untuk mengontrol elemen layar saat ukurannya terbatas, karena interaksi mengetuk saja mungkin tidak memberikan pengalaman terbaik.
Menciptakan pengalaman yang berbeda
Tata letak non-scroll dapat disesuaikan, tetapi lebih terbatas dalam hal jumlah konten yang dapat ditambahkan ke layar dan jenis komponen yang berfungsi paling baik. Penggunaan IconButtons, bukan Chip, akan mengoptimalkan ruang yang terbatas, dan grafis visual seperti ProgressIndicators dan titik data yang besar membantu menyampaikan informasi penting secara grafis.
Semua elemen yang menutupi bingkai layar akan otomatis tumbuh sesuai ukuran layar, sehingga menjadi lebih berdampak.
Cara menambahkan nilai setelah titik henti sementara pada ukuran layar yang lebih besar
Saat membuat desain responsif untuk ukuran layar yang lebih besar, tata letak aplikasi yang tidak dapat di-scroll mendapatkan hasil maksimal dari real estate layar tambahan. Elemen yang ada dapat bertambah untuk mengisi ruang tambahan, sehingga meningkatkan kegunaan, dan komponen serta konten dapat muncul setelah titik henti sementara ukuran layar.
Beberapa contoh perilaku ini muncul dalam daftar berikut:
- Pemutar media bisa mendapatkan tombol tambahan atau kontrol yang lebih besar.
- Dialog konfirmasi dapat memperoleh ilustrasi atau informasi lebih lanjut.
- Layar kebugaran dapat memperoleh metrik tambahan, dan ukuran elemen dapat bertambah.
Men-scroll tata letak aplikasi
Tata letak kanonis
Men-scroll tata letak tampilan aplikasi menyertakan daftar (ScalingLazyColumn) dan dialog. Tata letak ini membentuk sebagian besar layar aplikasi, dan mewakili kumpulan komponen yang perlu beradaptasi dengan ukuran layar yang lebih besar.
Pastikan komponen tersebut responsif—yaitu, komponen mengisi lebar yang tersedia dan mengadopsi penyesuaian ScalingLazyColumn saat tinggi layar lebih banyak. Tata letak ini sudah dibuat secara responsif, dan kami memiliki beberapa rekomendasi tambahan untuk memanfaatkan lebih lanjut properti yang diperluas.
Panduan responsivitas (margin persentase)
Semua margin atas, bawah, dan samping harus ditentukan dalam persentase untuk menghindari pemotongan dan menyediakan penskalaan elemen yang proporsional. Pertimbangkan bahwa PositionIndicator muncul saat pengguna men-scroll, dan otomatis akan memeluk bingkai layar, berapa pun ukurannya.
Menciptakan pengalaman yang berbeda
Tampilan scroll sangat mudah disesuaikan, dengan kemampuan untuk menambahkan kombinasi komponen apa pun dalam urutan apa pun.
Margin atas dan bawah dapat berubah bergantung pada komponen mana yang berada di atas dan bawah. Hal ini untuk mencegah konten terpotong oleh kurva layar yang berkembang.
Menambahkan nilai setelah titik henti sementara di perangkat layar besar
Karena tata letak scroll akan otomatis menampilkan lebih banyak konten yang sebelumnya disembunyikan di bawah lipatan layar, Anda tidak perlu melakukan banyak hal untuk menambahkan nilai. Setiap komponen mengisi lebar yang tersedia, dan dalam beberapa kasus, komponen mungkin mendapatkan baris teks tambahan (seperti kartu), atau komponen yang direntangkan untuk mengisi lebar yang tersedia (seperti tombol ikon).