[譯] 如何設計一款討人喜歡的暗色主題

• 原文地址：How to design delightful dark themes
• 原文做者：Teresa Man
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Jessica
• 校對者：藥王, HytonightYX

如何設計一款討人喜歡的暗色主題

在 Superhuman，咱們正在打造世界上最快的電子郵件體驗。您能夠體驗到以兩倍於之前的速度瀏覽您的收件箱，而且保持收件箱爲零！

暗色主題是應用程序設計的最新趨勢。macOS 去年推出了黑暗模式。Android 上月也推出了黑暗主題。在過去的兩週中，iOS 也緊跟而上。

曾經不多見的暗色主題已成爲人們廣泛指望的主題。

若是作得好，暗色主題是有不少好處的。它能夠減小眼睛疲勞，在弱光下也更容易閱讀。並且，對於 OLED 屏幕來講，暗色主題能夠大大下降電量消耗。

然而，創造一個討人喜歡的暗色主題可不容易。咱們不能簡單地重用咱們的顏色或顛倒咱們的色調。若是咱們這樣作，每每會拔苗助長：咱們將增長眼睛的疲勞，使其在弱光下更難閱讀。咱們甚至有可能打破咱們軟件的信息層次結構。

在這篇文章中，咱們將會分享如何設計通俗易懂、和諧且討人喜歡的暗色主題

1. 越遠的區域越暗

大多數深色主題的 UI 設計都遵循這一原則：越遠的區域越暗。這模擬了一個光源從上方投射的場景，並傳達了熟悉且使人安心的實體感。

當設計一個暗色主題時，咱們很容易想固然地將咱們的淺色主題直接反轉。然而，這樣的話，遠處的區域會變亮，而近處的區域會變暗。這將破壞真實感，使人感到不天然。

與此相反，您應該只取您的淺色主題的主要表面顏色。反轉此顏色以產生暗色主題的主要顏色。對較近的表面調亮這種顏色，對較遠的表面調暗這種顏色。

在 Superhuman 中，咱們的暗色主題是由五種灰色色調構成的。較近的區域使用較淺的灰色，較遠的區域使用較深的灰色。

2. 從新肯定感知對比度

經過原先的淺色主題來設計暗色主題時，很重要的一點是要從新肯定感知對比度。注意，是這個元素看起來的對比度，而別被所謂的建議或標準所限制。

例如，在咱們的淺色主題中，聯繫人信息是黑色的，不透明度爲 60%。可是在咱們的暗色主題中，咱們將聯繫方式設置爲白色，不透明度爲65%。雖然這兩種的對比度超過了 AA 標準，但額外的 5% 能夠防止視覺疲勞，特別是在光線不足的狀況下。

對於這些顏色的補償並無嚴格的規定。咱們能夠根據文本大小、字體大小和行寬分別調整每一個項目，以確保暗色主題與淺色主題同樣清晰、易於閱讀。

3. 減小大塊明亮的色彩

在淺色主題中，咱們常用大塊明亮的顏色。這通常來講都是對的：咱們最重要的元素可能會更亮。但在暗色主題中，這是行不通的：用戶會將焦點集中於大塊的顏色反而忽視了咱們最重要的元素。

例如，這是咱們的 Remind me 界面。在咱們的淺色主題中，粉紅色的遮罩層不會分散在更明亮的對話框上的焦點。可是在咱們的暗色主題中，一樣的遮罩層將咱們的注意力分散。咱們徹底去掉了遮罩層，這樣咱們就能夠快速、方便地聚焦於重要的內容。

4. 避免純黑色或純白色

在 Superhuman 中，咱們沒有使用任何純黑色或純白色在咱們的暗色主題。這樣作有四個緣由。

4.1. 真實感

在咱們的平常環境中並不存在純黑色（世界上最黑的物體，麻省理工學院開發的一種還沒有命名的材料，它離真正的純黑色還差 0.005%）所以，咱們的視覺已經適應了將相對的黑色視爲真正的黑色。這就是爲何 #000000 會讓咱們感受如此不和諧的緣由，尤爲是在與較亮的元素對比時。由於它不存在於與咱們一般看到的任何東西的顏色上。

4.2. 黑色拖影

