Menggunakan warna untuk mengekspresikan gaya dan menyampaikan makna. Menetapkan warna aplikasi dapat menjadi hal yang sangat penting untuk personalisasi, menentukan tujuan semantik, dan tentu saja menentukan identitas merek.
Takeaway
- Untuk memastikan aksesibilitas:
- Periksa kontras warna dan hindari memasangkan warna dengan tone yang mirip.
- Pertimbangkan bahwa merah dan hijau adalah pola yang umum, tetapi juga tidak dapat diakses oleh pengguna yang memiliki jenis kebutaan warna tertentu.
- Berlatih menggunakan warna dengan bermakna: Aplikasi dapat terlihat cerah dan ekspresif, tetapi tetap pada palet warna. Memperluas skema dengan terlalu banyak warna semantik bisa membingungkan, sedangkan memiliki terlalu banyak warna dekoratif bisa membuat kewalahan.
- Warna dapat memiliki pola, jadi ulangi pola warna yang sudah ditetapkan. Jika menggunakan warna semantik di aplikasi Anda, gunakan warna yang konsisten.
- Agar aplikasi Anda berfungsi dengan baik dalam konteks yang berbeda, buat skema warna terang dan gelap (dan idealnya tema yang kontras).
- Menetapkan warna dengan token untuk menunjukkan peran warna elemen, bukan menggunakan nilai hardcode.
- Warna dapat berasal dari berbagai sumber dinamis dan statis, tetapi hindari pencampuran terlalu banyak dalam tampilan yang sama.
- Saat menggunakan warna konten dinamis, cobalah untuk menghindari pengambilan warna dari beberapa bagian konten.
Ruang warna di Android
Untuk memahami dengan baik cara Android menerapkan warna pada UI, penting untuk mengenali cara warna tersebut ditampilkan di perangkat terlebih dahulu.
Tampilan warna di perangkat
Aplikasi Anda ditampilkan di layar dengan lampu latar, yang menggunakan warna digital serta mematuhi model dan aturan tertentu yang membantu mata melihat warna tersebut. Warna digital adalah warna aditif, yang dibuat dengan "menambahkan" atau mencampur berbagai cahaya untuk membuat spektrum warna penuh. Cara manusia melihat warna dari satu layar ke layar lainnya dapat sangat bervariasi, bergantung pada kalibrasi warna perangkat, jenis layar, setelan, dan ruang warna.
Saat mendesain aplikasi, perhatikan bahwa warna yang digunakan mungkin tidak sama karena faktor-faktor ini, belum lagi persepsi warna unik dari setiap pengguna.
Tentang ruang warna
Ruang warna adalah organisasi warna yang menggunakan model warna. RGB adalah model warna tambahan yang menciptakan spektrum warna melalui merah, hijau, dan biru, sedangkan CMYK, yang digunakan untuk pencetakan, bersifat subtraktif. Karena alasan ini, desainer interaktif biasanya menggunakan RGB atau model serupa untuk memilih warna.
Material 3 (M3) memperkenalkan HCT, ruang warna baru yang menggunakan rona, kroma, dan nada untuk menentukan warna yang akurat secara persepsi dibandingkan dengan model lain seperti HSL
Untuk mempelajari ilmu warna dan pengembangan HCT lebih lanjut, baca Ilmu Warna & Desain.
Rona, kroma, dan rona
HCT memungkinkan penggunaan warna yang lebih dipersonalisasi dan fleksibel yang tetap berada dalam parameter sistem. Warna model HCT menggunakan rona, kroma, dan tone:
- Hue: Rona serupa dengan kata sifat yang mungkin digunakan pengguna individu untuk menjelaskan warna, misalnya, "merah" atau "ungu elektrik". Nilai HCT hue berkisar dari 0–360.
- Kroma: Kroma mewakili warna yang cerah, mulai dari abu-abu netral hingga keceriaan penuh. Dalam ruang warna HCT, kroma memiliki nilai maksimum sekitar 120.
- Nuansa: Tone adalah luminans atau kecerahan warna. HCT menggunakan nada untuk menciptakan kontras. Warna yang disetel ke nilai tone yang sama tidak dapat diakses untuk konteks aksesibilitas tertentu. Tone dengan nilai yang lebih rendah akan lebih gelap, dan tone dengan nilai yang lebih tinggi akan lebih cerah.
Proses sistem warna
Warna M3 dibuat berdasarkan model HCT untuk mendapatkan skema warna yang dapat diakses yang harmonis dan membantu fitur warna dinamis. Sistem warna M3 dimulai dari warna sumber. Warna sumber ini diterjemahkan ke dalam lima warna utama: varian primer, sekunder, tersier, netral, dan netral. Kelima warna utama ini membuat palet tonal yang terdiri dari peningkatan tone untuk setiap warna utama.
Jika Anda menetapkan warna tombol secara manual, perhatikan kroma dan tone inputnya, karena tone warna mungkin bukan nilai tonal peran warna.
Sistem warna M3 didukung oleh Material Color Utilitas (MCU), sekumpulan library warna yang berisi algoritma dan utilitas yang mempermudah Anda mengembangkan tema dan skema warna di aplikasi.
Video berikut menjelaskan cara mendapatkan skema warna.
Batasan warna
Batasan warna adalah batas fisik warna—baik itu fisika yang sebenarnya, batasan visual biologis kita sendiri, atau batasan rendering warna di layar. Misalnya, beberapa hulu tidak bisa ada dengan kroma atau warna tertentu. Batasan warna adalah alasan warna seperti biru muda atau merah terang tidak terlalu memungkinkan. Pemetaan warna tone harus konsisten di semua nilai hue.
Gambar sebelumnya menunjukkan tiga diagram pemetaan tone yang berbeda untuk nilai hue H105, H25, dan H285.
Diagram 1–hue 105 (kuning). Menunjukkan ketersediaan warna. {i>Chroma<i} dan {i>Tone<i} bekerja seperti grafik. Rona kuning memiliki kroma terbatas dengan nada tertentu di sepanjang grafik, kuning tidak memiliki rentang kecerahan pada rona yang lebih rendah.
Diagram 2–rona 25 (merah). Menampilkan lebih banyak opsi kromatik daripada hue 105 (kuning). Dalam peta nuansa ini, titik warna tertinggi berada pada level nada yang lebih rendah.
Diagram 3–hue 285 (biru). Menunjukkan bahwa warna tertinggi ditemukan pada nada yang lebih gelap. Di sisi lain, kapasitas kroma hilang pada nada yang lebih terang.
Skema warna
Skema warna adalah kumpulan aksen dan permukaan yang berasal dari nada tertentu dan ditetapkan ke peran warna, yang kemudian dipetakan ke elemen dan komponen UI. Peran warna mengacu pada penggunaan warna, bukan rona warna. Misalnya, on-primary, bukan on-blue.
Skema warna dirancang untuk menjadi harmonis, memastikan teks yang mudah diakses, serta membedakan elemen UI dan platform satu sama lain. Pasangan peran warna (terdiri dari peran container dan on-container) memiliki nilai tonal yang memberikan kontras yang dapat diakses.
Skema terang dan gelap dibuat dan memiliki penetapan nada khusus.
Sistem warna Material dan skema kustom menyediakan nilai default untuk warna sebagai titik awal penyesuaian.
Pelajari sistem warna M3 lebih lanjut.
Untuk skema warna yang dapat disesuaikan, pelajari Kit UI Android.
Menerapkan warna ke UI Anda
Warna UI terdiri dari warna aksen, semantik, dan permukaan.
- Warna aksen mengacu pada warna inti yang biasanya merupakan bagian dari palet warna merek Android.
- Warna semantik (atau warna kustom dalam Material 3), adalah warna dengan makna tertentu.
- Warna permukaan mengacu pada warna turunan netral yang digunakan untuk warna latar belakang.
Warna aksen
Warna aksen biasanya menunjukkan paling ekspresif dalam UI, baik untuk branding, menyoroti tindakan, ekspresi pribadi, atau ekspresi pengguna.
Setiap warna aksen (primer, sekunder, dan tersier) disediakan dalam grup yang terdiri dari empat hingga delapan warna kompatibel dengan berbagai warna untuk penyambungan, penentuan penekanan, dan ekspresi visual.
Warna dinamis
Warna aksen dapat ditentukan dari sumber dinamis.
Mulai Android 12 (level API 31), warna dinamis memungkinkan sistem mengekstrak warna sumber dari wallpaper atau konten dalam aplikasi pengguna, seperti aset keyart. Warna dinamis menggunakan algoritma dan proses MCU untuk membuat skema dan menerapkannya dengan sedikit upaya. Untuk menerapkan warna dinamis pada aplikasi Anda, baca Memungkinkan pengguna mempersonalisasi pengalaman warna mereka di aplikasi Anda.
Coba codelab untuk Memvisualisasikan warna Dinamis untuk tampilan langsung pada warna dinamis.
Statis
Skema statis adalah skema yang memiliki nilai yang tidak berubah (atau relatif). Cara umum untuk membuat skema statis adalah dengan menggunakan warna merek, menyelaraskan warna primer, sekunder, dan tersier dengan palet warna utama merek.
Meskipun Anda menggunakan warna dinamis, sebaiknya buat skema statis sebagai penggantian jika warna dinamis tidak tersedia untuk perangkat pengguna. Jika tidak, sistem akan menggunakan skema warna ungu bawaan.
Dengan Material Theme Builder, Anda dapat menerapkan algoritma warna MCU untuk membuat tema kustom yang statis. Cara ini akan menghasilkan warna yang Anda pilih, tetapi sesuai dengan token sistem warna M3 dan prinsip aksesibilitas yang harmonis.
Anda masih dapat membuat skema statis yang disesuaikan sepenuhnya. Untuk melakukannya,
tetapkan nilai yang berbeda dalam gaya warna (color.kt atau color.xml), atau
ekspor file tema dari Material Theme Builder untuk Figma setelah memperbarui
properti gaya Figma.
Penggunaan
Komponen material telah menetapkan peran warna sebelumnya, tetapi Anda dapat menggunakan token warna di seluruh elemen UI dan kustom. Gunakan semua warna aksen dengan penuh pertimbangan, dengan mempertimbangkan bahwa mata manusia tertarik pada warna-warna cerah.
Seperti jenisnya, sistem menerapkan warna dalam hierarki, dengan warna primer dan peran masing-masing yang ditetapkan ke pesan ajakan (CTA) penting. Kami merekomendasikan komponen seperti tombol tindakan mengambang (FAB) untuk mengambil peran utama.
Saat memilih warna primer, sebaiknya tetapkan warna primer merek Anda. Atau, Anda dapat memilih warna untuk merepresentasikan komponen interaktif, sehingga warna merek Anda dapat digunakan dengan lebih hemat. Warna sekunder dan tersier melanjutkan hierarki dalam menyoroti tingkat kepentingan.
Tampilan yang terlalu jenuh dapat menyebabkan penggunaan hanya peran warna dasar primer, sekunder, atau tersier. Untuk membantu hierarki warna, terapkan skema warna untuk menyertakan warna container dan peran garis batas yang kurang cerah.
Untuk memastikan pengalaman pengguna yang lebih baik, gunakan warna primer yang lebih cerah untuk menandakan tindakan yang lebih menonjol dalam hierarki visual aplikasi Anda. Pada gambar berikut, FAB pada gambar pertama memiliki warna redup dengan tone dan kroma yang sama dengan navigasi, sehingga membuatnya menyatu. Gambar kedua menunjukkan FAB yang lebih menarik perhatian ke dirinya sendiri dengan warna primer yang cerah.
Untuk melihat warna dinamis secara langsung, coba codelab untuk Menyesuaikan warna Material.
Warna semantik
Warna semantik adalah warna yang telah menetapkan arti tertentu. Misalnya, Error adalah warna semantik.
Konsisten dengan makna warna–jika Anda menetapkan pola, ulangi di seluruh aplikasi. Misalnya, jika Anda telah menetapkan warna ungu untuk menunjukkan fitur keanggotaan, gunakan warna ungu untuk semua instance fitur keanggotaan ini.
Dalam contoh berikut, aplikasi menggunakan warna merah untuk menunjukkan error di satu kolom teks, tetapi ungu untuk kolom lainnya–hal ini akan menyebabkan kebingungan saat membaca sekilas formulir.
Meskipun skema warna Material menyediakan warna error semantik, warna semantik tambahan dibuat melalui warna kustom untuk memperluas skema warna. Baca selengkapnya tentang warna kustom.
Harmonisasi menyediakan cara untuk menyelaraskan warna dinamis buatan pengguna dengan warna kustom dalam aplikasi Anda untuk membuat palet warna yang lebih harmonis.
Warna permukaan
Warna permukaan didesain untuk elemen latar belakang seperti penampung komponen, sheet, dan panel, serta mewakili sebagian besar warna aplikasi Anda. Jangan malu menggunakan banyak ruang permukaan; mata manusia membutuhkan ruang untuk santai. Permukaan juga membantu menyertakan konten dan mengarahkan pembaca.
M3 memperkenalkan konsep permukaan tonal, yang berarti semua warna berasal dari palet tonal. Nada menciptakan kedalaman dan kontras yang lebih dalam membantu aksesibilitas. Untuk mengetahui informasi selengkapnya tentang peran platform, lihat panduan peran platform M3.
Aksesibilitas dan warna
Orang melihat warna dengan berbagai cara, tergantung ketajaman visual mereka. Karena beberapa pembaca buta warna, Anda perlu memeriksa kombinasi warna untuk memastikan elemen UI tidak menyatu. Meskipun opasitas dan ketebalan mungkin bukan hue literal dari warna, keduanya memiliki efek visual yang kuat pada cara pengguna mempersepsi warna.
Kontras warna adalah perbedaan antara luminans elemen latar depan dan latar belakang, yang ditampilkan dalam format rasio. Kriteria rasio ini diberi nilai. Misalnya, mengukur kontras antara teks pada tombol dan penampungnya membantu menentukan keterbacaan teks. Panduan kontras warna dibagi menjadi teks dan non-teks, masing-masing dengan kumpulan nilainya sendiri. Baca Mendesain dengan warna yang dapat diakses untuk detail selengkapnya.
Jangan pernah menjadikan warna sebagai satu-satunya kemampuan atau indikator untuk tindakan yang tersedia. Manfaatkan tombol komponen, perubahan ketebalan font, atau bahkan ikon untuk membantu memberi tahu pengguna bahwa mereka dapat berinteraksi dengan elemen.
Mengimplementasikan warna
Token adalah representasi semantik variabel kecil dari data desain. Nilai ini dapat diulang dan menggantikan nilai statis, seperti kode heksadesimal untuk warna, dengan nama yang mudah dipahami. Untuk menetapkan peran warna elemen, gunakan token, bukan nilai warna hard code.
Lihat contoh Now in Android Figma untuk contoh pemetaan peran warna.
Nilai warna ditetapkan dalam file warna color.kt menggunakan Compose (atau
color.xml menggunakan View). Warna ini ditetapkan sebagai gaya adalah bagian dari
tema. Lihat selengkapnya tentang hal ini di Mendesain untuk tema seluler Android.
Untuk menetapkan nilai warna di Android, gunakan kode heksadesimal, yang mewakili RGB dalam format 6 digit. Untuk menangkap opasitas, tambahkan nilai ke bagian depan untuk membuat kode 8 digit.
Menggunakan Material Theme Builder:
Anda dapat membuat skema warna terang dan gelap yang disesuaikan menggunakan Material Theme Builder (MTB).
MTB memungkinkan Anda memvisualisasikan warna dinamis, membuat token Desain material, dan menyesuaikan skema warna Anda.
Skema warna dapat disesuaikan sepenuhnya dengan memperbarui properti gaya di dalam panel Figma Inspector. Nilai yang diubah ini akan diekspor.
