Dark theme 深色主題

Dark theme 深色主題
Google在2019 I/O大會慎重特別的推出了Material Design Dark theme,顧名思義就是在深色背景主題下的運用規劃,在這次發表主題裡也有解釋到,之所以重視是因為深色主題的介面在瀏覽上不僅能減少視覺疲勞,更因為整個使用環境螢幕亮度降低,電力也相對達到節省效果。

而深色主題下其環境與元素空間感如何正確使用呢?以下也做了幾點解釋。
關於material design 深色主題的重要屬性有以下:
  • 對比度:深色表面和100%白色主要內文的對比度至少為15.8:1(對比度檢測參考網站)
  • 深度:利用較淺的顏色表示物件在較高的高度
  • 去飽和:飽和度高的原色會在深色背景上影響視覺容易造成視覺疲勞,內容文字顏色要通過WCAGAA標準 4.5:1 (備註), 在material design 選色工具上選擇200色調color
    圖片來源:material design dark theme
  • 顏色限制:大面積顏色只能深色,主要色與輔助色避免被大面積使用。


深色主題背景顏色:
表面顏色應該使用深灰色而不是黑色,因為使用深灰色為背景更表現出元件在表面上的環境高度,而且深灰色與淺色文字對比度比在黑色上對比度低,助於減輕高對比度下的視覺疲勞。
推薦使用深灰色,色碼是#121212。

深色主題下的環境物件層級:
在深色主題下,元件高度越高,顏色會越亮
(設計畫面時加上白色覆蓋層(Elevation overla),讓元件看起來越亮,material design 提供相對高度下的白色覆蓋透明度比對)
*此白色覆蓋不能蓋在主要顏色或次要顏色上,但為符合AA標準,主要色或次要色可以降低透明度來達到4.5:1。Artboard – 1

顏色與文字
如同剛剛提到的,飽和度高的顏色在深色背景下容易影響視覺,所以建議在material design 選色工具上選擇主要色或次要色時應選擇顏色200色調;錯誤用的警告色應該是#CF6679(由material 原錯誤色#B00020覆蓋加上40%的白而產生)。
文字使用
高對比度,用於強調的文字為白色透明度為87%
中對比度,用於提示文字之類,文字為白色透明度60%
不能被使用的文字是白色透明度38%

被選取狀態與顏色使用state

圖片來源:material design dark theme


備註說明:
WACG(Web Content Accessibility Guidelines),由W3C開發的網頁無障礙標準設計,因網頁閱覽者有可能是有視力障礙(Visual impairments)、聽力障礙(Hearing impairments)、運動障礙(Motor impairments)、智力障礙(Intellectual disabilities)等的身障者,為確保所有的網站瀏覽者都可以完全地得到平台資訊與功能,提出了「POUR無障礙原則」:易於感知的(Perceivable)、便於操作(Operable)、容易理解的(Understandable)、穩定耐用的(Robust),讓能力不一使用者更輕易使用網頁所提供的資訊和服務。
其中顏色(Color Accessibility)屬於「易於感知的」。 也就是說網站或app內容應該是要容易被看到的,尤其是文字和圖像,為了在背景中容易被辨識,應該要有足夠高的色彩對比度(high color contrast ratio),其中AA標準對比度應4.5:1,AAA標準對比度要7:1。

AA-example

更多文章:

  1. Design system設計系統概述
  2. Material You是什麼?Material Design3 與2的比較
  3. 網頁配色怎麼選?使用配色工具挑顏色2
  4. 網頁配色怎麼選?使用配色工具挑顏色1
  5. Material Design-Android網站分析2