從手機(jī)屏幕到大屏電視，黑暗模式的UI設(shè)計(jì)隨處可見(jiàn)。暗黑主題更能表達(dá)力量、奢華、精致和優(yōu)雅。然而，暗黑模式UI設(shè)計(jì)也帶來(lái)多種挑戰(zhàn)，如果沒(méi)做好，就無(wú)法滿(mǎn)足人們的期望。因此，在決定采用這種模式之前，設(shè)計(jì)師們應(yīng)該先謹(jǐn)慎考慮。

不管怎么說(shuō)，黑暗模式設(shè)計(jì)風(fēng)格的數(shù)字產(chǎn)品已經(jīng)成為一大趨勢(shì)。雖然人們常說(shuō)暗模式可以減少眼睛疲勞，但并沒(méi)有證據(jù)證明這是真的。在某些情況下，它還被認(rèn)為可以節(jié)省電池壽命。而在本文中，我們要說(shuō)的是暗黑主題是一種美學(xué)選擇。

暗黑模式VS與明亮模式

不是所有的界面都適合暗黑主題。設(shè)計(jì)師應(yīng)該考慮品牌與文化的契合度，色彩心理，并考慮情感影響后再選擇。這些都需要微妙的平衡。

比如對(duì)對(duì)于千禧一代來(lái)說(shuō)，金融應(yīng)用可能會(huì)通過(guò)暗黑主題達(dá)到很酷的效果，但它可能不適合針對(duì)普通人群的大型銀行網(wǎng)站。當(dāng)大家只想查看余額和支付賬單時(shí)，過(guò)暗的色調(diào)、太時(shí)髦的設(shè)計(jì)可能會(huì)讓人變得更令人沮喪。

B2B SaaS應(yīng)用程序暗黑模式UI設(shè)計(jì)是出了名的困難。標(biāo)準(zhǔn)的web UI組件，比如數(shù)據(jù)表、小部件、表單和下拉列表，在暗黑模式的UI上看起來(lái)很奇怪。因?yàn)樵S多配色方案并不適用于深色UI，某些品牌和產(chǎn)品（取決于類(lèi)型、背景和環(huán)境因素）并不適合這種模式，而且可能是一個(gè)不可克服的挑戰(zhàn)。

那些之前從未接觸過(guò)暗黑模式UI設(shè)計(jì)的設(shè)計(jì)師，如果決定投入其中的話(huà)，可能會(huì)發(fā)現(xiàn)自己陷入了一個(gè)艱難而未知的境地。在暗黑模式設(shè)計(jì)規(guī)范是多變的，陷阱更是層出不窮。

不過(guò)，使用暗黑模式UI設(shè)計(jì)也有很多好處:

• 設(shè)計(jì)是極簡(jiǎn)的，只有少數(shù)內(nèi)容類(lèi)型

• 它適合一些特定的情景，例如夜間娛樂(lè)應(yīng)用程序

• 創(chuàng)造一個(gè)引人注目的，富有特色的外觀

有些情況下不推薦使用:

• 有大量文本時(shí)（在深色背景下閱讀比較困難）

• 有很多混合的內(nèi)容類(lèi)型

• 設(shè)計(jì)需要多種配色的情況下

在暗黑模式UI設(shè)計(jì)中形成對(duì)比

暗黑主題不是黑色主題。我們可以把它認(rèn)為是一種“弱光”主題。暗色UI的主要關(guān)注點(diǎn)之一是體現(xiàn)足夠的對(duì)比度，這樣就能區(qū)分視覺(jué)元素，文字部分也會(huì)更加清晰。大多數(shù)設(shè)計(jì)師會(huì)認(rèn)為使用黑色是實(shí)現(xiàn)強(qiáng)烈對(duì)比的最佳選擇。然而，最好不要使用純正的黑色（#000000）作為背景或表面顏色，而最好留給其他UI元素，并盡量少用。例如，純黑色可以用于小型UI元素或邊框。

谷歌的Material Design 暗主題推薦使用深灰色（#121212）作為暗黑主題表面顏色，“以更廣泛的深度表達(dá)環(huán)境中的立體效果和空間。”此外，許多設(shè)計(jì)師建議在定義配色方案時(shí)，在深灰色中加入微妙的深藍(lán)色。它傾向于為數(shù)字屏幕創(chuàng)造一個(gè)更好的暗色調(diào)和一個(gè)更令人愉快的暗黑UI調(diào)色板。

