黑色主題是應(yīng)用程序設(shè)計的最新趨勢，macOS去年推出了暗模式。Android上月也推出了黑暗主題，iOS在過去兩周趕上來了，曾經(jīng)罕見的黑色主題已成為普遍預(yù)期。

如果做得好，黑暗主題有很多好處，他們減少眼睛疲勞，它們在弱光下更容易閱讀。而且，根據(jù)屏幕的不同，它們可以大大減少電池消耗。

然而，很難創(chuàng)造一個令人愉快的黑暗主題。我們不能簡單地重復(fù)使用我們的顏色或顛倒我們的色調(diào)。如果我們這樣做，我們將得到與我們想要的相反的結(jié)果：我們將增加眼睛的疲勞，使其在弱光下更難閱讀。我們甚至可能打破我們的信息層次結(jié)構(gòu)。

在這篇文章中，我們分享了如何設(shè)計可讀、平衡和令人愉悅的黑色主題。

較近的表面使用較淺的灰色，較遠的表面使用較深的灰色

1、使遙遠的表面

大多數(shù)深色主題的UI設(shè)計都遵循這一原則：使遠處的表面變暗。這模擬了一個光從上方投射的環(huán)境，并傳達了一種熟悉和安心的物質(zhì)。

當創(chuàng)建一個黑暗的主題時，它可能會誘使我們轉(zhuǎn)換成光明的主題。然而，遠處的表面會變亮，而近處的表面會變暗。這將打破物質(zhì)性，感覺不自然。

相反，只取你的光主題的主要表面顏色。反轉(zhuǎn)此顏色以產(chǎn)生深色主題的主表面顏色。對較近的表面調(diào)亮這種顏色，對較遠的表面調(diào)暗這種顏色。

在《超人》中，我們的黑暗主題是由五種灰色陰影構(gòu)成的。較近的表面使用較淺的灰色；較遠的表面使用較深的灰色。

較近的表面使用較淺的灰色；較遠的表面使用較深的灰色。

2、重新審視知覺對比

在設(shè)計一個暗主題時，參考一個亮主題，很重要的是要重新審視感知對比。這是一個元素看起來有多大的反差，不管數(shù)字可能暗示什么。

例如，在我們的light主題中，聯(lián)系人信息是黑色的，不透明度為60%。但是在我們的黑色主題中，我們將聯(lián)系方式設(shè)置為白色，不透明度為65%。雖然兩者的對比度都超過AA標準，額外的5%可以防止疲勞，特別是在光線不足的情況下。

對于這些補償并沒有嚴格的規(guī)定，相反，我們會根據(jù)文本大小、字體大小和行寬分別調(diào)整每一項，以確保深色主題和淺色主題一樣清晰、易于閱讀。

3、減少大塊明亮的顏色

在燈光主題中，我們經(jīng)常使用大塊明亮的顏色。這通常是不錯的決定：我們最重要的元素可能會更亮。但在暗色主題中，這是行不通的：大塊的顏色從我們最重要的元素中提取焦點。

例如，考慮我們的“提醒我”屏幕。在我們的光主題中，粉紅色的覆蓋不會分散甚至更亮的對話框。但是在我們的黑暗主題中，同樣的覆蓋將我們的注意力拉離。我們完全去掉了覆蓋層，這樣就可以快速、輕松地關(guān)注重要的事情。

減少大塊明亮的顏色，讓你更容易專注于重要的事情

4、避免純黑或純白

在《超人》中，我們不會在黑暗主題中使用純黑或純白，以下是做同樣事情的四個理由。

4.1 現(xiàn)實主義

真正的黑色并不存在于我們的日常環(huán)境中。（世界上最黑的物體，麻省理工學(xué)院開發(fā)的一種尚未命名的材料，離真正的黑色還差0.005% ！）因此，我們的視覺已經(jīng)適應(yīng)了將相對的黑暗視為真正的黑色。這就是為什么#000000會讓人感覺如此不和諧，尤其是在與較輕的元素對比時。它與我們通常看到的任何東西都不匹配。

