Ekosistem Wear OS terdiri dari perangkat yang memiliki berbagai ukuran layar. Menggunakan prinsip UI adaptif sangat penting untuk memberikan pengalaman berkualitas tertinggi bagi semua pengguna.
Apa yang dimaksud dengan UI adaptif?
UI adaptif diregangkan dan diubah untuk memanfaatkan semua ruang layar yang tersedia sebaik mungkin, terlepas dari ukuran layar tempat UI dirender.
UI adaptif berubah secara responsif, menggunakan komponen dan metode yang di-build langsung ke dalam logika tata letak. Tata letak ini juga menggunakan titik henti sementara ukuran layar—menerapkan desain yang berbeda pada ukuran layar yang berbeda—untuk menciptakan pengalaman yang lebih kaya bagi pengguna.
Ukuran layar utama

Pelajari ukuran referensi utama yang perlu diingat saat Anda mendesain pengalaman baru
Jenis tata letak
Saat mendesain untuk tata letak adaptif di layar bulat, tampilan scroll dan tampilan non-scroll masing-masing memiliki persyaratan unik untuk menskalakan elemen UI dan mempertahankan tata letak dan komposisi yang seimbang.

Semua margin atas, bawah, dan samping harus ditentukan dalam persentase untuk menghindari pemangkasan dan memberikan penskalaan proporsional elemen.

Semua margin harus ditentukan dalam persentase dan batasan vertikal harus ditentukan sehingga konten utama di tengah dapat diregangkan untuk mengisi area yang tersedia.
Menambahkan nilai melalui tata letak dan praktik desain adaptif
Saat mendesain untuk tata letak adaptif di layar bulat, tampilan scroll dan tampilan non-scroll masing-masing memiliki persyaratan unik untuk menskalakan elemen UI dan mempertahankan tata letak dan komposisi yang seimbang.
Gambar berikut adalah saran umum; contoh hanya untuk tujuan ilustrasi. Lihat setiap halaman komponen atau platform untuk mendapatkan panduan yang mendetail, kontekstual, dan responsif.

Tata letak responsif memungkinkan lebih banyak chip, lebih banyak kartu, lebih banyak baris teks, dan lebih banyak tombol untuk dimuat di satu layar

Gunakan tata letak baru, yang diterapkan pada titik henti sementara ukuran layar yang ditentukan, untuk memungkinkan pengenalan konten baru jika memungkinkan, sehingga memberi pengguna nilai tambahan di perangkat dengan ukuran layar yang lebih besar.

Gunakan ruang layar tambahan untuk menyediakan penampung yang lebih besar, teks yang lebih besar, cincin yang lebih tebal, dan visualisasi data yang lebih terperinci untuk memberikan visibilitas yang lebih baik bagi pengguna.

Gunakan ruang layar tambahan untuk memberikan target ketuk yang lebih besar, hierarki visual yang lebih besar, dan ruang tambahan di antara item konten untuk membuat antarmuka lebih mudah dan lebih nyaman untuk berinteraksi.

Gunakan komponen dan template yang telah diperbarui untuk menawarkan tampilan dan nuansa yang lebih baik untuk UI di semua ukuran layar.
Kualitas aplikasi

Pedoman kualitas kami disusun ke dalam tiga tingkat. Berikan pengalaman terbaik untuk pengguna Anda dengan memenuhi pedoman di ketiga tingkat.
Siap untuk semua ukuran layar |
Responsif dan dioptimalkan |
Adaptif dan terdiferensiasi |
Menggunakan tata letak kanonis yang sudah ada

Gunakan tata letak kanonis yang sudah ditetapkan untuk membantu UI Anda beradaptasi dengan lancar di berbagai ukuran perangkat.
Tata letak kanonis kami telah dikembangkan dengan cermat untuk menawarkan pengalaman berkualitas tinggi di semua ukuran layar.