前言
遇見更美的你，使億萬女性用戶「更美、更健康」——是美柚一直追求的目標。越來越多的女性用戶通過美柚記錄經期、管理健康、分享生活，美柚逐漸成為當今女性的一種生活方式。
根據相關平台數據顯示：57%的用戶在白天比較活躍；23%的用戶會在晚間使用美柚，而深夜仍在使用美柚的用戶占20%。
2015年，美柚上線了夜間模式，因為時間過於久遠，很多新的功能未能完美適配。隨著時代語境與流行文化的變化，在最近的品牌升級過程中，美柚用戶體驗中心對夜間模式進行了一輪優化升級。
本文將以現有的夜間模式為出發點，梳理現有的問題，分析夜間模式與什麼模式的共通點與差異性，並結合當前iOS和Android平台的深色模式趨勢，最終推導出符合美柚特色的深色模式優化策略，並落實到具體的執行流程中。
希望本文能給到大家一些幫助，如果有任何建議與意見，歡迎大家留言或私信交流。
PART 01 美柚夜間模式現存不足
目前線上夜間模式的適配，沒有完全覆蓋到所有頁面。部分介面直接從純黑到純白，明顯的亮度切換會造成強烈的視覺刺激，體驗上還有優化的空間；
目前夜間模式的可讀性略差，使用的文字顏色（#666666）和背景顏色（#222222）的對比較弱，導致低亮度時介面文字不清晰，辨識度低。不適合在白天或者亮光環境下使用。
介面層級關係不清晰，在淺色模式與深色模式的介面層級未一一對應，邏輯紊亂。
那我們應該選擇哪個方向進行優化呢？深色模式（Dark mode）？還是夜間模式（Night mode）呢？我們先來了解一些這兩個概念：
1. 深色模式
深色模式，iOS稱為DARK MODE，Android稱為DARK THEME。適用於任何使用場景，白天和黑夜都可使用，讓用戶更專注於內容，同時也是一種美學追求。隨著用戶對深色模式的呼聲越來越高，2019年谷歌和蘋果先後發布了手機系統的Dark mode（theme），伴隨著Android Q和iOS13的普及，國內各大應用（微信、QQ、百度網盤、網易雲音樂、釘釘等等）也紛紛適配了深色模式。
然而，深色模式並不是全新概念：在計算機誕生的早期綠色字符顯示在深色螢幕上就是我們擁有的一切，直到現在，很多開發GG編程時還是習慣使用深色介面。另外，大多數股票交易軟體也都使用深色介面；再有，早幾年Windows10就支持了深色模式；還有，設計師們都熟悉的設計軟體Adobe系列和Sketch均早已使用深色介面風格等等，在這裡就不一一列舉了。
2. 夜間模式
夜間模式，Night Mode。是為了讓用戶在比較暗的環境下能夠舒適的使用產品，在滿足介面信息可見的前提下，通過降低尼特值、降低介面元素對比度和色彩明度、增加深色遮罩的方法，避免螢幕亮光對眼睛的刺激，同時也能節約設備電量。
夜間模式更多的是從健康角度出發。在深夜尤其是熄燈後使用手機，手機螢幕發出的藍光，不僅造成視網膜的損傷，同時還會抑制體內褪黑素的分泌導致失眠。但科學實驗表明，夜間模式也並非完全護眼。為了健康，建議大家睡前少玩手機。
PART 02 深色模式與夜間模式的異同點
我們從以下幾個方面，拆解對比兩者的區別：
1. 使用場景
夜間模式，顧名思義主要是在夜間使用，保證了文字內容在夜間均可看清的同時，又不會太過刺眼。
深色模式不是夜間模式，用戶可以不僅可以在白天使用，也可在夜間使用，任何時間環境下均可使用，使用場景更豐富。
2. 背景亮度
亮度，是發光體光的強度與人眼所見到的光源面積之比，是人對光的強度的感受，單位是nit（1nit=cd/m2）。夜間，人眼主要是能感受弱光的視杆細胞在起作用，研究表明視杆細胞的作用範圍是0.034~3.4×10-6cd/m2。因此，夜間模式的螢幕夜間最高亮度最好控制在0.034nit左右，可通過亮度測試儀進行測試。
而深色模式的背景亮度則沒有特殊要求。
3. 背景色
夜間模式背景基礎色大多都使用暖色調，在早期的iOS的night shift夜覽模式，打開之後也是偏黃色調。這主要是由於螢幕會產生藍光，藍光不僅會傷害我們的眼睛，在夜晚還會抑制人體內褪黑素的分泌，使人難以入眠。這也是睡前儘可能不要去玩手機的原因之一。
深色模式背景色的使用並不局限於暖色調。從目前IOS13和AndroidQ所推出的深色模式，我們可以看出，iOS的灰色文字和背景都帶有藍色的色相；而谷歌官方也指明背景色可使用品牌色和深灰色疊加得出的品牌深灰色。
4. 文字、圖片、圖標
夜間模式，為了達到護眼的目的，文字圖片圖標與背景的對比度基本控制在8：1以下，整體對比度比深色模式要低很多。圖片和複雜的色彩圖標一般通過使用遮罩來達到降低明度的目的。
深色模式，為了多場景使用要求，對比度稍高。iOS13存在著純白和純黑的強烈對比度（21：1）；而Android官方建議的文本與背景最高對比度至少為15.8：1，為弱視和強光敏感的用戶提供可視性，讓所有人都可以在光線較暗的環境中輕鬆地使用設備。Android的深色規範中適配弱光的設計做得比iOS要好一些。
5. 自定義彩色
夜間模式，通過觀察色彩的HSB，可以較清晰的看出色彩之間的變化情況：在保持與系統色彩純度的基礎上，降低顏色的明度（B）和飽和度（S），從而達到柔和護眼的效果。
深色模式中，iOS13為確保都具有足夠的色彩對比度，將前景顏色與背景的對比度設定為7：1。蘋果深色模式使用的色彩，在淺色模式基礎上進行了感官微調，整體上降低了飽和度，色彩應用上比較靈活。
而Android為確保達到4.5：1以上的對比度，要求避免使用高飽和色。因為高飽和顏色在深色背景上會讓人在使用時產生暈眩感，引起眼睛疲勞，所以安卓同樣是採用降低飽和度的方法。
6. 視覺表現力
深色模式的視覺表現比夜間模式會更有張力。
7. 省電
夜間模式和深色模式，與淺色模式相比，都是可以達到省電的效果。
採用OLED螢幕的設備，開啟深色模式後，谷歌表示可降低設備耗電速度，節省電量，續航更持久。這主要是由於 OLED 螢幕中每個像素都是自主發光，而非 LCD 由一整塊背光板發光，所以在顯示深色元素時像素所消耗的電流更低，尤其在純黑顏色時像素點可以完全關閉達到省電的效果。
8. 小結
目前用戶在白天使用美柚的占比超過半數，之前的夜間模式體驗較差，同時對比分析夜間模式與深色模式之後，為了豐富用戶的多元化使用場景，我們決定往什麼模式方向進行優化。優化之前，我們再來看下iOS和Android兩大平台深色模式的一些細節差異。
PART 03 iOS和Android深色模式的差異點
iOS和Android的一些異同點在上文已經略有提及，現在我們主要從信息層級和彩色兩方面做細節分析：
1. 信息層級——背景基礎色的選擇差異
iOS系統
iOS13深色模式中介面的層級關係遵循：離用戶更近的部分顏色會更亮一些。背景色會隨著介面層級變化，而變成提亮色，從HSB角度看，即通過調整顏色的明度、飽和度，來區分視覺層級。
我們拿蘋果系統設置頁面舉個例子。列表顏色比背景亮，層級比背景高。而在隨後彈出的操作浮層中，浮層更靠近用戶，顏色會更亮一些，相應的頁面層級也隨之變化。
iOS13系統背景採用的基礎底色是純黑（#000000）。那為什麼採用的是純黑呢？應該也有一部分人跟我一樣有疑惑吧。究其原因有如下3點：
- iOS的頁面層級是通過控制顏色的明度、飽和度來區分視覺層級，去掉了所有的陰影也照樣能清晰的了解頁面的信息層級。
- 省電。自iPhoneX之後的蘋果手機都採用OLED螢幕，而 OLED 螢幕中每個像素都是自主發光，如果是純黑色，像素點是可以完全關閉，達到更省電的效果。
- 筆者猜測是採用黑色可以和劉海銜接得更好。
上述4種背景色是比較常用的。另外根據iOS13 UI kit，還有4種帶透明度的填充色，在系統中混合使用了帶透明度的填充色和7種完全不透明度的灰色，以此作為背景的不同層級。實際應用過程中，可單獨使用完全不透明度的灰色區分層級，也可結合填充色混合使用。
Android系統
Android在深色模式中，介面層級之間的關係與淺色模式保持一致，都是通過調整Z軸高度和陰影的變化來表現。隨著Z軸高度的升高，離隱含光源的位置越近，表面的顏色會越亮。
Android官方推薦基礎背景色採用深灰色（#121212）。主要原因有2點：
- 淺色模式中的通過Z軸高度和陰影來表現層級這一規範，深色模式也保留了，而深灰色更容易看到灰色陰影，能夠較好地讓不同介面元素在深色模式下保留清晰而直觀的層次關係。
- 另一方面，是出於護眼的考慮，深灰色的表面可以減少眼睛疲勞，深灰背景上的淺色文字對比地相比黑色背景上的淺色文字要低很多。
谷歌官方給出了如下規範，在深灰色背景基礎上疊加不同的白色透明度，區分層級。
疊加白色透明層可清楚顯示組件之間的層級差異。
2. 文本顏色
iOS系統
iOS13中的標籤顏色用於文本，且基於信息層級劃分為4種帶透明度的顏色。
Android系統
Android也是通過控制白色不透明度來區分文本視覺層級，且所有文字均應清晰易讀並符合可訪問性標準。Web內容可訪問性指南（WCAG 2.0） AA級要求普通文本的文本和背景之間的顏色對比度為4.5：1，大文本則為3：1。使用以下不透明度級別：
- 一級文本的白色不透明度為87％
- 二級文本的白色不透明度為60％
- 三級文本（不可見文本）的白色不透明度為38％
3. 彩色對比度的差異
iOS
為確保足夠的色彩對比度，對於自定義顏色，蘋果將前景顏色與背景的最小對比度設置在7：1。蘋果深色模式使用的色彩，在淺色模式基礎上進行了感官微調，整體上降低了飽和度，色彩應用上比較靈活。
蘋果引入語義色彩，通過SystemRed、SystemGray這樣的文字命名，來說明對說明應使用文字、背景等的顏色，比如，紅色的命名為SystemRed，在淺色模式SystemRed=#FF3B30，在深色模式SystemRed=#FF453A。通過語義色彩，設計師可設定好配色模板，程式設計師可以在不同介面的同類元素中，直接使用語義色彩，更容易復用。節省配合成本。
Android
為確保元素之間足夠對比度，安卓要求正文文本應至少達到4.5：1的可訪問性標準，避免使用高飽和的顏色，因為高飽和的顏色會在深色背景上產生暈眩，引起眼睛疲勞。
在 Material Design 深色模式設計規範中，谷歌會為淺色的顏色（以報錯紅色為例）疊加一層 40% 的白色。彩色在深色模式下的適配，雖然iOS會更精緻些，但谷歌的方法有跡可循，可以幫助我們快速適配更容易協同使用。
PART 04 國內外主流APP深色模式分析
1. 適用場景
我們再來看看國內外各大廠主流APP的深色模式。通過測試，Instagram、Twitter、百度網盤、釘釘、網易雲音樂可以適用於不同時間的使用場景。而微信則比較適合在夜間使用，更偏向夜間模式，在白天使用文本信息的可讀性比較低。
2. 信息層級
通過將十六進位色值換算為白色透明度與基礎背景色的方式，我們可以清晰的看到各個應用都是採用按梯度疊加白色不透明度的方式來區分層級。
國外的應用，信息架構相較於國內應用而言，相對簡單一些，背景層級一般只有3個左右，更有甚者像Twitter只有2個層級。國內應用的信息層級基本在4個左右。最高層級疊加的白色不透明度一般不超過30%。
通過對比各大應用，直接採用純黑色（#000000）作為基礎背景色的居多。
3. 文本
為了拉開標題與副文本的視覺差異，標題文本與副文本之間顏色的明度梯度大概在30~40之間。
由於國內應用的結構功能較複雜，文字的層級較國外應用的也多了一些。
4. Tab欄
雖然面型icon在頁面的識別度會比較高，但觀察這幾個APP深色模式中的icon，均保持與淺色模式中的樣式一致，僅顏色做了適配。其中原因，應該是為了減少適配和後期維護成本。
使用的顏色均滿足最低對比度4.5：1的要求。
PART 05 優化目標
通過以上分析，確定此次深色模式優化目標：
1. 滿足可用性原則
深色模式不是夜間模式，由於要滿足用戶不同時間的使用場景，確保用戶使用產品的可讀性，因此主要信息元素的對比度需要滿足最低4.5：1的可用性標準。
2. 保持信息層級一致性
深色模式是對淺色模式的補充，信息層級保持與淺色模式一致，便於用戶操作。
3. 降低實現成本和維護成本
深色模式適配涉及的人員較多，通過採用Key值的方式（類似iOS規範中語義命令方式）對應淺色模式與深色模式中的不同色值，這不僅可以大大降低與開發的對接成本，也可降低後期的維護成本。對於優先級較低但成本高的適配（比如圖標），降低優先級或不處理。原有深色場景，如小視頻模塊、沉浸式播放等，保持不變。
PART 06 設計策略
圍繞著3個設計目標，我們的整個設計流程為：
定義背景色——確保文字清晰可見——調整元素色彩——減少大面積的色彩使用——在不同環境測試介面。
1. 定義背景色
美柚淺色模式主要是遵循iOS規範進行設計，並非Android規範中通過控制Z軸高度和陰影來區分層級，同時為了保證深色與淺色的信息層級一致，便於用戶操作，我們採用純黑（#000000）作為深色模式的基礎背景色，通過調整介面的層級亮度來區分層級。
2. 確保文字清晰可見
深色模式和淺色模式下的文字的對比度層級是相同的。UI中文字的層級關係，除了用字號字體和間距來表達外，最常用的一種就是通過顏色的對比度來區分了。
文字的層級關係上色彩的明度差別越大則層級關係越清晰。除此之外，它們還都需要跟背景保持清晰的對比，否則會影響文字的閱讀。在保證最低對比度的同時，也要避免純黑與純白的使用，因此會引起暈眩的感覺。
根據WCAG的標準，大文本（18pt或者14pt加粗）與背景的對比度至少為3：1；小文本（小於18pt）與背景的對比度至少為7：1，對於不可見內容、純裝飾性元素，無需考慮此標準。因此我們做出如下規定：
- 文本的對比度，滿足3：1 ~18：1；
- 品牌色、警示色、強調色、輔助色等彩色，滿足對比度達到4.5：1以上；
- 不可點擊顏色、占位符雖未做限制，與深色背景對比度大致是2~3。
另外，為了讓文字的層級區分更符合視覺美感要求，也為了後期更好的規範和延展，因此文字的明度遞減的梯度借鑑了斐波那契數列，我們將文字使用的色值確定如下：
3. 調整元素色彩
圖標、圖片、插畫，為了滿足無障礙色彩對比要求，與背景對比度至少為4.5：1。為了滿足多場景的使用要求，也為了降低後期的維護成本，優先級高的特殊頁面單獨調整適配。
對於H5的頁面適配，統一添加40%不透明度的黑色遮罩。
4. 減少大面積的彩色使用
考慮到特殊人群（弱視、色盲、色弱人群）的特性，儘量減少大面積的彩色使用，而採用無彩色的黑白灰作為背景色，能夠減少其與正常人的識別色彩的差異。
5. 在不同環境測試產品可用性
深色模式不是夜間模式，為確保用戶在白天和暗光環境都可用，需在不同環境下測試優化的介面，把手機設備在太陽底下，或者在昏暗環境下調低手機螢幕亮度進行測試。
PART 07 執行落地
1. 使用Key值交付開發
淺色模式中的顏色，需要一一對應到深色模式中的。比如淺色中較多背景色均為白色，在深色中，需要替換成不同層級的色值時，需要對白色建立多個Key值。
早期版本的美柚就已經適配了夜間模式，顏色的使用上，我們仍遵循使用Key值的方式。這其實跟蘋果的顏色語義方式是一致的。
2. 在Sketch中創建key值
為了方便後期疊代中顏色的高效使用，我們通過sketch measure建立key值Jason文件，並同步團隊的設計小夥伴。後期的設計稿標註中，通過導入這份顏色的Jason文件，輸出的標註就帶有key值了。（ps：sketch measure同個色值，只能建立一個key值，對於白色的多個key而言，並不那麼友好）
3. 創建深色模式的UI控制項庫
4. 各部門協同配合
各部門協同配合，有問題及時溝通，保證完美的落地效果。
最後
為了達到更優的用戶體驗，深色模式的設計還需要我們繼續探索。深色的適配不是一次性的工作，疊代過程中尋求更高效率與更低的維護成本，也是我們設計師需要考慮的部分。希望本文能對各位小夥伴們提供一些幫助。