文章分享了作者為應用設計深色主題的心得和經驗，希望對您設計深色主題的界面有所幫助。

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

曾經罕見的深色主題現已受到大眾的廣泛期待。

如果設計得當，深色主題可以帶來諸多好處，可以緩解視疲勞，弱光下更易讀。而且，根據屏幕的不同，可以大大減少電池消耗。

然而，想要設計一套出色的深色主題并非易事，不能只是簡單地重復使用顏色或反轉色調。如果這樣做，效果將適得其反：加重視疲勞，弱光下更難閱讀，甚至可能打破界面的信息層次結構。

這篇文章主要將說明如何設計可讀、均衡和出色的深色主題。

一、深暗淺明

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

在進行深色主題設計時，很容易就會通過反轉淺色主題來實現效果。然而，這樣做反而會使底層變亮，而表層變暗。這有悖于物理規律，會讓人感覺不自然。

與以上方法不同，我們應該從淺色主題的主界面取色，反轉此顏色，以獲得深色主題的主界面顏色。然后在近表層調亮這種顏色，在底層調暗這種顏色。

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

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

二、重新審視感知對比度

在通過參考淺色主題來設計深色主題時，很重要的是要重新審視感知對比。也就是說，關鍵是看一個元素表現出來的差異，而不是看數值究竟是多少。

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

雖然兩者的對比度都超過AA標準，但是額外的5%卻可以防止視覺疲勞，特別是在弱光條件下。

對于這些補償并沒有嚴格的規定。相反，我們會根據文本區域、字體大小和行寬分別調整每一個元素，以確保深色主題和淺色主題一樣清晰、易于閱讀。

三、少用大面積亮色

在淺色主題中，我們經常使用大面積的亮色，效果通常還不錯，因為我們最重要的元素可能會更亮。但在深色主題中是行不通的，大面積亮色會把我們的注意力吸引過去。

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

少用大面積亮色可以讓重要信息更受關注

四、避免純黑或純白

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

有以下四個理由：

4.1 真實性

真正的黑色并不存在于我們的日常環境中（世界上最黑的物體，麻省理工學院開發的一種尚未命名的材料，離真正的黑色還差0.005% ）。因此，我們的視覺已經適應了將相對的黑暗視為黑色。

這就是為什么#000000會讓人感覺如此不和諧，尤其是在與較淺的元素對比時，它與我們通?？吹降娜魏螙|西都不匹配。

4.2 黑色拖影

當較淺的元素被拖動或滾動在純黑色背景上時，就會產生黑色涂抹這種視覺失真。

這種效果出現在OLED屏幕上，這種屏幕越來越普遍。在這些屏幕上，純黑色像素會被關閉（這就是為什么深色主題比淺色主題消耗更少的電量）。

然而，這些像素的開啟和關閉比改變顏色要慢，因此這個變量響應導致了拖影效果。

iOS時鐘應用程序的黑色拖影（必須在OLED屏幕上觀看）

你可以通過使用深灰色來避免黑色拖影，因為那樣的話像素將不會被關閉。這甚至適用于像#010101這樣的深灰色，并且仍然比淺色主題更省電。

4.3 深度

如果在背景中使用純黑色，你就無法去表現深度。

打個比方，假如界面背景是純黑色的，你想在上面畫一個通知界面，通知應該漂浮在背景之上，所以你要使用陰影來傳達深度。但是，這種情況下陰影是難以察覺的，因為沒有什么比純黑更黑。

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

可以用陰影來表達深度，前提是背景不是純黑色的。

4.4 光暈

純白文本與純黑背景形成最高對比度是21:1。從量化的WCAG（Web內容無障礙指南）的使用條件來看，這簡直是最佳輸出對比。

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

將非常明亮的文本設置在非常暗的背景下時，文本會顯示為背景出血。對于我們這些散光患者來說，這種影響甚至更強。

杰森·哈里森是感知與互動研究組的博士后研究員，他說:

散光患者（約占總人口的50%）發現，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關:在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了“變形”鏡片的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而透鏡的變形會使眼睛產生更模糊的焦點。

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

五、加深顏色

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

首先，我們降低亮度，使這些顏色不會搶附近文本的視覺焦點。然后，增加飽和度，使他們仍然保持原有特征。

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

為黑暗的主題創造更深的顏色：保持色調，降低亮度，增加飽和度。

結論

深色主題有很多好處，現在被受到廣泛期待。

然而，想要設計好一款深色主題并非易事。簡單地重復使用顏色和反轉色調會增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。

我們找到了一種系統的方式來設計可讀性強、均衡、出色的深色主題，只需遵循以下步驟:

1. 深暗淺明
2. 重新審視感知對比度
3. 少用大面積亮色
4. 避免純黑或純白
5. 加深顏色

本文譯自Teresa Man的How to design delightful dark themes，作者是郵件客戶端Superhuman的首席設計師

原文鏈接：https://heydesigner.com/blog/how-to-design-delightful-dark-themes/

本文由 @海外設計參考 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議