夜間模式與暗黑模式的區別
首先先普及一下夜間模式和暗黑模式（dark mode）的區別。
引用蘋果「Human Interface Guidelines」中的一句話。
Dark Mode is an aesthetic choice for users. Users can choose Dark Mode as their default interface style, and may use it at any time of day or in any lighting conditions.
Dark Mode 不是夜間模式，用戶可以在任何時間任何環境下使用它。
而夜間模式專爲夜間場景設計，而暗黑模式的使用場景爲全天，在系統主題爲深色的條件下，自動變換爲暗黑模式。
夜間模式更多是在夜間或暗光環境使用下的爲用戶的健康角度考慮的模式，避免用戶在黑暗環境中長時間注視高亮光源感到眼睛不適，所以夜間模式屏幕顯示更柔和，飽和度更低，對比度更小來減少用戶的眼睛壓力。
爲什麼簡書選擇夜間模式而不是暗黑模式
多數簡書用戶會在晚上睡前打開簡書App
根據簡書後臺數據可以看出，在每天22點左右用戶訪問App次數達到峯值且這個時間段用戶最活躍。相較於白天10點左右的活躍度高峯，晚22點比白天最高峯活躍度平均高36.7%。參考之前的調研報告，大多數用戶喜歡碎片化時間和睡前打開手機。
根據4976份簡書核心用戶調研問卷的結果：42%的用戶每天睡前會打開簡書App。
用戶夜間使用手機的頻率很高，且簡書App是一款閱讀工具類產品，與其他工具類產品不同。簡書用戶需要更長時間的“沉浸式”閱讀，所以“護眼”功能就顯得尤爲重要。所以更適合簡書用戶使用場景的是——夜間模式。
舊版本的夜間模式的缺點
簡書夜間模式與其他主流App夜間模式對比
從上圖可以直觀得看出舊版簡書App夜間模式的可讀性略差，使用的文字顏色和背景顏色的對比較弱，導致界面文字不清晰，辨識度低。不適合在白天或者亮光環境下使用。且背景顏色背景偏灰，底色爲淺灰，這點會導致OLED屏幕深色不發光的特性無法很好的發揮，隱藏邊框的視覺效果無法顯示出來，還是十分影響觀感的。
在夜晚不開燈的情況下，環境與手機屏幕亮度的明暗差距被進一步放大，亮度對比帶來視覺刺激也更加明顯。如果在漆黑的環境下看高亮的手機屏幕，對我們的健康有非常大的損害，不僅表現在對視力的傷害上面，視網膜和神經元容易受損，同時主流的研究項目還表明會這會抑制我們褪黑素的分泌造成失眠。
因此儘可能降低屏幕亮度，縮小屏幕顯示亮度與環境光的差距，是保證用戶夜間舒適閱讀和使用的重要前提。
設計原則
1.設計更符合用戶使用習慣，讓用戶使用更加舒適的夜間模式。
2.找到對設計師和開發都更加友好、便捷的黑夜模式實現方式。
如果加入夜間模式後，設計師設計頁面都要出白天與黑夜兩個版本，開發也需要用大量成本投入，是非常不友好的。所以要想一個更便捷更適合開發與設計協作的更系統的方式。避免了重複勞動，減少不必要的的工作。
如何設計夜間模式
1.選擇背景色——選擇低亮度背景色
我們常用來描述光的物理量有4個：發光強度/光通量/光照度/亮度。亮度是指物體明暗的程度，定義是單位面積的發光強度，它的單位是 nit（尼特）；1nit=1 cd/m²。夜晚，我們最終的屏幕亮度應該保證在0.034cd/m²左右是較爲合適的。
對亮度控制，首先需要確定顏色本身的亮度，從一開始對界面的主體顏色的選擇就應該選擇亮度較低的色彩，從設計用色上就控制界面的亮度。因此，方法就是直接降低色彩本身亮度，但是要避免選用極端顏色（避免純黑色）。爲了方便大家對比所選顏色的亮度，可通過色彩亮度公式計算（Y-範圍0-255，Y值約接近0亮度越低）：
依據簡書規範中的灰度色階，我們通過色彩亮度公式進行逐個計算，最終符合底色標準的顏色定爲: #1A1A1A。
2.定義背景界面層級框架
Material Design 在淺色模式時使用在白色卡片下投射陰影的形式來模擬現實世界的空間深度感，而在深色模式下，尤其是當背景已經很深時如何表現深度呢？Material Design的原則：元素層級越高，其承載面的顏色越淺。
參考 Material Design 的設計原則，在夜間模式下，從淺到深定義了Overlay Light、Overlay Dark、Surface、Base、Overlay 五個顏色。有1-5深色梯度表現元素層級。最深爲5最淺爲1。
3.確定文字顏色
需要符合 WCAG 色彩通用性標準，保證文字與背景的對比在能看清的範圍。
對比度規範是由 Web 無障礙指南（WCAG）提出，現已經逐步被大公司採納，蘋果公司的設計規範中引用了此對比度規範。根據 WCAG2.0 對比度的標準：
1.4.3 對比度（最小）: 文本的視覺呈現以及文本圖像至少要有4.5:1的對比度（AA級），大文本: 大號文本以及大文本圖像至少有3:1的對比度;
1.4.6 對比度（加強）: 文本視覺呈現以及文本圖像至少有7:1的對比度（AAA級），大文本: 大號文本以及大文本圖像至少有 4.5:1的對比度。
怎樣在符合色彩通用性標準的情況下又不過於強對比，適合夜間閱讀。
在確定底色後開始嘗試挑選色階表上的其他顏色作爲文字的顏色，儘量滿足文字對比度的比值在3:1-4.5:1的範圍。通過微調，文字方案下：
背景色爲#1A1A1A，在色階中選取較爲適宜黑夜模式的主標題文字顏色爲 #B1B1B1 與 #99999。利用對比度查閱的工具網站：WebAim，選取最接近且符合WCAG 2.0的AAA級的顏色。最後選取所得的主標題顏色爲 #B1B1B1，背景色與文字的對比度爲：8.11：1。選取了主標題色後再利用色階表把黑夜模式的其他文字顏色（如二級標題與正文，三級標題與註釋等）定義出來。
4.爲顏色建立命名系統——語義化顏色（Semantic Colors）
在 iOS 設計語言規範下，產品支持深色模式就必須管理兩套完整的顏色方案，確保它們之間始終保持同步，這就要求設計團隊以更系統的方式來管理顏色體系。爲此，蘋果引入了「語義化顏色」的概念。（如果對蘋果的官方規範感興趣可以在 這裏下載 蘋果官方提供的 iOS 13 設計模板的 Sketch 文件，其中包含了 iOS 13 的最新規範、內置語義色彩、材質等元素。）
使用能夠適配於當前外觀模式的顏色。使用 iOS 13 新引入的語義化顏色（Semantic Colors）的界面元素可以自動適配當前的外觀模式。當需要定製化的顏色時，你可以向 app 的素材目錄（Asset Catalog）當中添加一套顏色組合，爲淺色與深色模式各自定義一組顏色變量，使其能夠根據用戶當前的外觀模式進行自動適配。避免通過硬編碼的方式定義具體的色值，否則顏色將不具備自適應性。
下圖爲簡書規範中的部分顏色的語義化命名。
例如，在白天模式中，#2F2F2F是我們的一級標題和正文的顏色，而深色模式下我們用#B1B1B1這個色值來取代一級標題的顏色。如果給這一對色值命名爲「gray900」的動態色，開發就可以高效實現在兩種模式下的色彩切換。設計師也只需要記得這個顏色代號就可以。對顏色的語義化命名對設計師和開發都非常友好。
下圖爲給開發工程師準備動態色對照表。
5.爲過亮元素增加黑色透明度蒙層
避免在文字和背景都處理爲低飽和度的黑夜模式下，突然出現一張白色圖，給用戶的眼睛帶來負擔。所以需要在高亮度元素上增加黑色透明蒙層。
例如頭像、圖片等類元素如果不能滿足亮度和對比度（3:1-7:1）的要求在其上方添加黑色透明遮罩（不透明度30%-40%），從而降低對比度和亮度，使界面元素的亮度盡力滿足對比度（3:1-7:1）的要求。
下圖爲示例：在原有的圖片的基礎上加了灰色遮罩，在黑夜模式下看起來不會太過刺眼。
對於h5活動頁面的適配，也統一添加30%的黑色透明度蒙層。
步驟總結
爲了便於理解，繪製了一個步驟流程圖。
先選擇低亮度的背景色 → 根據背景色定義層級框架 → 根據色彩通用性標準確定文字色值 → 爲顏色建立命名系統 → 爲元素添加蒙層降低元素亮度對比度。
最終效果呈現
其他
對比度檢測工具推薦
1.可以直接在線調顏色，實時看對比度是否滿足要求：WebAIM
2.檢測對比度是否達標：Contrast-ratio
參考文獻
- iOS HIG 中 Dark Mode 設計指導的章節：https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
- Material Design 中 Dark Mode 設計指導的章節：https://material.io/design/color/dark-theme.html#properties
- 色彩無障礙設計之「對比度」的探索：https://zhuanlan.zhihu.com/p/29359260
- 優化夜間閱讀體驗 (特別推薦）：https://www.ui.cn/detail/207795.html