04 youtube官網網頁版登錄頁面背景顏色代碼(wordpress怎么更改子頁面的背景圖)

p>核心閱讀路徑

3.2 設計目標與可行性分析

權衡新老用戶習慣和開發效率，我們決定從閱讀路徑向外輻射，逐步完成全局夜間模式的目標。

①降低屏幕亮度

屏幕發出的短波藍光危害健康[2]，過多的藍光刺激使得感光細胞產生光化學擾動，甚至引起其畸變造成視網膜損傷。給白色界面覆蓋一層黃色或黑色蒙版并不會有很大改善，事實上，只要屏幕發光，藍光就一直存在，真正的降低藍光，是將界面整體調整為墨水屏的效果，減少大面積的白色界面，才能降低對眼睛的刺激。

②減少冷色面積

色溫也影響視覺感受，當屏幕色溫低于 3000K[3]時，屏幕會發出暖光，感覺會比較舒適。很多手機系統都有調節色溫的能力，比如 iOS 夜覽，在特定時間段，屏幕顏色將自動調節為較暖的色調。另外，以 f.lux 為代表的第三方護眼軟件也可以靈活調節色溫。

上述改變屏幕色溫的方法，一定程度上提升了視覺的舒適度，但是全局轉黃會導致色彩失真，解決方案不算完美。白天和夜間的產品界面需要區別對待，應該在降低屏幕亮度的基礎上，保留原有的色彩面貌。

3.3 組件映射設計方案

夜間模式是設計側驅動的優化項，我們并不希望給設計和開發團隊帶來額外的工作負擔。起點讀書改版[4]之后，設計師和開發同學一起開發了組件庫[5]，夜間模式可以以組件為基礎，圍繞夜間閱讀的核心路徑，拆分出一套獨立的「夜間模式組件」，再借助于 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

很赞哦!（26）