使用灰色調(diào)的一個(gè)優(yōu)點(diǎn)是它能給設(shè)計(jì)師更多的空間，因?yàn)榭梢员磉_(dá)更廣泛的顏色范圍?；疑{(diào)色板也有助于創(chuàng)造深度，在灰色和黑色的對(duì)比下，更容易看到陰影。

我們需要特別注意暗黑模式UI中的文本對(duì)比。

Web內(nèi)容無(wú)障礙指南（WCAG）要求“文本視覺(jué)呈現(xiàn)/文本圖像至少要有4.5:1的對(duì)比度，大號(hào)文本以及大文本圖像至少有3:1的對(duì)比度。”因此，設(shè)計(jì)師需要確保內(nèi)容在暗黑模式下仍保持舒適易讀。。

測(cè)試其他UI元素（如卡片、按鈕、字段和各種顯示器和設(shè)備上的圖標(biāo)）之間的適當(dāng)對(duì)比度也是一個(gè)好主意。如果UI元素之間存在難以察覺(jué)的區(qū)別，那么設(shè)計(jì)就會(huì)過(guò)度混合，可能會(huì)變得枯燥乏味。

關(guān)注顏色

顏色在暗黑UI中會(huì)很突出。最好使用較淺的、不飽和的強(qiáng)調(diào)色方案。此外，當(dāng)與文本一起使用時(shí)，顏色需要通過(guò)WCAG的AA標(biāo)準(zhǔn)，即文本視覺(jué)呈現(xiàn)/文本圖像至少要有4.5:1的對(duì)比度。

在為一個(gè)暗暗黑UI定義配色方案時(shí)，谷歌建議使用有限數(shù)量的顏色，以保留大部分空間使用暗色表面。使用差異的互補(bǔ)色會(huì)有幫助，比如有一個(gè)主色調(diào)和兩個(gè)與主色調(diào)互補(bǔ)色相鄰的顏色。正確的配色方案有助于創(chuàng)造良好的對(duì)比效果。

文本和基本元素，如按鈕和圖標(biāo)，如果出現(xiàn)在暗黑色背景時(shí)，應(yīng)符合易讀性標(biāo)準(zhǔn)。如上圖UI界面所示，除了白色之外的其他顏色可以用于文本和圖標(biāo)。

使用對(duì)比色來(lái)提高可讀性。許多因素影響顏色的感知，包括字體大小和粗細(xì)、顏色亮度、屏幕分辨率和照明條件?！O(píng)果人機(jī)界面指南

少即是多:利用負(fù)空間

成功的黑暗黑UI設(shè)計(jì)的基本元素之一是巧妙地使用負(fù)空間。如果設(shè)計(jì)得不好，深色的UI會(huì)讓數(shù)字產(chǎn)品顯得笨重。為了平衡這一點(diǎn)，設(shè)計(jì)師可以利用極簡(jiǎn)主義設(shè)計(jì)中的負(fù)空間，讓暗黑的UI顯得更輕快。極簡(jiǎn)設(shè)計(jì)如果使用得當(dāng)，負(fù)空間會(huì)讓黑暗的UI更容易瀏覽，讓人們更容易吸收信息。

元素之間的負(fù)空間使布局有效，更易于瀏覽。UI元素周?chē)拇罅控?fù)空間更能強(qiáng)調(diào)重要的內(nèi)容，并提供必要的“呼吸空間”，以確保設(shè)計(jì)不會(huì)過(guò)度密集和凌亂。沒(méi)有呼吸空間，人們可能不會(huì)去認(rèn)真去瀏覽，從而錯(cuò)過(guò)重要的信息。

充斥著太多元素和文本的界面是高質(zhì)量暗黑模式UI設(shè)計(jì)的坑。通過(guò)仔細(xì)考慮暗黑模式UI中的視覺(jué)層次，設(shè)計(jì)師可以使他們的創(chuàng)作更容易被瀏覽，從而提高用戶(hù)體驗(yàn)。

樣式:排版

暗黑模式UI中的每一段文本都需要仔細(xì)檢查。主要關(guān)注兩個(gè)方面:易讀性和對(duì)比度。首先，是大小問(wèn)題。文本必須足夠大，以保證良好的易讀性（深色背景下的小文本更難閱讀）。其次，文字和背景之間對(duì)比效果要充分。

設(shè)計(jì)人員可以通過(guò)增加對(duì)比度和調(diào)整較小文本的字體大小、字符間距和行高來(lái)減輕可讀性障礙。

對(duì)于普通大小的文本（如果不是粗體，則小于18點(diǎn)），W3C AAA推薦的對(duì)比度至少為7:1。這也適用于其他UI元素:圖標(biāo)、文本圖像和文本標(biāo)簽(如按鈕標(biāo)簽)。它不僅提高了可用性，也提高了用戶(hù)體驗(yàn)。

顏色深度

