Renk

Android Automotive OS renk stratejisinin temeli, "siyahtan oluşturma" fikridir. Siyah üzerine basıldığında gündüz ve gece temaları arasında büyük bir değişiklik olmadan arayüzün renkleri daha tutarlı bir kullanıcı deneyimi sunar.

Arabanın iç ve kaportalarında genellikle koyu malzeme kullanıldığından, siyah yüzeyler kullanmak donanımla daha iyi uyum sağlar.

Bir bakışta rehberlik (TL;DR)

  • Hem gece hem de gece sürüşünü desteklemek için renk seçimlerinizi siyahtan yapın
  • Arka plan ile simgeler veya metin arasındaki en az 4,5:1 kontrast oranını koruyun
  • Renkleri minimum düzeyde kullanın
  • Yükseklikleri gri tonlamayla göster
  • Görsel odağı yönlendirmek için şeffaflık ve opaklık kullanın

Paletler ve gradyanlar

Android Automotive OS arayüzünün koyu teması, gri tonlamalı bir palete dayanır. İdeal olarak, ek renklerin, Materyal Tasarım paletlerindeki renklerin koyu varyantları gibi daha düşük yoğunlukta olması gerekir.

Bu bölümde palet ve opaklık bilgilerinin yanı sıra her bir bileşenle ilgili yükseklik seviyeleri için gri tonlama değerleri sağlayan grafikler yer alır.

Android Automotive OS gri tonlama paleti

Android Automotive OS gri tonlama paleti, metin ve simge gibi öğeler için kullanılır ve sürüş ortamının benzersiz gereksinimlerini karşılamak için tasarlanmıştır.

Bu palet, aşağıdakileri yapacak kadar çeşitli olmalıdır:

  • Koyu tema kullanıcı arayüzünün tüm farklı kullanım alanlarını kapsar
  • Ton farklılıkları yoluyla hiyerarşiyi tanımlamak için yeterli aralık sağlayın
gri renk paleti
Bu gri tonlama paleti, Android Automotive OS için ana renk paletidir ve arayüzün koyu temasını destekler.

Ton farklılıkları, gölgelerin algılanmadığı gerçek siyah arka planlarda bile derinlik illüzyonu oluşturur. Yeterli ton farkı sağlamak için Android Automotive OS gri tonlama paleti orta griyi içerir. Gri 900'den başlayan Materyal Tasarım grileri, renklere çok daha hızlı bir şekilde uyum sağlar. İki adım daha açık renkli renk, otomatik bağlam için çok parlak olan Gri 700 rengi olur.

Bileşenin yüksekliğiyle ilgili grafik
Bu grafik, çeşitli bileşenlerin durduğu yükseklik seviyelerini gösterir. Tüm yükseklik seviyelerinin ilişkili bir gri değeri vardır.
Gündüz ve gece modu gri tonlarda yükseklik seviyeleri
Bu grafik, gündüz ve gece modundaki çeşitli yükselti seviyeleriyle ilişkili gri değerleri gösterir

Vurgu rengi

Android Automotive OS arayüzünün çekirdeğindeki gri tonlama paletine ek olarak, diğer renkler dikkat çekme gibi amaçlar için tutumlu bir şekilde kullanılabilir.

Şu anda Android Automotive OS'in destek kitaplığında "otomobil aksanı" olarak adlandırılan mavinin bir tonuyla resmi bir vurgu rengi bulunmaktadır. Doygunluğu ve canlılığı artırmak için bu mavi, standart Google mavisinden biraz kaydırılır. Bu değişiklik, renklerin karanlık bir yüzeyde daha rahat oturmasını sağlar.

Mavi araba vurgu rengi örneği
Android Automotive OS'teki mavi "araba aksanı" rengi, hem gündüz hem gece sürüşünde koyu tema arayüzünde iyi çalışacak şekilde tasarlanmış standart Google mavisinden daha doymuş.

Şeffaflık değer grafikleri

