深色主題是應(yīng)用界面設(shè)計(jì)的最新趨勢(shì)。MacOS 去年推出了深色主題模式后，Android 和 iOS 也緊隨其后，推出了各自的深色主題模式。

曾經(jīng)罕見(jiàn)的深色主題現(xiàn)已受到大眾的廣泛期待。

如果設(shè)計(jì)得當(dāng)，深色主題可以帶來(lái)諸多好處，可以緩解視疲勞，弱光下更易讀。而且，根據(jù)屏幕的不同，可以大大減少電池消耗。

然而，想要設(shè)計(jì)一套出色的深色主題并非易事，不能只是簡(jiǎn)單地重復(fù)使用顏色或反轉(zhuǎn)色調(diào)。如果這樣做，效果將適得其反：加重視疲勞，弱光下更難閱讀，甚至可能打破界面的信息層次結(jié)構(gòu)。

這篇文章主要將說(shuō)明如何設(shè)計(jì)可讀、均衡和出色的深色主題。

深暗淺明

大多數(shù)深色主題的 UI 設(shè)計(jì)都遵循這一原則：深層界面更暗，淺層界面略亮。這模擬了從上方投射光線的環(huán)境，帶來(lái)熟悉且令人安心的物理效果。

在進(jìn)行深色主題設(shè)計(jì)時(shí)，很容易就會(huì)通過(guò)反轉(zhuǎn)淺色主題來(lái)實(shí)現(xiàn)效果。然而，這樣做反而會(huì)使底層變亮，而表層變暗。這有悖于物理規(guī)律，會(huì)讓人感覺(jué)不自然。

與以上方法不同，我們應(yīng)該從淺色主題的主界面取色，反轉(zhuǎn)此顏色，以獲得深色主題的主界面顏色。然后在近表層調(diào)亮這種顏色，在底層調(diào)暗這種顏色。

在 Superhuman，我們的深色主題是由五種灰色陰影構(gòu)成的。表層界面使用較淺的灰色；底層的界面使用較深的灰色。

越靠近表層的界面使用較淺的灰色，靠近底層的界面使用較深的灰色。

重新審視感知對(duì)比度

在通過(guò)參考淺色主題來(lái)設(shè)計(jì)深色主題時(shí)，很重要的是要重新審視感知對(duì)比。也就是說(shuō)，關(guān)鍵是看一個(gè)元素表現(xiàn)出來(lái)的差異，而不是看數(shù)值究竟是多少。

例如，在我們的淺色主題中，聯(lián)系人信息文字為不透明度為 60% 的黑色。但是在我們的深色主題中，我們將聯(lián)系方式設(shè)置為不透明度為 65% 的白色。

雖然兩者的對(duì)比度都超過(guò) AA 標(biāo)準(zhǔn)，但是額外的 5% 卻可以防止視覺(jué)疲勞，特別是在弱光條件下。

對(duì)于這些補(bǔ)償并沒(méi)有嚴(yán)格的規(guī)定。相反，我們會(huì)根據(jù)文本區(qū)域、字體大小和行寬分別調(diào)整每一個(gè)元素，以確保深色主題和淺色主題一樣清晰、易于閱讀。

少用大面積亮色

在淺色主題中，我們經(jīng)常使用大面積的亮色，效果通常還不錯(cuò)，因?yàn)槲覀冏钪匾脑乜赡軙?huì)更亮。但在深色主題中是行不通的，大面積亮色會(huì)把我們的注意力吸引過(guò)去。

例如，參考「提醒我」界面。在淺色主題中，粉紅色的蒙層不會(huì)把用戶(hù)的注意力從顏色更亮的對(duì)話(huà)框上吸引走。但是在深色主題中，同樣的蒙層卻會(huì)吸引注意力。所以我們拿掉了這種蒙層，這樣用戶(hù)就可以快速、輕易地關(guān)注到重要的部分。

△ 少用大面積亮色可以讓重要信息更受關(guān)注

避免純黑或純白

在 Superhuman，我們不會(huì)在黑暗主題中使用純黑或純白。

有以下四個(gè)理由：

1. 真實(shí)性

