從手機屏幕到大型電視，深色的用戶界面設計隨處可見。深色的設計主題可以表達力量、奢華、精致和優(yōu)雅。然而，深色風格也會對界面設計帶來很多挑戰(zhàn)，因此，在決定設計一個深色的用戶界面之前，設計師應該深思熟慮。

物理學家說，黑色并不是一種真正的顏色，它是物體缺乏光的體現(xiàn)。在艾薩克·牛頓爵士通過棱鏡研究陽光的實驗中，他甚至沒有把黑色包含在光譜的顏色中。

在色彩心理學中，不同的顏色對不同的人意義各不相同。在西方文化中，黑色常與死亡、神秘和邪惡聯(lián)系在一起。自然可以影響到人對色彩的感受，比如綠色常與生長相關；藍色常常代表平靜，因為它讓人聯(lián)想到天空和水。

色彩是感受的體現(xiàn)。

另外一個影響色彩帶給人的感受的因素則是文化。例如，紫色至今仍與奢華聯(lián)系在一起，因為在許多古代文化中，紫色染料昂貴而稀有，只有皇室才能享用。長久以來，它一直是文化思潮的重要組成部分，并成為人類精神文化的一部分。

使用深色的界面設計的數(shù)字產(chǎn)品常常與力量、優(yōu)雅和神秘聯(lián)系在一起。雖然人們常說深色的用戶界面可以減輕眼睛疲勞，但這并沒有被證實。也有觀點認為，暗黑模式在某些情況下可以延長電池使用時間。但通常情況下，深色的設計風格是一種美學選擇。

深色 UI 設計使用類似于灰度模式下的鄰近色調(diào)色板

并非所有界面都適合深色主題。設計師還應考慮品牌契合度、文化適應性和色彩心理學，并在搭配時考慮人類情感的影響……這是一個非常令人棘手的事情。

面向千禧一代的金融應用可能會以深色主題達到炫酷效果，但對以大眾為目標用戶的大型銀行網(wǎng)站來說就可能不合適。因為當所有人都想查看自己的余額并支付賬單時，太奢華、太黑暗和太時髦的用戶界面可能會使人變得更加沮喪。

此外，眾所周知，B2B SaaS 應用程序很難應用深色主題的 UI 設計。標準的 Web UI組件（例如數(shù)據(jù)表，窗口小部件，表單和下拉菜單）在深色的 UI 上看起來可能很奇怪。由于許多配色方案不適用于深色 UI ，因此某些品牌和產(chǎn)品（取決于類型，環(huán)境和環(huán)境因素）不太適合。

以前從未使用過深色主題 UI 設計的設計師突然使用這種風格的時候可能會陷入迷茫。在深色主題的用戶界面的設計中，很多規(guī)范、規(guī)則被改變了，并且陷阱也很多。

然而，使用深色的 UI 有很多充分的理由：

• 當設計的內(nèi)容較少且內(nèi)容類型比較簡單時
• 適用于黑暗環(huán)境使用時，例如夜間娛樂應用程序
• 需要創(chuàng)造醒目的戲劇性外觀時

同樣地，在某些情況下，我們不建議這樣做：

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

深色模式下的桌面應用信息中心（來自 Ramotion）

深色主題并不是黑色主題。最好將其視為“低亮度”主題。使用深色設計風格設計用戶界面的時候，一個重要的問題就是如何獲得足夠的對比度，從而以使視覺元素相互分離并且使文本清晰易讀。大多數(shù)設計師會認為使用黑色是獲得強烈對比度的最佳選擇。但是，我建議最好不要將純黑色（＃000000）用作背景或外觀顏色。黑色最好保留給其他 UI 元素，并盡量少用。例如較小的 UI 元素或周圍的邊框。

Google 的 Material Design 深色主題建議使用深灰色（＃121212）作為深色主題外觀顏色，“以在深度范圍更廣的環(huán)境中表達高度和空間”。此外，許多設計師建議在定義配色方案時，在深灰色中添加微妙的深藍色調(diào)。這樣可以為數(shù)字屏幕創(chuàng)建更好的、更令人愉悅的深色色調(diào)。

布列塔尼·蔣（Brittany Chiang）的網(wǎng)站將深灰色和藍色色調(diào)融合在一起，形成了令人愉悅的深色用戶界面

