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

一、夜間模式的由來和作用

最早應該是智能手機的普及大大延遲了人們的睡眠時間，大家都習慣晚上躺在被窩里看一會手機才能睡著。

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

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

這里有一點要注意的是：刺眼程度并不是由手機屏幕的亮度決定的，而是由手機屏幕亮度和周圍環(huán)境亮度的差值大小決定的。

如下圖，你會覺得哪個白光更刺眼？

二、夜間模式的切換方式

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

1. 列表切換方式

2. 按鈕切換方式

3. 宮格切換方式

4. 自動切換切換方式

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

開啟后會自動進入夜間模式：

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

三、常見的兩種夜間模式設計方式

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

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

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

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

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

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

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

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

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

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

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

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

五、對夜間模式設計要點的總結(jié)

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

當然，在具體設計的時候同樣需要考慮你的產(chǎn)品是否需要夜間模式，需要到什么程度？使用場景是否值得去添加夜間模式？添加后能為產(chǎn)品的什么指標帶來增長？

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

作者：杜昭，微信：17611113635，微信公眾號：設計的威嚴

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

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