Gaya

Menata gaya widget secara efektif sangat penting untuk mencapai pengalaman pengguna yang menarik secara visual dan konsisten. Bagian ini mendalami konsep dan teknik utama untuk menentukan warna dan tipografi guna membuat widget Android yang paling bermanfaat dan menarik.

Warna

Menggunakan warna untuk mengekspresikan gaya dan menyampaikan makna. Menetapkan warna yang tepat untuk warna widget Anda sangat penting untuk keterbacaan, personalisasi, dan tentu saja untuk mengekspresikan identitas merek aplikasi Anda.

Gunakan token dan peran warna Material untuk memenuhi panduan kontras aksesibilitas dan mendukung fitur warna dinamis, seperti warna buatan pengguna dan tema gelap atau terang.

Untuk informasi selengkapnya, lihat Panduan warna Desain Material.

Tema dinamis

Mulai Android 12, widget dapat menggunakan warna tema perangkat untuk tombol, latar belakang, dan komponen lainnya. Hal ini memberikan konsistensi visual di berbagai widget, ikon layar utama, dan wallpaper, sehingga menawarkan pengalaman pengguna yang lebih kohesif kepada pengguna Android. Menggunakan token warna yang disediakan memastikan widget Anda akan terlihat terintegrasi di seluruh tema perangkat yang disediakan oleh berbagai produsen perangkat dan tema dinamis yang ditetapkan oleh pengguna.

Gambar 1: Gambar widget dengan token warna yang dipanggil.

Mode terang dan gelap

Mode gelap adalah versi cahaya redup dari UI perangkat yang sebagian besar menampilkan warna permukaan gelap. Pengguna semakin sering beralih ke mode gelap untuk mendapatkan masa pakai baterai dan kenyamanan mata yang lebih baik. Jika tidak beradaptasi dengan mode gelap, widget Anda akan muncul tidak pada tempatnya dan berpotensi membuat pengguna kesal.

Gambar 2: Widget dalam mode terang pada layar kiri dan gelap di layar kanan.

Tipografi

Tipografi membantu membuat tulisan dapat dibaca dan indah. Manfaatkan ukuran dan bobot font untuk menetapkan hierarki yang jelas, yang memandu mata pengguna ke elemen yang paling penting. Perhatikan spasi baris dan spasi huruf (kerning) untuk meningkatkan keterbacaan, terutama untuk tampilan teks yang lebih kecil dalam ruang widget yang dibatasi.

Hierarki

Hierarki dikomunikasikan melalui perbedaan ketebalan, ukuran, tinggi baris, dan spasi huruf. Skala jenis yang diperbarui mengatur gaya teks ke dalam lima peran yang diberi nama untuk mendeskripsikan tujuannya. Kelima gaya teks tersebut adalah tampilan, judul, judul, sub judul, dan isi. Peran baru ini tidak bergantung pada perangkat, sehingga memungkinkan aplikasi yang lebih mudah di berbagai kasus penggunaan.

Gambar 3: Widget yang menunjukkan penggunaan berbagai skala jenis.