UI設計暗黑模式指南，助你增強用戶體驗

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

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

暗黑模式VS與明亮模式

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

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

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

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

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

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

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

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

有些情形下不推薦使用:

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

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

• 設計需要多種配色的情形下

在暗黑模式UI設計中形成對比

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

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

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

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

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

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

關注顏色

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

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

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

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

少即是多:使用負空間

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

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

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

樣式:排版

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

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

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

顏色深度

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

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

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

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

暗黑模式UI設計案例

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

泉源:Atom Finance

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

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

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

暗黑UI設計準確的手機應用:Wego、Spotify和蘋果（Android和iOS）。

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

總結

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

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

對于那些準備實驗新的氣焰氣焰界線，通過情緒和美學角度探索暗黑UI的勇敢設計師來說，這充滿無限可能。