多年以前，我在一本書中讀到過這么一段對于繪畫和設(shè)計異同的描述：“繪畫是主觀的，設(shè)計是客觀的。繪畫是繪畫者對自身情感的表達(dá)與宣泄，為的是取悅自己。而設(shè)計是設(shè)計師最大限度摒除自我見識所帶來的障礙，為的是取悅大眾。”
雖然這個分類方法還是顯得簡單粗暴了些，但是大體上我深以為然。
下面會講到的是我以前接手過的一個項目——設(shè)計app的“夜間模式”。在這個項目中，為了能夠達(dá)到用戶觀看的最佳舒適度，不斷的調(diào)試試驗，其中也融入了一些方法，算是在感性設(shè)計基礎(chǔ)上，多了一些理性的考量。
下文我會從兩大塊進(jìn)行說明：設(shè)計+實(shí)現(xiàn)
-
我們的app受眾以低齡學(xué)生為主，工作日內(nèi)，低齡學(xué)生用戶需要早起上學(xué)，受此影響，他們習(xí)慣在早上的吃飯或上學(xué)途中、課間或午休，利用碎片化時間閱讀漫畫。
-
他們也習(xí)慣在睡前和熄燈后，把白天沒看完的漫畫讀完，此時是使用較為集中的時間段，因此他們對夜間閱讀功能有一定需求，目前的白天版本在夜晚看來實(shí)在太過閃耀了！
確定設(shè)計目標(biāo)以后，接下來就要先捋一捋可能會面臨的各種問題。界面中，包含了圖片、文字、圖標(biāo)、背景色、分割線等，我們首要確定的是背景色值，因為它決定了夜晚模式的基調(diào)。那么背景色值又與什么相關(guān)聯(lián)呢？我會按照下圖順序一個個的來解答！
先說說亮度，亮度其實(shí)可以被測量，也有相對應(yīng)的單位。（此處有參考qq夜間模式）
我們常用來描述光的物理量有4個：發(fā)光強(qiáng)度/光通量/光照度/亮度；
這最后一項“亮度”正是我們想要的。亮度是指物體明暗的程度，定義是單位面積的發(fā)光強(qiáng)度，它的單位是nit(尼特)；
1nit=1 cd/m²。
上圖是人眼細(xì)胞的一些特性，劃橫線出可以看出，主要負(fù)責(zé)夜晚視覺的桿狀細(xì)胞，作用范圍是0.034cd/m²。
結(jié)論：夜晚，我們最終的屏幕亮度應(yīng)該保證在0.034cd/m²左右是較為合適的。
（題外話：有種東西叫亮度測試儀，可以測量亮度。）
夜晚中，我們對圖片中顏色的判斷會有誤差，如下圖，單看右邊圖中的色彩，很難猜到其真實(shí)的色彩；因為在夜晚，主要是我們?nèi)搜鄣臈U狀細(xì)胞起作用；
官方解釋：桿狀細(xì)胞主要負(fù)責(zé)夜晚及周邊視覺。相較于錐狀細(xì)胞，桿狀細(xì)胞對光更為敏感，較容易看到微弱的亮光，因此在極低的照度下，人眼僅以來桿狀細(xì)胞，稱為暗視覺，其無法分辨顏色，故所有表面看起來僅有灰階明暗的差異；人眼約有一億二仟萬個桿狀細(xì)胞，僅存在於視網(wǎng)膜的周邊，因該處缺乏錐狀細(xì)胞，以致我們對視野的周邊部份有辨色上的困難。桿狀細(xì)胞的損傷則導(dǎo)致夜盲。
通俗一點(diǎn)解釋：人眼在夜間可辨識出的顏色種類較少，所以不用和白天一樣使用繽紛的色彩表現(xiàn)；還有一點(diǎn)需要注意，晚上長時間注視著高飽和度的色彩，會覺得刺眼，舒適度不夠；
結(jié)論：夜晚，應(yīng)使用低彩度的色彩、且盡量減少顏色的種類。
除了低彩度，還有另一個問題也值得注意：不同色相下的暗色系需要保持相對的視覺亮度均衡；
下圖中的暗色系，通過亮度公式，換算成灰色系之后，亮度上還是會稍有差異，在實(shí)際取色中要注意均衡這一點(diǎn)，保證視覺舒適度；（亮度公式：0.299*R + 0.587*G + 0.114*B=y）
在夜間，通常情況下，我們面對屏幕的距離會比白天更近，在長時間近距離的注視下，對眼睛傷害比白天更大。使得我們眼睛造成傷害的就是HEV藍(lán)光，當(dāng)然，藍(lán)光對人眼造成的傷害程度取決于很多原因，包括屏幕的技術(shù)、屏幕大小、屏幕亮度、色溫和用戶臉部的距離和持續(xù)的時間。
下圖中可以看出，各大手機(jī)廠商的護(hù)眼模式，通過降低亮度，藍(lán)光得到有效控制；而藍(lán)黃是一對互補(bǔ)色，如果想從色溫上降低藍(lán)色，黃色自然會增強(qiáng)；
題外話：如果我們將【藍(lán)光下降比-亮度下降比】的值近似看成在亮度條件一樣的情況下藍(lán)光的減少量，那么除了蘋果（超過60%）之外其余7款手機(jī)的藍(lán)光量只下降了25%左右，給蘋果鼓掌。
結(jié)論：在硬件與時間不能更改的情況下，通過前面提到的降低亮度和調(diào)整屏幕色溫也能盡可能降低hev藍(lán)光對眼睛的傷害。
夜晚，背景色應(yīng)該選擇低彩度、色相偏黃、亮度值在0.034-34之間。
根據(jù)以上結(jié)論，選出了夜間模式的背景色#1A1714
背景色確立之后，需要注意的有兩點(diǎn)：
A：背景色/文字/圖片的區(qū)分處理；
如下圖，在夜晚長時間觀看的情況下，左邊一組“圖片/文字/輔助文字”的組合比右邊來的舒適；由此可得出，在夜間，對比度不需要太過明顯，需要柔和一些，視覺舒適度會更高；否則對比會太明顯，文字或過亮或過暗；
B：多機(jī)型驗證；
有了上述的大致思路以后，就是進(jìn)行海量的機(jī)型測試了；經(jīng)過一段時間真實(shí)晚上場景的測試，以及對熱門且夜晚模式舒適度較高的app做了研究，我得出：
-
文字與背景對比度—3:1～5:1
-
圖片色與背景對比度—4:1～6.5:1
下圖是夜間模式的部分設(shè)計稿：
（對比度可通過軟件Colour Contrast Analyser測出）
下面是我挑選了幾個肉眼看上去舒適度高的app，對它們的夜間模式的做了些研究，看看是否符合我以上的研究，結(jié)果如下：基本也與我擬訂的范圍貼合度很高。（y表示的是總亮度）
思考實(shí)現(xiàn)這部分的時候，有很多的疑問。整個app的頁面太多，我要全部做出來，再給開發(fā)標(biāo)注嗎？icon如何處理，我需要重新制作一份夜間模式的icon嗎？夜間模式和換膚其實(shí)很像，可不可以復(fù)用呢？如何做到把設(shè)計和開發(fā)投入產(chǎn)出比最大化呢？？
下面就一一來講解，我將這部分分為三塊來說明：文字+圖片+icon
面對的問題：頁面太多，無法針對每個頁面做視覺稿；
解決方案：找出共性，歸納白天文字色，針對每個色值給出對應(yīng)的夜間色值；根據(jù)前面的分析，夜間模式的對比度是不需要做明顯區(qū)分的，所以我把以下5種文字色，縮減成2種帶透明度的白色：45%、30%。輔助文字色的選取注意上面說的視覺平衡，可以用亮度公式來判斷；
方案延展：我為什么選用了帶透明度的白色呢？因為夜間模式其實(shí)也是一種換膚，那這個方案是否可以為以后的換膚做準(zhǔn)備呢？最后我把分割線與文字色由純色變成帶透明度的色值，這么做能適配任意色值背景（除淺色背景下），為后續(xù)換膚打基礎(chǔ)（全局背景&彈框背景除外）
按照以上的規(guī)律，把白天的文字色做減法，歸納為以下的表格；只要把這個表格給到開發(fā)，讓他們按照表格去實(shí)施，就能夠完美的實(shí)現(xiàn)夜間模式的文字替換了；
圖片變暗的方式有兩種：各有優(yōu)缺點(diǎn)，但可以解決大部分的圖片變暗問題；
方法一：圖片處于頂層，背景設(shè)置為黑色，改變圖片透明度，達(dá)到圖片視覺變暗的效果；
存在的問題：圖片變透明以后，可能會露出底層的某些隱藏控件
結(jié)論：可以小面積使用
方法二：圖片處于底層，上面覆蓋一層黑色透明層，達(dá)到圖片視覺變暗的效果；
存在的問題：開發(fā)的實(shí)現(xiàn)方法在這里就不細(xì)說了，但這兩種實(shí)現(xiàn)方法會稍有內(nèi)存開銷，且對gif圖不適用
結(jié)論：目前來說比較合適的方案，可以使用
Icon的表現(xiàn)形式比較的多樣化，但還是有規(guī)律可循，我把icon分為三種：單色、非單色、特殊位置
1、單色icon
問題：這么多icon？難道我要重新畫一遍，切圖給開發(fā)嗎？
答案：肯定不用！我先統(tǒng)一收攏了icon的顏色種類，只留下品牌色、正常裝飾色、不可點(diǎn)擊色，分別對這三種給出相應(yīng)的色值，再配合一段代碼即可；這樣為以后的換膚做準(zhǔn)備，不同的皮膚顏色，只需要瀟灑的給開發(fā)一個顏色值即可得到以下的效果；
2、非單色icon
非單色的icon是指包含兩種及兩種以上的顏色值的icon，此類icon可以參考圖片的實(shí)現(xiàn)方式即可；
3、特殊位置的icon
有些部分的icon是不能用代碼實(shí)現(xiàn)變暗的，比如下圖中的頭像旁邊的“VIP身份標(biāo)識”，這些icon就只能設(shè)計重新設(shè)計夜間模式的樣子，切圖給開發(fā)；
我們來回顧一下上面說的夜間模式整體過程是什么？
寫在最后的話語：
希望每一個設(shè)計的背后，都有可以支持的理論依據(jù)，不純是主觀臆想，我們也正在這條道路上慢慢摸索，以上有不正確的地方，歡迎指正。需要icon用代碼實(shí)現(xiàn)變色的可以留郵箱，我們會單獨(dú)分享；
