Android Q 和 iOS 13 為我們帶來(lái)了 Dark Mode（深色模式），這已經(jīng)不是什么新鮮事了，很多團(tuán)隊(duì)都已經(jīng)擁有了各自適用的解決方案，起點(diǎn)讀書(shū)的深色模式設(shè)計(jì)解決方案也終于從幕后開(kāi)始進(jìn)入到項(xiàng)目落地環(huán)節(jié)，從時(shí)間跨度上來(lái)講已經(jīng)大半年過(guò)去了。這段時(shí)間經(jīng)歷了各產(chǎn)品解決方案的轟炸與洗禮，我們又結(jié)合起點(diǎn)本身的產(chǎn)品定位與結(jié)構(gòu)特點(diǎn)，在此背景下一套融合 Dark Mode 和主題皮膚設(shè)計(jì)的解決方案應(yīng)運(yùn)而生。

衍果設(shè)計(jì)提示本文會(huì)重點(diǎn)聚焦設(shè)計(jì)落地執(zhí)行的解決方案，視覺(jué)解決方案每個(gè)產(chǎn)品都有自身不同特點(diǎn)，且 Android 和 iOS 官方都各自擁有符合各自平臺(tái)的設(shè)計(jì)解決方案，因此不在此一一贅述。

閱讀類(lèi)產(chǎn)品如何做深色模式

在落實(shí)方案之前我們首先要搞清楚，Android、iOS 各自所理解的 Dark Mode 到底是什么？如果將 Dark Mode 與夜間模式劃等號(hào)，這從意識(shí)形態(tài)上已經(jīng)出現(xiàn)了疑問(wèn)。因?yàn)槠瘘c(diǎn)本身屬于在線閱讀平臺(tái)，對(duì)于頁(yè)面的可讀性的要求非常嚴(yán)謹(jǐn)。YUX內(nèi)部進(jìn)行過(guò)多次深入討論，將這兩種模式嚴(yán)格的區(qū)分開(kāi)。

1. 概念區(qū)分與融合

Dark Mode （深色模式）是在日夜間都可以使用的一種裝扮主題，需要滿足在日夜間都可以無(wú)障礙使用；而夜間模式會(huì)比較聚焦于昏暗環(huán)境下的閱讀體驗(yàn)，是大部分 App 為了用戶(hù)在昏暗環(huán)境下有良好的使用體驗(yàn)專(zhuān)門(mén)定制的模式這叫做夜間模式，因此為了不給用戶(hù)過(guò)多的理解負(fù)擔(dān)，我們將這兩個(gè)概念進(jìn)行了部分融合。（如下圖）

當(dāng)用戶(hù)開(kāi)啟 Dark Mode 開(kāi)關(guān)后，非閱讀場(chǎng)景不需要用戶(hù)過(guò)于沉浸， 信息的可讀性和內(nèi)容的高對(duì)比度可以讓信息更加高效的傳達(dá)，因此為了滿足用戶(hù)不同場(chǎng)景下的使用體驗(yàn)，非閱讀場(chǎng)景會(huì)使用偏向 iOS 的 Dark Mode 解決方案；而在閱讀場(chǎng)景下，為了滿足用戶(hù)的長(zhǎng)時(shí)間閱讀的舒適要求，因此會(huì)使用低對(duì)比度的夜間模式的解決方案。

在谷歌和iOS的官方解決方案中，對(duì)主要文字信息表達(dá)部分的對(duì)比要求大致范圍至少16:1~7:1之間，而對(duì)最低文本的對(duì)比度要求是4.5:1，因此我們基于此參考，最終將兩種不同場(chǎng)景的對(duì)比度劃分為相應(yīng)可適應(yīng)區(qū)域。

2. 技術(shù)條件決定開(kāi)發(fā)成本

起點(diǎn)本是 Android、iOS、Web 混合的模式，因此設(shè)計(jì)方案需要能兼顧三端。了解清楚當(dāng)前產(chǎn)品的結(jié)構(gòu)形態(tài)是做 Dark Mode 的前提條件，如組件覆蓋率、產(chǎn)品復(fù)雜度、技術(shù)執(zhí)行能力等；這幾個(gè)條件對(duì) Dark Mode 的工作量影響是比較大的，所以在前期最好能評(píng)估好這些條件的實(shí)際情況。

基本要素

