UI設(shè)計暗黑模式指南，助你增強(qiáng)用戶體驗(yàn)

從手機(jī)屏幕到大屏電視，漆黑模式的UI設(shè)計隨處可見。暗黑主題更能表達(dá)實(shí)力、奢華、細(xì)膩和優(yōu)雅。然而，暗黑模式UI設(shè)計也帶來多種挑戰(zhàn)，若是沒做好，就無法知足人們的期望。因此，在決議接納這種模式之前，設(shè)計師們應(yīng)該先審慎思量。

不管怎么說，漆黑模式設(shè)計氣焰氣焰的數(shù)字產(chǎn)物已經(jīng)成為一大趨勢。雖然人們常說暗模式可以鐫汰眼睛疲勞，但并沒有證據(jù)證實(shí)這是真的。在某些情形下，它還被以為可以節(jié)約電池壽命。而在本文中，我們要說的是暗黑主題是一種美學(xué)選擇。

暗黑模式VS與明亮模式

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

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

B2B SaaS應(yīng)用法式暗黑模式UI設(shè)計是出了名的難題。尺度的web UI組件，好比數(shù)據(jù)表、小部件、表單和下拉列表，在暗黑模式的UI上看起來很希奇。由于許多配色方案并不適用于深色UI，某些品牌和產(chǎn)物（取決于類型、配景和情形因素）并不適合這種模式，而且可能是一個不行戰(zhàn)勝的挑戰(zhàn)。

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

不外，使用暗黑模式UI設(shè)計也有許多利益:

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

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

• 締造一個引人注目的，富有特色的外觀

有些情形下不推薦使用:

• 有大量文本時（在深色配景下閱讀較量難題）

• 有許多混淆的內(nèi)容類型

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

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

暗黑主題不是玄色主題。我們可以把它以為是一種“弱光”主題。暗色UI的主要關(guān)注點(diǎn)之一是體現(xiàn)足夠的對比度，這樣就能區(qū)分視覺元素，文字部門也會越發(fā)清晰。大多數(shù)設(shè)計師會以為使用玄色是實(shí)現(xiàn)強(qiáng)烈對比的*****選擇。然而，*****不要使用純正的玄色（#000000）作為配景或外貌顏色，而*****留給其他UI元素，并只管少用。例如，純玄色可以用于小型UI元素或邊框。

谷歌的Material Design 暗主題推薦使用深灰色（#121212）作為暗黑主題外貌顏色，“以更普遍的深度表達(dá)情形中的立體效果和空間?！贝送猓S多設(shè)計師建議在界說配色方案時，在深灰色中加入玄妙的深藍(lán)色。它傾向于為數(shù)字屏幕締造一個更好的暗色協(xié)調(diào)一個更令人愉快的暗黑UI調(diào)色板。

