本文筆者將對(duì)一些APP的夜間模式進(jìn)行分析，總結(jié)夜間模式常見(jiàn)的切換方式，以及從簡(jiǎn)單到復(fù)雜的幾種夜間模式設(shè)計(jì)方法。

一、夜間模式的由來(lái)和作用

最早應(yīng)該是智能手機(jī)的普及大大延遲了人們的睡眠時(shí)間，大家都習(xí)慣晚上躺在被窩里看一會(huì)手機(jī)才能睡著。

但是關(guān)了燈之后手機(jī)屏幕的亮度就會(huì)特別刺眼，由于絕大多數(shù)APP頁(yè)面背景色都是淺色系，與周?chē)h(huán)境的亮度對(duì)比比較大，導(dǎo)致手機(jī)屏幕和白天一樣的亮度就會(huì)感覺(jué)十分刺眼，所以一些產(chǎn)品開(kāi)始開(kāi)發(fā)了夜間模式。

夜間模式的主要作用就是為了讓用戶(hù)在環(huán)境亮度比較暗的時(shí)候能夠舒適的使用產(chǎn)品，避免由于刺眼、視覺(jué)疲勞等問(wèn)題暫時(shí)放棄使用產(chǎn)品，在一定程度上是為了延長(zhǎng)用戶(hù)使用的時(shí)間。

這里有一點(diǎn)要注意的是：刺眼程度并不是由手機(jī)屏幕的亮度決定的，而是由手機(jī)屏幕亮度和周?chē)h(huán)境亮度的差值大小決定的。

如下圖，你會(huì)覺(jué)得哪個(gè)白光更刺眼？

二、夜間模式的切換方式

在夜間通常情況下，我們面對(duì)屏幕的距離會(huì)比白天更近，在長(zhǎng)時(shí)間近距離的注視，對(duì)眼睛傷害比白天更大。所以，睡前使用頻率較高的app，會(huì)開(kāi)發(fā)夜間模式，如：閱讀類(lèi)、資訊類(lèi)、音樂(lè)類(lèi)及瀏覽器等。

1. 列表切換方式

2. 按鈕切換方式

3. 宮格切換方式

4. 自動(dòng)切換切換方式

自動(dòng)切換模式是更加人性化的一種體驗(yàn)方式，APP會(huì)設(shè)置一個(gè)默認(rèn)時(shí)間段（多為夜間十點(diǎn)到次日早晨六點(diǎn)），在固定時(shí)間段內(nèi)，也可以根據(jù)APP的使用場(chǎng)景自定義夜間模式的時(shí)間段。

開(kāi)啟后會(huì)自動(dòng)進(jìn)入夜間模式：

日間與夜間按鈕切換的趣味化方式欣賞：

三、常見(jiàn)的兩種夜間模式設(shè)計(jì)方式

總結(jié)了手機(jī)上的一些有夜間模式的APP后，我發(fā)現(xiàn)夜間模式的設(shè)計(jì)從簡(jiǎn)單到復(fù)雜大致有下面幾種：

1）在所有頁(yè)面上加一層黑色半透明的蒙版，例如今日頭條、微博、百度、虎嗅、等等。

這種方式的體驗(yàn)實(shí)在談不上優(yōu)秀，感覺(jué)有一些偷懶的嫌疑。但是這種方式的好處同樣存在，就是實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，不知道是不是由于產(chǎn)品內(nèi)容數(shù)量太大，圖片展示多的原因?qū)е骂^條不得不采用這種方式。

2）改變背景色色值和文字色值，例如：夸克瀏覽器、網(wǎng)易新聞、網(wǎng)易云音樂(lè)、糗事百科、QQ等等。

這種方式一般是把頁(yè)面中最大的光源調(diào)整成為和環(huán)境接近的顏色，通過(guò)降低亮度差值的方式降低刺眼度。

這種方式的設(shè)計(jì)成本比第一種要大，需要針對(duì)夜間模式的頁(yè)面進(jìn)行顏色、字體、icon等方面的定義，當(dāng)用戶(hù)開(kāi)啟夜間模式時(shí)，調(diào)用夜間模式的UI界面。開(kāi)發(fā)和適配的難度增大，實(shí)現(xiàn)成本高，并且后期版本迭代的時(shí)候都需要進(jìn)行研發(fā)和維護(hù)，小型研發(fā)團(tuán)隊(duì)負(fù)擔(dān)很重。

QQ對(duì)于夜間模式的設(shè)計(jì)就更加細(xì)致一些，除了背景色、文字顏色、圖片之外對(duì)底部的標(biāo)簽欄也有夜間化設(shè)計(jì)，并且這種設(shè)計(jì)也不是簡(jiǎn)簡(jiǎn)單單的修改顏色，而是做了更加細(xì)節(jié)的場(chǎng)景化設(shè)計(jì)。

四、夜間模式是如何實(shí)現(xiàn)的

原理我們都懂了，那么在具體場(chǎng)景下夜間模式是如果實(shí)現(xiàn)的呢？

這里不同的元素實(shí)現(xiàn)方式有些區(qū)別：

1. 文字和背景色只需要設(shè)置好兩個(gè)不同的色值，通過(guò)打開(kāi)和關(guān)閉夜間模式的按鈕進(jìn)行觸發(fā)修改就能實(shí)現(xiàn)。
2. 復(fù)雜一些的按鈕和圖標(biāo)需要預(yù)先設(shè)計(jì)好兩個(gè)場(chǎng)景所需的文件，同樣在打開(kāi)和關(guān)閉夜間模式的按鈕時(shí)進(jìn)行替換按鈕圖片即可。
3. 如果使用的是一些特殊格式的圖片(文字圖片)可以通過(guò)代碼來(lái)控制圖片的顏色達(dá)到實(shí)現(xiàn)的目的。
4. 對(duì)正常格式的圖片進(jìn)行處理是最麻煩的，圖片在夜間模式下會(huì)變暗，這種變暗有兩種實(shí)現(xiàn)方法，第一種和今日頭條的實(shí)現(xiàn)方法類(lèi)似，就是在圖片上增加一層黑色半透明的蒙層來(lái)實(shí)現(xiàn)變暗，如下圖。

第二種是把圖片置于頂層在底部放一個(gè)黑色色塊，通過(guò)調(diào)整圖片的透明度來(lái)實(shí)現(xiàn)變暗，兩種方法效果差別不大。

五、對(duì)夜間模式設(shè)計(jì)要點(diǎn)的總結(jié)

最后總結(jié)一下設(shè)計(jì)夜間模式時(shí)的步驟，大致如下圖：

當(dāng)然，在具體設(shè)計(jì)的時(shí)候同樣需要考慮你的產(chǎn)品是否需要夜間模式，需要到什么程度？使用場(chǎng)景是否值得去添加夜間模式？添加后能為產(chǎn)品的什么指標(biāo)帶來(lái)增長(zhǎng)？

一個(gè)體驗(yàn)優(yōu)秀的產(chǎn)品絕不是大而全的功能堆砌，在設(shè)計(jì)時(shí)一定要帶著目標(biāo)去設(shè)計(jì)。希望我的分享能對(duì)你產(chǎn)生一點(diǎn)點(diǎn)幫助！

作者：杜昭，微信：17611113635，微信公眾號(hào)：設(shè)計(jì)的威嚴(yán)

本文由@杜昭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash, 基于CC0協(xié)議。