理論上做 Dark Mode 就是做顏色/素材映射關(guān)系。這個(gè)與做主題設(shè)計(jì)的理論概念是完全一致的，因此我們將兩個(gè)項(xiàng)目做了合并處理，從設(shè)計(jì)方案中將 Dark Mode 當(dāng)成主題來(lái)作為解決方案的基礎(chǔ)。既然概念不分家，那么在規(guī)則制定上會(huì)更多的去考慮在主題模式下的設(shè)計(jì)表現(xiàn)。

1. 頁(yè)面層級(jí)

整體結(jié)構(gòu)上我們將App的頁(yè)面劃分為4個(gè)層級(jí)，背景層、UI層、懸浮層、彈出層，每個(gè)層級(jí)還會(huì)有自己的子集，我們按照從下至上的順序來(lái)介紹。

背景層對(duì)于主題來(lái)說(shuō)背景承載了兩種表現(xiàn)形式：純色、背景圖，因此在處理背景顏色映射的時(shí)候就需要考慮到該如何支持兩種主題的設(shè)計(jì)關(guān)系。

UI 層主要是用于放置所有界面元素、組件的層級(jí)。UI 層是顏色分類(lèi)的基本依據(jù)，所以我們?nèi)绻麑?UI 層再進(jìn)一步劃分的話，大致會(huì)包含如下內(nèi)容，背景、文本、元素（圖標(biāo)）、圖片、圖片上層等。

懸浮層主要包括例如導(dǎo)航欄、工具欄、輸入欄、懸浮按鈕等都屬于懸浮層元素，通常我們定制主題皮膚的時(shí)候，都是對(duì)懸浮層的元素進(jìn)行素材改造和氛圍渲染。

彈出層顧名思義，就是原本不屬于本頁(yè)面，觸發(fā)一定條件后在本頁(yè)面展示的彈出層級(jí)，例如我們熟悉的彈窗、半彈層、Action Sheet、Toast 等。彈出層的背景色如何制定在主題皮膚下如何表現(xiàn)，會(huì)使用到我們與研發(fā)團(tuán)隊(duì)共同合作制定的智能取色系統(tǒng)。

通過(guò)對(duì)層級(jí)的劃分，我們大致了解了不同層級(jí)在適配主題的時(shí)候所承載的主要功能，這幫助我們?cè)谠O(shè)計(jì)皮膚主題的時(shí)候可以快速帶入頁(yè)面、明確色彩關(guān)系。

2. 顏色

顏色我們分三個(gè)部分來(lái)解析，分別是顏色分類(lèi)、主題分類(lèi)、映射方案。

顏色分類(lèi)

頁(yè)面層級(jí)的劃分幫助我們更好的管理顏色，通過(guò)此方法我們?yōu)槊恳唤M顏色打好標(biāo)簽，通過(guò)對(duì)頁(yè)面拆解、層級(jí)的剝離得到以下比較符合起點(diǎn)業(yè)務(wù)場(chǎng)景的標(biāo)簽分類(lèi)，請(qǐng)注意這里的分類(lèi)不區(qū)分色彩傾向，只以功能、頁(yè)面、層級(jí)特點(diǎn)為分類(lèi)基礎(chǔ)。

舉個(gè)例子，Primary 對(duì)應(yīng)的就是起點(diǎn)的主色紅色系，這個(gè)標(biāo)簽屬于相同色系；而 OnImage 對(duì)應(yīng)的是出現(xiàn)在圖片上的顏色，這個(gè)標(biāo)簽就屬于多個(gè)色系顏色；他們各司其職，通過(guò)當(dāng)前的類(lèi)別劃分已經(jīng)基本上滿足起點(diǎn)讀書(shū)的設(shè)計(jì)需求，可應(yīng)對(duì)多種場(chǎng)景變化。

但是光看這組標(biāo)簽還不足以幫我們理清思緒，通過(guò)判斷該顏色是否是影響 App 主題的關(guān)鍵因素，將這些標(biāo)簽分為有映射、無(wú)映射、自定義色這三個(gè)類(lèi)別來(lái)劃分。（如下圖）

同為淺色主題（關(guān)于主題區(qū)分下文會(huì)做介紹）的前提下，有映射關(guān)系的顏色是指這些顏色在 App 主題中都會(huì)有自己固定的色彩映射值，無(wú)需我們主動(dòng)調(diào)整，比如 Outline 這個(gè)顏色在所有淺色主題中會(huì)有自己固定的映射值，不會(huì)隨著主題的變化而產(chǎn)生改變。

