Renk

Android Auto, gündüz ve gece temalarında benzer renklerle daha tutarlı bir kullanıcı deneyimi sunmak için tüm içeriği siyah arka plana yerleştirir.

Siyah arka plan genellikle arabaların içinde en iyi sonucu verir, çünkü otomobil üreticileri araba iç mekanları, gösterge panelleri ve kullanıcı arayüzleri için genellikle koyu renkli malzemeler ve renkler kullanır.

Özet

  • Hem gündüz hem de gece sürüşü desteklemek için siyah arka plan kullanın
  • Arka plan ile simgeler veya metin arasında en az 4,5:1 kontrast oranını koruyun
  • Renkleri minimum düzeyde ve amaca uygun şekilde kullanın
  • Farklı gri tonlarını kullanarak yüksekliği gösterme
  • Görsel odağı yönlendirmek için şeffaflık ve opaklık kullanın

Paletler ve Gradyanlar

Android Auto'nun koyu teması gri tonlamalı bir renk paleti kullanır. Kullanıcı arayüzünüze eklenen tüm ek renkler, Materyal Tasarım renk paletlerindeki daha koyu renk varyantlarına benzer şekilde, yoğunlukta kapatılmalıdır.

Android Auto'nun gri tonlama paleti

Android Auto gri tonlamalı renk paletini kullanarak metin ve simgeler dahil tüm öğelere renk uygulayabilirsiniz.

Bu palet şu amaçlarla tasarlanmıştır:

  • Her kullanıcı arayüzü öğesinin hiyerarşi düzeyini, sağlanan gölge aralığıyla yansıtın
  • Koyu tema kullanıcı arayüzü kullanım alanlarının tümünü ele alma
grask renk paleti
Android Auto için varsayılan renk paleti olan bu gri tonlama paleti, arayüzün koyu temasını destekler.

Android Auto'da derinlik duygusu, farklı gri tonlarıyla ifade edilir. Her gölge, daha koyu tonlara sahip bileşenlerin (liste bileşeni gibi), açık gölgelere sahip bileşenlerden (kayan işlem düğmeleri gibi) daha az yüksekliğe sahip olduğu farklı bir yükseklik seviyesini temsil eder.

Tüm bileşenler, gölgelerin görünmediği gerçek siyah bir arka plan üzerinde görüntülenir. Bu bileşenler arasında yeterli kontrast sağlamak için Android Auto gri tonlama paleti çok çeşitli griler içerir. Gri 900'ün altındaki Material renk paleti, otomatik bağlama göre çok parlak olduğundan, Materyal Tasarımı'nın temel renk paletine göre daha kademeli bir gri tonunu gösteriyor.

Bileşen yüksekliği grafiği
Çeşitli bileşenler için her durağan yükseklik düzeyi, benzersiz bir gri değerle ilişkilendirilir.
Gündüz ve gece modu gri tonlamalı yükseklik seviyeleri
Bu grafikte, gündüz ve gece modu için çeşitli yükseklik seviyeleriyle ilişkili gri değerler gösterilmektedir.

Vurgu rengi

Android Auto'nun gri tonlama paletine ek olarak bir vurgu rengi tutumlu bir şekilde kullanıcının odağını çizmek gibi amaçlarla kullanılabilir.

Şu anda Android Auto'nun tek bir resmi vurgu rengi vardır. Mavinin tonu, destek kitaplığında "araba aksanı" olarak anılır. Bu mavi, standart Google mavisinden daha yüksek doygunluk ve canlılık sağlayarak kullanıcı arayüzünün koyu yüzeyinde daha iyi bir görünürlük sağlar.

Mavi araba vurgu rengi örneği
Android Auto'daki mavi "araba vurgusu" rengi, standart Google mavisinden daha doygundur. Bu renk, hem gündüz hem de gece sürüş sırasında koyu temalı arayüzde iyi çalışacak şekilde tasarlanmıştır.

Opaklık grafikleri

Materyal Tasarıma sahip uzamsal model, kullanıcı arayüzünde derinlik hissi sağlamak için çeşitli opaklık düzeylerine dayanır. Etkili bir kullanım için kullanım alanınıza bağlı olarak bir opaklık düzeyi seçin.

Koyu opaklık değerleri

Yarı şeffaf koyu yüzeyler için en yaygın kullanım alanı kaplamadır ("yer paylaşımı" olarak da bilinir).

Yer paylaşımları için siyah opaklık değerleri

Beyaz opaklık değerleri

Yarı şeffaf beyaz değerler, özellikle arka plan renkli olduğunda düz gri yerine çoğunlukla metin için kullanılır.

Metin için beyaz opaklık değerleri

Kumaşlarda ve metin hiyerarşilerinde opaklığın nasıl kullanılacağıyla ilgili örnekler için Yönergeler ve örnekler bölümüne bakın.


Kontrast

Uygun renk kontrastı, sürücülerin bilgileri hızlıca yorumlamasına ve karar vermesine yardımcı olur.

Sürüş sırasında kolay okunabilmesi için ön plan (metin veya simgeler) ile arka plan (renkler, albüm resmi vb.) arasındaki minimum görsel kontrast gereklidir. Uygulama renkleri, 4,5:1 kontrast oranı belirten WCAG 2.0 Seviye AA Normal Metin kontrastı koşullarını karşılamalıdır. Ekranlarınızın kontrast gereksinimlerini karşıladığından emin olmak için WebAIM Renk Kontrast Denetleyicisi gibi bir kontrast denetleyici kullanın.

