設(shè)計(jì)app的“夜間模式”

2018-09-19 1722 0

 


 

多年以前,我在一本書中讀到過(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)

  1. 我們的app受眾以低齡學(xué)生為主,工作日內(nèi),低齡學(xué)生用戶需要早起上學(xué),受此影響,他們習(xí)慣在早上的吃飯或上學(xué)途中、課間或午休,利用碎片化時(shí)間閱讀漫畫。


     

  2. 他們也習(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ú)分享;


30
評(píng)論區(qū)(0)
正在加載評(píng)論...