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