Halaman ini diterjemahkan oleh Cloud Translation API.

Warna

Landasan strategi warna Android Automotive OS adalah gagasan "membangun dari hitam." Mendasarkan warna antarmuka pada hitam menghasilkan pengalaman pengguna yang lebih konsisten, tanpa perubahan drastis antara tema siang dan malam.

Menggunakan warna hitam sebagai dasar juga memastikan keselarasan yang lebih baik dengan perangkat keras, karena material gelap sering digunakan di interior dan dasbor mobil.

Panduan singkat (TL;DR)

Mulailah dengan pilihan warna hitam untuk mendukung aktivitas berkendara siang dan malam.
Pertahankan rasio kontras minimal 4,5:1 antara latar belakang dan ikon atau teks.

Gunakan warna seminimal mungkin, dengan tujuan yang jelas.
Tampilkan ketinggian melalui skala abu-abu
Gunakan transparansi dan opasitas untuk memandu fokus visual.

Palet dan gradien

Tema gelap antarmuka Android Automotive OS didasarkan pada palet skala abu-abu. Idealnya, warna tambahan apa pun harus memiliki intensitas yang dikurangi, seperti pada varian gelap warna dalam palet Material Design.

Bagian ini mencakup informasi palet warna dan opasitas, beserta grafik yang menyediakan nilai skala abu-abu untuk tingkat elevasi yang terkait dengan setiap komponen.

Desain Material

Penggunaan warna dan palet warna

Palet skala abu-abu Android Automotive OS

Palet warna abu-abu Android Automotive OS digunakan untuk elemen-elemen seperti teks dan ikon, dan dirancang untuk mengakomodasi kebutuhan unik lingkungan berkendara.

Palet warna ini harus cukup beragam agar:

Mencakup semua berbagai kasus penggunaan UI tema gelap.
Berikan rentang yang cukup untuk mendefinisikan hierarki melalui perbedaan nada.

palet warna abu-abu — Palet skala abu-abu ini adalah palet warna utama untuk Android Automotive OS, yang mendukung tema gelap antarmuka.

Perbedaan tonal menciptakan ilusi kedalaman bahkan pada latar belakang hitam pekat di mana bayangan tidak terlihat. Untuk memberikan perbedaan tonal yang cukup, palet skala abu-abu Android Automotive OS mencakup warna abu-abu menengah. Warna abu-abu Material Design mulai dari Abu-abu 900 mendekati warna yang lebih terang terlalu cepat; warna dua tingkat lebih terang adalah Abu-abu 700, yang terlalu terang untuk konteks otomotif.

Bagan elevasi komponen — Bagan ini menunjukkan tingkat ketinggian tempat berbagai komponen berada. Setiap tingkat ketinggian memiliki nilai abu-abu yang terkait.

Tingkat elevasi skala abu-abu mode siang dan malam — Bagan ini menunjukkan nilai abu-abu yang terkait dengan berbagai tingkat ketinggian dalam mode siang dan malam.

Warna aksen

Selain palet warna abu-abu yang menjadi inti antarmuka Android Automotive OS, warna lain dapat digunakan secara terbatas untuk tujuan seperti menarik fokus.

Saat ini, Android Automotive OS memiliki satu warna aksen resmi, yaitu warna biru yang disebut dalam pustaka dukungan sebagai "aksen mobil". Untuk meningkatkan saturasi dan kecerahan, warna biru ini sedikit digeser dari warna biru standar Google. Pergeseran ini membantu warna agar terlihat lebih serasi pada permukaan yang gelap.

Warna biru "aksen mobil" pada Android Automotive OS lebih jenuh daripada warna biru standar Google, dirancang agar berfungsi dengan baik pada antarmuka bertema gelap baik saat berkendara siang maupun malam hari.

Bagan nilai opasitas

Transparansi memberikan kesan kedalaman dan memperkuat model spasial Material Design. Untuk menggunakan transparansi secara efektif, pilih nilai opasitas gelap atau putih berdasarkan kebutuhan Anda.

Nilai opasitas gelap

Penggunaan paling umum untuk nilai opasitas gelap adalah untuk membuat scrim (lapisan transparan).

Nilai opasitas hitam untuk lapisan overlay

Nilai opasitas putih

Nilai-nilai ini sebagian besar digunakan pada teks. Nilai-nilai ini sangat efektif terutama jika latar belakangnya berwarna. Menggunakan warna abu-abu pekat pada latar belakang berwarna gelap akan terlihat terlalu buram.

