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