無(wú)映射關(guān)系是指該顏色不會(huì)受主題的影響而產(chǎn)生改變，比如 OnImage 這個(gè)顏色就不受主題的影響，它在任意場(chǎng)景下均為相同顏色。

自定義色就是影響主題調(diào)性的顏色了，通常我們講設(shè)計(jì)主題其實(shí)首先就要對(duì)這個(gè)幾個(gè)顏色進(jìn)行調(diào)試，前文提到的輕主題就可以通過(guò)調(diào)整這個(gè)分類(lèi)的顏色就可以快速生成一款主題。

主題分類(lèi)

剛剛我們提到顏色分類(lèi)的時(shí)候說(shuō)過(guò)在淺色主題前提下，色彩映射可分為三類(lèi)，那么我們是如何判斷深淺主題的呢？深淺主題又該如何做分類(lèi)？簡(jiǎn)單一句話概括就是淺色主題就是白底黑字/面，深色主題就是黑底白字/面；如果我們以「底（即背景）」為參照物，那么淺色主題對(duì)應(yīng)的就是用淺色背景的主題，而深色主題對(duì)應(yīng)的就是用深色背景的主題。

我們結(jié)合顏色分類(lèi)和主題分類(lèi)，就可以總結(jié)一個(gè)結(jié)論，同一個(gè)主題分類(lèi)下的顏色映射除去自定義色以外都是相同的。

那么我們?nèi)绾螀^(qū)分深淺呢，我們提出了兩種解決方案，第一種也是最簡(jiǎn)單的方法，那就是人為的區(qū)分，設(shè)計(jì)師自己人為的劃定主題類(lèi)別；第二種更偏向于智能化一點(diǎn)，當(dāng)我們上傳了一張 Background 圖片或者自定義一個(gè)顏色作為背景時(shí)，我們可通過(guò)對(duì)背景取色，取其主色并通過(guò)對(duì)主色 RGB 值分析來(lái)區(qū)分所取顏色的深淺，通過(guò)深淺自動(dòng)匹配不同的主題映射方案（如下圖）。未來(lái)我們將會(huì)對(duì)兩種方案進(jìn)行整合，純色背景的主題智能化處理，圖片作為背景的主題，依然需要設(shè)計(jì)師輔助區(qū)分。

而剛剛我們所取的主色就可以當(dāng)做我們的 SheetBackground 來(lái)使用，而 Primary 顏色我們可以通過(guò)算法匹配出一個(gè)相應(yīng)的主色（算法大意：取背景色的HSB，色相值H，然后自定義S、B的數(shù)值就可以匹配出我們需要的顏色）或者自定義一個(gè)主色亦可。

映射方案

在具體落實(shí)方案上還有很多細(xì)節(jié)點(diǎn)，比如我們?cè)?Background 顏色/背景上通常會(huì)覆蓋一層黑色半透明，主要是因?yàn)樘囟ㄇ闆r下該顏色會(huì)與 SheetBackground 產(chǎn)生交集。

在日常的UI設(shè)計(jì)中往往還會(huì)遇到 Design Token 顏色不夠用，還常常用到其他顏色的情況，雖然是小概率事件，但我們依然需要將其納入到設(shè)計(jì)流程中，為避免雙方（設(shè)計(jì)與研發(fā)）使用直接的 RGB 色值，我們又制定了一套色碼表，色碼表收錄了包含 Design Token 的所有顏色，并且有規(guī)律可循，這樣我們就可以保證與研發(fā)的雙向約束。以下為起點(diǎn)的 Design Token 命名映射表單以及色碼表一覽。

關(guān)于同色不同標(biāo)簽，也同樣擁有很多注意點(diǎn)，比如白色 #FFFFFF 這個(gè)顏色，在 Background、SheetBackground、NavBarBackground、Surface、OnImage 中都有出現(xiàn)，但是各自的顏色映射關(guān)系都有點(diǎn)不太一樣，在 Background 中需要映射背景或者自定義顏色，在 SheetBackground 中需要依托取色或者自定義，在 NavBarBackground 中又是全透明的映射關(guān)系，而在 Surface 是一套固定的映射關(guān)系，出現(xiàn)在 OnImage 卻又不需要映射。

