Wear Material 3 Expressive renk sistemi, temel bileşenler için üç vurgu katmanı (birincil, ikincil, üçüncül) ve iki nötr yüzey katmanı kullanır. Her rol, tutarlı kontrasta sahip bir dizi değer sunar. Bu sayede, her temada birleşik bir deneyim için etkileyici ancak erişilebilir renk kombinasyonları elde edebilirsiniz.
Renk rolleri nedir?
Renk rolleri, sayılarla boyama kanvasındaki "sayılar" gibidir. Bunlar, kullanıcı arayüzünün öğeleri ile hangi rengin nereye gideceği arasındaki bağlantı dokusudur.
- Renk rolleri, Material bileşenleriyle eşlenir: Statik ana hat şemasını veya dinamik rengi kullanıyor olsanız da bu renk rollerini kullanırsınız. Ürününüzde özel bileşenler varsa bu bileşenlerin bu renk rolü grubuyla düzgün bir şekilde eşlenmesi gerekir.
- Renk rolleri erişilebilirliği destekler: Renk sistemi, daha erişilebilir renk eşleştirmeleri üzerine kuruludur. Bu renk çiftleri en az 3:1 renk kontrastı sağlar.
- Renk rolleri jetonlaştırılır: Roller, tasarıma ve koda jetonlar aracılığıyla uygulanır. Tasarım jetonu, bir tasarım sisteminin görsel tarzının parçası olan küçük, yeniden kullanılabilir bir tasarım kararını temsil eder.
Temel terimler
Renk rollerinin adlarında göreceğiniz temel terimler şunlardır:
- Yüzey: Arka planlar ve ekranın vurgunun düşük olduğu büyük alanları için kullanılan bir roldür.
- Birincil, ikincil, üçüncül: Ön plan öğelerini vurgulamak veya vurgulamamak için kullanılan vurgu rengi rolleri.
- Kapsayıcı: Düğmeler gibi ön plan öğeleri için dolgu rengi olarak kullanılan roller. Metin veya simgelerde kullanılmamalıdır.
- Açık: Bu terimle başlayan roller, eşlenen üst renginin üstündeki metin veya simgelerin rengini belirtir. Örneğin, birincil dolgu renginin üzerine metin ve simgeler eklemek için birincil renk kullanılır.
- Varyant: Bu terimle biten roller, varyant olmayan çiftine kıyasla daha düşük vurgulu bir alternatif sunar. Örneğin, dış çizgi varyantı, dış çizgi renginin daha az vurgulanmış bir sürümüdür.
Birincil roller
Birincil roller, kullanıcı arayüzündeki temel bileşenler için kullanılır (ör. kenarlara yaslanan düğmeler, belirgin düğmeler, etkin durumlar ve tonlu düğme stillerindeki simgeler).
Birincil
- Birincil
- Birincil
Kullanıcı arayüzündeki en önemli işlemler (ör. birincil düğmeler veya harekete geçirici mesajlar) için birincil rolü kullanın. Bu renk, kullanıcıyı önemli etkileşimlere yönlendirmek için öne çıkmalıdır ve anında tanınabilir olmalıdır.
Primary-Dim
- Birincil-Boyut
- Birincil
Karartma rolleri genellikle birincil işlemden görsel olarak farklı olması gereken ancak kullanıcının hemen dikkatini çekmesi veya etkileşim kurması gerekmeyen öğeler için kullanılır.
Primary-Container
- Primary-Container
- On-Primary-Container
Bölümleri veya seçili durumları vurgulamak için kartlar ya da modal pencereler gibi arka plan öğeleri için Birincil Kapsayıcı'yı uygulayın. Kullanıcı arayüzündeki önemli içeriklere veya devam eden etkinliklere dikkat çekmeye yardımcı olur.
İkincil roller
İkincil roller, kullanıcı arayüzündeki temel bileşenler için kullanılır. Bu bileşenler birincil rol kadar önemli olmasa da öne çıkarılmalıdır. Birincil ve ikincil renkler, ayırt edici bir görünüm ve odaklanma oluşturmak için düzenlerde birlikte kullanılabilir.
İkincil
- İkincil
- On-Secondary
Yoğun kullanıcı arayüzüne sahip alanlarda (ör. ikincil düğmeler veya tamamlayıcı işlemler) işlemleri desteklemek için ikincil rolü kullanın. Karmaşık düzenlerdeki birincil öğeleri gölgelemeden görünürlüğü korur.
Secondary-Dim
- Secondary-Dim
- İkincil
İkincil-Karanlık rolü, yoğun alanlarda pasif öğeler için yumuşak bir kontrast sunar. İkincil rengi tamamlarken ince bir derinlik katar, kullanıcı arayüzünü temiz tutar ve kullanıcıların gezinmesine yardımcı olur.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Yoğun düzenlerde ikincil öğeleri düzenlemek için Secondary-Container'ı uygulayın. İkincil içeriğin ayırt edilebilir ancak baskın olmadığından emin olarak yapı ve ayrım oluşturur.
Üçüncül roller
Üçüncül roller, birincil ve ikincil renkleri dengelemek veya giriş alanı gibi bir öğeye daha fazla dikkat çekmek için zıt vurgularda kullanılır. Üçüncül roller, bir hedefe ulaşılması gibi durumlarda içeriğin ne zaman değiştiğini veya öne çıkacağını belirtmeye de yardımcı olabilir.
Üçüncül
- Üçüncül
- Üçüncül
Üçüncül rol, önemli öğelere dikkat çekmek için kullanılır. Üçüncül roller özellikle öne çıkması gereken bileşenler (ör. rozetler, çıkartmalar veya özel işlem öğeleri) için etkilidir.
Üçüncül-Dim
- Üçüncül-Loş
- Üçüncül
Üçüncül işlemlerle ilgili ancak anında odaklanmayı gerektirmeyen düğmeler veya işlemler için Üçüncül Karartma rolünü kullanın.
Üçüncül Kapsayıcı
- Üçüncül-Kapsayıcı
- Üçüncül Kapsayıcıda
Rozet veya çıkartma koleksiyonları gibi üçüncül içerikleri gruplandıran arka planlar için Üçüncül-Kapsayıcı'yı uygulayın. Kullanıcı arayüzünde denge ve yapıyı korurken üçüncül öğeleri vurgular.
Anlamsal roller
Hata (kırmızı): Hata, silme ve acil durumla ilgili her şeyi belirtmek için kullanılır. Sorunlara veya uyarılara hemen dikkat çekmek için tasarlanmıştır. Böylece kullanıcılar, düzeltme işlemi gerektiren alanları hızlıca belirleyebilir. Hata rengi, erişilebilirlik standartlarını karşılamak için arka planla yeterli kontrasta sahip olmalıdır. Böylece, hata renginin net bir şekilde görülebilmesi ve uyarılar ya da başarı mesajları gibi diğer durum renklerinden ayırt edilebilmesi sağlanır.
Hata
- Hata
- Hata oluştuğunda
Kaldırma, silme, kapatma veya reddedme işlemlerini (ör. Açmak için kaydır) gösteren, anlamsal ancak temaya uygun bir kırmızı. Hata rengiyle karşılaştırıldığında biraz daha az endişe verici ve acil olan bir kapsayıcı alternatifi olarak eklendi.
Error-Dim
- Hata-Karartma
- Hata oluştuğunda
Yüksek öncelikli hataları veya güvenlik uyarıları, başarısız iletişim kutusu yer paylaşımları ya da durdur düğmeleri gibi acil durum işlemlerini belirten, anlamsal ancak temaya uygun bir kırmızı.
Error-Container
- Error-Container
- On-Error-Container
Hata durumunu kullanan bileşenler için daha az belirgin kapsayıcı rengi. Etkin bir acil durum paylaşımı düğmesi veya kartı gibi dolu durumdan daha az etkileşimli olan etkin bir hata durumunu da gösterebilir.
Yüzey kapları ve yükseklik
Yüzey kapsayıcılar, kullanıcı arayüzünde derinlik ve yükseklik tanımlamada önemli bir rol oynar. Renk aracılığıyla yapı ve hiyerarşi sağlar, bileşenleri önemlerine ve etkileşimlerine göre ayırt etmeye yardımcı olur.
Yüzey-Kapsayıcı-Düşük
- Surface-Container-Low
- Yüzeyde
- On-Surface-Variant
Surface-Container'ın altında olması gereken genişletilmiş bir kapsayıcı için idealdir (ör. bildirimdeki genişletilmiş kart). İçeriğin, kapsayıcıdan yararlanmaya devam ettiği etkileşimli olmayan kartlar için de kullanılabilir.
Yüzey-Kapsayıcı
- Surface-Container
- Yüzeyde
- On-Surface-Variant
Çoğu öğe için varsayılan kapsayıcı rengi. Nötr ve orta düzeyde bir yükselme sağladığından genel kullanıcı arayüzü bileşenleri için uygundur.
Yüzey-Kapsayıcı-Yüksek
- Surface-Container-High
- Yüzeyde
- On-Surface-Variant
Yüzey kapsayıcısının üzerinde veya onunla birlikte kullanılması gereken yüksek vurgulu bileşenler için idealdir. Bu renk, kullanıcı arayüzündeki kritik alanlara odaklanmaya ve hiyerarşi oluşturmaya yardımcı olur.