黑暗UI設計原理

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

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

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

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

帶有深色UI(與功能,優雅和神秘感相關聯)的數字產品是一個巨大的趨勢。人們常說,黑暗模式可以減輕眼睛疲勞,但沒有證據表明這是真的。在某些情況下,它還應該節省電池壽命。盡管如此,深色主題還是一種審美選擇。

作者:Miklos

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

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

以前從未使用過深色UI設計并決定用雙腳跳進去的設計師可能會發現自己陷入不堪的水域。在黑暗的用戶界面的海洋中,規范被彎曲,規則被改變,陷阱也很多。

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

  • 當設計稀疏且極簡的內容類型很少時
  • 適用于上下文和使用時,例如夜間娛樂應用程序
  • 創造醒目的戲劇性外觀

而且,在某些情況下不建議這樣做:

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

深色UI設計的對比

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

使用一定范圍的灰色的優點在于,它可以賦予設計人員一定的自由度,因為可以表示范圍更廣的顏色?;疑{色板還有助于創建深度,因為相對于灰色與黑色,可以更輕松地看到陰影。

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

Web內容可訪問性指南(WCAG)要求“視覺呈現的文本對比度至少應為4.5:1 ”,但大型文本的對比度至少應為3:1。因此,設計人員需要確保內容在黑暗模式下仍可清晰辨認。

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

重點注意:顏色

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

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

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

文字和基本元素(例如按鈕和圖標)在深色背景上顯示時應符合易讀性標準。

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

少即是多:利用負空間

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

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

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

樣式詞:排版

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

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

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

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

溝通深度:高程

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

為什么要深度?大多數現代設計系統都使用高程系統傳達深度。深度感與自然世界相對應。我們的愿景具有深度感知能力,我們生活在3D世界中。深度有助于強調界面的視覺層次。例如,前景中的元素會引起注意,例如警告對話框。

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

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

概要

必須謹慎地決定在傳統的UI設計上使用深色UI設計。不應出于錯誤原因選擇它-時髦,與眾不同或模仿他人的設計。設計者應有充分的選擇依據,并考慮其內容,使用環境以及將在其上顯示設計的設備。

深色主題適用于某些數字產品,但要實現其他主題確實很困難。簡潔是關鍵。它們非常適合呈現簡約的內容,數據可視化,媒體站點和娛樂平臺。它們不適用于復雜的,數據繁重的B2B平臺,文本繁多的頁面以及許多不同的內容。

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