3. 素材的適配方案

將端內(nèi)的素材按照類(lèi)型分大致可分為五類(lèi)：?jiǎn)紊珗D標(biāo)、多色圖標(biāo)、缺省圖、氛圍圖片/動(dòng)畫(huà)文件、書(shū)封/UGC圖片。對(duì)于不同的素材需要有不同的處理方案。

單色圖標(biāo)因?yàn)槭褂玫氖?Svg，所以只需要進(jìn)行著色處理即可。

多色圖標(biāo)以金剛區(qū)為例，通常產(chǎn)品金剛區(qū)的圖標(biāo)來(lái)源于本地素材和服務(wù)端下發(fā)這兩種場(chǎng)景，如果是本地素材，可以?xún)?nèi)置兩套素材；而服務(wù)端下發(fā)的圖片素材，在無(wú)法基于 Dark Mode 自動(dòng)替換的前提下，只能使用一套基礎(chǔ)圖片。然而客戶(hù)端對(duì)服務(wù)端下發(fā)的圖片的可編輯性是非常有限的，目前僅能對(duì)單色圖片做著色處理；眾所周知金剛區(qū)的圖標(biāo)風(fēng)格都比較強(qiáng)烈且偏個(gè)性表達(dá)，因此如何解決不同皮膚下的金剛區(qū)圖標(biāo)風(fēng)格問(wèn)題，我們嘗試了一下有效解決方案：

結(jié)構(gòu)拆分法，以下圖為例，將原圖標(biāo)拆分為上下兩層結(jié)構(gòu)，不同主題下客戶(hù)端僅需對(duì)圖標(biāo)底部背景色進(jìn)行 Token 綁定即可。這種解決方案的下的產(chǎn)品主題皮膚更加沉浸、風(fēng)格更加統(tǒng)一。

一套圖解決思路，將原本設(shè)計(jì)調(diào)整為可適應(yīng)多場(chǎng)景的風(fēng)格；這樣的解決方案好處在于給了設(shè)計(jì)師更多的發(fā)揮空間，可以在金剛區(qū)嘗試不同的設(shè)計(jì)風(fēng)格，同時(shí)還可以拓展動(dòng)態(tài)圖標(biāo)的運(yùn)用，這些自定義操作都不會(huì)受限于客戶(hù)端的展示形式。

缺省圖提供雙風(fēng)格的樣式即可，或者調(diào)整風(fēng)格為多場(chǎng)景通用的樣式。

氛圍圖片/動(dòng)畫(huà)文件通常是裝飾作用的素材，因此大部分不需要進(jìn)行映射處理。

書(shū)封/UGC圖片遵照應(yīng)對(duì)多場(chǎng)景使用均可使用的原則，因此不對(duì)圖片做過(guò)透明度/遮罩/對(duì)比度等處理。

接入方式

1. 如何保證設(shè)計(jì)準(zhǔn)確性

我們?cè)跇?gòu)建組件庫(kù)時(shí)需嚴(yán)格按照顏色的使用標(biāo)準(zhǔn)和標(biāo)簽來(lái)用色，做到所有顏色均從 Design Token 中調(diào)用；日常版本迭代中設(shè)計(jì)師也需要遵守用色標(biāo)準(zhǔn)，無(wú)需映射的顏色或者特殊用色也可以從色碼表中獲取。當(dāng)然只要是人為進(jìn)行的操作就肯定會(huì)有出錯(cuò)的情況，為此我們又借助 Figma 中的 Themer 插件可以做到顏色一鍵切換的效果，可以幫助我們快速檢索用色錯(cuò)誤的元素。

2. 研發(fā)接入方式

Android、iOS、Web 接入的前提條件是已經(jīng)擁有比較高的組件覆蓋率；通過(guò)與研發(fā)同學(xué)的通力合作，我們搭建各端的 Design Token，這其中包含顏色、字體、陰影等視覺(jué)屬性。通過(guò)SDK的方式管理 Design Token，確定好哪些映射關(guān)系可以統(tǒng)一替換，哪些是需要自定義下發(fā)的。

