黑暗的用戶界面。 好和壞。 該做什麼和不該做什麼。

深色 UI 引人注目、時尚且優雅。 儘管如此，如果設計師選擇走“黑暗面”，他們應該謹慎行事。

創建產品的外觀和感覺是設計師的主要職責之一——最初的設計決策必須適合產品的目的、特定情況和受眾。 配色方案將產生持久的影響，必須仔細選擇——這一切都始於選擇將放置設計元素的背景——“畫布”。 幾乎默認情況下，通常的選擇是白色背景。

選擇明亮的背景有充分的理由。 對比度、文本和可讀性以及使用各種微妙顏色的能力是其中的一部分。 根據許多科學研究，最佳易讀性需要白色背景上的黑色文本。 品牌也可能會影響決策，因為公司徽標和顏色不適用於深色調色板。

大多數研究表明，淺色背景上的深色文本優於深色背景上的淺色文本，即更易於閱讀。 在一項著名的研究中，當受試者在深色背景上閱讀淺色字符與在淺色背景上閱讀深色字符時，“視覺疲勞”明顯更大（Bauer, D., Bonacker, M., and Cavonius, CR 1983）。

還有一個期望：人們習慣於看到各種內容在白色背景上用深色墨水渲染，並與圖像一起呈現。 想想報紙和雜誌——它們已經存在了 350 多年。 再往前追溯——三萬五千年前的舊石器時代（穴居人時代），我們發現獅子和猛獁象的洞穴壁畫通常放在淺色背景上，用木炭或燒焦的骨頭來描繪。

然而，當一個項目需要它時，今天的數字產品設計師可能會出於各種原因選擇使用深色方案。 如上所述，這通常是一種美學選擇，旨在傳達戲劇性並引發情感——一些意想不到的東西——或者設計師可能希望將設計與品牌融合或確保視覺內容脫穎而出。

然而，如果設計師選擇跨入“黑暗面”，他們將面臨許多挑戰。 各種可用性問題都會發揮作用——主要與可掃描性、可讀性和對比度有關。 要考慮的主要方面是文本和背景之間的足夠對比。 還必須考慮上下文（用例）和環境，以及可能查看 UI 的設備。

一些深色 UI 旨在最大限度地減少“數字眼睛疲勞”。 隨著數字技術的發展，我們一天中的大部分時間都盯著屏幕。 數字眼睛疲勞是一種常見疾病，每天影響數百萬人。 從過度使用電腦到經常暴露在強光下，都會引起頭痛、頸部疼痛、視力模糊和眼睛灼痛/刺痛。

甚至還有諸如計算機視覺綜合症（CVS）和“眼部不適”之類的東西。 根據一項研究，超過 83% 的美國人每天使用數字設備的時間超過兩個小時，其中 60.5% 的人表示他們會出現數字眼疲勞的症狀。 （眼睛曝光過度：數字設備困境。）

企業對企業 SaaS 產品和多媒體編輯應用程序連續使用數小時。 許多設計採用深色主題 UI，以減少眼睛疲勞，同時支持視覺清晰度。 然而，這種方法需要對設計方向進行仔細、預先的評估。

大多數開發人員使用帶有顏色編碼語法的黑屏來減少眼睛疲勞。 正如 Toptal 開發人員 Kevin Bloch 所說：“黑色背景可減少眼睛疲勞，並使自動顏色編碼更易於閱讀，從而使代碼一目了然地理解起來更快。”

Toptal 開發人員 Amin Shah Gilani 補充道：“我個人在代碼編輯器中使用了日曬深色主題。 我更喜歡深色主題，因為深色背景會讓眼睛感覺更舒服，尤其是因為我喜歡讓燈光保持昏暗或在晚上工作。”

遊戲應用程序 UI 也傾向於較暗的主題。 遊戲環境和玩家遊戲的環境更適合黑色調色板。 黑色背景設計增強了醒目的視覺效果，引入了神秘感，具有更好的對比度，並支持視覺層次。

當深色 UI 運行良好時

大多數與娛樂相關的 UI（智能電視、遊戲機以及電視和電影應用程序）傾向於採用深色主題的 UI 設計——這是有充分理由的。 大多數與娛樂相關的活動都發生在晚上，從 6 到 10 英尺的距離觀看，並在光線昏暗的房間內觀看——換句話說，屏幕與環境相匹配。 此外，色彩豐富的內容（例如，封面藝術和宣傳片）在深色主題的 UI 上非常顯眼。

