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
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.
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.
Ş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).
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.
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.
Yapılması gerekenler
Bu simgeler renk kontrast oranı önerilerine uyar ve arka planlarına göre daha okunaklı olurlar
Yapılmaması gerekenler
Bu simgeler renk kontrast oranı önerilerini uygulamaz ve arka plandan ayırt edilmesi zordurYö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.
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.
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.
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.
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.
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.
Yapılması gerekenler
Görsel hiyerarşiyi korumak için farklı opaklık ve kontrast değerleri kullanın.
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.