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

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

不管怎么說(shuō)，漆黑模式設(shè)計(jì)氣焰氣焰的數(shù)字產(chǎn)物已經(jīng)成為一大趨勢(shì)。雖然人們常說(shuō)暗模式可以鐫汰眼睛疲勞，但并沒(méi)有證據(jù)證實(shí)這是真的。在某些情形下，它還被以為可以節(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ì)是出了名的難題。尺度的web UI組件，好比數(shù)據(jù)表、小部件、表單和下拉列表，在暗黑模式的UI上看起來(lái)很希奇。由于許多配色方案并不適用于深色UI，某些品牌和產(chǎn)物（取決于類型、配景和情形因素）并不適合這種模式，而且可能是一個(gè)不行戰(zhàn)勝的挑戰(zhàn)。

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

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

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

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

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

有些情形下不推薦使用:

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

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

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

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

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

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

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

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

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

測(cè)試其他UI元素（如卡片、按鈕、字段和種種顯示器和裝備上的圖標(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尺度，即文本視覺(jué)泛起/文本圖像至少要有4.5:1的對(duì)比度。

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

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

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

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

樂(lè)成的漆黑黑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ù)空間使結(jié)構(gòu)有用，更易于瀏覽。UI元素周圍的大量負(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)作更容易被瀏覽，從而提高用戶體驗(yàn)。

樣式:排版

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

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

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

顏色深度

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

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

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

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

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

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

泉源:Atom Finance

Atom Finance為重大的外觀使用了玄色主題，并將顏色限制為三種。結(jié)構(gòu)使用負(fù)空間，極簡(jiǎn)設(shè)計(jì)。該網(wǎng)站使用玄妙的陰影很好地批注差異的組件在用戶界面標(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ì)準(zhǔn)確的手機(jī)應(yīng)用:Wego、Spotify和蘋果（Android和iOS）。

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

總結(jié)

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

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

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