顏色

Android Automotive OS 色彩策略的基礎是「從黑色建構」。採用黑色的介面顏色可帶來更一致的使用者體驗,且不論是白天還是夜晚主題,皆不會有顯著變化。

以黑色進行建構也能確保與硬體的對齊,因為汽車內裝和儀表板通常會用到深色材料。

指引總覽 (重點摘要)

  • 提供黑色錶帶供你選擇,不分日夜都能順暢運作
  • 背景和圖示或文字之間應保持至少 4.5:1 的對比率
  • 盡量少用顏色
  • 以灰階顯示高度
  • 運用透明度和不透明度,引導視覺焦點

調色盤和漸層

Android Automotive OS 介面的深色主題採用灰階調色盤。理想情況下,其他顏色都應降低強度,例如 Material Design 調色盤中顏色的深色變化版本。

這個部分包含調色盤和不透明度資訊,以及提供各元件相關高度等級色彩值的圖表。

Android Automotive OS 灰階調色盤

Android Automotive OS 灰階調色盤用於文字和圖示等元素,可滿足行車環境的獨特需求。

這個調色盤需要夠多樣化,才能:

  • 涵蓋深色主題 UI 的所有不同用途
  • 提供足夠的範圍,透過色調差異定義階層
灰色調色盤
這個灰階調色盤是 Android Automotive OS 的主要調色盤,支援介面的深色主題。

色調差異會使畫面的深度視覺效果,即使背景是無法察覺的真實黑色背景也一樣。為了提供足夠的色調差異,Android Automotive OS 灰階調色盤含有中灰色。Material Design 灰色從灰色 900 開始相較太快,顏色太亮;兩個色彩較淺的灰色 700 號,對自動內容來說太亮。

元件高度圖表
這張圖表顯示了各種元件休息的高度等級。每個高度等級都有相關聯的灰色值。
日間和夜間模式的灰階高度高度
此圖表顯示日間和夜間模式的各種海拔高度等級相關灰色值

強調色

除了 Android Automotive OS 介面核心的灰階調色盤以外,其他顏色也可用於繪圖焦點等用途。

Android Automotive OS 目前採用一種官方強調色,在支援資料庫中,藍色的深色調稱為「car 強調」。為了提高飽和度與生動度,藍色偏向標準 Google 藍色。這項轉變可讓色彩更舒適地貼合深色的表面。

藍色汽車強調色範例
Android Automotive OS 中的藍色「car 強調」顏色比標準 Google 藍色更為飽和,不論是白天還是夜晚,都能在深色主題介面中清楚顯示。

不透明度值圖表

透明度可以傳達深度感,並強化 Material Design 空間模型。為了有效運用透明度,請根據您的使用情形選擇深色或白色的不透明度值。

深色不透明度值

深色不透明度值的最常見用途是建立 scrim (重疊)。

疊加層的黑色不透明度值

白色不透明度值

這些值最常用於文字。在背景上色時特別有效。使用純灰色搭配深灰色背景時,看起來過於髒亂。

文字的白色不透明度值

如需在裁剪和文字階層中使用不透明度的範例,請參閱指引和範例


對比

為符合基本的 Android Automotive OS 安全性規範,背景和圖示或文字的對比度必須至少為 4.5:1。如要進一步瞭解如何將對比度套用至特定汽車 UI 元素,請參閱「讓內容易於閱讀」。

對比度

正確做法

確保所有可讀性和可操作內容的對比度符合至少 4.5:1
對比度

錯誤做法

不要將對比度低至 4.5:1 以下,因此可以降低駕駛人的安全

指南與範例

Android Automotive OS 深色 UI 簡潔且易於使用,色彩最少。除了為 UI 元素使用適當的色彩、色調和不透明度值 (請參閱「區塊面板和漸層」) 之外,您還必須確保所有使用顏色和漸層的顏色都有必要。

本節提供相關指引和範例,說明如何套用透明度、透明度和顏色,進而達成各種目標。這些目標包括:

  • 模糊背景
  • 維持一致性
  • 建立視覺階層,將使用者的焦點集中在主要動作上。
  • 在清單中區分實體

使用紗罩遮蓋背景

全螢幕紗罩 (重疊) 是用來蓋住幹擾元素背後的背景,例如要求使用者採取行動的對話方塊。部分 scrim 是用於將注意力吸引到通知等元素的轉場。

在日間模式進行完整紗罩
在白天模式下完整紗罩 (對話方塊後方)
在夜間模式下進行完整紗罩
夜間模式 (對話方塊資訊卡後方)
日間模式部分紗罩
日間模式的部分修剪 (通知後方)
在夜間模式下進行部分紗罩
夜間模式的部分紗罩 (顯示在通知後方)

維持與色彩的一致性

色彩可強化增強記憶體和辨識能力的強大提示。你可以使用手錶切換螢幕,打造一致的流暢體驗。

視覺色彩辨識

正確做法

在多個檢視畫面中為項目使用相同顏色,以維持視覺連續性,例如這裡的即時路線導航檢視畫面所用的綠色
視覺色彩連續性

正確做法

使用顏色來連結相關的元素和功能,例如這裡顯示的紅色掛斷行動號召
永久應用程式強調色

正確做法

使用專輯封面或應用程式相關元素的主要顏色,做為視覺預設用途。這裡,暫停按鈕周圍的圓圈以 Spotify 綠色為重心。
顏色使用限制

錯誤做法

請勿使用不同顏色來任意區分單一畫面中的重複元件。如果顏色不會帶來附加價值,請謹慎使用,就像摘要資訊卡周圍有這些彩色外框,導致重複的應用程式圖示顏色。

建立視覺階層

使用白色的不透明度值,建立一致且有效的視覺階層。不透明度的值 88、72 和 56 的對比度相當高,符合無障礙需求,同時在深色背景中建立舒適的閱讀環境。夜間模式時,所有白色都必須採用 96% 的透明度。

維持視覺階層的不透明度和對比範例

正確做法

使用不同的不透明度和對比值,維持視覺階層。
不透明度和對比限制

錯誤做法

請勿將完整不透明度或對比值套用至過多元素,透明度值必須對比鮮明,以便區分主要和次要資訊。