顏色

Android Automotive OS 色彩策略的基礎是「以黑色為基礎」的概念。介面顏色以黑色為基準，可以帶來更一致的使用者體驗，避免日間和夜間主題之間出現劇烈的變化。

使用黑色材料進行設計還可以確保與硬體更好地協調，因為汽車內飾和儀錶板通常使用深色材料。

簡明指南（TL;DR）

  • 從黑色開始，選擇適合白天和夜間駕駛的顏色。
  • 背景與圖示或文字之間的對比度至少保持 4.5:1。
  • 盡量少用色彩，但要有目的性。
  • 透過灰階顯示海拔高度
  • 利用透明度和不透明度來引導視覺焦點

調色板和漸變

Android Automotive OS 介面的深色主題是基於灰階調色板。理想情況下，任何其他顏色都應該降低飽和度，就像 Material Design 調色板中的深色版本一樣。

本節包含調色板和不透明度信息，以及提供與每個組件關聯的高程級別的灰度值的圖表。

標註圖標
材料設計
色彩運用和調色板

Android Automotive OS 灰階調色盤

Android Automotive OS 的灰階調色板用於文字和圖示等元素，其設計旨在滿足駕駛環境的獨特需求。

這個調色板需要足夠多樣化，以便：

  • 涵蓋深色主題 UI 的所有不同使用場景
  • 提供足夠的音域，以便透過色調差異來定義等級制度。
灰調調色盤
此灰階調色板是 Android Automotive OS 的主要調色板，支援介面的深色主題。

即使在陰影幾乎無法察覺的純黑色背景下，色調差異也能營造出深度錯覺。為了提供足夠的色調差異，Android Automotive OS 的灰階調色板包含了中灰色。 Material Design 中從 Grey 900 開始的灰色過渡到更亮的顏色速度過快；比 Grey 900 淺兩級的顏色是 Grey 700，這對於汽車應用場景來說太亮了。

組件立面圖
此圖顯示了各個部件所處的海拔高度。每個海拔高度都有一個對應的灰階值。
日夜模式灰階海拔級別
此圖表顯示了白天和夜晚模式下不同海拔高度對應的灰階值。

強調色

除了 Android Automotive OS 介面核心的灰階調色板之外，還可以少量使用其他顏色，用於吸引註意力等目的。

目前，Android Automotive OS 只有一個官方強調色，即支援庫中稱為「汽車強調色」的藍色。為了提高飽和度和鮮豔度，這種藍色與標準的 Google 藍色略有不同。這種調整有助於顏色在深色表面上更協調地呈現。

藍色汽車裝飾色範例
Android Automotive OS 中的藍色「汽車裝飾色」比標準的 Google 藍色飽和度更高，旨在白天和夜晚駕駛時都能在深色主題介面中良好發揮作用。

不透明度-值圖

透明度能夠創造深度感，並強化 Material Design 的空間模型。為了有效地利用透明度，請根據實際應用場景選擇深色或白色的不透明度值。

暗部不透明度值

深色不透明度值最常見的用途是創建布幕（疊加層）。

疊加層的黑色不透明度值

白色不透明度值

這些數值主要用於文字。當背景為彩色時，它們的效果尤其顯著。在深色背景上使用純灰色會顯得過於混濁。

文字的白色不透明度值

有關如何在螢幕和文字層次結構中使用不透明度的範例，請參閱指南和範例。

對比

為了符合 Android Automotive OS 的基本安全準則，背景與圖示或文字之間的對比度應至少為 4.5:1。有關對比度如何應用於特定汽車 UI 元素的詳細信息，請參閱“使內容易於閱讀” 。

對比

做

確保所有可讀且可操作的內容對比至少達到 4.5:1。
對比並不

不

不要讓對比度低於 4.5:1，否則會降低駕駛的安全性。

指導和範例

Android Automotive OS 的深色使用者介面簡潔明了，色彩運用極少。除了為使用者介面元素選擇合適的顏色、色調和不透明度值（請參閱「調色板和漸層」）之外，確保每次使用顏色和漸層都具有實際意義也至關重要。

本節提供如何運用透明度、不透明度和顏色來實現各種目標的指導和範例。這些目標包括：

  • 遮蔽背景
  • 保持一致性
  • 建立視覺層級結構，引導使用者專注於主要操作。
  • 區分清單中的實體

用紗幕遮擋背景

全螢幕遮罩（疊加層）用於遮蓋幹擾元素（例如需要使用者執行操作的對話方塊）後面的背景。局部遮罩用於吸引使用者註意元素（例如通知）的過渡效果。

白天模式的全場訓練
日間模式下的全幕布（對話框後面）
夜間模式下的全場實戰
夜間模式的全螢幕遮光（對話框後方）
日間模式下的部分訓練
日間模式下部分遮擋物（位於通知後方）
夜間模式下的部分遮光簾
夜間模式下部分遮蔽（通知欄後方）

保持色彩一致性

顏色是強化記憶和辨識的強大線索。利用顏色，可以在不同螢幕之間創造一致的體驗。

視覺顏色識別

做

為了保持視覺一致性，可以在多個視圖中使用相同的顏色來表示相同項目，例如此處逐嚮導航視圖中使用的綠色。
視覺色彩連續性

做

使用顏色在視覺上連接相關的元素和功能，例如此處所示的紅色掛牌 CTA。
應用主題色

做

在相關元素上使用專輯封面的主色調或應用程式的指定顏色，作為持久的視覺提示。例如，暫停按鈕周圍的圓圈就使用了 Spotify 的綠色。
顏色使用限制

不

不要隨意使用不同顏色來區分同一螢幕內重複出現的組件。謹慎使用顏色，尤其是在顏色沒有實際意義的情況下——例如，摘要卡片周圍的彩色輪廓線，它們與應用圖標的顏色重複了。

建立視覺層次結構

使用白色不透明度值來創建一致且清晰的視覺層次結構。不透明度值為 88、72 和 56 時，對比度恰到好處，既能滿足無障礙存取要求，又能在深色背景下營造舒適的閱讀環境。在夜間模式下，所有白色元素的不透明度應設定為 96%。

利用不透明度和對比度來維持視覺層次結構的範例

做

使用不同的不透明度和對比值來保持視覺層次感。
不透明度和對比限制

不

不要過度使用全透明度或高對比度值，不要將其應用於過多元素。透明度值的對比對於區分主要資訊和次要資訊至關重要。