大家都知道，設計一定沒有單純的「感性的設計」與「理性的設計」。

多年以前，我在一本書中讀到過這么一段對于繪畫和設計異同的描述：「繪畫是主觀的，設計是客觀的。繪畫是繪畫者對自身情感的表達與宣泄，為的是取悅自己。而設計是設計師最大限度摒除自我見識所帶來的障礙，為的是取悅大眾。」

雖然這個分類方法還是顯得簡單粗暴了些，但是大體上我深以為然。

下面會講到的是我以前接手過的一個項目——設計 app 的「夜間模式」。在這個項目中，為了能夠達到用戶觀看的最佳舒適度，不斷的調試試驗，其中也融入了一些方法，算是在感性設計基礎上，多了一些理性的考量。

下文我會從兩大塊進行說明：設計+實現。

一、如何設計出舒適的夜間模式

1. 背景：為何要做夜間模式

我們的 app 受眾以低齡學生為主，工作日內，低齡學生用戶需要早起上學，受此影響，他們習慣在早上的吃飯或上學途中、課間或午休，利用碎片化時間閱讀漫畫。

他們也習慣在睡前和熄燈后，把白天沒看完的漫畫讀完，此時是使用較為集中的時間段，因此他們對夜間閱讀功能有一定需求，目前的白天版本在夜晚看來實在太過閃耀了。

2.設計目標

提高夜間使用 app 的舒適度。

3. 設計思考

確定設計目標以后，接下來就要先捋一捋可能會面臨的各種問題。界面中，包含了圖片、文字、圖標、背景色、分割線等，我們首要確定的是背景色值，因為它決定了夜晚模式的基調。那么背景色值又與什么相關聯呢？我會按照下圖順序一個個的來解答。

4. 背景色之亮度思考

先說說亮度，亮度其實可以被測量，也有相對應的單位。（此處有參考 qq 夜間模式）

我們常用來描述光的物理量有4個：發光強度/光通量/光照度/亮度。

這最后一項「亮度」正是我們想要的。亮度是指物體明暗的程度，定義是單位面積的發光強度，它的單位是 nit（尼特）；1nit=1 cd/m2。

上圖是人眼細胞的一些特性，劃橫線處可以看出，主要負責夜晚視覺的桿狀細胞，作用范圍是0.034cd/m2。

結論：夜晚，我們最終的屏幕亮度應該保證在0.034cd/m2左右是較為合適的。

（題外話：有種東西叫亮度測試儀，可以測量亮度。）

5. 背景色之彩度思考

夜晚中，我們對圖片中顏色的判斷會有誤差，如下圖，單看右邊圖中的色彩，很難猜到其真實的色彩；因為在夜晚，主要是我們人眼的桿狀細胞起作用。

官方解釋：桿狀細胞主要負責夜晚及周邊視覺。相較于錐狀細胞，桿狀細胞對光更為敏感，較容易看到微弱的亮光，因此在極低的照度下，人眼僅依賴桿狀細胞，稱為暗視覺，其無法分辨顏色，故所有表面看起來僅有灰階明暗的差異；人眼約有一億兩千萬個桿狀細胞，僅存在于視網膜的周邊，因該處缺乏錐狀細胞，以致我們對視野的周邊部份有辨色上的困難。桿狀細胞的損傷則導致夜盲。

通俗一點解釋：人眼在夜間可辨識出的顏色種類較少，所以不用和白天一樣使用繽紛的色彩表現；還有一點需要注意，晚上長時間注視著高飽和度的色彩，會覺得刺眼，舒適度不夠。

結論：夜晚，應使用低彩度的色彩、且盡量減少顏色的種類。

除了低彩度，還有另一個問題也值得注意：不同色相下的暗色系需要保持相對的視覺亮度均衡。

下圖中的暗色系，通過亮度公式，換算成灰色系之后，亮度上還是會稍有差異，在實際取色中要注意均衡這一點，保證視覺舒適度。（亮度公式：0.299*R + 0.587*G + 0.114*B=y）

6. 背景色之護眼模式

在夜間，通常情況下，我們面對屏幕的距離會比白天更近，在長時間近距離的注視下，對眼睛傷害比白天更大。使得我們眼睛造成傷害的就是 HEV 藍光，當然，藍光對人眼造成的傷害程度取決于很多原因，包括屏幕的技術、屏幕大小、屏幕亮度、色溫和用戶臉部的距離和持續的時間。

下圖中可以看出，各大手機廠商的護眼模式，通過降低亮度，藍光得到有效控制；而藍黃是一對互補色，如果想從色溫上降低藍色，黃色自然會增強。

題外話：如果我們將「藍光下降比-亮度下降比」的值近似看成在亮度條件一樣的情況下藍光的減少量，那么除了蘋果（超過60%）之外其余7款手機的藍光量只下降了25%左右，給蘋果鼓掌。