Şeffaflık, bir derinlik hissi verir ve Materyal Tasarım uzamsal modelini güçlendirir. Şeffaflığı etkili bir şekilde kullanmak için kullanım alanınıza bağlı olarak koyu veya beyaz opaklık değerleri seçin.

Koyu opaklık değerleri

Koyu opaklık değerleri için en yaygın kullanım alanı etek (yer paylaşımları) oluşturmaktır.

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

Beyaz opaklık değerleri

Bu değerler çoğunlukla metinde kullanılır. Özellikle arka plan renkli olduğunda etkilidirler. Koyu, renkli arka plan üzerinde düz grinin kullanılması çok çamurlu görünüyor.

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

Temel Android Automotive OS güvenlik kurallarına uymak için arka plan ile simgeler veya metin arasındaki kontrast oranı en az 4.5:1 olmalıdır. Kontrast oranlarının belirli otomotiv kullanıcı arayüzü öğelerine nasıl uygulanacağı hakkında ayrıntılı bilgi için İçeriğin okunmasını kolaylaştırma konusuna bakın.

Kontrast yapma

Yapılması gerekenler

Kontrastın, okunabilir ve işlem yapılabilir tüm içerikler için minimum 4,5:1 oranını karşıladığından emin olun
Kontrast

Yapılmaması gerekenler

Kontrastı 4, 5:1'in altına düşürün ve sürücü güvenliğini azaltın

Yönergeler ve örnekler

Android Automotive OS koyu kullanıcı arayüzü sade, sade ve minimum renk kullanımı sunuyor. Kullanıcı arayüzü öğeleri için uygun renkleri, tonları ve opaklık değerlerini kullanmaya ek olarak (Paletler ve gradyanlar) bakın, renk ve renk gradyanlarının her kullanımının bir amaç olduğundan emin olun.

Bu bölümde, çeşitli hedeflere ulaşmak amacıyla şeffaflık, opaklık ve renk uygulama konusunda yol gösterici bilgiler ve örnekler verilmiştir. Bu hedefler şunlardır:

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

Çatlaklarla arka planı karartma

Tam ekran çekimleri (yer paylaşımları), kullanıcıların işlem yapmasını gerektiren iletişim kutuları gibi rahatsız edici öğelerin arkasındaki arka planları kapatmak için kullanılır. Bildirimler, bildirimler gibi öğelerin geçişine 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, hafızayı ve tanımayı güçlendirmek için güçlü bir işarettir. Ekrandan ekrana tutarlı bir deneyim oluşturmak için bunu kullanın.

Görsel renk tanıma

Yapılması gerekenler

Bir öğenin birden çok görünümü için aynı rengi kullanarak görsel devamlılığı koruyun. Örneğin, adım adım navigasyon görünümleri için kullanılan yeşil renk,
Görsel renk sürekliliği

Yapılması gerekenler

Burada gösterilen kırmızı askılı CTA'lar gibi ilgili öğeleri ve işlevleri görsel olarak birbirine bağlamak için renk kullanın
Kalıcı uygulama vurgu rengi

Yapılması gerekenler

Kalıcı görsel zenginlik olarak albüm resminin en önemli rengini veya ilgili öğelerde bir uygulamanın atanmış rengini kullanın. Burada, duraklatma düğmesinin etrafındaki daire Spotify yeşille vurgulanıyor.
Renk kullanımı kısıtlaması

Yapılmaması gerekenler

Tek bir ekranda tekrarlanan bileşenleri rastgele seçmek 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

Tutarlı ve güçlü bir görsel hiyerarşi oluşturmak için beyaz opaklık değerlerini kullanın. 88, 72 ve 56'nın opaklık değerleri, erişilebilirlik koşullarını karşılamak için yeterli kontrast sağlarken koyu bir arka planda rahat bir okuma ortamı oluşturur. Gece modu için tüm beyazlarda% 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

Çok fazla opaklık veya kontrast değeri uygulamak için bunları çok fazla öğeye uygulamayın. Birincil ve ikincil bilgileri ayırt etmek için opaklık değerlerinde kontrast kullanılması gerekir.