黑色拖影是一種視覺失真，出現於當較亮的內容被拖動或滾動在純黑色背景時。

這種效果出如今愈來愈多人使用的 OLED 屏幕上。在這種屏幕上，純黑色像素被關閉（這就是暗色主題比淺色主題使用更少電量的緣由）。然而，這些像素的開啓和關閉的速度比顏色改變的速度要慢。這個不一樣速度的結果形成了拖影效果。

你能夠經過使用深灰色來避免黑色拖影，由於這樣像素就不會被關閉。甚至可使用像 #010101 這樣的深灰色，而且還會比淺色主題使用更少的電量！

4.3. 層次感

若是您在背景元素中使用了純黑色，您會失去一些表現層次深度的技巧。

例如，想象您的背景是純黑色的。在此之上，顯示一個通知。通知應該浮在背景之上，因此您用陰影來表達深度。只是這樣的陰影難以察覺，由於沒有什麼比純黑色更暗。

若是您的背景不是純黑色的，您可使用不一樣不透明度的陰影和模糊來表達深度。例如，考慮 Superhuman 中的通知：

4.4. 眩暈

純白色文本在純黑色背景下可能產生的最高對比度爲：21:1。在 WCAG（Web Content Accessibility Guidelines Web 內容無障礙指南） 中的無障礙說法中，這是理想輸出。

然而，在設計暗色主題時，必定要當心太高的對比度。對比度過高會致使眼睛疲勞和眩暈。

當將很是明亮的文本放置在很是暗的背景下時，文本會看起來滲透在背景之中。這對於咱們這些散光的人來講，影響甚至更強。感受感知與互動研究小組的博士後研究員 Jason Harrison 表示：

散光患者（約佔總人口的 50% ）在閱讀黑底白字內容時比閱讀白底黑字內容更困難。這在必定程度上與光線有關：在明亮的顯示背景（白色背景）下，虹膜閉合得更緊，減小了角膜（能夠理解爲能夠變形的「鏡片」）的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而角膜的變形會使眼睛產生更模糊的焦點。

在 Superhuman 中，因爲咱們的軟件文字不少，因此咱們必須特別當心眩暈問題。咱們把白色的文字設置爲 90% 的不透明度，從而使文字與深色背景融爲一體。這就平衡了對比度和亮度，使軟件很容易在各類光線條件下閱讀。

5. 加深顏色

因爲咱們調低了文本的色彩來避免眼睛疲勞和暈眩，所以咱們的彩色強調內容和按鈕可能顯得太亮。如今，咱們必須調整這些顏色以在暗色主題中更好地工做。首先，咱們下降亮度，使這些顏色不會壓制附近的文本。其次，咱們增長飽和度，使它們仍然具備顏色特徵。

例如，若是咱們直接使用淺色主題中的紫色，對於附近的文本而言，它顯得太亮了。因此，在咱們實際的暗色主題中，咱們加深了紫色，以便用戶能夠專一於文本內容。

---

結論

暗色主題有不少好處，如今正在被普遍期待。然而，作好一個暗色主題可不容易。簡單地重用咱們的顏色或顛倒咱們的色調，將增長眼睛的疲勞，使其在弱光下更難閱讀，甚至還有可能打破咱們軟件的信息層次結構。

咱們找到了一種系統的方式來構建通俗易懂的，和諧且討人喜歡的暗色主題。只需遵循如下步驟：

1. 越遠的區域越暗
2. 從新肯定感知對比度
3. 減小大塊明亮的色彩
4. 避免純黑色或純白色
5. 加深顏色

我但願以上這些有助於您設計討人喜歡的暗色主題。若是您有任何想法或疑問，能夠和我聊聊！@ifbirdsfly，teresa@superhuman.com 👩‍🎨

— Teresa Man，Superhuman 的首席設計師

---

在 Superhuman，咱們正在重建針對 web 和移動設備的電子郵件體驗。試想一下電子郵箱界的 Vim 或者 Sublime：驚人快速，視覺華麗。

若是您崇尚用優雅的方式解決有趣的問題 —— 請加入咱們！瞭解更多信息或者給我發電子郵件.

很是感謝 Jared Erondu，Dave Klein，Jayson Hobby，Tim Boucher，Tamas Sari 以及 Jiho Lim 的付出和審查！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。