顏色

Wear OS 的質感設計使用較深色的調色盤。因此,應用程式和圖塊必須特別採用黑色背景。

色彩配置

Wear OS 色彩配置是根據基礎 Material Design 色彩主題建立而成。您可以直接套用該主題,或為應用程式自訂主題。

這個主題內有以下項目的預設顏色:

  • 主要和次要顏色
  • 主要和次要顏色的變化版本
  • 其他 UI 顏色,例如背景、表面、錯誤、字體排版及圖像的顏色

顏色

深色主題

所有深色主題顏色在顯示元素時,都應具有足夠的對比度,同時必須符合 WCAG 的 AA 標準,也就是套用到所有高度表面時,內文文字至少需達到 4.5:1。

使用飽和度較低的色彩,提供無障礙體驗

深色主題應避免使用飽和度較高的顏色,因為這樣違反 WCAG 無障礙功能標準中內文和深色表面之間需至少達 4.5:1 對比度的規範。飽和度較高的顏色搭配深色背景也會產生光振,導致使用者眼睛疲勞。請改為使用飽和度較低的顏色,讓內容更容易閱讀。

圖 1. 調色盤使用飽和度較低的顏色,讓內容更容易閱讀。

圖 2. 避免在深色背景上使用飽和度較高的顏色。

主要顏色

主要顏色是應用程式畫面和元件最常顯示的顏色。基準質感設計深色主題的主要顏色使用 200 色調。這種設計方式符合 WCAG 的 AA 標準中,較高表面上的一般文字需至少達 4.5:1 對比度的規範。

圖 3. 深色主題的主要調色盤範例。1. 主要顏色指標 2. 色調變化

次要顏色

您可以使用次要顏色重點標示 UI 特定部分。在深色主題中,次要顏色可使用飽和度較低的顏色,以便達到 4.5:1 的對比等級。

在圖 4. 當中,1) 代表次要顏色指標,而 2) 代表色調變化。

圖 4. 深色主題的次要調色盤範例。

強調色

在深色主題中,UI 中有很大一部分都屬於是深色表面。強調色通常是輕柔 (飽和度較低的粉彩色系) 或明亮 (飽和度較高的鮮明色系) 的顏色。這種顏色可以重點突顯元素。偶而使用強調色可以突顯文字或按鈕等重要元素。

找出強調色您可以使用調色盤產生器建立或檢視顏色主題。調色盤產生器也會建立色調調色盤,這個調色盤使用您的主要和次要顏色,並會列出從淺色到深色的多種變化。選取其中的幾種變化,以供您的深色背景使用。

在圖 5. 當中,1) 表示預設主題主要顏色指標,而 2) 表示深色主題主要顏色指標。

圖 5. 如要在深色主題中提供更高的彈性和可用性,建議使用較淺的色調 (200-50),而不要使用飽和度較高的色調 (900-500)。

UI 中較大範圍的部分請用較深的顏色,如背景顏色。將較淺的顏色留給重點和 UI 元素使用。