UI設(shè)計中的暗黑模式

　　我們每天都會看一些APP和網(wǎng)站。有時候一些設(shè)備的亮白色屏幕可能會使我們眼睛感覺到不舒服。這就是為什么越來越多的設(shè)計師開始注重創(chuàng)作兩種主題模式——明亮和黑暗。
 

　　黑暗模式有一些我們應(yīng)當(dāng)遵守的特定規(guī)范，使其對用戶使用來說會更加合理。今天AAA教育郭老師就給大家講述一下UI設(shè)計中的暗黑模式，使你可以創(chuàng)造一個能帶來積極作用的主題。
 

　　為什么選擇暗黑模式?
 

　　黑暗主題的主要優(yōu)勢是在于弱光環(huán)境下具有更高的可讀性。黑暗模式降低了設(shè)備屏幕的亮度。它改善了視覺工程學(xué)，并能在特定的光照條件下得到更好的調(diào)節(jié)。正因如此，在夜晚及深夜使用數(shù)碼設(shè)備會更加舒適。
 

　　使用深色模式可以：
 

　　減輕眼睛疲勞
 

　　構(gòu)造視覺層次
 

　　使界面更神秘
 

　　營造高端感
 

　　提高在夜間提高可讀性
 

　　確保夜晚使用環(huán)境(比如在晚上使用娛樂的app)
 

　　在以下情況下，請避免使用暗黑模式
 

　　該解決方案在戶外白天使用。
 

　　有很多文字可供閱讀
 

　　這些是深色模式的優(yōu)缺點。讓我們轉(zhuǎn)到可以在項目中使用的實用技巧：
 

　　盡量不要用100%的純黑色
 

　　當(dāng)您想開始設(shè)計暗黑模式時，你想到的第一件事可能是“直接創(chuàng)建一個黑色背景!”。
 

　　這應(yīng)該是我們常犯的錯誤。
 

　　Google的Material Design建議使用深灰色，而不是純黑色。Material Design建議的深色主題界面顏色為#121212。

 

　　考慮把顏色飽和度降低
 

　　黑暗模式應(yīng)避免使用飽和色。首要原因便是可訪問性——飽和色不符合WCAG (注：Web內(nèi)容無障礙指南 ) 的標(biāo)準(zhǔn)：即深色背景下的正文文本至少為4.5:1(注：即界面主色與文字信息的對比度 )。
 

　　飽和色在深色背景下會產(chǎn)生光學(xué)振動(optical vibrations)，從而可能會導(dǎo)致眼部疲勞

 

　　做兩個調(diào)色板–用于暗黑模式和明亮模式

　　在上面的技巧中，我提到過飽和的顏色更適合深色主題。另一方面，我們都喜歡輕便的用戶界面中充滿活力的色調(diào)。
 

　　如何匹配這兩個?接下來的答案是- 給這兩種主題創(chuàng)建互補的色板是最佳選擇。

 

　　記住深色模式下的可訪問性
 

　　如果你想使解決方案更易于使用，則有適用于深色主題的特定準(zhǔn)則。最重要的是以下內(nèi)容：正文和背景之間的對比度應(yīng)至少為15.8：1。正因這點，即便是更高、顏色更淺的層級，可讀性也很不錯(參見Material Design)
 

　　你可以使用這些工具來檢查對比度：

　　- Contrast(mac版)
 

　　- Accessible Brand Colors(web端)
 

　　- Stark(XD、Sketch、Figma插件)

 

　　避免使用陰影
 

　　在一些明亮的界面中，我們往往使用輕微的陰影來表現(xiàn)深度。正因如此，現(xiàn)在的界面使用起來會更加自然合理(注：可能是界面設(shè)計借鑒和引用了自然的光影效果，所以感覺會比較自然合理 )。然而，陰影在大多數(shù)黑暗模式的元素中，并不是那么明顯。這就是為什么不要頻繁地使用它們。畢竟還有另外的表現(xiàn)層次的方法。

 

　　海拔高度構(gòu)建層級結(jié)構(gòu)
 

　　如你所知，陰影在黑暗主題中顯示效果不好。表達(dá)層級結(jié)構(gòu)的更好的方法是使用海拔的亮暗。
 

　　背景層應(yīng)該是最暗的。放置在其頂部的元素應(yīng)稍亮一些。正因如此，界面能夠更合理的被用戶感知。

 

　　遵循平臺準(zhǔn)則
 

　　設(shè)計一套流暢合理的界面是所有平臺的使命。所有主流平臺都有制定規(guī)范，可以幫助你來實現(xiàn)黑暗主題(或模式)。
 

　　iOS人機界面指南的主要規(guī)范：
 

　　專注于內(nèi)容。
 

　　在淺色和深色外觀中測試你的設(shè)計。
 

　　當(dāng)你調(diào)整對比度和透明度等輔助功能設(shè)置(注：accessibility settings，或稱為可訪問性設(shè)置 )時，確保在黑暗模式下的內(nèi)容清晰易讀(上面講到的技巧將做到這一點)
 

　　顏色
 

　　使用適應(yīng)當(dāng)前外觀的顏色(使用動態(tài)顏色——兩個色板)(注：iOS13官方新增動態(tài)顏色dynamic color ，同樣的顏色在dark mode和light mode模式下的色值不一樣 )
 

　　確保所有外觀都有足夠的色彩對比
 

　　柔化白色背景的顏色(白色背景–深色調(diào)，深色背景–淺色調(diào))。
 

　　圖標(biāo)和圖像
 

　　盡量使用SF符號(SF Symbols)(可輕松調(diào)整為黑暗和明亮模式)
 

　　必要時為明亮和黑暗模式單獨設(shè)計符號
 

　　確保彩色圖標(biāo)和單色圖標(biāo)清晰易讀
 

　　文本
 

　　使用系統(tǒng)提供的標(biāo)簽色(label colors)
 

　　使用系統(tǒng)視圖繪制文本字段和文本視圖
 

　　Material Design的主要原則
 

　　用灰色變暗(使用深灰色代替純黑色)
 

　　帶有重音的顏色(應(yīng)用有限的重音)
 

　　節(jié)省能源(較深的顏色可節(jié)省使用OLED顯示器的設(shè)備的功率)
 

　　增強可訪問性(使用上一節(jié)中提到的原則)

 

　　在明暗的環(huán)境下進行測試
 

　　你對界面的看法可能會因主題而異。需要進行測試來驗證該主題結(jié)構(gòu)是否合理。
 

　　你應(yīng)在夜間的弱光條件下來測試黑暗模式。同時，你也可以白天在戶外檢查黑暗主題的基本元素是否具有足夠的可讀性。這樣你才能確保用戶將得到一款高質(zhì)量的產(chǎn)品。

 

　　可以自由切換
 

　　允許用戶在需要時能夠從明亮模式切換到黑暗模式。你也可以根據(jù)日照條件使其能夠在模式之間自動切換，但它仍應(yīng)可以手動設(shè)置。
 

　　切換UI主題在用戶眼中是一個重大的變化，應(yīng)該始終能由他們自己來控制。

 

　　總結(jié)
 

　　深色主題(或模式)如今非常流行。所有主流平臺都開始支持此模式，同時用戶也會要求應(yīng)用界面存在這一功能。這可是學(xué)習(xí)其規(guī)范并開始在項目中創(chuàng)建黑暗主題的最佳時機。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。