結論：在硬件與時間不能更改的情況下，通過前面提到的降低亮度和調整屏幕色溫也能降低 hev 藍光對眼睛的傷害。

小結：夜晚，背景色應該選擇低彩度、色相偏黃、亮度值在0.034-34之間。

根據以上結論，選出了夜間模式的背景色#1A1714。

7. 對比色的處理

背景色確立之后，需要注意的有兩點：

背景色/文字/圖片的區分處理

如下圖，在夜晚長時間觀看的情況下，左邊一組「圖片/文字/輔助文字」的組合比右邊來的舒適；由此可得出，在夜間，對比度不需要太過明顯，需要柔和一些，視覺舒適度會更高；否則對比會太明顯，文字或過亮或過暗。

多機型驗證

有了上述的大致思路以后，就是進行海量的機型測試了；經過一段時間真實晚上場景的測試，以及對熱門且夜晚模式舒適度較高的 app 做了研究，我得出：

• 文字與背景對比度—3:1～5:1
• 圖片色與背景對比度—4:1～6.5:1

下圖是夜間模式的部分設計稿：

（對比度可通過軟件 Colour Contrast Analyser 測出）

下面是我挑選了幾個肉眼看上去舒適度高的 app，對它們的夜間模式做了些研究，看看是否符合我以上的研究，結果如下：基本也與我擬訂的范圍貼合度很高。（y 表示的是總亮度）

二、如何把設計稿實現出來

思考實現這部分的時候，有很多的疑問。整個 app 的頁面太多，我要全部做出來，再給開發標注嗎？icon 如何處理，我需要重新制作一份夜間模式的 icon 嗎？夜間模式和換膚其實很像，可不可以復用呢？如何做到把設計和開發投入產出比最大化呢？

下面就一一來講解，我將這部分分為三塊來說明：文字+圖片+icon。

1. 文字

面對的問題：頁面太多，無法針對每個頁面做視覺稿。

解決方案：找出共性，歸納白天文字色，針對每個色值給出對應的夜間色值；根據前面的分析，夜間模式的對比度是不需要做明顯區分的，所以我把以下5種文字色，縮減成2種帶透明度的白色：45%、30%。輔助文字色的選取注意上面說的視覺平衡，可以用亮度公式來判斷。

方案延展：我為什么選用了帶透明度的白色呢？因為夜間模式其實也是一種換膚，那這個方案是否可以為以后的換膚做準備呢？最后我把分割線與文字色由純色變成帶透明度的色值，這么做能適配任意色值背景（除淺色背景下），為后續換膚打基礎（全局背景&彈框背景除外）。

按照以上的規律，把白天的文字色做減法，歸納為以下的表格；只要把這個表格給到開發，讓他們按照表格去實施，就能夠完美的實現夜間模式的文字替換了。

2. 圖片

圖片變暗的方式有兩種，各有優缺點，但可以解決大部分的圖片變暗問題。

方法一：圖片處于頂層，背景設置為黑色，改變圖片透明度，達到圖片視覺變暗的效果。

存在的問題：圖片變透明以后，可能會露出底層的某些隱藏控件。

結論：可以小面積使用

方法二：圖片處于底層，上面覆蓋一層黑色透明層，達到圖片視覺變暗的效果。

存在的問題：開發的實現方法在這里就不細說了，但這兩種實現方法會稍有內存開銷，且對 gif 圖不適用。

結論：目前來說比較合適的方案，可以使用。

3. icon

Icon 的表現形式比較的多樣化，但還是有規律可循，我把 icon 分為三種：單色、非單色、特殊位置。

單色icon

問題：這么多 icon？難道我要重新畫一遍，切圖給開發嗎？

答案：肯定不用。我先統一收攏了 icon 的顏色種類，只留下品牌色、正常裝飾色、不可點擊色，分別對這三種給出相應的色值，再配合一段代碼即可；這樣為以后的換膚做準備，不同的皮膚顏色，只需要瀟灑的給開發一個顏色值即可得到以下的效果。

非單色icon

非單色的 icon 是指包含兩種及兩種以上的顏色值的 icon，此類 icon 可以參考圖片的實現方式即可。

特殊位置的icon

有些部分的 icon 是不能用代碼實現變暗的，比如下圖中的頭像旁邊的「VIP身份標識」，這些 icon 就只能重新設計夜間模式的樣子，切圖給開發。

總結

我們來回顧一下上面說的夜間模式整體過程是什么？

希望每一個設計的背后，都有可以支持的理論依據，不純是主觀臆想，我們也正在這條道路上慢慢摸索，以上有不正確的地方，歡迎指正。

歡迎關注「TCD設計中心」公眾號：

「值得學習的實戰案例」

• 《超過8億人使用的QQ，總結了夜間模式設計的通用方法》
• 《通過優化，我們將QQ會員付費用戶數提高了5倍！》
• 《揭秘QQ 新版表情背后的設計故事》