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