真正的黑色并不存在于我們的日常環(huán)境中（世界上最黑的物體，麻省理工學(xué)院開(kāi)發(fā)的一種尚未命名的材料，離真正的黑色還差 0.005% ）。因此，我們的視覺(jué)已經(jīng)適應(yīng)了將相對(duì)的黑暗視為黑色。

這就是為什么#000000 會(huì)讓人感覺(jué)如此不和諧，尤其是在與較淺的元素對(duì)比時(shí)，它與我們通常看到的任何東西都不匹配。

2. 黑色拖影

當(dāng)較淺的元素被拖動(dòng)或滾動(dòng)在純黑色背景上時(shí)，就會(huì)產(chǎn)生黑色涂抹這種視覺(jué)失真。

這種效果出現(xiàn)在 OLED 屏幕上，這種屏幕越來(lái)越普遍。在這些屏幕上，純黑色像素會(huì)被關(guān)閉（這就是為什么深色主題比淺色主題消耗更少的電量）。

然而，這些像素的開(kāi)啟和關(guān)閉比改變顏色要慢，因此這個(gè)變量響應(yīng)導(dǎo)致了拖影效果。

△ iOS 時(shí)鐘應(yīng)用程序的黑色拖影（必須在 OLED 屏幕上觀看）

你可以通過(guò)使用深灰色來(lái)避免黑色拖影，因?yàn)槟菢拥脑?huà)像素將不會(huì)被關(guān)閉。這甚至適用于像 #010101 這樣的深灰色，并且仍然比淺色主題更省電。

3. 深度

如果在背景中使用純黑色，你就無(wú)法去表現(xiàn)深度。

打個(gè)比方，假如界面背景是純黑色的，你想在上面畫(huà)一個(gè)通知界面，通知應(yīng)該漂浮在背景之上，所以你要使用陰影來(lái)傳達(dá)深度。但是，這種情況下陰影是難以察覺(jué)的，因?yàn)闆](méi)有什么比純黑更黑。

如果你的背景不是純黑色的，你可以使用不同不透明度的陰影和模糊來(lái)表達(dá)深度。例如，參考 Superhuman 的通知:

可以用陰影來(lái)表達(dá)深度，前提是背景不是純黑色的。

4. 光暈

純白文本與純黑背景形成最高對(duì)比度是 21:1。從量化的 WCAG（Web 內(nèi)容無(wú)障礙指南）的使用條件來(lái)看，這簡(jiǎn)直是最佳輸出對(duì)比。

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

將非常明亮的文本設(shè)置在非常暗的背景下時(shí)，文本會(huì)顯示為背景出血。對(duì)于我們這些散光患者來(lái)說(shuō)，這種影響甚至更強(qiáng)。

杰森·哈里森是感知與互動(dòng)研究組的博士后研究員，他說(shuō):

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

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

加深顏色

為了避免眼睛疲勞和光暈，我們把文本的顏色調(diào)暗，所以彩色元素和按鈕可能會(huì)顯得太亮了。必須調(diào)整這些顏色，以更好地適應(yīng)深色的主題。

首先，我們降低亮度，使這些顏色不會(huì)搶附近文本的視覺(jué)焦點(diǎn)。然后，增加飽和度，使他們?nèi)匀槐３衷刑卣鳌?/p>

例如，如果直接使用淺色主題中的紫色，它與附近文本對(duì)比顯得太亮了。在實(shí)際的深色主題中，我們加深了這種顏色，這樣用戶(hù)才可以專(zhuān)注于文本。

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

結(jié)論

深色主題有很多好處，現(xiàn)在被期待廣泛應(yīng)用。

然而，想要設(shè)計(jì)好一款深色主題并非易事。簡(jiǎn)單地重復(fù)使用顏色和反轉(zhuǎn)色調(diào)會(huì)增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺(jué)和信息層次。

我們找到了一種系統(tǒng)的方式來(lái)設(shè)計(jì)可讀性強(qiáng)、均衡、出色的深色主題，只需遵循以下步驟:

• 深暗淺明
• 重新審視感知對(duì)比度
• 少用大面積亮色
• 避免純黑或純白
• 加深顏色

原文鏈接：《How to design delightful dark themes》

歡迎關(guān)注譯者的微信公眾號(hào)：「海外設(shè)計(jì)參考」