聚焦：深色 UI 設計的原則

從移動屏幕到大型電視，深色 UI 設計隨處可見。 黑暗的主題可以表達力量、奢華、精緻和優雅。 然而，為深色 UI 設計會帶來多重挑戰，如果實施不當，將無法達到預期。 在潛入“黑暗面”之前，設計師應該在跳躍之前先看看。

物理學家說黑色並不是真正的顏色。 那是沒有光。 在他通過棱鏡照射陽光的實驗中，艾薩克·牛頓爵士甚至沒有將它包括在光譜中。

在色彩心理學中，大多數顏色對不同的人代表不同的事物。 在西方文化中，黑色通常與死亡、神秘和邪惡聯繫在一起。 由於自然，綠色通常與增長聯繫在一起。 藍色幾乎普遍平靜，因為它與天空和水有關。 顏色是情緒化的。

其他影響是文化的。 例如，紫色仍然與奢侈品聯繫在一起，因為在許多古代文化中，紫色染料既昂貴又稀有——只有皇室才能買得起。 它是文化時代精神的重要組成部分，足以成為人類心靈的一部分。

帶有深色 UI 的數字產品——與力量、優雅和神秘相關——是一種強大的趨勢。 雖然人們常說暗模式可以減輕眼睛疲勞，但沒有證據表明這是真的。 在某些情況下，它還應該可以節省電池壽命。 儘管如此，黑暗主題通常是一種審美選擇。

深色 UI 與淺色 UI

並非所有界面都適合深色主題。 設計師應該考慮品牌契合度、文化適用性和色彩心理，並在選擇其中一種之前考慮情感影響。 這是一個棘手的平衡行為。

雖然針對千禧一代的金融應用程序可能會通過黑暗主題實現酷炫的元素，但它可能不適合針對普通人群的大銀行網站。 當人們只想檢查餘額並支付賬單時，太富有、太黑暗和太時尚可能會變得更加令人沮喪。

眾所周知， B2B SaaS 應用程序的深色 UI難以設計。 標準 Web UI 組件（如數據表、小部件、表單和下拉菜單）在深色 UI 上可能看起來很奇怪。 由於許多配色方案不適用於深色 UI，因此某些品牌和產品（取決於類型、上下文和環境因素）並不適合，可能會成為無法克服的挑戰。

以前沒有使用過深色 UI 設計並決定雙腳跳入的設計師可能會發現自己處於波濤洶湧的未知水域。 在黑暗用戶界面的海洋中，規範被扭曲，規則被改變，陷阱很多。

也就是說，使用深色 UI 有很多充分的理由：

• 當設計稀疏且極簡，只有少數內容類型時
• 當它適合上下文和使用時，例如夜間娛樂應用程序
• 創造引人注目的戲劇性外觀

而且，在某些情況下不建議這樣做：

• 當有大量文本時（在深色背景上閱讀很困難）
• 當有很多混合內容類型時
• 當設計需要多種顏色時

深色 UI 設計中的對比

