夜間模式可以以組件為基礎，圍繞夜間閱讀的核心路徑，拆分出一套獨立的「夜間模式組件」，再借助于 Libraries，快速調整新界面。開發同學可以組件為宗，梳理特定路徑下的組件樣式，按照色彩映射調整并調用，最終完成夜間模式的開發。

四、如何設計夜間模式映射4.1 白色 UI 不能直接反色

起點的主色和輔助色均在藍色區間，直接使用在深色背景上，整體頁面偏冷，顏色顯得較為尖銳。使用 Contrast Ratio[6]發現，主色與深色背景的對比度僅為 1.98，不符合 WCAG 標準。既然白色 UI 不能直接反色用到深色主題上，那么應該如何定義夜間模式色板呢？我們研究了 iOS Design 和 Material Design 的深色主題設計，發現在深色主題下的色彩有一定的梯度規律。

Apple 和 Google 開發的系統應用

4.2 建立夜間模式下的色彩映射關系

夜間模式色彩庫需要遵循一定的規則，且應該與白色UI的基礎色形成映射。仔細觀察 Sketch 顏色面板，不難發現這其實是一個被展開的 Hex買粉絲ne Model[7]色彩模型，橫軸是飽和度，縱軸是明度，色彩平面的中的任何一個顏色，向左橫向滑動色圈至縱軸，均為該色去彩度之后的明度，可以通過此種方法將白色UI的基礎顏色轉換為灰色。

Sketch 顏色拾取器分析

以文字為例，將白色UI的主色和輔助色轉換為夜間模式下主色和輔助色。

基礎色彩映射

同理，可提取一組背景色。

夜間模式映射規范和顏色庫

使用對比度測試工具檢測出當前對比度已經提升至 9.42，處于合理區間，符合 WCAG 標準。對于界面上一些特定的彩色，他們是信息層級的一部分，去除彩度后會削弱視覺表現。

段評兩種設計方案比較

以段評信息模塊的夜間模式為例，方案一完全去彩色，削弱了需要強調的內容，如帖子榮譽標簽和操作反饋。對比方案一，方案二頁面整體處于一個亮度，紅色降低飽和度之后，依然保留了原有的榮譽標簽，點贊反饋也比較明確。

4.3 圖標

起點讀書采用的是多為 SVG / PDF 格式的切圖。單色圖標是使用最多的樣式，黑色的單色圖標按照色彩映射規范可以直接轉為灰色。多色圖標需要分類處理，全彩色圖標將其視為一個整體，降低其透明度；對于黑色搭配彩色的圖標，需要將圖形拆解后，各元素分別做夜間模式色彩映射。

單色與多色圖標的映射

起點全局圖標切換為 SVG / PDF 之后，定位和調整都變得簡單，不但批量修改方便，也減少了安裝包體積，后期維護只需同步變量即可，非常高效。

需要注意的是，圖標轉為 SVG / PDF 之后，提高了對設計師繪制圖形的要求。設計師的源文件應保持整潔，復雜圖形執行完布爾運算之后應該仔細檢查是否破損，圖形交插點和填充方式是否準確，否則會導致編譯出錯。

4.4 按鈕和其他

夜間模式下按鈕需要繼承白色UI的默認態、點擊態、選中態和禁用態。以網文訂閱半彈層為例，按照夜間模式色彩映射規范，拆解白色UI組件的文字、背景、選中框、漸變等元素，一一映射到深色背景上。

訂閱彈層頁面和部分組件

對于頁面中的其他元素，如書封、廣告位、用戶的頭像和上傳的社區向內容等UI之外的圖片，整體增加50%蒙版，以保持和其他深色UI同等亮度。

五、結語

任何一處的設計提升都不是憑空想象。夜間使用體驗不佳最早由我們的交互設計師 @劍劍 提出的，閱讀頁發表或回復段評都不得不喚起一個白色界面，由黑到白，強烈的亮度反差非常刺眼。這個問題在新段評第二個版本得到解決，在之后的幾個版本中，我們把夜間模式做的更成體系。

夜間模式的設計只是起點不斷更新和完善過程中的一件小事，我們會繼續努力。如果你對本文有任何疑問或建議，歡迎留言與筆者討論，如果你在使用起點時有任何問題或不便，可以在起點賬戶頁左上角「設置 —— 吐個槽」告訴我們。

最后，感謝精誠協作的小伙伴，設計師 亞寧、燕雯、雪松、劍劍；客戶端開發周林、石健。

相關閱讀

01打造更年輕的閱讀體驗 —— 紅袖讀書設計改版

02 Blue light excited retinal intercepts cellular signaling. Scientific Report , 2018

03 Color temperature , Wiki

04起點改版相關介紹：從心開始，起點改版項目小結

05如何使用 Sketch Libraries 管理組件：視覺工作流程優化

06Web Content Accessibility Guidelines (WCAG) 2.1

07 Hue, Saturation, and Value Color Model , HyperGraph , 1999

           站酷

作者：閱文體驗設計YUX