夜間模式在過去幾年中很最受歡迎，Apple和Google都將為用戶提供了這一功能。夜間模式將屏幕亮度降低，減少并視覺疲勞。

如果你打算給產(chǎn)品增加夜間模式功能，請注意以下8點(diǎn)：

1、避免純黑

夜間模式不一定是純黑色背景上的純白色文本。如果高對比度太高，看起來也很痛苦。

使用深灰色作為背景色更安全，因?yàn)樯罨疑砻婵蓽p少眼睛疲勞 - 深灰色表面上的淺色文字比黑色表面上的淺色文字具有更低的對比度。深灰色表面可以表達(dá)更廣泛的顏色，高度和深度，因?yàn)樗菀卓吹交疑幱埃兒谏暇筒豢赡苡嘘幱傲耍?/p>

Material Design 建議到夜間模式背景色是＃121212。

2、避免在高飽和色

高飽和的顏色在光線表面看起來很棒，可一旦放到在深色背景上，就會變得難以閱讀。為了搭配深色背景，去除飽和度非常重要。

建議使用較淺的顏色（200-50范圍內(nèi)的顏色），因?yàn)樗鼈冊谏钌尘吧暇哂懈玫目勺x性?？梢詭椭脩舯３诌m當(dāng)?shù)膶Ρ榷?，而不會造成眼睛疲勞?/p>

3、滿足可訪問性顏色對比標(biāo)準(zhǔn)

為了確保內(nèi)容在夜間模式下清晰易讀。背景必須足夠暗以顯示白色文本。 Google Material Design 建議在文本和背景之間使用至少15.8：1的對比度級別。

使用顏色對比工具測試對比度：uxpro.cc

 https://uxpro.cc/toolbox/accessibility/color-accessibility/  

4、文本高亮色

高亮色是出現(xiàn)在組件和關(guān)鍵表面頂部的顏色。它們通常用于文本。

黑色主題的默認(rèn)高亮色為純白（#FFFFFF）。但#FFFFFF太亮了，為造成視覺干擾，這就是為什么Google Material Design建議使用稍暗的白色：

●高強(qiáng)度文本的不透明度應(yīng)為87％

●中等重點(diǎn)文字適用于60％ 

●禁用的文本使用38％的不透明度。

提示：在深色背景上的淺色文字在光線下可能看起來比黑暗夸張。所以在夜間模式下，比劃較細(xì)的字體更友好。

選擇稍暗的白色，以防止背景對周圍的暗色內(nèi)容發(fā)光。

5、情感化設(shè)計(jì)

在為現(xiàn)有產(chǎn)品設(shè)計(jì)夜間模式時(shí)，你也許期待切換后，設(shè)計(jì)所表達(dá)的情感與原先的設(shè)計(jì)一致。最好不要有這樣的想法，為什么？因?yàn)椋?/p>

“顏色感知很大程度收到背景色的影響”

夜間模式始終與日間模式不同，黑暗和光明會喚起不同的情感，沒有必要想方設(shè)法地避免這個(gè)問題。

“夜間模式并不是非得繼承于日間模式”

By Sergey Zolotnikov: https://dribbble.com/Zolotnikov 

6、景深

與日間模式類似，夜間模式也要創(chuàng)建層次結(jié)構(gòu)，強(qiáng)調(diào)布局中的重要元素。

“海拔是我們用來傳達(dá)元素層次結(jié)構(gòu)的標(biāo)準(zhǔn)”

日間模式下，我們使用陰影來表示海拔。海拔越高，投射的陰影越寬。同樣的方法在夜間模式中卻不好用了——很難在黑暗的背景下看到陰影。

在使用材質(zhì)構(gòu)建的夜間模式中，背景和組件使用疊加著色。海拔越高，顏色越淺。

“海拔較高，顏色較淺”

By Martin Mro?: https://dribbble.com/martinmroc 

7、讓用戶自由切換夜間模式

自動切換夜間模式的聽起來不錯，但是這種功能可能導(dǎo)致糟糕的體驗(yàn)。不過，惡意考慮征求用戶同意后，再開啟自由切換夜間模式。

夜間模式控件

8、在燈光下和黑暗中分別測試都要測試一下

需要測試調(diào)整才能找到最合適的設(shè)計(jì)，建議在燈光下和黑暗中都使用一下。

作者：Nick Babich

翻譯：Z Yuhan

原文鏈接：https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6