Untuk contoh cara menggunakan opasitas pada scrim dan hierarki teks, lihat Panduan dan contoh .

Kontras

Untuk memenuhi pedoman keselamatan dasar Android Automotive OS, rasio kontras antara latar belakang dan ikon atau teks minimal harus 4,5:1. Untuk detail tentang bagaimana rasio kontras berlaku untuk elemen UI otomotif tertentu, lihat Membuat konten mudah dibaca .

Contrast do — Pastikan kontras memenuhi rasio minimum 4,5:1 untuk semua konten yang mudah dibaca dan bermanfaat.

Kontras tidak — Jangan biarkan kontras turun di bawah 4,5:1, karena akan mengurangi keselamatan pengemudi.

Panduan dan contoh

Antarmuka pengguna gelap Android Automotive OS bersih dan sederhana, dengan penggunaan warna minimal. Selain menggunakan warna, nada, dan nilai opasitas yang tepat untuk elemen UI (lihat Palet dan gradien ), penting untuk memastikan setiap penggunaan warna dan gradien warna memiliki tujuan.

Bagian ini memberikan panduan dan contoh penerapan transparansi, opasitas, dan warna untuk mencapai berbagai tujuan. Tujuan-tujuan tersebut meliputi:

Mengaburkan latar belakang
Menjaga konsistensi
Membangun hierarki visual yang mengarahkan fokus pengguna ke tindakan utama.
Membedakan entitas dalam sebuah daftar

Menutupi latar belakang dengan kain kasa

Lapisan penutup layar penuh (overlay) digunakan untuk menutupi latar belakang di balik elemen-elemen yang mengganggu, seperti dialog yang mengharuskan pengguna untuk melakukan suatu tindakan. Lapisan penutup sebagian digunakan untuk menarik perhatian pada transisi elemen-elemen seperti notifikasi.

Sesi latihan penuh dalam mode siang hari — Layar penuh (di balik kartu dialog) dalam mode siang

Sesi latihan penuh dalam mode malam — Layar penuh (di belakang kartu dialog) dalam mode malam

Sesi latihan parsial dalam mode siang hari — Scrim parsial (di balik pemberitahuan) dalam mode siang hari

Layar sebagian dalam mode malam — Layar sebagian (di balik notifikasi) dalam mode malam

Menjaga konsistensi warna

Warna adalah isyarat yang ampuh untuk memperkuat memori dan pengenalan. Gunakan warna untuk menciptakan pengalaman yang koheren dari satu layar ke layar lainnya.

Pengenalan warna visual — Pertahankan kesinambungan visual dengan menggunakan warna yang sama untuk suatu item di beberapa tampilan, seperti warna hijau yang digunakan untuk tampilan navigasi langkah demi langkah di sini.

Kontinuitas warna visual — Gunakan warna untuk menghubungkan elemen dan fungsi terkait secara visual, seperti tombol ajakan bertindak (CTA) berwarna merah yang ditampilkan di sini.

Warna aksen aplikasi tetap — Gunakan warna dominan sampul album atau warna yang ditetapkan aplikasi pada elemen terkait sebagai penanda visual yang konsisten. Di sini, lingkaran di sekitar tombol jeda diberi aksen warna hijau Spotify.

Pembatasan penggunaan warna — Jangan menggunakan warna berbeda untuk membedakan komponen yang berulang secara sembarangan dalam satu layar. Berhati-hatilah dalam menggunakan warna jika tidak memberikan nilai tambah – seperti halnya garis luar berwarna di sekitar kartu ringkasan, yang menduplikasi warna ikon aplikasi.

Membangun hierarki visual

Gunakan nilai opasitas putih untuk menciptakan hierarki visual yang konsisten dan kuat. Nilai opasitas 88, 72, dan 56 memiliki kontras yang cukup untuk memenuhi persyaratan aksesibilitas sekaligus menciptakan lingkungan membaca yang nyaman pada latar belakang gelap. Gunakan opasitas 96% pada semua warna putih untuk mode malam.

Contoh opasitas dan kontras untuk mempertahankan hierarki visual. — Gunakan nilai opasitas dan kontras yang berbeda untuk mempertahankan hierarki visual.

Opasitas dan pembatasan kontras — Jangan terlalu sering menggunakan nilai opasitas atau kontras penuh dengan menerapkannya pada terlalu banyak elemen. Kontras dalam nilai opasitas diperlukan untuk membedakan informasi primer dan sekunder.

Warna Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.