【復(fù)試錄取必備】2021年新易設(shè)計坊寒假精品作品集！10多年經(jīng)驗設(shè)計總監(jiān)級老師授課

從移動屏幕到大型電視，人們都可以看到黑暗的UI設(shè)計。黑暗主題可以表達力量，奢華，精致和優(yōu)雅。但是，為黑暗的UI設(shè)計會帶來很多挑戰(zhàn)，并且如果實施不當，將無法滿足期望。在跳入“陰暗面”之前，設(shè)計師應(yīng)該先思考一下。

物理學家說，黑色并不是真正的顏色。就是沒有光。艾薩克·牛頓爵士在通過棱鏡照耀陽光的實驗中甚至沒有將其包括在顏色光譜中。

在色彩心理學中，大多數(shù)色彩代表不同的人不同的事物。在西方文化中，黑人通常與死亡，神秘和邪惡聯(lián)系在一起。由于自然，綠色常與增長相關(guān)。藍色幾乎可以使人平靜，因為它與天空和水相關(guān)。顏色是情感的。

其他影響是文化的。例如，紫色仍然與奢侈品聯(lián)系在一起，因為在許多古代文化中，紫色昂貴且稀有-只有皇室才能負擔得起。長期以來，它是文化時代主義者的重要組成部分，已成為人類心靈的一部分。

帶有深色UI（與功能，優(yōu)雅和神秘感相關(guān)聯(lián)）的數(shù)字產(chǎn)品是一個巨大的趨勢。人們常說，黑暗模式可以減輕眼睛疲勞，但沒有證據(jù)表明這是真的。在某些情況下，它還應(yīng)該節(jié)省電池壽命。盡管如此，深色主題還是一種審美選擇。

深色UI設(shè)計使用類似于類似調(diào)色板的灰色陰影。

深色UI與淺色UI

并非所有界面都適合深色主題。設(shè)計師應(yīng)考慮品牌契合度，文化適應(yīng)性和色彩心理，并在選擇搭配時考慮情感影響。這是一個棘手的平衡行為。

面向千禧一代的金融應(yīng)用程序可能會以深色主題達到炫酷效果，但對于以大眾為目標的大型銀行網(wǎng)站可能不合適。當所有人都想檢查自己的余額并支付賬單時，太富有，太黑暗和太時髦可能會變得更加沮喪。

眾所周知，B2B SaaS應(yīng)用程序黑暗UI很難設(shè)計。標準的Web UI組件（例如數(shù)據(jù)表，窗口小部件，表單和下拉菜單）在黑暗的UI上看起來很奇怪。由于許多配色方案不適用于深色UI，因此某些品牌和產(chǎn)品（取決于類型，上下文和環(huán)境因素）不是很好的選擇，并且可能證明是無法克服的挑戰(zhàn)。

以前從未使用過深色UI設(shè)計并決定用雙腳跳進去的設(shè)計師可能會發(fā)現(xiàn)自己陷入崎rough不堪的水域。在黑暗的用戶界面的海洋中，規(guī)范被彎曲，規(guī)則被改變，陷阱也很多。

也就是說，使用黑暗的UI有很多充分的理由：

• 當設(shè)計稀疏且極簡的內(nèi)容類型很少時
• 適用于上下文和使用時，例如夜間娛樂應(yīng)用程序
• 創(chuàng)造醒目的戲劇性外觀

而且，在某些情況下不建議這樣做：

• 大量文本時（在深色背景上閱讀很困難）
• 當混合內(nèi)容類型很多時

深色UI設(shè)計的對比

黑暗主題不是黑色主題。最好將其視為“低光”主題。黑暗UI的主要問題之一是要獲得足夠的對比度，以使視覺元素分離并且文本清晰易讀。大多數(shù)設(shè)計師會認為使用黑色是獲得強烈對比度的最佳選擇。但是，最好不要將純黑色（＃000000）用于背景或表面顏色。黑色最好保留給其他UI元素，并盡量少用。例如，純黑色可用于較小的UI元素或周圍的邊框。

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

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