暗黑主題并不意味著平淡。通過(guò)燈光主題中，照明、陰影和陰影創(chuàng)造了一種深度感。對(duì)于深色UI更具挑戰(zhàn)性，因?yàn)樗鼈冎饕瑤в邢∈桀伾纳钌砻妗１M管如此，設(shè)計(jì)師可以使用三到四個(gè)層次的立體面效果和相應(yīng)的顏色方案來(lái)傳達(dá)文本的深度。

為什么需要深度?大多數(shù)現(xiàn)代設(shè)計(jì)系統(tǒng)使用標(biāo)高系統(tǒng)來(lái)傳達(dá)深度。我們的視覺(jué)有深度感知，我們生活在一個(gè)3D的世界里。深度有助于強(qiáng)調(diào)界面的視覺(jué)層次。例如，前臺(tái)的元素本身會(huì)吸引注意力，比如一個(gè)警告對(duì)話(huà)框。

表面的亮度不同，表示不同的標(biāo)高水平。一個(gè)更亮的表面使它更容易區(qū)分組件之間的標(biāo)高，它有助于看到陰影，使每個(gè)表面的邊緣更明顯。暗黑UI的深度可以通過(guò)提高表面亮度來(lái)展示。

設(shè)計(jì)每個(gè)層次的表面顏色需要小心。最好不要設(shè)置超過(guò)4或5個(gè)層次，并且需要考慮到文字的對(duì)比度。如果背景顏色不夠深，不足以滿(mǎn)足白色文本和表面之間至少15.8:1的對(duì)比度，則最高（也是最亮的）表面上的文本將不會(huì)通過(guò)4.5:1標(biāo)準(zhǔn)。在某些情況下，最好在設(shè)計(jì)系統(tǒng)中將元素的文本顏色設(shè)置為純正的黑色(#000000)，以便在淺灰色背景下獲得良好的對(duì)比度。

暗黑模式UI設(shè)計(jì)案例

基于上述原則，以下是一些出色的暗黑UI設(shè)計(jì)例子:

來(lái)源:Atom Finance

Atom Finance為復(fù)雜的外觀使用了黑色主題，并將顏色限制為三種。布局使用負(fù)空間，極簡(jiǎn)設(shè)計(jì)。該網(wǎng)站使用微妙的陰影很好地表明不同的組件在用戶(hù)界面標(biāo)高。

這兩個(gè)極簡(jiǎn)主義的暗黑主題網(wǎng)站都使用了粗體字體。小心地使用單一強(qiáng)調(diào)色的陰影，以符合暗黑模式UI設(shè)計(jì)原則。

盡管在SaaS應(yīng)用程序中使用黑暗主題存在一些挑戰(zhàn)，但I(xiàn)BM的這個(gè)數(shù)據(jù)可視化指示面板是一個(gè)典型的例子。強(qiáng)調(diào)色的數(shù)量保持在最小，網(wǎng)站使用微妙的陰影來(lái)顯示不同的UI立體效果。

暗黑UI設(shè)計(jì)正確的手機(jī)應(yīng)用:Wego、Spotify和蘋(píng)果（Android和iOS）。

Wego、Spotify和蘋(píng)果的手機(jī)應(yīng)用在暗黑UI設(shè)計(jì)上做得很好。這些手機(jī)應(yīng)用遵循深色UI設(shè)計(jì)的原則，即只在邊框上使用純正的黑色，在不同的標(biāo)高水平上使用適當(dāng)?shù)年幱霸兀约坝邢薜膹?qiáng)調(diào)色。

總結(jié)

使用暗黑UI需要慎重對(duì)待。設(shè)計(jì)師應(yīng)該為了跟隨潮流去做，而應(yīng)該有一個(gè)強(qiáng)有力的理由，并考慮內(nèi)容、使用環(huán)境和展示設(shè)計(jì)的設(shè)備。

黑暗主題適合某些數(shù)字產(chǎn)品，但卻很難在其他產(chǎn)品上有好的效果。簡(jiǎn)單性是關(guān)鍵。它們非常適合呈現(xiàn)極簡(jiǎn)的內(nèi)容、數(shù)據(jù)可視化、媒體站點(diǎn)和娛樂(lè)平臺(tái)。它們不適合復(fù)雜、數(shù)據(jù)量大的B2B平臺(tái)、文本量大的頁(yè)面和大量不同的內(nèi)容。

對(duì)于那些準(zhǔn)備嘗試新的風(fēng)格邊界，通過(guò)情感和美學(xué)角度探索暗黑UI的勇敢設(shè)計(jì)師來(lái)說(shuō)，這充滿(mǎn)無(wú)限可能。

注:本文編譯自medium 來(lái)源：站長(zhǎng)之家

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)