實用小貼士&技巧
科技一直與我們同在屈扎。我們?nèi)找共煌５卦谑褂脩?yīng)用程序和瀏覽網(wǎng)站。有時撩匕，數(shù)碼設(shè)備的亮白色屏幕可能會使我們眼睛產(chǎn)生不適鹰晨。這就是為什么越來越多的設(shè)計師開始注重創(chuàng)作兩種主題模式——明亮和黑暗。
黑暗模式有一些我們應(yīng)當(dāng)遵守的特定規(guī)范滑沧，使其對用戶使用來說更加合理并村。本文會講述這些內(nèi)容，使你可以創(chuàng)造一個能帶來積極作用的主題滓技。
OK，端起你心愛的咖啡杯棚潦，讓我們切換到黑暗的一面令漂！
為什么要用黑暗模式？
黑暗主題的主要優(yōu)勢是在于弱光環(huán)境下具有更高的可讀性丸边。黑暗模式降低了設(shè)備屏幕的亮度叠必。它改善了視覺工程學(xué)(visual ergonomics)，并能在特定的光照條件下得到更好的調(diào)節(jié)妹窖。正因如此纬朝，在夜晚及深夜使用數(shù)碼設(shè)備會更加舒適。
另外骄呼，如果設(shè)備是OLED顯示屏共苛，黑暗模式比明亮模式更省電判没。
使用黑暗模式可以：
????? ● 減輕眼部疲勞
????? ● 構(gòu)建視覺層次(visual hierarchy)
????? ● 使界面更神秘
????? ● 營造奢華感
????? ● 提高夜間的可讀性
????? ● 明確使用環(huán)境（如在夜間使用的娛樂性應(yīng)用）
以下情況請避免使用黑暗模式：
????? ● 在白天戶外使用該模式
????? ● 有大量文字需要閱讀
以上便是黑暗模式的優(yōu)缺點。讓我們來看看一些可以在項目中使用的實用技巧：
避免100%的黑色
當(dāng)你想開始創(chuàng)建一個黑暗版本設(shè)計的時候隅茎，腦海中首先想到的可能是：“來搞個黑背景澄峰！”.
NO！
這是我們常犯的錯誤辟犀。
我們應(yīng)當(dāng)使用一個非常暗的色調(diào)來作背景俏竞。
谷歌的Material Design建議使用深灰色，而不是黑色堂竟。因此魂毁，你可以在更大深度范圍的環(huán)境中表達海拔和空間(注：因為我們可以在深灰色上同時使用更重和更淺的顏色 )。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)丸升。
如何匹配這兩個世界铆农？那么答案是——給這兩種主題創(chuàng)建互補的色板是個最佳選擇。
記住黑暗模式下的可訪問性
如果你希望提高界面的可訪問性狡耻，則需要對黑暗主題使用特定的規(guī)范墩剖。最重要的一點是：主體文本和背景之間的對比度至少為 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)
如你所知毅否，陰影在黑暗主題中顯示效果不好亚铁。表達層級結(jié)構(gòu)的更好的方法是使用海拔的亮暗。
背景層應(yīng)該是最暗的螟加。放置在其頂部的元素應(yīng)稍亮一些徘溢。正因如此，界面能夠更合理的被用戶感知捆探。
概括一下：海拔越高然爆，元素越亮。
一些補充小貼士：
遵循平臺規(guī)范
設(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的主要規(guī)范：
基本：
? ? ? ● 使用深灰色（使用深灰色代替純黑色）
? ? ? ● 使用強調(diào)色（使用有限的強調(diào)色）(注：強調(diào)色通常是淺色或明亮的色彩搔弄，Material Design建議在暗色主題中使用的顏色范圍為200~50?)
? ? ? ●?節(jié)能（較深的顏色可節(jié)省OLED顯示器的能耗）
? ? ? ● 提高可訪問性（使用上文中提到的規(guī)范）
在亮、暗環(huán)境下測試
你對界面的看法可能會因主題而異丰滑。需要進行測試來驗證該主題結(jié)構(gòu)是否合理顾犹。
你應(yīng)在夜間的弱光條件下來測試黑暗模式。同時褒墨，你也可以白天在戶外檢查黑暗主題的基本元素是否具有足夠的可讀性炫刷。這樣你才能確保用戶將得到一款高質(zhì)量的產(chǎn)品。
可以自由設(shè)置
允許用戶在需要時能夠從明亮模式切換到黑暗模式郁妈。你也可以根據(jù)日照條件使其能夠在模式之間自動切換浑玛，但它仍應(yīng)可以手動設(shè)置。
切換UI主題在用戶眼中是一個重大的變化噩咪，應(yīng)該始終能由他們自己來控制锄奢。
總結(jié)
黑暗主題（或模式）如今非常流行。所有主流平臺都開始支持此模式剧腻，同時用戶也會要求應(yīng)用界面存在這一功能。這可是學(xué)習(xí)其規(guī)范并開始在項目中創(chuàng)建黑暗主題的最佳時機涂屁。
感謝閱讀书在！
原文地址：https://uxmisfit.com/2019/08/20/ui-design-in-practice-dark-mode/
本文翻譯參考資料：
《Material Design 暗色主題設(shè)計指南》
《iOS夜間模式開發(fā)探索》
《Material Design 深色主題設(shè)計組件規(guī)范》
《iOS 人機交互指南》
百度百科等