使用一定范圍的灰色的優(yōu)點在于，它可以賦予設(shè)計人員一定的自由度，因為可以表示范圍更廣的顏色?；疑{(diào)色板還有助于創(chuàng)建深度，因為相對于灰色與黑色，可以更輕松地看到陰影。

需要特別注意黑暗UI中的文本對比度

Web內(nèi)容可訪問性指南（WCAG）要求“視覺呈現(xiàn)的文本對比度至少應(yīng)為4.5：1 ”，但大型文本的對比度至少應(yīng)為3：1。因此，設(shè)計人員需要確保內(nèi)容在黑暗模式下仍可清晰辨認。

測試其他UI元素（例如卡，按鈕，字段和各種顯示器和設(shè)備上的圖標）之間的正確對比也是一個好主意。如果UI元素之間沒有明顯的分離，則設(shè)計會融合得太多，并有可能變得乏味。

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

重點注意：顏色

顏色在深色UI中脫穎而出。最好使用淺色，不飽和強調(diào)色的方案。避免在深色UI中使用飽和色，因為它們會在深色表面上視覺振動。此外，作為最佳實踐，顏色與文本一起使用時，必須通過WCAG的至少4.5：1的AA標準。

當為深色UI定義配色方案時，Google建議使用有限數(shù)量的配色，以使大部分空間可用于深色表面。使用分開的互補色會有所幫助。該方案具有一種主色和兩種與主色的互補色相鄰的顏色。這樣做可以提供所需的對比度，而不會產(chǎn)生互補色方案的緊張。

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

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

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

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

“使用強烈對比的顏色以提高可讀性。許多因素都會影響顏色的感知，包括字體大小和粗細，顏色亮度，屏幕分辨率和照明條件?！碧O果人機界面指南

遵守深色UI設(shè)計的最佳做法：最佳深色模式應(yīng)用程序使用數(shù)量有限的顏色。

少即是多：利用負空間

成功的深色UI設(shè)計的基本要素之一是巧妙使用負空間。如果設(shè)計不當，深色的UI可能會使數(shù)字產(chǎn)品顯得笨拙。為了平衡，設(shè)計師可以利用稀疏，簡約的設(shè)計中的負空間來使黑暗的UI更加輕巧。極簡設(shè)計既要解決問題，又要解決問題。巧妙地使用負空間將使黑暗的UI更易于掃描，并使人們更容易吸收信息。

法國作曲家克勞德·德彪西（Claude Debussy）曾說過：“音樂是音符之間的空隙。” 對于可掃描性來說，同樣的觀點是正確的-元素之間的負空間是使布局起作用的原因。UI元素周圍的大量負空間使它們得到了定義。它強調(diào)重要的內(nèi)容并提供必要的呼吸空間，以確保設(shè)計不會感到密集和混亂。如果沒有呼吸空間，人腦掃描興趣點的可能性就較小，而漫游的可能性就更大。

元素和文本過多的界面是高質(zhì)量深色UI設(shè)計的禍根。通過仔細考慮黑暗UI中的視覺層次結(jié)構(gòu)，設(shè)計人員可以使他們的作品更易于掃描，從而提升用戶體驗。

極簡主義的深色UI網(wǎng)頁設(shè)計。（由Denys Tyrynskyi撰寫）

樣式詞：排版

黑暗用戶界面中的每一段文字都需要仔細檢查。關(guān)注點是雙重的：可讀性和對比性。首先，它的大小。文字必須足夠大，以確保清晰易讀（深色背景上的小文字難以閱讀）。其次，文本和背景之間必須有足夠的對比。

成千上萬的數(shù)字字體的可用性使顯示標題和英雄消息的消息變得容易。設(shè)計人員可以通過增加對比度并為較小的文本調(diào)整字體大小，字符間距和行高來減輕可讀性問題。

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

設(shè)計人員可以使用無數(shù)種選擇來獲取在黑暗UI中能很好工作的出色字體。Google字體，字體庫和Adobe Typekit是一些提供便捷的應(yīng)用程序或網(wǎng)站集成以及多種選擇的工具。

Apple網(wǎng)站上的AirPods Pro頁面使用超大字體和強烈的對比度，以發(fā)揮最大的影響。

溝通深度：高程

黑暗的主題并不意味著平坦。在明亮的主題下，照明，陰影和陰影會產(chǎn)生深度感。使用深色UI時，更具挑戰(zhàn)性，因為它們主要包含帶有稀疏顏色強調(diào)的深色表面。盡管如此，設(shè)計人員仍可以使用三個或四個海拔高度以及相應(yīng)的配色方案來使文本傳達深度。

為什么要深度？大多數(shù)現(xiàn)代設(shè)計系統(tǒng)都使用高程系統(tǒng)傳達深度。深度感與自然世界相對應(yīng)。我們的愿景具有深度感知能力，我們生活在3D世界中。深度有助于強調(diào)界面的視覺層次。例如，前景中的元素會引起注意，例如警告對話框。

表面的照明方式不同，以表示不同的海拔高度。表面在高程堆棧中的位置越高（越接近隱式光源），表面就越輕。較亮的表面可以更容易地區(qū)分組件之間的高度，并且有助于查看陰影，使每個表面的邊緣更加明顯。

可以通過使表面靠近隱式光源使表面更輕來描述黑暗UI中的深度。（根據(jù)材料設(shè)計）

設(shè)置每個級別的表面顏色需要小心。最好不要超過四個或五個級別。設(shè)計師需要考慮文本的對比度，因為表面在堆棧中的位置更高并且更輕。如果背景色不夠暗，無法滿足白色文本和表面之間的對比度至少為15.8：1，則最高（和最淺）凸起表面上的文本將無法通過4.5：1標準。在某些情況下，最好在設(shè)計系統(tǒng)中將元素的文本顏色指定為純黑色（＃000000），以在淺灰色背景上獲得良好的對比度。

黑暗UI設(shè)計靈感

考慮到上述原則，以下是深色UI設(shè)計的一些出色示例：

該原子財經(jīng)網(wǎng)站。

Atom Finance利用深色主題打造精致外觀，并將其強調(diào)色限制為三種。該布局使用負空間和稀疏的極簡設(shè)計，用于復(fù)雜的金融網(wǎng)站。該站點很好地使用了細微的陰影來指示UI中不同的組件高程。

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

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

這兩個極簡主義的深色主題網(wǎng)站都使用粗體印刷。使用帶有單一強調(diào)色的小心陰影與深色UI設(shè)計最佳做法保持一致。

這些移動應(yīng)用程序僅通過在邊框上使用純黑色，針對不同海拔高度使用適當?shù)脑仃幱耙约皵?shù)量有限的強調(diào)色來遵守深色UI設(shè)計最佳實踐。

概要

必須謹慎地決定在傳統(tǒng)的UI設(shè)計上使用深色UI設(shè)計。不應(yīng)出于錯誤原因選擇它-時髦，與眾不同或模仿他人的設(shè)計。設(shè)計者應(yīng)有充分的選擇依據(jù)，并考慮其內(nèi)容，使用環(huán)境以及將在其上顯示設(shè)計的設(shè)備。

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

對于有勇氣的設(shè)計師準備跨越新的風格邊界，并通過情感和美學的視角探索黑暗的用戶界面，他們提供了一個充滿無限可能性的令人興奮的游樂場-在“黑暗的一面”。