目的是與活動的背景相匹配：“天快黑了，我很放鬆，我想看電視。” 與數以千計的小燈泡類似，數字屏幕只要有明亮的像素就會熄滅。 因此，明亮的 UI 會照亮房間——考慮到活動，這是一個不受歡迎的效果。 在這種情況下，UI 設計試圖匹配上下文：設備、內容、活動和環境。

在正確的上下文、環境、應用程序和使用中，黑色背景的 UI 是有意義的。 始終考慮界面可能使用的上下文。但它比這更進一步——使用它的選擇應該取決於內容和上下文：什麼、何時、何地以及在什麼設備上。

• 為引人注目的視覺效果實現強烈、戲劇性的外觀
• 營造出一種時尚、優雅、奢華和尊貴的感覺
• 創造一種陰謀和神秘感
• 以最小的干擾幫助集中和引導用戶的注意力
• 支持視覺層次結構和信息架構

深色 UI 應該只用於稀疏、最少的文本和“塊狀”信息，並強調視覺效果——淺色文本。 如果使用文本，它應該與深色背景形成鮮明對比——最好是純白色或黑色背景上的另一種強烈顏色（不是深灰色）。

當深色 UI 無法正常工作時

如文章前面所述，深色主題的 UI 對於文本和數據密集的內容，或者在使用各種內容類型（文本、圖像、視頻、數據表、下拉列表、字段等）時是一個糟糕的選擇。 ）。 設計界的普遍共識是，深色 UI 對設計來說是一個巨大的挑戰，除非你處理的是簡單的內容，而且只是到處亂扔文字。

挑戰是試圖保持足夠的對比度，這會影響總體挑戰：可讀性，它與可用性相關，會影響用戶體驗。 通常，所有顏色都適用於白色背景，而在深色背景上，有用的顏色範圍會大大減少。

這是一個不使用深色主題 UI 的真實示例：我參與了一個 B2B SaaS 項目，其中 CEO 堅持認為，為了“與眾不同”，他想使用深色主題UI——與公司的品牌相匹配……整個平台。 對於一切。 經過幾次會議，通過召集設計團隊和產品經理支持這項事業，我們能夠說服他放棄這樣一個潛在的災難性決定。

該平台使用一組標準的 SaaS 應用程序 UI 組件，因此充滿了表格、小部件、下拉菜單、象形圖和圖標以及表格中的文本和數字數據。 在實現足夠的對比度和一致的配色方案的同時，導航、佈局和功能將變得非常難以管理。 總而言之，幾乎不可能使用深色主題的 UI 來實現這一切。

根據應用程序的適當性，也許正確的選擇是建議混合使用淺色和深色 UI。 例如，帶有小部件、表單和數據表的設置頁面可以設計在淺色背景上，而帶有圖表的分析頁面可以設計成使用較深的配色方案。

使用深色 UI 的注意事項

最後，需要謹慎對待使用深色 UI 的決定。 設計師不應該出於錯誤的原因這樣做——時髦、與眾不同或複制別人的設計。 設計師必須考慮上下文、內容（對比度和可讀性）、設備和用例，並有充分的理由進行選擇，這一點至關重要。 這是一種微妙的平衡行為，因為有很多潛在的好處，但也有很多陷阱。

何時可以使用深色 UI：

• 當品牌配色方案需要時
• 當設計稀疏且極簡，只有少數內容類型時
• 當它適合上下文和使用時，例如夜間娛樂應用程序
• 減少眼睛疲勞，例如長時間使用的分析頁面
• 激發一種情緒——例如，一種陰謀和神秘的感覺
• 創造引人注目的戲劇性外觀
• 營造奢華和尊貴感
• 支持視覺層次結構

何時最好遠離深色 UI：

• 當有很多文本時（在深色背景上閱讀很困難）
• 當屏幕上有很多混合內容時
• 對於具有大量表單、組件和小部件的 B2B 應用程序
• 當設計需要多種顏色時

越過“黑暗面”應該小心。 在做出這樣一個充滿陷阱的潛在不穩定決定之前，建議進行更深入、更徹底的研究和分析。 一旦設計師走上這條路，就很難回頭。 建議設計師在雙腳投入之前考慮所有方面——好的和壞的，該做的和不該做的。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