使用一定范圍內(nèi)的灰色的一個優(yōu)點是，它可以賦予設計人員一定的自由度，因為這樣可以表示更多的顏色。此外，灰色還有助于創(chuàng)建深度，因為相對于黑色，可以更輕松地看到陰影。

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

設計人員需要確保在深色模式下內(nèi)容清晰易讀。《 Web內(nèi)容可訪問性指南》（WCAG）要求“視覺呈現(xiàn)的文本對比度至少應為 4.5：1 ”，大型文本的對比度至少應為 3：1 。

在其他 UI 元素（例如卡片，按鈕，字段和各種顯示器和設備上的圖標）之間進行適當?shù)膶Ρ葴y試也是一個好主意。如果 UI 元素之間沒有明顯的分離，則設計元素會混雜在一起，使界面混亂且乏味。

左側(cè)的深色 UI 設計中的文字和背景之間的對比度不足

要想使某種顏色在深色的 UI 中脫穎而出， 最好使用淺色，不飽和強調(diào)色的方案。盡量避免在深色 UI 設計中使用飽和色，因為它們會在深色的外觀色上產(chǎn)生視覺振動。此外，這個突出色應用于文本的時候，色彩對比度必須通過 WCAG 的至少 4.5：1 的 AA 標準。

在為深色 UI 定義配色方案時，Google 建議使用少量的顏色，以使大部分空間使用深色的主題色。使用互補色會有幫助，比如下面的方案就使用了一種主色和兩種與主色的補色相鄰的顏色，這樣做可以獲得足夠的對比度，而不會令互補色方案產(chǎn)生緊張感。

Jabra Sound + 應用程序?qū)⑵渖钌?UI 色板限制為僅兩種強調(diào)色

正確的配色方案可以幫助你創(chuàng)建良好的對比度。 “可著色”是一個有用的工具，用于選擇文本和背景色的可用顏色組合。

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

Google 的 Material Design 網(wǎng)站上有一個有用的調(diào)色板生成器（在“顏色選擇工具”下），設計人員可以使用它生成色板并將其應用于 UI 。顏色組合的可訪問性級別也可以使用配套的顏色工具進行測量。

“使用強烈對比的顏色以提高可讀性。許多因素都會影響顏色的感知，包括字體大小和粗細，顏色亮度，屏幕分辨率和照明條件?！?/span>

——Apple人機界面指南

遵守深色 UI 設計原則的最佳做法：用數(shù)量有限的顏色

成功的深色 UI 設計的基本要素之一就是巧妙地利用負空間。如果設計不當，深色的 UI 可能會使數(shù)字產(chǎn)品顯得笨拙。為了平衡這一點，設計師可以通過稀疏，簡約的設計中的負空間來使深色的 UI 顯得輕巧。極簡設計既要關注正空間，也要關注負空間。巧妙地使用負空間可以使深色的 UI 更易于識別，讓人們更容易地獲取信息。

法國作曲家克勞德·德彪西（Claude Debussy）曾說過：“音樂是音符之間的空隙。”同樣地，這個觀點也適用于設計元素之間的負空間，在這里巧妙的布局就起了作用。UI 元素周圍大量的負空間強調(diào)了重要內(nèi)容，并提供了必要的呼吸空間，以確保界面設計不會感到密集和混亂。如果沒有呼吸空間，人就很難有什么注意點，從而注意力無目的漫游。

過于多的設計元素和文本是毀掉深色 UI 設計的禍根。通過仔細考慮深色的用戶界面中的視覺層次結(jié)構(gòu)，設計人員可以使他們的作品更易于識別，從而提升用戶體驗。

極簡主義的深色UI網(wǎng)頁設計（來自Denys Tyrynskyi）

深色用戶界面中的每一段文字都需要仔細檢查。關注點有兩個：易讀性和對比性。首先要注意的就是尺寸。文本必須足夠大以便于閱讀（深色背景上的小字很難閱讀）。其次，文本和背景之間必須有足夠的對比度。

現(xiàn)在我們有成千上萬種字體可以供我們選擇，突出標題和重要的消息很容易。設計人員可以通過增加對比度并調(diào)整較小的文本，字符間距和行高來提高文本的可讀性。

