Wear OS için Material 3 Expressive, renk rollerine farklı ton, renk ve ton değerleri atayarak görsel hiyerarşi oluşturur ve koyu vurgu renklerini nötr yüzey renklerinden etkili bir şekilde ayırır. Sistemin birincil, ikincil ve üçüncül vurgu rollerini içermesi yalnızca ifade olanaklarını artırmakla kalmaz, aynı zamanda farklı renk seçenekleri sayesinde görsel hiyerarşi üzerinde daha ayrıntılı kontrol sağlar. Renklerin bilinçli bir şekilde kullanılması, temalar kullanılsa bile İzleme kullanıcı arayüzünde tutarlı ve uyumlu bir his verir.
Farklı temalarda farklı düzenlerin, bileşenlerin ve kullanıcı arayüzlerinin kullanıldığı ancak yeterli renk kontrastının korunduğu örnek.
Renkleri eşleme ve katmanlama
Görsel erişilebilirliği korumak için renkleri yalnızca amaçlanan renk jetonu çiftlerinde uygulayın. Renkleri yanlış bir şekilde birleştirmek, özellikle renkler dinamik renk aracılığıyla ayarlandığında görsel erişilebilirlik için gerekli kontrastı bozabilir.
Renkleri doğru şekilde eşleme ve katmanlama
Doğru görselleri ve erişilebilirliği sağlamak için doğru jetonu doğru konuma eşlediğinizden emin olun. Uygun olmayan renk eşleme, istenmeyen görsellere neden olabilir ve erişilebilirliği bozabilir.
Yapılması gerekenler
Doğru görseller ve erişilebilirlik sağlamak için renk rollerini doğru şekilde eşleyin ve katmanlandırın.
Bu örnekte, (1) birincil üzerinde (2) birincilde veya (3) birincil kapsayıcı üzerinde (4) birincilde kapsayıcı bulunan düğmeler, kontrast seviyesi değiştikçe okunaklılığını korur ve 7:1 veya daha yüksek bir kontrast oranına sahip AAA derecelendirmesine sahiptir.
Yapılmaması gerekenler
Uygun olmayan renk eşlemeleri, istenmeyen görsellere yol açabilir ve erişilebilirliği bozabilir.
Bu örnekte, (1) primary üzerinde (2) primary-container veya (3) primary-container üzerinde (4) primary-dim bulunan düğmeler, kontrast seviyeleri değiştiği ve normal metin için minimum 7:1 kontrast oranı karşılanmadığı için okunamaz hale gelir. Bu kontrast seviyeleri birincil, ikincil ve üçüncül roller için geçerlidir.
Önerilen renk eşleştirmeleri
Birincil + Birincil Boyut
Ana işlemler için birincil, tamamlayıcı öğeler için birincil-karanlık modu kullanın. Bu, birincil işlemin öne çıkmasını sağlarken derinlik oluşturur.
Birincil-Karanlık + Üçüncül
Önemli öğeleri vurgulamak için birincil-koyu, dokunma yanıtları gibi belirgin geri bildirimler sağlamak için üçüncül renkleri kullanın.
Birincil + İkincil Kapsayıcı
Daha az belirgin içerikler için Secondary-Container'ı kullanın. Primary ise öne çıkıp dikkat çekmelerini sağlamak için önemli öğelere uygulanır.
Birincil + Birincil-Kapsayıcı
Ana işlemler için Birincil, tamamlayıcı veya ikincil öğeler için Birincil-Kapsayıcı öğesini kullanın. Bu sayede, birincil işlemin öne çıkması sağlanırken derinlik oluşturulur.
Birincil-Boyut + Üçüncül-Boyut
Önemli öğeleri vurgulamak için birincil karartma, hedefin karşılanması gibi belirgin geri bildirimler sağlamak için üçüncül karartma kullanın.
Üçüncül + Birincil + İkincil Kapsayıcı
Ana işlemin ne olduğu net değilse ana işlemler için Üçüncül ve Birincil, tamamlayıcı işlemler için de İkincil-Kapsayıcı kombinasyonunu kullanın.
İkincil + Birincil-Kapsayıcı
Eşit derecede önemli iki seçenek veya kapsayıcıyı göstermek ancak aralarında kontrast olmasını sağlamak istediğinizde Birincil-Karanlık ve İkincil'i kullanın.
Birincil + Üçüncül + Birincil-Kapsayıcı
Ana işlemin ne olduğu net değilse ana işlemler için Üçüncül ve Birincil, tamamlayıcı işlemler için Birincil-Kapsayıcı kombinasyonunu kullanın.
Birincil + Üçüncü Derece Karartma
Ana işlemler için birincil, tamamlayıcı öğeler için birincil boyutu kullanın. Bu sayede birincil işlemin öne çıkmasına yardımcı olurken derinlik de sağlanır.