如何經過 HSB 顏色模式構建夜間模式

中國睡眠研究會發布的《2017 年中國青年睡眠現狀報告》顯示，大約 90% 的人在睡前離不開電子產品。

不知道你們有沒有感受到普通的亮色界面會讓咱們在夜間使用的時侯感到刺眼，長時間使用會感受眼睛疼痛，對眼睛的傷害也很是大。（固然睡前不玩手機是最好的解決方法）

因此對於閱讀性或者社交娛樂等等 APP，打造夜間模式的功能會讓咱們獲得更好的體驗，減小對眼睛的傷害。

夜間模式 UI 與深色風格 UI 的區別

咱們平時使用的很多音樂或視頻類產品都採用了深色風格 UI 的設計，深色風格 UI 容易承託娛樂類產品的品牌特性以及氛圍感。但深色 UI 並無針對夜間情景下專門去考慮，在白天與夜間情景下均可以使用。

而夜間模式更加針對夜間無照明的情景下設計，更加全面考慮用戶在夜間無照明情景下的體驗。而且都是由白天 (亮色) 模式切換成夜間模式，兼顧兩種模式設計。

固然這裏通常會考慮到成本問題，很多產品直接用深色 UI 當夜間模式。不過做爲設計師，必須理解兩者的不一樣。

下面咱們來了解一下應該如何設計一個夜間模式：

設計夜間模式的流程

夜間模式的設計主要經過色彩的調性，總體色彩的亮度，總體色彩的對比度，色彩的通用性等不一樣維度來設計。

一、明確色彩調性

首先，從調性圖上來看，低短調（色調深暗，對比微弱），在黑暗的環境中看起來沒那麼刺眼，比較適合做爲夜間模式的使用。

二、選擇亮度低的顏色

尼特值 (nit) ，它是用於量化亮度強度的專業術語，意思每平方米燭光的強度：1nit=1 坎德拉／平方米；

其實能夠將尼特值簡單理解爲亮度值。
白天，人的眼睛能適應亮度的值高於 3.4 尼特；夜晚，主體顏色接近 0.034 尼特，最亮元素低於 3.4 尼特的亮度眼睛會比較溫馨。

將尼特值換算成 HSB 顏色模式。也就是說主色調顏色（通常指背景色或最暗的顏色）的亮度不超過 20（0<B<20），避免使用極端顏色（純黑），最亮的顏色亮度儘可能不超過 50。

三、選擇低純度的顏色

使用柔和，低純度的色彩可使界面看起來更舒服，增長用戶的使用時長。

並且低純度的色系對於色弱以及色盲人羣來講，和普通人羣的辨色差別不大，更適合大衆。

四、選擇對比度微弱的顏色

如下圖爲例：

白天模式

無純度夜間模式

兩個模式的亮度對比：

亮色版本的亮度是（100，90，80，60，10），顏色的對比跳躍比較大，對比強，明亮。

夜間模式的亮度是（10，15，30，40，50），最接近的顏色對比度不小於 5 ，保證顏色的差別辨識度。 顏色的對比跳躍比較小，對比微弱。

內容顏色與背景顏色的比對是 10：50 與 10：30 。

五、彩色明度下降爲 B:50 左右，元素添加 50% 黑色遮罩。

六、改變色相，使品牌色更凸顯

一樣以這張圖爲例，將總體的顏色的純度上加了 20 藍色——色相: 216，總體會感受加了一個藍色的濾鏡，視覺上看上去就不是無色相的黑白灰顏色。

小結

以上只是舉了示例，具體的狀況再具體分析。這些原則是爲了幫助設計師更明確的作設計，並不是限制設計師發揮的條條框框。