Android Automotive OS 色彩策略的基礎是「從黑色建構」。採用黑色的介面顏色可帶來更一致的使用者體驗,且不論是白天還是夜晚主題,皆不會有顯著變化。
以黑色進行建構也能確保與硬體的對齊,因為汽車內裝和儀表板通常會用到深色材料。
指引總覽 (重點摘要)
- 提供黑色錶帶供你選擇,不分日夜都能順暢運作
- 背景和圖示或文字之間應保持至少 4.5:1 的對比率
- 盡量少用顏色
- 以灰階顯示高度
- 運用透明度和不透明度,引導視覺焦點
調色盤和漸層
Android Automotive OS 介面的深色主題採用灰階調色盤。理想情況下,其他顏色都應降低強度,例如 Material Design 調色盤中顏色的深色變化版本。
這個部分包含調色盤和不透明度資訊,以及提供各元件相關高度等級色彩值的圖表。
Android Automotive OS 灰階調色盤
Android Automotive OS 灰階調色盤用於文字和圖示等元素,可滿足行車環境的獨特需求。
這個調色盤需要夠多樣化,才能:
- 涵蓋深色主題 UI 的所有不同用途
- 提供足夠的範圍,透過色調差異定義階層
![灰色調色盤](https://developers.google.cn/cars/design/automotive-os/design-system/images/grayscale.png?authuser=3&hl=zh-tw)
色調差異會使畫面的深度視覺效果,即使背景是無法察覺的真實黑色背景也一樣。為了提供足夠的色調差異,Android Automotive OS 灰階調色盤含有中灰色。Material Design 灰色從灰色 900 開始相較太快,顏色太亮;兩個色彩較淺的灰色 700 號,對自動內容來說太亮。
![元件高度圖表](https://developers.google.cn/cars/design/automotive-os/design-system/images/elevation-chart-black.png?authuser=3&hl=zh-tw)
![日間和夜間模式的灰階高度高度](https://developers.google.cn/cars/design/automotive-os/design-system/images/elevation-grayscale.png?authuser=3&hl=zh-tw)
強調色
除了 Android Automotive OS 介面核心的灰階調色盤以外,其他顏色也可用於繪圖焦點等用途。
Android Automotive OS 目前採用一種官方強調色,在支援資料庫中,藍色的深色調稱為「car 強調」。為了提高飽和度與生動度,藍色偏向標準 Google 藍色。這項轉變可讓色彩更舒適地貼合深色的表面。
![藍色汽車強調色範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/brand-palette.png?authuser=3&hl=zh-tw)
不透明度值圖表
透明度可以傳達深度感,並強化 Material Design 空間模型。為了有效運用透明度,請根據您的使用情形選擇深色或白色的不透明度值。
深色不透明度值
深色不透明度值的最常見用途是建立 scrim (重疊)。
![疊加層的黑色不透明度值](https://developers.google.cn/cars/design/automotive-os/design-system/images/opacity-black.png?authuser=3&hl=zh-tw)
白色不透明度值
這些值最常用於文字。在背景上色時特別有效。使用純灰色搭配深灰色背景時,看起來過於髒亂。
![文字的白色不透明度值](https://developers.google.cn/cars/design/automotive-os/design-system/images/opacity-white.png?authuser=3&hl=zh-tw)
如需在裁剪和文字階層中使用不透明度的範例,請參閱指引和範例。
對比
為符合基本的 Android Automotive OS 安全性規範,背景和圖示或文字的對比度必須至少為 4.5:1。如要進一步瞭解如何將對比度套用至特定汽車 UI 元素,請參閱「讓內容易於閱讀」。
![對比度](https://developers.google.cn/cars/design/automotive-os/design-system/images/contrast_do.png?authuser=3&hl=zh-tw)
正確做法
![對比度](https://developers.google.cn/cars/design/automotive-os/design-system/images/contrast_dont.png?authuser=3&hl=zh-tw)
錯誤做法
指南與範例
Android Automotive OS 深色 UI 簡潔且易於使用,色彩最少。除了為 UI 元素使用適當的色彩、色調和不透明度值 (請參閱「區塊面板和漸層」) 之外,您還必須確保所有使用顏色和漸層的顏色都有必要。
本節提供相關指引和範例,說明如何套用透明度、透明度和顏色,進而達成各種目標。這些目標包括:
- 模糊背景
- 維持一致性
- 建立視覺階層,將使用者的焦點集中在主要動作上。
- 在清單中區分實體
使用紗罩遮蓋背景
全螢幕紗罩 (重疊) 是用來蓋住幹擾元素背後的背景,例如要求使用者採取行動的對話方塊。部分 scrim 是用於將注意力吸引到通知等元素的轉場。
![在日間模式進行完整紗罩](https://developers.google.cn/cars/design/automotive-os/design-system/images/Dialog-Mock-1.png?authuser=3&hl=zh-tw)
![在夜間模式下進行完整紗罩](https://developers.google.cn/cars/design/automotive-os/design-system/images/Dialog-Mock-2.png?authuser=3&hl=zh-tw)
![日間模式部分紗罩](https://developers.google.cn/cars/design/automotive-os/design-system/images/HUN-day.png?authuser=3&hl=zh-tw)
![在夜間模式下進行部分紗罩](https://developers.google.cn/cars/design/automotive-os/design-system/images/HUN-night.png?authuser=3&hl=zh-tw)
維持與色彩的一致性
色彩可強化增強記憶體和辨識能力的強大提示。你可以使用手錶切換螢幕,打造一致的流暢體驗。
![視覺色彩辨識](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-recognition-DO.png?authuser=3&hl=zh-tw)
正確做法
![視覺色彩連續性](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-continuity-DO.png?authuser=3&hl=zh-tw)
正確做法
![永久應用程式強調色](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-persistent-DO.png?authuser=3&hl=zh-tw)
正確做法
![顏色使用限制](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-usage-DONT.png?authuser=3&hl=zh-tw)
錯誤做法
建立視覺階層
使用白色的不透明度值,建立一致且有效的視覺階層。不透明度的值 88、72 和 56 的對比度相當高,符合無障礙需求,同時在深色背景中建立舒適的閱讀環境。夜間模式時,所有白色都必須採用 96% 的透明度。
![維持視覺階層的不透明度和對比範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/hierarchy-DO.png?authuser=3&hl=zh-tw)
正確做法
![不透明度和對比限制](https://developers.google.cn/cars/design/automotive-os/design-system/images/hierarchy-DONT.png?authuser=3&hl=zh-tw)
錯誤做法