Sistem warna Ekspresif Wear Material 3 menggunakan tiga lapisan aksen (primer, sekunder, tersier) untuk komponen utama dan dua lapisan permukaan netral. Setiap peran menawarkan berbagai nilai dengan kontras yang konsisten, sehingga memungkinkan kombinasi warna yang ekspresif namun mudah diakses untuk pengalaman terpadu di seluruh tema.
Apa yang dimaksud dengan peran warna?
Peran warna seperti "angka" di kanvas gambar menurut nomor. Garis-garis ini adalah jaringan penghubung antara elemen UI dan warna yang digunakan.
- Peran warna dipetakan ke komponen Material: Anda akan menggunakan peran warna ini baik saat menggunakan skema dasar bawaan statis maupun warna dinamis. Jika produk Anda berisi komponen kustom, komponen tersebut harus dipetakan dengan benar ke kumpulan peran warna ini.
- Peran warna mendukung aksesibilitas: Sistem warna dibuat berdasarkan pendampingan warna yang lebih mudah diakses. Pasangan warna ini memberikan kontras warna minimum 3:1.
- Peran warna ditokenisasi: Peran diimplementasikan dalam desain dan kode melalui token. Token desain mewakili keputusan desain kecil yang dapat digunakan kembali dan merupakan bagian dari gaya visual sistem desain.
Istilah penting
Berikut adalah istilah kunci yang akan Anda lihat dalam nama peran warna:
- Permukaan: Peran yang digunakan untuk latar belakang dan area layar yang besar dan tidak terlalu penting.
- Primer, Sekunder, Tersier: Peran warna aksen yang digunakan untuk menekankan atau menguraikan elemen latar depan.
- Penampung: Peran yang digunakan sebagai warna isi untuk elemen latar depan seperti tombol. Warna ini tidak boleh digunakan untuk teks atau ikon.
- Aktif: Peran yang dimulai dengan istilah ini menunjukkan warna untuk teks atau ikon di atas warna induk yang disambungkan. Misalnya, on primary digunakan untuk teks dan ikon dengan warna isi utama.
- Varian: Peran yang diakhiri dengan istilah ini menawarkan alternatif dengan penekanan yang lebih rendah dari pasangan non-variannya. Misalnya, varian garis batas adalah versi warna garis batas yang kurang ditekankan.
Peran utama
Peran utama digunakan untuk komponen utama di seluruh UI, seperti tombol Tepi yang Mengikuti, tombol yang menarik, status aktif, dan ikon pada gaya tombol tonal.
Utama
- Primer
- Di Primer
Gunakan peran Utama untuk tindakan terpenting di UI, seperti tombol utama atau pesan ajakan (CTA). Warna ini harus terlihat jelas dan langsung dapat dikenali untuk memandu pengguna ke interaksi utama.
Primary-Dim
- Primary-Dim
- Di Primer
Peran dimensi biasanya digunakan untuk elemen yang perlu dibedakan secara visual dari tindakan utama, tetapi tidak memerlukan perhatian atau interaksi pengguna secara langsung.
Primary-Container
- Primary-Container
- On-Primary-Container
Terapkan Penampung Utama untuk elemen latar belakang seperti kartu atau modal untuk menandai bagian atau status yang dipilih. Hal ini membantu menarik perhatian ke konten penting atau aktivitas yang sedang berlangsung dalam UI.
Peran sekunder
Peran sekunder digunakan untuk komponen utama di seluruh UI, yang tidak sesentral peran utama, tetapi tetap perlu terlihat. Primer dan sekunder dapat digunakan bersama dalam tata letak untuk menciptakan diferensiasi dan fokus.
Sekunder
- Sekunder
- Di Sekunder
Gunakan peran Sekunder untuk mendukung tindakan di area dengan UI yang padat, seperti tombol sekunder atau tindakan pelengkap. Hal ini mempertahankan visibilitas tanpa menghalangi elemen utama dalam tata letak yang kompleks.
Secondary-Dim
- Secondary-Dim
- Sekunder
Peran Secondary-Dim menawarkan kontras yang redup untuk elemen pasif di area yang padat. Warna ini melengkapi warna sekunder sekaligus menambahkan kedalaman yang halus, sehingga UI tetap bersih dan membantu pengguna menavigasi.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Terapkan Secondary-Container untuk mengatur elemen sekunder dalam tata letak yang padat. Hal ini membuat struktur dan pemisahan, memastikan konten sekunder dapat dibedakan tetapi tidak dominan.
Peran tersier
Peran tersier digunakan untuk aksen kontras guna menyeimbangkan warna primer dan sekunder atau memberikan perhatian tinggi pada elemen seperti kolom input. Peran tersier juga dapat membantu menunjukkan kapan konten berubah atau harus terlihat menarik, seperti saat sasaran tercapai.
Tersier
- Tersier
- Tersier
Peran Tersier digunakan untuk menarik perhatian ke elemen utama. Peran tersier sangat efektif untuk komponen yang perlu tampil beda, seperti badge, stiker, atau elemen tindakan khusus.
Tertiary-Dim
- Tertiary-Dim
- Tersier
Gunakan peran Dimensi Tersier untuk tombol atau tindakan yang terkait dengan tindakan tertier, tetapi tidak memerlukan fokus langsung.
Tertiary-Container
- Tertiary-Container
- Di-Penampung-Tersier
Terapkan Penampung Tersier untuk latar belakang yang mengelompokkan konten terkait tersier, seperti koleksi badge atau stiker. Desain ini menekankan elemen tersier sekaligus mempertahankan keseimbangan dan struktur di UI.
Peran semantik
Error-Merah digunakan untuk menunjukkan masalah serius seperti error, hapus, dan apa pun yang terkait dengan keadaan darurat. Fitur ini dirancang untuk menarik perhatian langsung ke masalah atau peringatan, sehingga memastikan pengguna dapat dengan cepat mengidentifikasi area yang memerlukan tindakan korektif. Nuansa Error-Red harus mempertahankan kontras yang memadai dengan latar belakang untuk memenuhi standar aksesibilitas, memastikan warna tersebut terlihat jelas dan dapat dibedakan dari warna status lainnya seperti peringatan atau pesan sukses.
Error
- Error
- Saat Error
Merah semantik, tetapi sedikit diwarnai tema, yang menunjukkan tindakan hapus, hapus, tutup, atau tutup, seperti Geser untuk Menampilkan. Ditambahkan sebagai alternatif penampung yang sedikit kurang mengkhawatirkan dan mendesak daripada warna error-dim.
Error-Dim
- Error-Dim
- Saat Error
Merah semantik, tetapi sedikit diwarnai tema, yang menunjukkan error prioritas tinggi atau tindakan darurat, seperti pemberitahuan keselamatan, overlay dialog yang gagal, atau tombol berhenti.
Error-Container
- Error-Container
- On-Error-Container
Warna penampung yang kurang mencolok, untuk komponen yang menggunakan status error. Juga dapat menunjukkan status error aktif yang terasa kurang interaktif daripada status terisi, seperti tombol atau kartu berbagi darurat aktif, atau pada dialog overlay yang gagal.
Penampung dan elevasi permukaan
Penampung platform adalah kunci dalam menentukan kedalaman dan elevasi dalam UI, memberikan struktur dan hierarki melalui warna, membantu membedakan komponen berdasarkan kepentingan dan interaksinya.
Surface-Container-Low
- Permukaan-Penampung-Rendah
- Di Platform
- On-Surface-Variant
Sangat cocok untuk penampung yang diperluas yang perlu berada di bawah Penampung Permukaan, seperti kartu yang diperluas di Notifikasi. Dapat juga digunakan untuk kartu non-interaktif, dengan konten yang masih mendapatkan manfaat dari pembatasan.
Surface-Container
- Surface-Container
- Di Platform
- On-Surface-Variant
Warna penampung default untuk sebagian besar elemen. Komponen ini memberikan elevasi yang netral dan moderat, sehingga cocok untuk komponen UI umum.
Surface-Container-High
- Permukaan-Penampung-Tinggi
- Di Platform
- On-Surface-Variant
Ideal untuk komponen dengan penekanan tinggi yang perlu berada di atas, atau dalam kombinasi dengan Penampung Permukaan. Warna ini membantu memberikan fokus dan hierarki ke area kritis di UI.