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

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

在色彩心理學(xué)中，不同的顏色對(duì)不同的人意義各不相同。在西方文化中，黑色常與死亡、神秘和邪惡聯(lián)系在一起。自然可以影響到人對(duì)色彩的感受，比如綠色常與生長(zhǎng)相關(guān)；藍(lán)色常常代表平靜，因?yàn)樗屓寺?lián)想到天空和水。

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

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

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

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

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

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

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

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

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

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

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

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

深色模式下的桌面應(yīng)用信息中心（來(lái)自 Ramotion）

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

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

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

使用一定范圍內(nèi)的灰色的一個(gè)優(yōu)點(diǎn)是，它可以賦予設(shè)計(jì)人員一定的自由度，因?yàn)檫@樣可以表示更多的顏色。此外，灰色還有助于創(chuàng)建深度，因?yàn)橄鄬?duì)于黑色，可以更輕松地看到陰影。

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

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

在其他 UI 元素（例如卡片，按鈕，字段和各種顯示器和設(shè)備上的圖標(biāo)）之間進(jìn)行適當(dāng)?shù)膶?duì)比測(cè)試也是一個(gè)好主意。如果 UI 元素之間沒有明顯的分離，則設(shè)計(jì)元素會(huì)混雜在一起，使界面混亂且乏味。

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

要想使某種顏色在深色的 UI 中脫穎而出， 最好使用淺色，不飽和強(qiáng)調(diào)色的方案。盡量避免在深色 UI 設(shè)計(jì)中使用飽和色，因?yàn)樗鼈儠?huì)在深色的外觀色上產(chǎn)生視覺振動(dòng)。此外，這個(gè)突出色應(yīng)用于文本的時(shí)候，色彩對(duì)比度必須通過(guò) WCAG 的至少 4.5：1 的 AA 標(biāo)準(zhǔn)。

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

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

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

文字和基本元素（例如按鈕和圖標(biāo)）在深色背景上顯示時(shí)，應(yīng)符合易讀性標(biāo)準(zhǔn)。如上面的 Jabra Sound + 應(yīng)用程序所示，文本和圖標(biāo)可以使用白色以外的顏色。

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

“使用強(qiáng)烈對(duì)比的顏色以提高可讀性。許多因素都會(huì)影響顏色的感知，包括字體大小和粗細(xì)，顏色亮度，屏幕分辨率和照明條件。”

——Apple人機(jī)界面指南

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

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

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

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

極簡(jiǎn)主義的深色UI網(wǎng)頁(yè)設(shè)計(jì)（來(lái)自Denys Tyrynskyi）

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

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

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

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

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

深色的主題并不意味著扁平。在明亮的主題下，明暗面和陰影可以產(chǎn)生深度感。而使用深色 UI 時(shí)，則更具挑戰(zhàn)性，因?yàn)樗赡苤话倭繋追N顏色以強(qiáng)調(diào)的深色外觀。盡管如此，設(shè)計(jì)人員仍可以使用三個(gè)或四個(gè)顏色層次以及相應(yīng)的配色方案來(lái)使傳達(dá)深度。

為什么界面要有深度？大多數(shù)現(xiàn)代設(shè)計(jì)系統(tǒng)都使用高程系統(tǒng)來(lái)傳達(dá)深度。深度感與自然世界相對(duì)應(yīng)。我們具有深度感知能力，因?yàn)槲覀兩钤?D世界中。深度有助于強(qiáng)調(diào)界面的視覺層次。例如，前景中的元素會(huì)引起注意，比如警告對(duì)話框。

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

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

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

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

Atom Finance 網(wǎng)站

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

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

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

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

Ruben Fernandez 設(shè)計(jì)的 IBM 儀表板

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

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

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

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

對(duì)于有勇氣跨越新的風(fēng)格邊界，并通過(guò)情感和美學(xué)的視角探索用戶界面的設(shè)計(jì)師而言，這種設(shè)計(jì)風(fēng)格提供了一個(gè)充滿無(wú)限可能性、令人興奮的樂園——“UI 設(shè)計(jì)暗黑的一面”。

來(lái)源網(wǎng)絡(luò)