Renk

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

Araba üreticileri araç içi, gösterge tabloları ve kullanıcı arayüzleri için genellikle koyu renk ve renklerin kullanılmasını sağladığından siyah arka plan en iyi sonucu verir.

Bir bakışta

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

Paletler ve Gradyanlar

Android Auto için koyu tema, gri tonlarda bir renk paleti kullanıyor. Kullanıcı arayüzünüze eklenen tüm renkler, Materyal Tasarım renk paletlerindeki daha koyu renk varyantlarına benzer şekilde kapalı olmalıdır.

Android Auto'nun gri tonlama paleti

Android Auto gri tonlama paletini kullanarak metin ve simgeler de dahil olmak üzere tüm öğelere renk uygulayabilirsiniz.

Bu palet şunlar için tasarlanmıştır:

  • Her bir kullanıcı arayüzü öğesinin hiyerarşi seviyesini belirtilen renk aralığıyla yansıtın
  • Koyu tema kullanıcı arayüzü kullanım alanlarının tümünü ele alın
gri renk paleti
Bu gri tonlamalı palet, arayüzün koyu temasını destekleyen varsayılan Android Auto renk paletidir.

Derinlik hissi, Android Auto'da farklı gri tonlar kullanılarak ifade edilir. Her gölge, daha koyu gölgelere sahip bileşenlerin (liste bileşeni gibi) daha açık yüksekliklere (listeleme bileşeni gibi) sahip bileşenlerden daha az yükseltiye sahip olduğu farklı bir yükseklik seviyesini temsil eder.

Tüm bileşenler, gölgelerin görünmediği gerçek bir siyah arka planda görüntülenir. Bu bileşenler arasında yeterli kontrast sağlamak için Android Auto gri tonlama paleti çok çeşitli gri tonlar içerir. Gri 900’ün altındaki gölgeler otomatik bağlam için çok parlak olduğundan, Materyal Tasarım’ın temel renk paletinden daha kademeli bir grilik ilerliyor.

Bileşenin yüksekliğiyle ilgili grafik
Çeşitli bileşenler için her bir duruş yüksekliği düzeyi, benzersiz bir gri değerle ilişkilidir.
Gündüz ve gece modu gri tonlardaki yükseklik seviyeleri
Bu grafik, gündüz ve gece modu için çeşitli yükselti seviyeleriyle ilişkili gri değerleri gösterir.

Vurgu rengi

Vurgu rengi, Android Auto'nun gri tonlama paletine ek olarak kullanıcı odağını çizme gibi amaçlar için tutumlu bir şekilde kullanılabilir.

Şu anda Android Auto, destek kitaplığında "otomobil aksanı" olarak adlandırılan mavinin bir tonuyla resmi bir vurgu rengine sahiptir. Bu mavi, standart Google mavisinden kaynaklanan doygunluğu ve canlılığı artırarak 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, hem gündüz hem de gece sürüşü sırasında koyu tema arayüzünde iyi performans gösterecek şekilde tasarlanmış standart Google mavisinden daha doymuş.

Şeffaflık grafikleri

Materyal Tasarım mekansal modeli, bir kullanıcı arayüzünde derinlik hissi iletmek için çeşitli opaklık derecelerine dayanır. Etkili şekilde kullanmak 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 kıvamında bir yer tutmadır ("yerleşmek" olarak da bilinir).

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

Beyaz opaklık değerleri

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

Metin için beyaz opaklık değerleri

Parmaklar ve metin hiyerarşilerinde opaklığın nasıl kullanılacağı ile ilgili örnekler için Rehberlik ve örnekler bölümüne bakın.


Kontrast

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

Araba kullanırken ön plan (metin veya simgeler) ile arka plan (renk, albüm resmi vb.) arasında minimum görsel kontrast olması gerekir. Uygulama renkleri, 4.5:1 kontrast oranını belirten WCAG 2.0 Seviye AA Normal Metin kontrast koşullarını karşılamalıdır). Ekranlarınızın kontrast koşullarını 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 uygulanacağı hakkında daha ayrıntılı bilgiyi Sürüş Tasarımı yönergeleri başlıklı makalede bulabilirsiniz.

