Kartu menyediakan akses cepat ke informasi dan tindakan yang diperlukan pengguna untuk menyelesaikan berbagai aktivitas. Dengan menggeser dari tampilan jam, pengguna dapat melihat progres kebugaran mereka, memeriksa cuaca, dan lainnya. Meluncurkan aplikasi atau menyelesaikan tugas penting dengan cepat dari kartu.
Membuat desain yang responsif dan dioptimalkan
Untuk membantu Anda menyesuaikan tata letak desain dengan ukuran layar yang lebih besar, kami telah memperbarui perilaku tata letak dan komponen agar memiliki perilaku responsif bawaan, termasuk margin dan padding berbasis persentase.
Jika menggunakan template ProtoLayout kami, Anda dapat mewarisi update ini secara otomatis melalui rilis beta terbaru library Jetpack Wear ProtoLayout. Selain itu, Anda hanya perlu menyediakan tata letak tempat Anda 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. Petak memiliki tinggi layar tetap, jadi kami telah menyesuaikan padding untuk memaksimalkan ruang layar terbatas tanpa membuat kliping yang tidak diinginkan.
Memeriksa apakah komponen mengisi lebar yang tersedia
Semua komponen harus dibuat secara responsif. Dengan menyetel tinggi dan lebar ke "expand", item akan mengisi ruang yang tersedia. Sertakan margin yang diperlukan untuk mencegah konten terpotong oleh layar bulat.
Membangun desain adaptif dan bervariasi
Untuk memanfaatkan ruang tambahan pada ukuran layar yang lebih besar, tambahkan titik henti sementara ukuran pada 225 dp. Titik henti ini memungkinkan Anda menampilkan konten tambahan, menyertakan lebih banyak tombol atau data, atau mengubah tata letak agar lebih sesuai dengan layar yang lebih besar.
Hal ini memerlukan desain yang berbeda untuk setiap titik henti sementara. Desain layar yang lebih besar (225+ dp) dapat mencakup elemen tambahan berikut:
Menampilkan slot judul yang sebelumnya disembunyikan
Hal ini disarankan pada tata letak dengan dua baris sebelum titik henti, tempat slot judul perlu dihapus untuk memastikan target ketuk minimum 48 dp.
Menambah ukuran atau mengubah status komponen yang ada
Hal ini dapat dilakukan untuk menampilkan detail selengkapnya atau membuat konten lebih mudah dilihat.
Menambahkan slot komponen dalam tata letak saat ini
Dengan menambahkan komponen, tata letak memberikan lebih banyak opsi atau detail tambahan. Namun, pastikan konten tetap dapat dilihat sekilas.
Menambahkan lebih banyak konten di bagian bawah
Dalam beberapa kasus, lebih baik menambahkan tombol tindakan atau konten di bagian bawah, daripada menambahkan komponen dalam slot utama.
Perhatian: Ukuran tampilan yang lebih besar tidak boleh menampilkan informasi yang lebih sedikit daripada ukuran yang lebih kecil. Hal ini terutama relevan untuk perilaku kustom yang ditambahkan pada titik henti sementara.
Contoh umumnya adalah saat ukuran komponen atau teks ditingkatkan melewati titik henti dan akhirnya menampilkan lebih sedikit di layar yang lebih besar. Layar harus selalu menampilkan lebih banyak nilai dengan ukuran yang meningkat.
Perilaku responsif dan adaptif
Perilaku responsif dan adaptif bergantung pada tiga slot (bagian) tata letak.
Slot ikon dan judul aplikasi
Tidak ada perubahan perilaku pada ikon aplikasi yang disediakan sistem. Slot judul otomatis menyesuaikan dengan ukuran layar yang lebih lebar, menampilkan karakter tambahan. Ada margin internal proporsional (persentase) di bagian atas untuk menghindari pemangkasan saat ukuran layar bertambah.
Slot utama (komponen)
Semua komponen dalam slot utama harus menyetel lebar dan tingginya ke "expand" agar otomatis menyesuaikan dengan ukuran layar yang lebih lebar. Ada margin internal proporsional (persentase) di bagian slot utama—dan setiap baris dalam slot ini dalam beberapa kasus—untuk menghindari pemangkasan saat ukuran layar bertambah. Jika Anda menggunakan kombinasi radius sudut dan tata letak, slot utama Anda mungkin memerlukan margin yang lebih besar.
Slot bawah
Tidak ada perubahan perilaku pada tombol atau teks di bagian bawah, tetapi lebar tombol dan kotak teks akan otomatis menyesuaikan dengan ukuran layar yang lebih lebar, dan mendapatkan karakter. Ada margin internal proporsional (persentase) di slot bawah untuk menghindari pemotongan saat ukuran layar bertambah. Jika tidak ada slot bawah, margin default akan ditambahkan secara otomatis.
Menciptakan pengalaman yang berbeda
Satu tata letak yang dapat disesuaikan sepenuhnya, dengan 60 permutasi atau lebih yang disertakan di dalamnya, memungkinkan penyesuaian yang hampir tak terbatas. Kartu dibuat di sistem berbasis slot, sehingga Anda dapat mengganti slot dari tata letak kanonis dengan konten atau komponen apa pun, dan menetapkan komponen ke salah satu dari banyak kombinasi warna dan varian. Dalam hal ini, pertahankan perilaku responsif dan ikuti rekomendasi desain kami.
Penyesuaian ini harus terbatas, dan tidak boleh menyimpang dari template kartu. Hal ini dilakukan untuk menjaga konsistensi saat pengguna men-scroll carousel kartu di perangkat Wear OS mereka.