使用灰色調(diào)的一個優(yōu)點(diǎn)是它能給設(shè)計師更多的空間，由于可以表達(dá)更普遍的顏色規(guī)模?；疑{(diào)色板也有助于締造深度，在灰色和玄色的對比下，更容易看到陰影。

我們需要稀奇注重暗黑模式UI中的文本對比。

Web內(nèi)容無障礙指南（WCAG）要求“文本視覺泛起/文本圖像至少要有4.5:1的對比度，大號文本以及大文本圖像至少有3:1的對比度?！币虼耍O(shè)計師需要確保內(nèi)容在暗黑模式下仍保持恬靜易讀。。

測試其他UI元素（如卡片、按鈕、字段和種種顯示器和裝備上的圖標(biāo)）之間的適當(dāng)對比度也是一個好主意。若是UI元素之間存在難以察覺的區(qū)別，那么設(shè)計就會太過混淆，可能會變得死板乏味。

關(guān)注顏色

顏色在暗黑UI中會很突出。*****使用較淺的、不飽和的強(qiáng)調(diào)色方案。此外，當(dāng)與文本一起使用時，顏色需要通過WCAG的AA尺度，即文本視覺泛起/文本圖像至少要有4.5:1的對比度。

在為一個悄悄黑UI界說配色方案時，谷歌建議使用有限數(shù)目的顏色，以保留大部門空間使用暗色外貌。使用差異的互補(bǔ)色會有資助，好比有一個主色協(xié)調(diào)兩個與主色調(diào)互補(bǔ)色相鄰的顏色。準(zhǔn)確的配色方案有助于締造優(yōu)異的對比效果。

文本和基本元素，如按鈕和圖標(biāo)，若是泛起在暗玄色配景時，應(yīng)切合易讀性尺度。如上圖UI界面所示，除了白色之外的其他顏色可以用于文本和圖標(biāo)。

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

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

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

元素之間的負(fù)空間使結(jié)構(gòu)有用，更易于瀏覽。UI元素周圍的大量負(fù)空間更能強(qiáng)調(diào)主要的內(nèi)容，并提供須要的“呼吸空間”，以確保設(shè)計不會太過麋集和繚亂。沒有呼吸空間，人們可能不會去認(rèn)真去瀏覽，從而錯過主要的信息。

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

樣式:排版

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

設(shè)計職員可以通過增添對比度和調(diào)整較小文本的字體巨細(xì)、字符間距和行高來減輕可讀性障礙。

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

顏色深度

暗黑主題并不意味著平庸。通過燈光主題中，照明、陰影和陰影締造了一種深度感。對于深色UI更具挑戰(zhàn)性，由于它們主要包羅帶有希罕顏色的深色外貌。只管云云，設(shè)計師可以使用三到四個條理的立體面效果和響應(yīng)的顏色方案來轉(zhuǎn)達(dá)文本的深度。

為什么需要深度?大多數(shù)現(xiàn)代設(shè)計系統(tǒng)使用標(biāo)高系統(tǒng)來轉(zhuǎn)達(dá)深度。我們的視覺有深度感知，我們生涯在一個3D的天下里。深度有助于強(qiáng)調(diào)界面的視覺條理。例如，前臺的元素自己會吸引注重力，好比一個忠告對話框。

外貌的亮度差異，體現(xiàn)差異的標(biāo)高水平。一個更亮的外貌使它更容易區(qū)分組件之間的標(biāo)高，它有助于看到陰影，使每個外貌的邊緣更顯著。暗黑UI的深度可以通過提高外貌亮度來展示。

設(shè)計每個條理的外貌顏色需要小心。*****不要設(shè)置凌駕4或5個條理，而且需要思量到文字的對比度。若是配景顏色不夠深，不足以知足白色文本和外貌之間至少15.8:1的對比度，則*****（也是最亮的）外貌上的文本將不會通過4.5:1尺度。在某些情形下，最幸虧設(shè)計系統(tǒng)中將元素的文本顏色設(shè)置為純正的玄色(#000000)，以便在淺灰色配景下獲得優(yōu)異的對比度。

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

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

泉源:Atom Finance

Atom Finance為重大的外觀使用了玄色主題，并將顏色限制為三種。結(jié)構(gòu)使用負(fù)空間，極簡設(shè)計。該網(wǎng)站使用玄妙的陰影很好地批注差異的組件在用戶界面標(biāo)高。

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

只管在SaaS應(yīng)用法式中使用漆黑主題存在一些挑戰(zhàn)，但I(xiàn)BM的這個數(shù)據(jù)可視化指示面板是一個典型的例子。強(qiáng)調(diào)色的數(shù)目保持在最小，網(wǎng)站使用玄妙的陰影來顯示差異的UI立體效果。

暗黑UI設(shè)計準(zhǔn)確的手機(jī)應(yīng)用:Wego、Spotify和蘋果（Android和iOS）。

Wego、Spotify和蘋果的手機(jī)應(yīng)用在暗黑UI設(shè)計上做得很好。這些手機(jī)應(yīng)用遵照深色UI設(shè)計的原則，即只在邊框上使用純正的玄色，在差異的標(biāo)高水平上使用適當(dāng)?shù)年幱霸?，以及有限的?qiáng)調(diào)色。

總結(jié)

使用暗黑UI需要穩(wěn)重看待。設(shè)計師應(yīng)該為了追隨潮水去做，而應(yīng)該有一個強(qiáng)有力的理由，并思量內(nèi)容、使用情形和展示設(shè)計的裝備。

漆黑主題適合某些數(shù)字產(chǎn)物，但卻很難在其他產(chǎn)物上有好的效果。簡樸性是要害。它們很是適合泛起極簡的內(nèi)容、數(shù)據(jù)可視化、媒體站點(diǎn)和娛樂平臺。它們不適合重大、數(shù)據(jù)量大的B2B平臺、文本量大的頁面和大量差異的內(nèi)容。

對于那些準(zhǔn)備實(shí)驗(yàn)新的氣焰氣焰界線，通過情緒和美學(xué)角度探索暗黑UI的勇敢設(shè)計師來說，這充滿無限可能。