對于常規(guī)大小的文本（如果不是粗體，則小于18點）的 W3C AAA 建議對比度應至少為 7：1。這也適用于其他 UI 元素：圖標，文本和文本標簽（比如按鈕標簽）。設計師應確保所有的人都能使用數(shù)字產(chǎn)品，不僅要提高可用性，還要提高用戶體驗，并且，這在大多數(shù)國家/地區(qū)都是法律。

設計師選擇字體的時候有無數(shù)種選擇，很多字體都能在深色的 UI 中能很好地使用。 Google 字體，字體庫和 Adobe Typekit 都是很好的工具。

Apple 網(wǎng)站上的 AirPods Pro 頁面使用了超大字體和強烈的對比度，以獲得強烈的視覺效果

深色的主題并不意味著扁平。在明亮的主題下，明暗面和陰影可以產(chǎn)生深度感。而使用深色 UI 時，則更具挑戰(zhàn)性，因為它可能只包含少量幾種顏色以強調(diào)的深色外觀。盡管如此，設計人員仍可以使用三個或四個顏色層次以及相應的配色方案來使傳達深度。

為什么界面要有深度？大多數(shù)現(xiàn)代設計系統(tǒng)都使用高程系統(tǒng)來傳達深度。深度感與自然世界相對應。我們具有深度感知能力，因為我們生活在3D世界中。深度有助于強調(diào)界面的視覺層次。例如，前景中的元素會引起注意，比如警告對話框。

不同的亮度可以表示不同的層次。在高程堆棧中的位置越高（離隱式光源越近）的表面越亮。在較亮的界面中，可以更容易地區(qū)分組件之間的層次關系，并且陰影更清晰，使每個組件的邊緣更加明顯。

可以通過使靠近隱含光源的面更亮來表示黑暗 UI 中的深度（來自Material Design）

設計每個層次的界面顏色時需要謹慎。 最好不要超過四個或五個級別。設計師需要考慮文本的對比度。如果背景顏色不夠深，無法在白色文本和背景之間達到至少15.8：1的對比度，則最亮的表面上的文本將無法通過4.5：1標準。在某些情況下，最好在設計系統(tǒng)中將文本顏色指定為純黑色（＃000000），以在淺灰色背景上獲得良好的對比度。

考慮到上述原則，以下是一些深色 UI 設計的優(yōu)秀案例：

Atom Finance 網(wǎng)站

Atom Finance 利用深色主題打造精致外觀，并將其強調(diào)色限制為三種。將合理的負空間和簡約的設計元素應用于復雜的金融網(wǎng)站。該網(wǎng)站還很好地使用了陰影，以在 UI 中顯示不同組件的層次。

Daniel Klopper 的深色主題電子商務網(wǎng)站

Darion Mitchell 的深色主題電子商務網(wǎng)站

這兩個極簡主義的深色主題網(wǎng)站都使用了超粗字體， 并且謹慎地使用陰影和強調(diào)色，是一組極佳的實踐作品。

Ruben Fernandez 設計的 IBM 儀表板

盡管 SaaS 應用程序使用深色主題的時候會遇到許多挑戰(zhàn)，但 IBM 的這個數(shù)據(jù)可視化儀表板仍是典范：強調(diào)色的數(shù)量保持最少，并且使用細致的陰影顯示不同的 UI 組件的層次。

這些移動應用程序僅通過在邊框上使用純黑色，針對不同層次的元素使用適當?shù)年幱耙约皵?shù)量有限的強調(diào)色。

必須謹慎地使用深色UI設計。不能因為它時髦、與眾不同或模仿他人的設計而選擇這種設計方式。設計者應有充分的選擇依據(jù)，并考慮其內(nèi)容、使用環(huán)境以及顯示設計的設備。

深色主題適用于某些要實現(xiàn)其他主題很困難的數(shù)字產(chǎn)品。簡潔是這種風格的關鍵。它非常適合呈現(xiàn)簡約的內(nèi)容，比如數(shù)據(jù)可視化，媒體站點和娛樂平臺。但它們不適用于復雜的、數(shù)據(jù)繁重的B2B平臺，文本繁多以及有多種內(nèi)容的頁面。

對于有勇氣跨越新的風格邊界，并通過情感和美學的視角探索用戶界面的設計師而言，這種設計風格提供了一個充滿無限可能性、令人興奮的樂園——“UI 設計暗黑的一面”。

來源網(wǎng)絡