Kontrast yapma

Yapılması gerekenler

Bu simgeler renk kontrast oranı önerilerine uyar ve arka planlarına göre daha okunaklı olurlar
Kontrast

Yapılmaması gerekenler

Bu simgeler renk kontrast oranı önerilerini uygulamaz ve arka plandan ayırt edilmesi zordur

Yönergeler ve örnekler

Android Auto'nun koyu kullanıcı arayüzü sade ve sade, minimum renk kullanımı sunuyor. Kullanıcı arayüzü öğeleri için uygun renkler, tonlar ve opaklık değerlerinin kullanılmasının yanı sıra (Paletler ve gradyanlar) da kullanılmasının yanı sıra, her renk ve farklı opaklık kullanımının bir amacı olmalıdır.

Bu bölümde, aşağıdakiler gibi çeşitli hedeflere ulaşmak amacıyla opaklık varyasyonlarını ve renkleri uygulama konusunda yol gösterici bilgiler ve örnekler verilmiştir:

  • Arka plan karartma
  • Tutarlılığı sürdürme
  • Kullanıcıyı birincil işlemlere çeken bir görsel hiyerarşi oluşturma
  • Listedeki öğeleri ayırt etme

Çatlaklarla arka planı karartma

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

Gündüz modunda tam dolu
Gün modunda tam iletişim (iletişim kartının arkasında)
Gece modunda tam dolu
Gece modunda tam iletişim (iletişim kutusunun arkasında)
Gündüz modunda kısmi yer çekimi
Gündüz modunda kısmi bildirim (bildirimin arkasında)
Gece modunda kısmen yarılma
Gece modunda kısmi hata (bildirimin arkasında)

Renk tutarlılığını koruma

Renk, gezinmeyle ilgili tüm öğelerin yeşil renkli olması gibi, kullanıcı işlemleri akışındaki temel öğeler arasında bağlantıyı güçlendirmek için etkili bir ipucudur. Böyle bir süreklilik, hangi kullanıcı arayüzü öğelerinin bağlantı kurduğuna ve bunların birbiriyle nasıl ilişkili olduğuna dair bellek ve tanınmaya yardımcı olur. Ekrandan ekrana tutarlı bir deneyim sunmak için bunu kullanabilirsiniz.

Görsel renk tanıma

Yapılması gerekenler

Bu adım adım gezinme görünümlerinde kullanılan yeşil renk gibi, birden çok görünümde aynı öğe için görsel devamlılığı koruyun.
Görsel renk sürekliliği

Yapılması gerekenler

Kırmızı askılı 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ı görsel zenginlik olarak albüm resminin baskın rengini veya ilgili öğelerde bir uygulamanın atanmış rengini kullanın. Duraklat düğmesinin etrafındaki bu daire Spotify rengiyle vurgulanır.
Renk kullanımı kısıtlaması

Yapılmaması gerekenler

Tekrarlanan bileşenleri tek bir ekranda rastgele ayırt etmek için farklı renkler kullanmayın. Özet kartlarında, uygulama simgesi renginin aynısı olan renkli dış çizgilerde olduğu gibi, değer katmadıklarında renkleri kullanma konusunda dikkatli olun.

Görsel hiyerarşi oluşturma

Metni bir dizi beyaz opaklık kullanarak renklendirerek tutarlı ve güçlü bir görsel hiyerarşi oluşturulabilir. Beyaz metin için %88, %72 ve% 56 opaklık değerleri, erişilebilirlik koşullarını karşılamak için yeterli kontrast içerirken koyu bir arka planda rahat bir okuma ortamı oluşturur. Gece modu için beyaz metnin tamamında% 96 opaklık kullanın.

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

Yapılması gerekenler

Görsel hiyerarşiyi korumak 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 kontrast kullanılması gerekir.