Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Warna pada kacamata

Warna mempertimbangkan tampilan, lingkungan, dan kognisi. Warna pada kacamata menggunakan palet yang sangat halus untuk mendukung perilaku tampilan aditif dan mengoptimalkan kenyamanan visual. Penggunaan warna pada kacamata harus digunakan dengan bijak agar selaras dengan dunia nyata, untuk menunjukkan tindakan penting, menampilkan gambar, atau memberikan makna semantik.

Warna hitam transparan pada tampilan optik-tembus pandang. Perhatikan hal ini saat mendesain karena warna yang lebih gelap akan tampak kusam atau transparan, tetapi hal ini juga dapat digunakan untuk membuat kedalaman.

Skema warna

Skema warna kacamata (kumpulan token atau peran warna untuk memberi tema warna aplikasi Anda) terdiri dari 3 peran aksen, 6 peran permukaan (atau netral), dan warna yang sesuai. Peran warna serupa dengan peran skema seluler dan harus digunakan dengan cara yang sama.

Elemen desain harus ditambatkan ke bagian bawah
bingkai.

Warna aksen dapat digunakan untuk warna yang sesuai sebagai penekanan terbatas.

Anjuran

Gunakan teks putih untuk sebagian besar konten teks Anda. Warna font dapat digunakan untuk teks yang ditekankan.

Larangan

Gunakan teks berwarna untuk semua konten.

Sesuaikan warna

Saat menyesuaikan warna untuk kacamata, gangguan visual minimal dan harmonisasi dengan dunia nyata sangat penting, prioritaskan keterbacaan di berbagai kondisi pencahayaan. Kalibrasi warna dengan cermat untuk menyeimbangkan kecerahan dengan saturasi agar dapat langsung dibedakan.

Warna primer dapat disesuaikan untuk menggunakan warna merek atau interaksi primer Anda. Pertimbangkan kontras, saturasi, dan penggunaan daya warna yang dipilih.

Elemen desain harus ditambatkan ke bagian bawah
bingkai.

Warna semantik dan merek yang dioptimalkan

Warna yang mewakili merek, tindakan, atau peringatan sistem harus:

Cukup cerah agar mudah dibaca
Cukup jenuh agar dapat dibedakan sebagai warna
Pastikan setidaknya ada perbedaan nada 66% antara latar depan dan latar belakang menggunakan ruang warna HCT.

Pelajari lebih lanjut tema Jetpack Compose Glimmer.

Penggunaan daya

Beberapa warna menggunakan lebih banyak daya dan menghasilkan lebih banyak panas daripada warna lainnya. Warna hijau adalah warna yang paling hemat daya, sedangkan warna biru adalah warna yang paling boros daya, jika dibandingkan dengan warna dengan nada yang sama seperti yang terlihat di sebelah kanan. Minimalkan jumlah piksel yang Anda nyalakan. Semakin cerah layar, semakin panas tampilan. Jangan mengisi layar dengan warna putih, karena hal ini dapat menyebabkan mitigasi termal.

Anjuran

Perhatikan kontras antara semua latar belakang yang akan ditemui pengguna.

Larangan

Memiliki kontras yang terlalu rendah untuk elemen UI di berbagai latar belakang, hal ini dapat menyebabkan ketegangan mata dan ketidakjelasan.

Agar memiliki kontras yang cukup di setiap latar belakang, Anda harus memiliki perbedaan kontras 70 (7:1) dalam nada warna latar depan dan latar belakang. Anda dapat mengujinya dengan menyetel desain ke mode campuran layar.

Anjuran

Gunakan warna yang tidak terlalu jenuh.

Larangan

Gunakan warna yang terlalu jenuh. Warna tersebut mungkin tidak ditampilkan dengan benar dan mengganggu keterbacaan.

Permukaan yang disesuaikan harus dihindari.

Warna penampung gelap

Penampung umumnya harus berfokus pada menampilkan konten yang ada di dalamnya, tanpa mengganggu:

Permukaan harus berwarna hitam untuk kontras tertinggi.
Permukaan tidak boleh lebih terang dari nada 34% dalam status fokusnya untuk mempertahankan keterbacaan elemen latar depan.
Garis luar harus terlihat tetapi tidak terlalu mencolok.

Anjuran

Gunakan permukaan gelap dan konten cerah.

Larangan

Gunakan permukaan yang cerah atau terisi.

Anjuran

Berikan kontras antara permukaan dan teks. Perkiraan perbedaan nada 66 disarankan untuk diperiksa.

Larangan

Biarkan kontras permukaan dan teks terlalu dekat.

Anjuran

Pastikan Permukaan dan Varian Permukaan memiliki perbedaan nada yang cukup untuk membuat hierarki visual yang diperlukan.

Larangan

Buat Permukaan dan Varian Permukaan terlalu dekat dalam nada (sekitar 20 perbedaan).

Penyesuaian garis luar dapat dilakukan untuk menambahkan branding atau UI ekspresif.

Anjuran

Gunakan warna default. Warna ini telah sangat dioptimalkan untuk tampilan kacamata.

Larangan

Gunakan beberapa warna garis luar.

Peringatan

Berhati-hatilah dan sesuaikan warna kustom antara garis luar status fokus dan default.

Elemen desain harus ditambatkan ke bagian bawah
bingkai. Menyesuaikan fokus garis luar dengan warna biru: sorotan status fokus terdiri dari 2 garis luar, warna diterapkan ke lapisan 2 untuk memberi warna pada status fokus.