近幾年來，越來越多的產品都推出了「深色模式」。無論是蘋果，還是谷歌，「深色模式」都已經成為其產品界面中不可缺少的一部分。
相比於「淺色模式」，「深色模式」的屏幕亮度更低，可以讓用戶在暗黑的環境下更友好地體驗產品，同時，也可以最大程度地減緩眼睛疲勞。
那麼，「深色模式」到底應該怎麼設計才好呢？以下，我總結了 8 條產品設計建議，希望對你有所幫助。
避免全黑設計
「深色模式」並不一定要求背景全黑或者字體全白。實際上，這種高反差也會讓人看起來很難受。
安全起見的話，建議在頁面上主要採用深灰色，而不要採用全黑色（色號#000000）。
相比於全黑色，深灰色背景下的淺色文字反差感稍弱，可以緩解用戶的眼睛疲勞。此外，因為在灰色背景下（而非全黑背景）更容易看見陰影，所以採用深灰色，還可以更好地體現更多色彩、陰影以及立體感等內容。
根據谷歌等材料設計（Material design）原則，頁面「深色模式」的主色最好選用 #121212 深灰色號。
避免在「深色模式」中採用過多飽和色彩
在淺色背景下，飽和色彩看起來會非常生動形象。然而，如果在「深色模式」下采用飽和色彩，則會讓人難以識別有關元素或內容。
因此，在「深色模式」中，主色調一定不要採用飽和色彩。建議使用淺色調（色調控制在 50 至 200 範圍內），從而讓頁面內容在「深色模式」下體現更佳的可讀性。
淺色調不僅不會影響用戶體驗，它還會在不造成眼睛疲勞的前提下保持恰當的反差。
避免在「深色模式」中採用飽和色彩，否則會降低用戶的可讀性（如左圖）；建議採用淺色調，保證基本的可讀性（如右圖）。
符合色彩對比標準
此外，還要確保在「深色模式」下，頁面內容也要保持舒適和清晰度。背景顏色必須要足夠深，從而反襯出頁面淺色文字。
根據谷歌的材料設計原則，建議文字和背景的對比比例至少保持在 15.8 : 1。
你也可以通過色彩對比工具來測試有關對比比例。
文本用色一定要「亮」
所謂「亮」，即是要讓用戶能立即識別頁面文本內容。通常情況下，頁面文本也必須要採用「亮」色。
對於「深色模式」，一般採用的「亮」色是純白色（色號#FFFFFF）。不過，純白色會給人非常明亮的感覺，在一定程度上與深色背景結合在一起，會給人一種眩暈的感覺。
所以，根據谷歌的材料設計原則，建議在頁面文本選色方面採用稍微深一點的白色：
- 對於重點強調的文本，可以將透明度設置為 87%。
- 而最不重要的文本則可以將透明度設置為 38%。
- 一般重要的則可以將透明度設置為 60%。
小提示：相比於淺色背景下的深色文本，深色背景下的淺色文本會顯得更加厚實。因此，你可能會喜歡在「深色模式」中採用相對較細的文字。
△ 採用稍微深一點的白色，可以防止文本和背景顏色之間的明顯對比產生的眩暈感。
不要忽略考慮設計中的情感因素
當你計劃在現有產品中新增「深色模式」時，你肯定希望能通過這種模式傳達出原有的產品情感，對吧？但我建議最好不要有這種想法。
至於這背後的原因，我認為在不同背景顏色下，色彩本來就是獨立存在的，同時也代表著特殊的意義。
這即是說，「深色模式」不應該傳達出和「淺色模式」相同的情感訴求。它們應該喚起用戶不同的情感。
所以，與其去解決這個問題，倒不妨順著這個事實，讓自己的產品體現不同尋常的個性。
△ Shift的數據面板。圖片來源：Sergey Zolotnikov
體現層次
和「淺色模式」的設計一樣，在設計「深色模式」的界面時，也必須要體現出層次感，同時突出頁面佈局中的重要元素。
要體現界面的層次感，可以利用海拔高度（elevation）這個工具。
譯者注：海拔高度是指相對深度或距離，是兩個表面在Z軸上的距離。其測量單位和X軸及Y軸一樣，通常是與密度無關的像素（dp）。
在「淺色模式」下，一般會採用陰影（shadow）來表達層次。頁面元素顯得更高，其陰影範圍就會更廣。
然而，這種方式卻不適用於「深色模式」。畢竟，很難想象在什麼背景下加入陰影是什麼效果。因此，最好就通過提升各層次的亮度來實現這個目的。
在採用材料設計的「深色模式」下，海拔提升的頁面及元素的顏色都是通過疊加不同透明度的白色來體現的。頁面的海拔越高，相應的內容或元素就會更亮（暗示接近光源）。
海拔越高，頁面越亮。
△ Music Player的界面。圖片來源：Martin Mroč
讓用戶自由切換不同背景模式
如果可以讓系統自動切換「深色模式」和「淺色模式」，聽起來這樣的設計可能會非常友好。然而，這種設計卻可能會導致意想不到的糟糕體驗。
如果系統會自動切換不同背景模式，相當於讓用戶失去了「控制」，而被迫接受系統為其選擇的背景模式。
因此，最好不要自動開啟產品的「深色模式」。你可以通過界面功能設置，讓用戶自由地打開或關閉這項功能。用戶也可以根據其體驗產品時的需求和想法，自主選用這項功能。
△ 設置中的「深色模式」開關
在「深色模式」和「淺色模式」下進行測試
在最終推出產品之前，一定要在兩種不同模式下進行測試，查看各個界面的顯示情況，在必要的情況下進行相應調整。
你可以考慮在晚上的時候進行測試，最好在白熾燈照射下測試。
閱讀更多 UI設計靠譜站長 的文章