以安卓為例，初始化的時(shí)候有3套基本 Token 的映射，分別是 Dark Mode、深色皮膚、淺色皮膚。當(dāng)切換主題后會(huì)判斷主題類(lèi)型并為之匹配不同的映射方案，隨后會(huì)跟隨皮膚主題色來(lái)改變部分影響皮膚調(diào)性的 Token 映射。因?yàn)樯钌つw和淺色皮膚模式下部分顏色來(lái)自取色或自定義下發(fā)的 Token 文件，所以在 Dark Mode 模式下需用借用技術(shù)手段Hook 住此類(lèi)顏色，從 Apk 的資源管理器中取得我們預(yù)制好的 Token 即可。

這樣的接入方式，無(wú)需對(duì)整個(gè) App 進(jìn)行頁(yè)面一對(duì)一的適配調(diào)整，對(duì)設(shè)計(jì)師來(lái)說(shuō)要求更加的嚴(yán)格了，需要更加工程化的思維來(lái)設(shè)計(jì)頁(yè)面，但是降低了我們的溝通成本。Design Token 同時(shí)還讓 App 兼具了換膚的功能，對(duì)于做設(shè)計(jì)賦值都是比較好的方式；對(duì)于研發(fā)同學(xué)來(lái)說(shuō)這將大大的降低了接入 Dark Mode 所帶來(lái)的繁重工作量（對(duì)復(fù)雜產(chǎn)品來(lái)說(shuō)，工作量確實(shí)比較繁重），同時(shí)在保證設(shè)計(jì)還原上面也能得到比較顯著的提升。

客戶(hù)端與系統(tǒng)的解耦方式

Dark Mode 目前在iOS13+系統(tǒng)以及少部分安卓手機(jī)才擁有相應(yīng)的系統(tǒng)開(kāi)關(guān)，基于安卓復(fù)雜的生態(tài)系統(tǒng)，我們對(duì)安卓暫時(shí)采取了比較一刀切的設(shè)計(jì)方案，暫時(shí)不跟隨系統(tǒng)；iOS則以13作為比較明確的界限，iOS13 以下用戶(hù)和安卓用戶(hù)在客戶(hù)端內(nèi)操作即可實(shí)現(xiàn)兩種模式的切換（如下圖）。

而在iOS13+系統(tǒng)中，因?yàn)橥瑫r(shí)存在系統(tǒng)開(kāi)關(guān)、端內(nèi)開(kāi)關(guān)兩種模式；而端內(nèi)開(kāi)關(guān)不僅僅只有深色模式，還需保留相應(yīng)的皮膚拓展能力，因此不能一刀切的直接與系統(tǒng)開(kāi)關(guān)做綁定關(guān)系；此時(shí)則需要另外增設(shè)一個(gè)是否跟隨系統(tǒng)的開(kāi)關(guān)。那么當(dāng)三個(gè)開(kāi)關(guān)擺在我們面前，復(fù)雜三角關(guān)系就形成了。基于此 if 的情況比較復(fù)雜，具體處理方式可查看下圖。

當(dāng)用戶(hù)開(kāi)啟不同開(kāi)關(guān)時(shí)，系統(tǒng)會(huì)根據(jù)三個(gè)開(kāi)關(guān)的不同狀態(tài)匹配相應(yīng)的結(jié)果。（如下圖）

經(jīng)過(guò)多個(gè)產(chǎn)品線小伙伴的討論研究，最終推論出此方案可以在客戶(hù)端與系統(tǒng)之間實(shí)現(xiàn)理想的解耦關(guān)系，同時(shí)也為主題皮膚功能預(yù)留了接入入口。

小結(jié)

衍果設(shè)計(jì)提醒，當(dāng)起點(diǎn)需要做 Dark Mode 時(shí)，我們已經(jīng)明白這對(duì)設(shè)計(jì)團(tuán)隊(duì)和研發(fā)團(tuán)隊(duì)都是一場(chǎng)考驗(yàn)，而這其中最難的并非是設(shè)計(jì)方案的制定，方案的推進(jìn)與執(zhí)行才是最大的考驗(yàn)。

項(xiàng)目初期我們通過(guò)對(duì)雙端規(guī)則的研究，結(jié)合起點(diǎn)產(chǎn)品的現(xiàn)狀，制定了這一套 Design Token 解決方案，這套方案對(duì)于成熟的團(tuán)隊(duì)可能作用甚微，但對(duì)于還糾結(jié)于此事的團(tuán)隊(duì)來(lái)說(shuō)，應(yīng)該可以提供一些幫助，對(duì)于文中提到的觀點(diǎn)歡迎留言參與討論。