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

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

1、避免純黑

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

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

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

2、避免在高飽和色

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

建議使用較淺的顏色（200-50范圍內(nèi)的顏色），因?yàn)樗鼈冊(cè)谏钌尘吧暇哂懈玫目勺x性?？梢詭椭脩?hù)保持適當(dāng)?shù)膶?duì)比度，而不會(huì)造成眼睛疲勞。

3、滿(mǎn)足可訪問(wèn)性顏色對(duì)比標(biāo)準(zhǔn)

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

使用顏色對(duì)比工具測(cè)試對(duì)比度：uxpro.cc

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

4、文本高亮色

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

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

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

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

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

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

選擇稍暗的白色，以防止背景對(duì)周?chē)陌瞪珒?nèi)容發(fā)光。

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

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

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

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

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

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

6、景深

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

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

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

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

“海拔較高，顏色較淺”

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

7、讓用戶(hù)自由切換夜間模式

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

夜間模式控件

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

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

作者：Nick Babich

翻譯：Z Yuhan

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