Gaya

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

Warna

Menggunakan warna untuk mengekspresikan gaya dan menyampaikan makna. Menetapkan warna yang sesuai untuk warna widget Anda sangat penting untuk keterbacaan, personalisasi, dan yang mengekspresikan identitas brand aplikasi Anda.

Menggunakan peran dan token warna Material untuk memenuhi panduan kontras aksesibilitas dan mendukung fitur warna dinamis, seperti warna yang dibuat pengguna dan gelap atau tema 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. Cara ini memberikan konsistensi visual di seluruh beragam {i>widget<i}, ikon layar utama, dan wallpaper, yang menawarkan pengalaman pengguna yang lebih kohesif. Penggunaan token warna yang disediakan memastikan widget akan terlihat terintegrasi di seluruh tema perangkat yang disediakan oleh perangkat yang berbeda-beda produsen 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 menampilkan sebagian besar gelap warna permukaan. Pengguna makin sering beralih ke mode gelap untuk mendapatkan pengalaman yang lebih baik daya tahan baterai dan kenyamanan mata. Jika widget Anda tidak beradaptasi dengan mode gelap, akan tampak tidak pada tempatnya dan dapat berpotensi membuat pengguna frustrasi.

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

Tipografi

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

Hierarki

Hierarki dikomunikasikan melalui perbedaan dalam ketebalan {i>font<i}, ukuran, tinggi baris, dan spasi huruf. Jenis huruf yang diperbarui mengatur gaya teks menjadi lima peran yang diberi nama untuk menggambarkan tujuannya. Kelima gaya teks adalah {i>display<i}, {i>headline<i}, judul, {i>subtitle<i}, dan isi. Peran baru ini tidak bergantung pada perangkat, sehingga memungkinkan aplikasi yang lebih mudah untuk berbagai kasus penggunaan.

Gambar 3: Widget yang menunjukkan penggunaan berbagai skala jenis.