深色主題不是黑色主題。 最好將其視為“低光”主題。 深色 UI 的主要關注點之一是實現足夠的對比度，以便視覺元素具有分離性並且文本清晰易讀。 大多數設計師會認為使用黑色是實現強烈對比度的最佳選擇。 但是，最好不要使用純黑色(#000000)作為背景或表面顏色。 黑色最好保留給其他 UI 元素並謹慎使用。 例如，純黑色可用於小的 UI 元素或周圍的邊框。

Google 的 Material Design 深色主題建議使用深灰色(#121212) 作為深色主題表面顏色，“以在具有更廣泛深度的環境中表達高度和空間”。 此外，許多設計師建議在定義配色方案時為深灰色添加微妙的深藍色調。 它傾向於為數字屏幕創造更好的暗色調和更令人愉悅的深色 UI 調色板。

使用一系列灰色的一個優點是它為設計師提供了自由度，因為可以表達更廣泛的顏色。 灰色調色板也有助於創建深度，因為在灰色與黑色的對比下更容易看到陰影。

需要特別注意深色 UI 中的文本對比度。

Web 內容可訪問性指南 (WCAG) 要求“文本的視覺呈現至少具有4.5:1的對比度”，但大尺寸文本除外，其對比度應至少為3:1 。 因此，設計人員需要確保內容在黑暗模式下仍然清晰易讀。

測試其他 UI 元素（例如各種顯示器和設備上的卡片、按鈕、字段和圖標）之間的適當對比度也是一個好主意。 如果 UI 元素之間存在難以察覺的分離，則設計混合過多，可能會變得單調乏味。

聚焦注意力：顏色

顏色在深色 UI 中脫穎而出。 最好使用具有較淺、不飽和強調色的方案。 避免在深色 UI 中使用飽和顏色，因為它們會在深色表面上產生視覺振動。 此外，作為最佳實踐，與文本一起使用時，顏色需要通過 WCAG 的 AA 標準至少4.5:1 。

在為深色 UI 定義配色方案時，Google 建議使用有限數量的強調色，以保持大部分空間可用於深色表面。 使用分離的互補色會有所幫助。 該方案具有一種主色和兩種與主色補色相鄰的顏色。 這樣做可以提供所需的對比度，而不會產生互補色方案的緊張感。

正確的配色方案可以幫助創造良好的對比度。 Colorable 是一個有用的工具，用於選擇符合可訪問性的文本和背景顏色組合。

當出現在深色背景上時，文本和基本元素（例如按鈕和圖標）應符合易讀性標準。 如上面的 Jabra Sound+ 應用程序所示，文本和圖標可以使用白色以外的顏色。

Google 的 Material Design 網站有一個有用的調色板生成器（在“顏色選擇工具”下），設計師可以使用它創建調色板並將其應用到 UI。 顏色組合的可訪問性級別也可以使用配套的顏色工具來測量。

“使用強烈對比的顏色來提高可讀性。 許多因素會影響對顏色的感知，包括字體大小和粗細、顏色亮度、屏幕分辨率和照明條件。” Apple 人機界面指南

少即是多：利用負空間

成功的深色 UI 設計的基本要素之一是熟練使用負空間。 如果設計不佳，深色 UI 會使數字產品顯得沉重和霸道。 為了平衡，設計師可以通過利用稀疏、極簡設計中的負空間來使深色 UI 更輕巧。 極簡主義設計與不存在的東西一樣重要。 如果使用得當，負空間將使深色 UI 更易於瀏覽，並讓人們更容易吸收信息。

法國作曲家克勞德·德彪西曾說過：“音樂是音符之間的空間。” 可掃描性也是如此——元素之間的負空間是佈局工作的原因。 UI 元素周圍的大量負空間賦予了它們定義。 它強調重要的內容，並提供必要的喘息空間，以確保設計不會感到密集和雜亂。 沒有呼吸空間，人腦就不太可能掃描感興趣的點，而更容易徘徊。

充斥著太多元素和文本的界面是高質量深色 UI 設計的禍根。 通過仔細考慮深色 UI 中的視覺層次結構，設計師可以使他們的創作更容易被掃描，從而提升用戶體驗。

造型詞：排版

深色 UI 中的每一段文字都需要仔細檢查。 關注點是雙重的：易讀性和對比度。 首先，它的大小。 文本需要足夠大以保證易讀性（深色背景上的小文本更難閱讀）。 其次，文本和背景之間需要有足夠的對比度。

數以千計的數字字體的可用性使顯示對標題和主要消息有影響的消息變得容易。 設計人員可以通過增加對比度和調整較小文本的字體大小、字符間距和行高來緩解可讀性問題。

W3C AAA 對常規大小文本（如果不是粗體，則小於 18 磅）的建議是對比度至少為 7:1 。 這也適用於其他 UI 元素：圖標、文本圖像和文本標籤，例如按鈕標籤。 設計師有責任確保所有人都可以訪問所有數字產品。 它不僅提高了可用性，因此也提高了用戶體驗，這是大多數國家/地區的法律。

設計師有無數的選擇來尋找在深色 UI 中運行良好的優秀字體。 Google Fonts、Font Library 和 Adob​​e Typekit 是少數提供簡單的應用程序或網站集成和廣泛選擇的。

溝通深度：海拔

黑暗的主題並不意味著平坦。 通過燈光主題，照明、陰影和陰影營造出深度感。 對於深色 UI，它更具挑戰性，因為它們主要包含帶有稀疏顏色口音的深色表面。 儘管如此，設計師仍可以使用三個或四個級別的高程以及相應的顏色方案來傳達文本的深度。

為什麼要深度？ 大多數現代設計系統使用高程系統來傳達深度。 深度感與自然世界相對應。 我們的視覺有深度感知，我們生活在一個 3D 世界中。 深度有助於強調界面的視覺層次。 例如，前景中的元素會引起人們的注意，例如警告對話框。

表面被不同地照亮以表示不同的海拔高度。 表面在高程堆棧中的位置越高（越靠近隱含光源），表面越亮。 更亮的表面更容易區分組件之間的高程，並且有助於看到陰影，使每個表面的邊緣更加明顯。

設計每個級別的表面顏色需要小心。 最好不要超過四五個級別。 設計師需要考慮文本對比度，因為表面在堆棧中變得更高並且變得更輕。 如果背景顏色不夠深，無法滿足白色文本和表面之間至少 15.8:1 的對比度水平，則位於最高（和最輕）凸起表面的文本將無法通過 4.5:1 標準。 在某些情況下，最好在設計系統中將元素的文本顏色指定為純黑色(#000000)，以在淺灰色背景上實現良好的對比度。

黑暗的 UI 設計靈感

考慮到上述原則，這裡有一些深色 UI 設計的優秀示例：

Atom Finance利用深色主題打造精緻外觀，並將其強調色限制為三種。 該佈局為複雜的金融網站使用負空間和稀疏、簡約的設計。 該站點使用細微的陰影很好地指示 UI 中的不同組件高度。

這兩個極簡主義的深色主題網站都使用了大膽的排版。 使用單一強調色的謹慎陰影與深色 UI 設計最佳實踐保持一致。

儘管為 SaaS 應用程序處理深色主題存在挑戰，但這個 IBM 數據可視化儀表板堪稱典範。 強調色的數量保持在最低限度，並且該站點使用微妙的陰影來顯示不同的 UI 高度。

這些移動應用程序遵循深色 UI 設計最佳實踐，僅在邊框上使用純黑色，為不同高度水平的元素提供適當的陰影，以及數量有限的強調色。

概括

使用深色 UI 設計而不是傳統 UI 設計的決定需要謹慎處理。 不應該因為錯誤的原因而選擇它——時髦、與眾不同或模仿別人的設計。 設計師應該對他們的選擇有充分的理由，並考慮內容、使用環境以及設計將出現的設備。

深色主題適用於某些數字產品，但對於其他產品來說實施起來確實很困難。 簡單是關鍵。 它們非常適合展示簡約的內容、數據可視化、媒體網站和娛樂平台。 它們不適合複雜、數據量大的 B2B 平台、文本量大的頁面和大量不同的內容。

對於準備跨越新風格前沿並通過情感和美學視角探索黑暗 UI 的勇敢設計師來說，他們提供了一個充滿無限可能性的令人興奮的遊樂場——在“黑暗的一面”。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

• 黑暗的用戶界面。 好和壞。 該做什麼和不該做什麼。
• 設計原則及其重要性
• 探索完形設計原則
• 引人注目和動人——運動設計原則指南
• 使用這些成功的交互設計原則提升您的用戶體驗