讀完這篇 Google Dark Mode 的設計規範,你會知道為什麼說很多 APP 的 Dark Mode 都是存在很大問題的,包括 beta 版微信和網易雲音樂。如果讀完之後你還對上句話存在懷疑,那就在晚上關燈後躺在被窩使用上述兩款 APP 的 Dark Mode 試試看。
深色模式在大多數的UI設計上表現為深顏色的介面,通常作為對默認(淺色)顏色模式的補充。
一、深色模式的特性
Material Design 的深色模式包含以下屬性:
- 對比度:深色介面和100%的白色文字之間的對比度應至少為15.8:1。
- 海拔:海拔更高的組件通過顯示更亮的表層顏色來表達其高度。
- 去飽和度:深色模式中的首選顏色需要去飽和度,這樣首選顏色與主體文字不論在哪個海拔共同使用時,兩者的對比度都至少為4.5:1,才能符合WCAG的AA標準。
- 有限的顏色:大面積使用深色表層顏色,外加有限的強調色。
二、主要組成部分
深色模式UI會大面積使用深色表層及少量的顏色,可以在保證高標準可用性的同時散發出較弱的光。
- 背景色 Background(0dp遮罩)
- 表層色 Surface(1dp遮罩)
- 首選色 Primary
- 次級色 Secondary
- 背景層文字
- 表層文字
- 首選層文字
- 次級層文字
深色模式的開關
深色模式可以隨系統主題自動切換(Android10),也可在APP內設置開關。
- 突出顯示:在主介面中設置圖標icon切換開關
- 弱化顯示:在菜單或者設置中設置切換開關
上圖所示是設置在頂部bar上的切換開關
上圖是設置在溢出菜單中的淺色模式、深色模式選項
上圖是設置在應用設置中的深色模式開關
三、設計應用細則
深色模式應使用深灰色作為主要顏色,而非純黑色。深灰色可以包容更廣泛的顏色、高度和深度,因為它更容易看到灰色陰影。
深灰色介面還可以減輕眼部疲勞,因為淺色的文字在深灰色的介面上比在純黑色的介面對比度更低。
Google 推薦的深色模式介面顏色是 #121212。
Google 推薦的深色模式介面顏色是 #121212
1. 海拔的表示
深色模式中的各個組件與淺色模式一樣,也需要呈現出不同的海拔、陰影等。但是,深色模式中不同的海拔是通過不同的表面亮度來表現的。
海拔越高顏色越亮。
組件表面的海拔越高(假設上方有個隱形光源,將組件上升到更接近光源的位置),則該組件就越亮。我們可以通過給組件表面顏色增加半透明白色遮罩來表達亮度。
給顏色增加遮罩還可以使我們更加輕鬆地分區組件與其陰影,提高組件與陰影之間的對比度,使組件的邊緣更加明顯。
- 半透明白色遮罩並不適用於使用了首選顏色和次級顏色的組件;
- 在深色模式中,陰影依然要使用黑色,因為在實際生活中陰影不可能出現其他顏色。
2. 易用性和對比度
深色模式中的背景顏色必須足夠深以展示白色文字。背景顏色與文字之間的對比度至少為 15.8:1。
如果要創建符合品牌設定的深色介面,可以用較低的不透明度將品牌色覆蓋在#121212上。
#121212是 Google 建議使用的深色模式介面顏色。
3. 顏色的使用原則
應避免在深色模式中給文字使用不能通過WCAG色彩易用性測試的飽和色(背景與文字的對比度應高於4.5:1)。深色背景上面的飽和色會導致眼睛疲勞。
4. 如何選擇首選色
首選色是在APP介面和各類組件中最常出現的顏色。Material Design baseline的深色模式中使用色調200作為首選色。
5. 首選色的延伸
深色模式中組件有時也會用到淺色,可以在這類組件上使用由首選色延伸出的顏色。
6. 次級色
次級色可以用於強調UI中的某些部分。深色模式中的次級色同樣需要去飽和度以符合高於4.5:1的對比度標準。
7. 強調色
在深色模式中,深色占據了UI中大部分的介面。通常情況下強調色會採用亮色(例如更飽和或更鮮明的顏色),從而達到突出元素的目的。強調色應該謹慎使用,僅用於強調一些關鍵元素,例如文字、按鈕。
8. 如何確定強調色?
Material色板生成器可以用來創建配色方案,也可以用來生成色調板,然後從中選擇可用於深色模式的顏色。
為了能更好的適應深色模式,建議使用色調在200-50的顏色,避免使用色調在900-500之間的飽和色。這可能跟你在淺色模式選擇顏色的原則有所差別。
9. 品牌色
為了保留品牌辨識度,高飽和度的品牌色也可以在深色模式中使用。但APP中的品牌元素應限制在1-2種,比如logo或者用於一個帶有品牌色的按鈕。
謹慎的使用品牌色可以使品牌元素保持高優先級,突出其重要位置。
10. 錯誤色
錯誤色用於指示錯誤狀態。
Material Design baseline中使用的錯誤色是#CF6679。這個顏色是通過將淺色模式中的錯誤色#B00020覆蓋上不透明度為40%的白色遮罩得來的。
11. 排版和圖標
「上層」色
「上層」色主要用在那些位於關鍵介面上的文字、圖標等相對細微的元素,這些關鍵介面使用了首選色、次級色、表層色、背景色、錯誤色等。
在深色模式中,「上層」色通常使用白色或者黑色,如下圖所示。
深色背景上的淺色文字
當淺色文字需要顯示在深色背景上面時,建議採用以下幾個不飽和度:
- 高優先級文字:不透明度為87%
- 中優先級或提示文字:不透明度為60%
- 表示不可用狀態的文字:不透明度為38%
四、自定義應用
使用一些特定的深色模式組件對 Material Design 一些用例來講也很受用。使用一些特定的深色模式組件對 Material Design 一些用例來講也很受用。
1. 面積較大的控制項
螢幕中那些占用較大面積的組件,比如 app bar 或背景,可以使用深色。
- 如果是亮色,可用於較小的組件,不要用在面積較大的組件上。
- 避免使用深色模式中的首選色作為背景色,因為背景面積通常很大,會使介面整體看起來太亮。
2. 淺色與深色的結合
如果深色模式中要用到淺色的組件,則淺色可以用於突出這個組件的優先級。
例如,將深色模式中的 snackbar(消息通知組件)設定為淺色,可使 snackbar 在介面中更加突出。
附錄
- WCAG:全稱Web Content Accessibility Guidelines(Web內容無障礙指南)。
- 色彩對比度計算網站:https://contrast-ratio.com/
本文由@Jalyn 原創發布於人人都是產品經理,未經允許,禁止轉載。
題圖來自Unspalsh, 基於CC0協議。