Mencegah pemotongan teks dan pemotongan konten

Smartwatch memiliki ukuran layar yang lebih kecil daripada perangkat genggam, sehingga sangat penting untuk mengatur dan menampilkan elemen dengan cara yang dapat diakses pengguna dan secara efisien menggunakan ruang layar yang tersedia. Agar item Anda sesuai dengan layar, gunakan jumlah padding dan margin yang benar seperti yang ditentukan oleh Panduan Material.

Meskipun desain Anda sesuai dengan layar, elemen antarmuka mungkin terpotong atau terpotong saat pengguna melakukan salah satu hal berikut:

  • Mengubah bahasa tampilan.
  • Mengubah ukuran teks.
  • Mengaktifkan setelan sistem Teks tebal.

Menguji desain Anda dengan mempertimbangkan hal ini sangatlah penting untuk memastikan desain dapat beradaptasi secara lancar dengan berbagai lingkungan pengguna.

Mempertahankan elemen interaktif sepenuhnya terlihat

Jika antarmuka Anda menyertakan elemen interaktif, pastikan pengguna dapat men-scroll elemen ini sepenuhnya ke tampilan, terutama jika elemen tersebut ditempatkan di tepi halaman. Jika aplikasi Anda menggunakan library Horologist, gunakan setelan pabrik tata letak responsive(). Jika tidak, gunakan pengatur jarak dan tambahkan margin ke bagian atas dan bawah objek ScalingLazyColumn agar item daftar pertama dan terakhir tidak selalu diklip.

Menggunakan chip, bukan kartu untuk tata letak padat

Jika Anda memerlukan tata letak yang lebih padat, gunakan CompactChip, bukan kartu. Area permukaan kartu yang lebih besar mempersulit pencegahan pemotongan teks dan pemotongan konten.

Mempertimbangkan efek ukuran layar saat pemotongan dan pemotongan

Bergantung pada ukuran layar perangkat Wear OS, Anda memiliki ruang yang lebih kecil atau lebih besar untuk menampilkan teks dan tombol tambahan:

Desain untuk margin persentase, bukan margin tetap

Untuk membuat konten yang beradaptasi secara responsif dengan ukuran layar perangkat Wear OS, terapkan margin persentase, dengan ukuran setiap margin relatif terhadap ukuran layar. Jika item berada di bagian atas atau bawah layar, terapkan padding dalam tambahan untuk meminimalkan klip konten dari tepi layar yang melengkung. Sebaliknya, ruang di bagian atas dan bawah akan bertambah saat grup konten cukup kecil untuk muat di satu layar.

Anjuran

Komponen harus mematuhi margin persentase sehingga ukurannya dapat disesuaikan dengan ukuran layar. Dengan cara ini, konten layar Anda selalu mengisi ruang yang tersedia dan tidak dipangkas oleh tepi layar.

Larangan

Jangan menggunakan ruang maksimum yang tersedia untuk teks tanpa mempertimbangkan bagaimana teks dapat terpotong pada layar yang lebih kecil dan memengaruhi fungsi desain Anda.

Gunakan batas karakter yang diperlukan oleh layar yang lebih kecil

Pada umumnya, layar yang lebih besar dapat menampilkan lebih banyak teks dan konten sebelum dipotong. Meskipun tersedia lebih banyak ruang horizontal, selalu desain untuk ukuran layar terkecil guna menciptakan pengalaman yang konsisten di seluruh perangkat.

Misalnya, tombol mungkin memiliki ruang untuk lebih banyak karakter di layar yang lebih besar sebelum dipotong, tetapi jika ini merupakan pesan ajakan (CTA) penting yang penting bagi pengalaman pengguna, gunakan teks yang cukup pendek untuk muncul sepenuhnya, tanpa terpotong, di layar perangkat yang kecil.

Atau, jika kartu menampilkan konten variabel, seperti teks yang diambil dari server, rencanakan kemungkinan teks ini terpotong pada layar yang lebih kecil.

Anjuran

Teks yang memengaruhi fungsionalitas desain, seperti tombol pesan ajakan (CTA), didesain dengan mempertimbangkan layar terkecil. Ruang tambahan di layar yang lebih besar dapat menampilkan baris teks tambahan setelah titik henti sementara. Jumlah baris teks bergantung pada komponen dan konteks.

Larangan

Jangan menulis teks yang menghabiskan ruang maksimum yang tersedia pada layar yang lebih besar tanpa mempertimbangkan bagaimana teks tersebut dapat tampak terpotong di layar yang lebih kecil dan memengaruhi fungsionalitas desain.