不知道大家有沒有晚上窩在被窩里玩手機(jī)的習(xí)慣，我非常喜歡晚上在被窩里看文章、刷視頻，但為了避免閃瞎我的雙眼，我一般會(huì)打開夜間模式。夜間模式雖不是大部分產(chǎn)品的剛需，但設(shè)計(jì)優(yōu)秀的夜間模式能增加用戶的好感，提升用戶體驗(yàn)度。接下來我就結(jié)合自己的理解為大家介紹一下夜間模式應(yīng)該如何設(shè)計(jì)。

目錄

一、夜間模式的作用

二、夜間模式的切換方式

三、夜間模式的設(shè)計(jì)要點(diǎn)

四、總結(jié)

1.夜間模式的作用

在介紹如何設(shè)計(jì)夜間模式之前我們先來了解一下夜間模式的具體作用，以此才能判定目前設(shè)計(jì)的產(chǎn)品是否需要增加夜間模式。

夜間模式最大的作用就是在夜晚長期使用手機(jī)時(shí)保護(hù)眼睛、減少用眼疲勞。

也就是說如果該項(xiàng)目的產(chǎn)品，用戶大多有夜晚使用的需求，那么就要為其增加夜間模式。常見的有資訊類、閱讀類、音樂播放類產(chǎn)品。

2.夜間模式的切換方式

為了區(qū)分日間與夜間模式，一般會(huì)添加夜間模式與日間模式的切換，常見的切換方式有列表開關(guān)、圖標(biāo)切換以及自動(dòng)切換與提示。

01.列表開關(guān)

列表開關(guān)切換主要放置在個(gè)人中心列表頁或是設(shè)置列表頁中，日間夜間的切換方式使用開關(guān)組件，默認(rèn)夜間模式關(guān)閉，點(diǎn)擊即可打開。

最右的開關(guān)進(jìn)行了重新設(shè)計(jì)，默認(rèn)打開的是日間模式開關(guān)圖案，點(diǎn)擊后切換到夜間模式開關(guān)圖案。比起一般的開關(guān)更加有趣，也貼合最右的設(shè)計(jì)風(fēng)格。

02.圖標(biāo)切換

圖標(biāo)切換常見的有四種不同的放置位置，分別是宮格布局功能圖標(biāo)、頂部導(dǎo)航欄圖標(biāo)、內(nèi)容詳情頁圖標(biāo)、側(cè)邊欄底部圖標(biāo)。

02-1.宮格布局功能圖標(biāo)切換

這種切換方式主要放置在個(gè)人中心宮格功能入口中，默認(rèn)顯示夜間模式圖標(biāo)，點(diǎn)擊后切換到夜間模式并顯示日間模式圖標(biāo)。

02-2.頂部導(dǎo)航欄圖標(biāo)切換

頂部導(dǎo)航欄圖標(biāo)切換一般放置在個(gè)人中心頂部導(dǎo)航欄，切換方式比起前兩種會(huì)更加直觀一些，對夜間模式需求更高的產(chǎn)品還會(huì)把切換圖標(biāo)放置在首頁頂部導(dǎo)航欄中。

02-3.內(nèi)容詳情頁圖標(biāo)切換

這種切換方式多用于閱讀類產(chǎn)品中，在詳情內(nèi)容頁面（比如電子書、漫畫、新聞詳情）可以直接設(shè)置切換到夜間模式，便于用戶長時(shí)間閱讀某一內(nèi)容時(shí)直接切換。

02-4.側(cè)邊欄底部圖標(biāo)

側(cè)邊欄底部圖標(biāo)一般用在以側(cè)邊欄導(dǎo)航為主的APP，位于底部靠左區(qū)域，在拇指熱區(qū)內(nèi)，方便切換。

03.自動(dòng)切換與提示

自動(dòng)切換與提示夜間模式是更智能的一種方式，產(chǎn)品會(huì)設(shè)置一個(gè)默認(rèn)時(shí)間段（多為夜間十點(diǎn)到次日早晨六七點(diǎn)），在固定時(shí)間段內(nèi)，會(huì)自動(dòng)進(jìn)入夜間模式或是打開APP時(shí)彈窗詢問用戶是否開啟夜間模式。

這種方式用戶體驗(yàn)感很好，但要根據(jù)產(chǎn)品使用場景決定，比如小睡眠APP使用場景多為夜晚，因此選擇自動(dòng)切換非常合適。

小睡眠APP默認(rèn)晚上十點(diǎn)到次日早晨六點(diǎn)自動(dòng)切換夜間模式，在設(shè)置中還可以設(shè)置定時(shí)開啟夜間模式的時(shí)間，如下圖：

3.夜間模式的設(shè)計(jì)要點(diǎn)

夜間模式一般有兩種處理方式，第一種很簡單，只需在界面上覆蓋一層40%~70%透明度的黑色遮罩層以此達(dá)到降低亮度的作用即可。這種方式雖效果不太理想，但更加節(jié)約開發(fā)及設(shè)計(jì)成本。比如以圖片閱讀為主的漫畫類APP就比較適合這種方式。

