中國睡眠研究會發布的《2017 年中國青年睡眠現狀報告》顯示，大約 90% 的人在睡前離不開電子產品。不知道大家有沒有感覺到普通的亮色介面會讓我們在夜間使用的時侯感到刺眼，長時間使用會感覺眼睛疼痛，對眼睛的傷害也非常大。（當然睡前不玩手機是最好的解決方法）
夜間模式 ui 與深色風格 ui 的區別
而夜間模式更加針對夜間無照明的情景下設計，更加全面考慮使用者在夜間無照明情景下的體驗。並且都是由白天 (亮色) 模式切換成夜間模式，兼顧兩種模式設計。
當然這裡一般會考慮到成本問題，不少產品直接用深色 ui 當夜間模式。不過作為設計師，必須理解二者的不同。
下面我們來了解一下應該如何設計乙個夜間模式：
夜間模式的設計主要通過色彩的調性，整體色彩的亮度，整體色彩的對比度，色彩的通用性等不同維度來設計。
1、明確色彩調性
首先，從調性圖上來看，低短調（色調深暗，對比微弱），在黑暗的環境中看起來沒那麼刺眼，比較適合作為夜間模式的使用。
2、選擇亮度低的顏色
尼特值 (nit) ，它是用於量化亮度強度的專業術語，意思每平方公尺燭光的強度：1nit=1 坎德拉／平方公尺；其實可以將尼特值簡單理解為亮度值。
白天，人的眼睛能適應亮度的值高於 3.4 尼特；夜晚，主體顏色接近 0.034 尼特，最亮元素低於 3.4 尼特的亮度眼睛會比較舒適。
將尼特值換算成 hsb 顏色模式。也就是說主色調顏色（一般指背景色或最暗的顏色）的亮度不超過 20（0
3、選擇低純度的顏色
使用柔和，低純度的色彩可以使介面看起來更舒服，增加使用者的使用時長。
而且低純度的色系對於色弱以及色盲人群來說，和普通人群的辨色差異不大，更適合大眾。
4、選擇對比度微弱的顏色
以下圖為例：
白天模式
無純度夜間模式
兩個模式的亮度對比：
亮色版本的亮度是（100，90，80，60，10），顏色的對比跳躍比較大，對比強，明亮。
夜間模式的亮度是（10，15，30，40，50），最接近的顏色對比度不小於 5 ，保證顏色的差異辨識度。 顏色的對比跳躍比較小，對比微弱。
內容顏色與背景顏色的比對是 10：50 與 10：30 。
5、彩色明度降低為 b:50 左右，元素新增 50% 黑色遮罩。
6、改變色相，使品牌色更凸顯
同樣以這張圖為例，將整體的顏色的純度上加了 20 藍色——色相: 216，整體會感覺加了乙個藍色的濾鏡，視覺上看上去就不是無色相的黑白灰顏色。
以上只是舉了示例，具體的情況再具體分析。這些原則是為了幫助設計師更明確的做設計，並非限制設計師發揮的條條框框。
原文：
通過css改變svg img的顏色
需求如下圖，hover的時候改變圖示顏色，圖示為引入的svg img 但是為了更小的開銷，一般css為更好的解決方案，svg的顏色是在標籤內通過fill屬性寫死的，所以用到了使用了css3濾鏡filter中的drop shadow。如下 section img hover drop shadow h...
STM32顯示通過取模軟體取模的漢字
一 取模軟體設定，參考下圖 二 軟體參考，正點原子開發板 放標頭檔案 struct typfnt gb16 漢字字模資料結構體 放c檔案 定義漢字點陣結構體,資料由正點原子贈送的取模軟體獲得 struct typfnt gb16 code gb 16 資料表,void show chinese u1...
如何辨別顏色名稱
顏色一共有1600多萬種，人類能夠分辨的顏色大概有7000多種，但是精確地分辨出每乙個顏色，挑戰依然很大，目前市面上的顏色方案都分的很細，對於實際的應用場景來說其實用處不大。因為人們並不關心這個顏色的專業名稱是什麼，只關心它們屬於哪個色系，叫什麼。目前還沒有找到關於顏色識別很好的方案，這裡開源一下自...