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

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

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

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

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

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

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

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

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

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

基本要素

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

1. 頁面層級

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

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

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

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

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

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

2. 顏色

顏色我們分三個部分來解析，分別是顏色分類、主題分類、映射方案。

顏色分類

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

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

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

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

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

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

主題分類

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

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

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

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

映射方案

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

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

關(guān)于同色不同標(biāo)簽，也同樣擁有很多注意點(diǎn)，比如白色 #FFFFFF 這個顏色，在 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)的素材按照類型分大致可分為五類：單色圖標(biāo)、多色圖標(biāo)、缺省圖、氛圍圖片/動畫文件、書封/UGC圖片。對于不同的素材需要有不同的處理方案。

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

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

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

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

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

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

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

接入方式

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

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

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

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

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

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

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

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

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

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

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

小結(jié)

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

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