第二種方式也就是本文著重要介紹的，使用深色界面進(jìn)行設(shè)計(jì)，這種方式在夜晚長期使用手機(jī)中效果更好，與周圍黑暗的環(huán)境更加融合，但開發(fā)和設(shè)計(jì)成本要高一些，可視項(xiàng)目情況選擇使用。下文將重點(diǎn)介紹深色界面下的夜間模式有哪些設(shè)計(jì)要點(diǎn)。

01.主體背景色選擇

夜間模式為了保證觀看的舒適度，一般會(huì)采用低亮度、低飽和的色彩。上文介紹的第一種夜間模式處理方式就是直接在淺色界面上加上遮罩，強(qiáng)制降低頁面亮度，你可以理解為白天的天空蒙上了一層烏云。

但是顏色本身就是有亮度的，在淺色界面上加遮罩的效果肯定不及本身就是低亮度的顏色，這就好比白天蒙上烏云的天空怎么都沒有夜晚的天空暗，而深色界面即可理解為夜晚的天空。

這里為大家引入一個(gè)色彩亮度的計(jì)算公式：

Y(亮度)=(0.299*R)+(0.587*G)+(0.114*B)

Y表示亮度，RGB值則是常用的RGB色彩模式中紅綠藍(lán)的取值。Y值的范圍是0~255，Y值越接近0顏色就越暗，但要盡量避免使用Y值為0的純黑色。

圖中我列舉了一些夜間模式制作的比較舒適的APP的主體背景色Y值，通過大量匯總，我總結(jié)出Y值大概的范圍是在10~60，因此在選擇主體背景色時(shí)，盡量選擇Y值在這個(gè)范圍內(nèi)的深色。

02.文字顏色

根據(jù)騰訊ISUX的研究，深色界面下的夜間模式要保證文字與背景色的對比度在3:1-4.5:1范圍內(nèi)，這樣既能保證文字對比不會(huì)過于強(qiáng)烈，也可看清楚文字內(nèi)容。尤其不要使用純白的文字色彩，對比過于強(qiáng)烈，夜晚長時(shí)期的觀看可能會(huì)出現(xiàn)白色眩光感。

顏色對比度查看網(wǎng)站：

https://contrast-ratio.com/#

為了方便查找使用，你也可以直接使用不同透明度的白色，注意與背景色的對比度即可。

03.圖片處理

為了保證夜間模式下整體對比度的舒適度，還要對圖片等元素進(jìn)行降低亮度的處理。根據(jù)騰訊ISUX的研究，保證圖片中顏色與背景色對比度滿足在3:1-7:1范圍內(nèi)，可以在圖片上加上一層黑色透明層，透明度選擇40%~50%比較合適。

04.圖標(biāo)處理

圖標(biāo)的處理主要是通過降低高飽和高明度的圖標(biāo)顏色，從而降低與背景色的對比，我主要介紹三種常見圖標(biāo)樣式的處理方式，分別是單色圖標(biāo)、漸變色圖標(biāo)以及復(fù)雜樣式圖標(biāo)。

04-1.單色圖標(biāo)

處理單色圖標(biāo)顏色時(shí)，我們不用去修改每一個(gè)圖標(biāo)的明度、飽和度后切圖給開發(fā)，這種做法成本太高，設(shè)計(jì)師與開發(fā)的工作量也比較大。

我們可以建立兩套顏色方案，一套日間顏色、一套夜間顏色，然后通過修改代碼進(jìn)而修改單色圖標(biāo)顏色，這里需要和開發(fā)協(xié)商，建議大家可以了解一下Iconfont-阿里巴巴矢量圖標(biāo)庫的相關(guān)使用。

04-2.漸變色圖標(biāo)

相比用量較多的單色圖標(biāo)，漸變色圖標(biāo)用量一般較少，圖案簡單的漸變色圖標(biāo)可以參照圖片的處理方式，在上方疊加一層黑色透明遮罩。而圖案較復(fù)雜或是顏色過于飽和的漸變色圖標(biāo)可以選擇重新繪制。

04-3復(fù)雜樣式圖標(biāo)

復(fù)雜樣式圖標(biāo)一般用色較多、圖案復(fù)雜，但使用量很少，因此選擇重新繪制。最近更新的QQ，底部Tab圖標(biāo)生動(dòng)有趣，選中樣式較為復(fù)雜，而在切換為夜間模式后底部Tab圖標(biāo)也換了造型，讓人眼前一亮。

4.總結(jié)

夜間模式作為一種輔助需求并不是所有產(chǎn)品都要必備的，但如果該產(chǎn)品用戶大多有夜晚使用的習(xí)慣，那么就要為其增加夜間模式，以此提高用戶體驗(yàn)度。

在設(shè)計(jì)夜間模式時(shí)根據(jù)產(chǎn)品需求考慮夜間模式的切換方式，通多對背景色、文字顏色、圖片、圖標(biāo)等的處理降低頁面的亮度與對比度，從而緩解夜間使用手機(jī)時(shí)的用眼疲勞。

作者：人類君

公眾號(hào)：海鹽社