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