Kontrast oranlarının belirli kullanıcı arayüzü öğelerine nasıl uygulandığıyla ilgili daha fazla ayrıntı için Sürüş İçin Tasarım yönergelerine bakın.

Kontrast

Yapılması gerekenler

Bu simgeler, renk kontrastı oranı önerilerini uygular ve arka planlarından daha okunaklıdır.
Kontrast

Yapılmaması gerekenler

Bu simgeler, renk kontrastı oranı önerilerine uygun değildir ve arka planlarından ayırt edilmesi zordur.

Rehberlik ve örnekler

Android Auto'nun koyu renkli kullanıcı arayüzü sade ve sadedir, çok az renk kullanır. Kullanıcı arayüzü öğeleri için uygun renkleri, tonları ve opaklık değerlerini (Paletler ve renk geçişleri konusuna bakın) kullanmaya ek olarak, her renk ve opaklık kullanımının bir amacı da olmalıdır.

Bu bölümde, aşağıdakiler de dahil olmak üzere çeşitli hedeflerin gerçekleştirilmesi için opaklık varyasyonları ve rengin uygulanmasıyla ilgili yol gösterici ve örnekler sağlanmaktadır:

  • Gizlenen arka planlar
  • Tutarlılığı koruma
  • Kullanıcının odağını birincil işlemlere çeken görsel bir hiyerarşi oluşturma
  • Listedeki öğeleri ayırt etme

Kumaşlarla anlaşılmaz arka planlar

Tam ekran kaydırmalar (yer paylaşımları), kullanıcının işlem yapmasını gerektiren bir iletişim kutusu gibi yüksek öncelikli içerik ön planda göründüğünde arka planları kapatmak için kullanılır. Kısmi kaydırmalar, bildirimlerin girişi gibi öğelerin geçişine dikkat çekmek için kullanılır.

Gün modunda tam ekran görüntüsü
Gündüz modunda tam ekran (iletişim kartının arkasında)
Gece modunda tam ekran görüntüsü
Gece modunda tam ekran (iletişim kartının arkasında)
Gün modunda kısmi kaydırma
Gündüz modunda kısmi ekran (bildirimin arkasında)
Gece modunda kısmi ekran görüntüsü
Gece modunda kısmi ekran (bildirimin arkasında)

Renklerde tutarlılığı koruma

Renk, kullanıcı işlemleri akışlarındaki temel öğeler (ör. gezinmeyle ilgili tüm öğelerin yeşil renkli olması) arasındaki bağlantıyı pekiştirmek için güçlü bir işarettir. Bu tür bir renk sürekliliği, hangi kullanıcı arayüzü öğelerinin bağlı olduğunu ve birbirleriyle nasıl ilişkili olduklarını hafızaya ve tanımaya yardımcı olur. Ekrandan ekrana tutarlı bir deneyim sunmak için bu özelliği kullanabilirsiniz.

Görsel renk tanıma

Yapılması gerekenler

Bir öğe için birden çok görünümde aynı rengi (bu adım adım gezinme görünümlerinde kullanılan yeşil renk gibi) kullanarak görsel sürekliliği koruyun.
Görsel renk sürekliliği

Yapılması gerekenler

Bu kırmızı renkli kapanış CTA'ları gibi ilgili öğeleri ve işlevleri görsel olarak bağlamak için renk kullanın.
Kalıcı uygulama vurgu rengi

Yapılması gerekenler

Kalıcı bir görsellik sağlamak için albüm resminin baskın rengini veya uygulamanın ilgili öğelerde kendisine atanan rengini kullanın. Duraklat düğmesinin etrafındaki dairede Spotify yeşili vurguludur.
Renk kullanım kısıtlaması

Yapılmaması gerekenler

Tek bir ekranda tekrarlanan bileşenleri rastgele ayırt etmek için farklı renkler kullanmayın. Değer katmayan renkleri kullanırken de dikkatli olun. Özet kartlarının etrafında, uygulama simgesinin renginin aynısı olan bu renkli dış çizgilerde olduğu gibi.

Görsel bir hiyerarşi oluşturma

Bir dizi beyaz opaklık kullanarak metinleri renklendirerek tutarlı ve güçlü bir görsel hiyerarşi oluşturulabilir. Beyaz metin için %88, %72 ve% 56 opaklık değerleri, hem erişilebilirlik gereksinimlerini karşılayacak hem de koyu arka plan üzerinde rahat bir okuma ortamı oluşturacak kadar kontrast içerir. Gece modu için tamamen beyaz metin üzerinde% 96 opaklık kullanın.

Görsel hiyerarşiyi korumak için opaklık ve kontrast örneği

Yapılması gerekenler

Görsel bir hiyerarşi sağlamak için farklı opaklık ve kontrast değerleri kullanın.
Opaklık ve kontrast kısıtlaması

Yapılmaması gerekenler

Tam opaklık veya kontrast değerlerini çok fazla öğeye uygulayarak aşırı kullanmayın. Birincil ve ikincil bilgileri ayırt etmek için opaklık değerlerinde bir zıtlık gerekir.