4.2 黑色的污點

黑色涂抹是一種視覺失真，當較輕的內(nèi)容被拖動或滾動在純黑色背景。

這種效果出現(xiàn)在OLED屏幕上，這種屏幕越來越普遍。在這些屏幕上，純黑色像素被關(guān)閉。（這就是為什么深色主題比淺色主題使用更少的能量。）然而，這些像素的開啟和關(guān)閉比改變顏色要慢。這個變量響應(yīng)創(chuàng)建了涂抹效果。

iOS Clock應(yīng)用程序中的黑色污跡（必須在OLED屏幕上查看）

你可以通過使用深灰色來避免黑色涂抹，因為那樣的話像素將不會關(guān)閉。這甚至適用于像#010101這樣的深灰色—并且仍然比淺色主題使用更少的能量！

4.3 深度

如果你在背景元素中使用真正的黑色，你就失去了傳達深度的某些技巧。

例如，想象你的背景是純黑色的。在此之上，顯示一個通知。通知應(yīng)該漂浮在背景之上，所以你使用陰影來傳達深度。除了陰影是難以察覺的，因為沒有什么比純黑更黑。

如果你的背景不是純黑色的，你可以使用不同不透明度的陰影和模糊來表達深度。例如，考慮超人中的通知：

如果你的背景不是純黑色的，你可以用陰影來表達深度

4.4 暈光

純白色文本在純黑色背景下產(chǎn)生可能的最高對比度：21：1。在定量的WCAG可訪問性術(shù)語中，這是dream輸出。

然而，在設(shè)計黑暗主題時，一定要注意非常高的對比度。對比度太高會導(dǎo)致眼睛疲勞和光暈。

當將非常明亮的文本設(shè)置在非常暗的背景下時，文本會顯示為背景出血。對于我們這些散光患者來說，這種影響甚至更強。杰森·哈里森是感知與互動研究組的博士后研究員，他說：

散光患者（約占總?cè)丝诘?0%）發(fā)現(xiàn)，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關(guān)：在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了“變形”鏡片的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而透鏡的變形會使眼睛產(chǎn)生更模糊的焦點。

在《超人》中，我們必須特別注意halation，因為我們的應(yīng)用程序文本太多。我們把白色的文字設(shè)置為90%的不透明度，這樣黑暗的背景就會混在一起。這平衡了對比度和亮度，使應(yīng)用程序很容易在各種光線條件下閱讀。

5、加深顏色

因為為了避免眼睛疲勞和光暈，我們把文本的顏色調(diào)小了，所以我們的顏色和按鈕可能顯得太亮了。我們現(xiàn)在必須調(diào)整這些顏色，以更好地工作在黑暗的主題。首先，我們降低亮度，使這些顏色不會覆蓋附近的文本。其次，我們增加飽和度，使他們?nèi)匀挥刑攸c。

例如，如果我們直接使用來自light主題的紫色，它在附近的文本中顯得太亮了。在我們實際的深色主題中，我們加深了這種顏色，這樣用戶可以專注于文本。

為黑暗的主題創(chuàng)造更深的顏色；保持色調(diào)，降低亮度，增加飽和度。

總結(jié)

黑暗主題有很多好處，現(xiàn)在被廣泛期待。然而，它們很難很好地執(zhí)行。重復(fù)使用顏色和反轉(zhuǎn)色調(diào)的簡單方法會增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。

我們找到了一種系統(tǒng)的方式來構(gòu)建可讀、平衡、愉悅的黑暗主題。只需遵循以下步驟：

使遠處的表面變暗

回顧知覺對比

減少大塊鮮艷的色彩

避免純黑色或白色

加深色彩

希望這有助于你設(shè)計愉快的黑暗主題。