深色主題是應用界面設計的最新趨勢。
曾經罕見的深色主題現已受到大眾的廣泛期待。
如果設計得當，深色主題可以帶來諸多好處，可以緩解視疲勞，弱光下更易讀。而且，根據屏幕的不同，可以大大減少電池消耗。
然而，想要設計一套出色的深色主題並非易事，不能只是簡單地重複使用顏色或反轉色調。如果這樣做，效果將適得其反：加重視疲勞，弱光下更難閱讀，甚至可能打破界面的信息層次結構。
這篇文章主要將說明如何設計可讀、均衡和出色的深色主題。
深暗淺明
大多數深色主題的 UI 設計都遵循這一原則：深層界面更暗，淺層界面略亮。這模擬了從上方投射光線的環境，帶來熟悉且令人安心的物理效果。
在進行深色主題設計時，很容易就會通過反轉淺色主題來實現效果。然而，這樣做反而會使底層變亮，而表層變暗。這有悖於物理規律，會讓人感覺不自然
。
與以上方法不同，我們應該從淺色主題的主界面取色，反轉此顏色，以獲得深色主題的主界面顏色。然後在近表層調亮這種顏色，在底層調暗這種顏色。
在 Superhuman，我們的深色主題是由五種灰色陰影構成的。表層界面使用較淺的灰色；底層的界面使用較深的灰色。
越靠近表層的界面使用較淺的灰色，靠近底層的界面使用較深的灰色。
重新審視感知對比度
在通過參考淺色主題來設計深色主題時，很重要的是要重新審視感知對比。也就是說，關鍵是看一個元素表現出來的差異，而不是看數值究竟是多少。
例如，在我們的淺色主題中，聯繫人信息文字為不透明度為 60% 的黑色。但是在我們的深色主題中，我們將聯繫方式設置為不透明度為 65% 的白色。
雖然兩者的對比度都超過 AA 標準，但是額外的 5% 卻可以防止視覺疲勞，特別是在弱光條件下。
對於這些補償並沒有嚴格的規定。相反，我們會根據文本區域、字體大小和行寬分別調整每一個元素，以確保深色主題和淺色主題一樣清晰、易於閱讀。
少用大面積亮色
在淺色主題中，我們經常使用大面積的亮色，效果通常還不錯，因為我們最重要的元素可能會更亮。但在深色主題中是行不通的，大面積亮色會把我們的注意力吸引過去。
例如，參考「提醒我」界面。在淺色主題中，粉紅色的蒙層不會把用戶的注意力從顏色更亮的對話框上吸引走。但是在深色主題中，同樣的蒙層卻會吸引注意力。所以我們拿掉了這種蒙層，這樣用戶就可以快速、輕易地關注到重要的部分。
△ 少用大面積亮色可以讓重要信息更受關注
避免純黑或純白
在 Superhuman，我們不會在黑暗主題中使用純黑或純白。
有以下四個理由：
1. 真實性
真正的黑色並不存在於我們的日常環境中（世界上最黑的物體，麻省理工學院開發的一種尚未命名的材料，離真正的黑色還差 0.005% ）。因此，我們的視覺已經適應了將相對的黑暗視為黑色。
這就是為什麼#000000 會讓人感覺如此不和諧，尤其是在與較淺的元素對比時，它與我們通常看到的任何東西都不匹配。
2. 黑色拖影
當較淺的元素被拖動或滾動在純黑色背景上時，就會產生黑色塗抹這種視覺失真。
這種效果出現在 OLED 屏幕上，這種屏幕越來越普遍。在這些屏幕上，純黑色像素會被關閉（這就是為什麼深色主題比淺色主題消耗更少的電量）。
然而，這些像素的開啟和關閉比改變顏色要慢，因此這個變量響應導致了拖影效果。
△ iOS 時鐘應用程式的黑色拖影（必須在 OLED 屏幕上觀看）
你可以通過使用深灰色來避免黑色拖影，因為那樣的話像素將不會被關閉。這甚至適用於像 #010101 這樣的深灰色，並且仍然比淺色主題更省電。
3. 深度
如果在背景中使用純黑色，你就無法去表現深度。
打個比方，假如界面背景是純黑色的，你想在上面畫一個通知界面，通知應該漂浮在背景之上，所以你要使用陰影來傳達深度。但是，這種情況下陰影是難以察覺的，因為沒有什麼比純黑更黑。
如果你的背景不是純黑色的，你可以使用不同不透明度的陰影和模糊來表達深度。例如，參考 Superhuman 的通知:
可以用陰影來表達深度，前提是背景不是純黑色的。
4. 光暈
純白文本與純黑背景形成最高對比度是 21:1。從量化的 WCAG（Web 內容無障礙指南）的使用條件來看，這簡直是最佳輸出對比。
然而，在設計黑暗主題時，一定要注意對比度，對比度太高會導致眼睛疲勞和光暈。
將非常明亮的文本設置在非常暗的背景下時，文本會顯示為背景出血。對於我們這些散光患者來說，這種影響甚至更強。
傑森·哈裡森是感知與互動研究組的博士後研究員，他說:
散光患者（約佔總人口的 50%）發現，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關:在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了「變形」鏡片的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而透鏡的變形會使眼睛產生更模糊的焦點。
在 Superhuman，我們必須特別注意光暈，因為應用程式的文本太多。我們把白色的文字設置為 90% 的不透明度，這樣黑暗的背景就會混在一起。這平衡了對比度和亮度，使應用程式很容易在各種光線條件下閱讀。
加深顏色
為了避免眼睛疲勞和光暈，我們把文本的顏色調暗，所以彩色元素和按鈕可能會顯得太亮了。必須調整這些顏色，以更好地適應深色的主題。
首先，我們降低亮度，使這些顏色不會搶附近文本的視覺焦點。然後，增加飽和度，使他們仍然保持原有特徵。
例如，如果直接使用淺色主題中的紫色，它與附近文本對比顯得太亮了。在實際的深色主題中，我們加深了這種顏色，這樣用戶才可以專注於文本。
為黑暗的主題創造更深的顏色：保持色調，降低亮度，增加飽和度。
結論
深色主題有很多好處，現在被期待廣泛應用。
然而，想要設計好一款深色主題並非易事。簡單地重複使用顏色和反轉色調會增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。
我們找到了一種系統的方式來設計可讀性強、均衡、出色的深色主題，只需遵循以下步驟:
深暗淺明
重新審視感知對比度
少用大面積亮色
避免純黑或純白
加深顏色
想了解更多的設計資訊、有料乾貨、素材分享，歡迎掃描下方二維碼，加入饅頭哥的伐木累！