蘋(píng)果在2019年6月發(fā)布的iOS13中增加了“黑暗模式”，用戶(hù)打開(kāi)“黑暗模式”后，應(yīng)用界面將會(huì)變?yōu)樯钌S后Google Android 10的發(fā)布同樣搭載“黑暗模式”。為了適配系統(tǒng)，不少APP紛紛推出了深色模式。

使用OLED屏幕的設(shè)備，在純黑色下可以有效降低耗能，進(jìn)一步延長(zhǎng)續(xù)航時(shí)間。除此之外，深色模式還可以有效解決OLED屏燒屏、費(fèi)眼的問(wèn)題。小摹對(duì)幾款常用APP的深色模式進(jìn)行了體驗(yàn)，并為大家分享我的體驗(yàn)感受。從這些案例中，或許我們可以找到深色模式流行的原因。

微 信

深色模式是一種可以降低視覺(jué)疲勞且有助于用戶(hù)專(zhuān)注的全新外觀。與傳統(tǒng)夜間模式最大的區(qū)別是，深色模式不僅保證了弱光環(huán)境下的體驗(yàn)，在強(qiáng)光下仍具有可讀性。

雖然深色模式也被叫做暗黑模式，但并不代表要將底色變?yōu)榧兒凇Ｈ绻褂?00%的純黑底色，長(zhǎng)時(shí)間閱讀時(shí)，反而會(huì)造成眼睛疲勞。微信的深色模式里，聊天背景及主頁(yè)面底色采用的就不是純黑，而是深灰色。

此外，純黑和純白的高對(duì)比度也會(huì)造成視覺(jué)疲勞，因此微信的深色模式中，使用了淺灰色作為字體顏色，既能保持清晰顯示，又降低了對(duì)比度，減輕了用戶(hù)的閱讀負(fù)擔(dān)。如果設(shè)置了聊天背景，聊天背景圖片也會(huì)自動(dòng)調(diào)暗，便于閱讀。

雖然整體色彩加深，但微信在設(shè)計(jì)時(shí)仍保持著清晰的層次。比如置頂聊天窗口的灰色會(huì)比其他窗口稍淺，聊天消息的標(biāo)題和摘要也采用了明度不同的淺灰色來(lái)區(qū)分層級(jí)。除此之外，微信的彩色線型圖標(biāo)在黑色背景上也變得更具科技感，顏值提升了不少。

微信的深色模式除了可以幫助用戶(hù)緩解夜間視力疲勞外，在白天使用也幾乎沒(méi)有障礙，總體來(lái)說(shuō)，體驗(yàn)感覺(jué)較好。

Q Q

如果說(shuō)微信的深色模式更加注重顏值，那么騰訊旗下的另一款社交工具QQ則更加注重用戶(hù)的深夜閱讀體驗(yàn)。

首先，微信在切換深色模式時(shí)，需要重啟軟件后才能生效。QQ在切換夜間模式時(shí)，則采用了一個(gè)平滑的漸變過(guò)渡，讓用戶(hù)可以快速適應(yīng)場(chǎng)景切換。其次，為了減少夜間光線對(duì)人眼的刺激，QQ降低了信息與背景的對(duì)比度，對(duì)用戶(hù)頭像等圖片增加了遮罩，使其在弱光環(huán)境中看起來(lái)更加柔和。

當(dāng)用戶(hù)開(kāi)啟夜間模式時(shí)，還會(huì)有一個(gè)設(shè)計(jì)彩蛋：部分圖標(biāo)會(huì)根據(jù)模式切換而改變。如消息圖標(biāo)會(huì)從笑臉切換為休息的狀態(tài)，這種具有趣味性的設(shè)計(jì)，也會(huì)拉近用戶(hù)與產(chǎn)品之間的距離。

豆 瓣

普通模式下的豆瓣APP背景色為純白色，白天看偶爾都覺(jué)得有些刺眼，更不用說(shuō)睡前必刷豆瓣的用戶(hù)有多煎熬。在被用戶(hù)罵了一輪又一輪之后，豆瓣APP終于也推出了夜間模式。

豆瓣的夜間模式和微信一樣，同樣保留了五顏六色的圖標(biāo)。同時(shí)，豆瓣在設(shè)計(jì)時(shí)始終保證內(nèi)容有良好的對(duì)比度和清晰的視覺(jué)層級(jí)，保證了信息結(jié)構(gòu)的準(zhǔn)確傳達(dá)。

在配色方面，為了避免“死黑”讓整個(gè)界面太過(guò)死板，豆瓣在黑色中還混入了藍(lán)紫色，讓背景色看上去更加通透。底部導(dǎo)航等主要按鈕則使用了豆瓣的主色調(diào)綠色，在夜間模式下既能清晰展示，又不會(huì)顯得過(guò)于刺眼，同時(shí)也保證了在強(qiáng)光模式下可以正常瀏覽。

知 乎

另一款社區(qū)APP知乎和豆瓣存在同樣的問(wèn)題。知乎在設(shè)計(jì)夜間模式時(shí)，知乎采用了主色調(diào)藍(lán)色+深灰色的搭配，深藍(lán)和灰色作為背景，展示出的效果既有強(qiáng)烈的對(duì)比，又?jǐn)[脫了深色的壓抑感。

與豆瓣不同，知乎的文本顏色選擇了對(duì)比度更低的灰色，通過(guò)字重進(jìn)行區(qū)分。雖然這樣會(huì)讓整體頁(yè)面看起來(lái)比較和諧，但內(nèi)容變得不夠突出，無(wú)法在最短時(shí)間看清標(biāo)題，對(duì)于一個(gè)以?xún)?nèi)容為主的社區(qū)來(lái)說(shuō)，無(wú)疑會(huì)給用戶(hù)帶來(lái)不太好的體驗(yàn)。

知乎在設(shè)計(jì)夜間模式時(shí)目標(biāo)應(yīng)該很明確，即只考慮用戶(hù)在夜間的使用，因此整體色調(diào)都很暗，在強(qiáng)光環(huán)境下無(wú)法正常瀏覽。

bilibili動(dòng)畫(huà)

B站剛推出深色模式時(shí)收到了許多批評(píng)，字體和背景色對(duì)比不強(qiáng)，視頻封面仿佛蒙了一層霧，一刀切的暗化處理，導(dǎo)致用戶(hù)瀏覽體驗(yàn)極差。

在最近一次更新中，B站終于對(duì)深色模式進(jìn)行了優(yōu)化，適度提亮了視頻封面和圖標(biāo)的亮度，將多彩型圖標(biāo)調(diào)整為了單線型圖標(biāo)，既統(tǒng)一了畫(huà)面風(fēng)格，又提升了界面閱讀體驗(yàn)。

設(shè)計(jì)深色模式時(shí)，必須注意各頁(yè)面的配色及對(duì)比度都要盡可能地統(tǒng)一。在深色模式下點(diǎn)開(kāi)B站創(chuàng)作中心或推薦服務(wù)中的版塊時(shí)，加載畫(huà)面仍然是白色，突然出現(xiàn)的強(qiáng)光無(wú)疑會(huì)對(duì)眼睛造成刺激，對(duì)于用戶(hù)來(lái)說(shuō)體驗(yàn)感也極差。

百度網(wǎng)盤(pán)

高飽和度的色彩會(huì)在深色背景上產(chǎn)生炫光的視覺(jué)效果，引發(fā)視覺(jué)疲勞。百度網(wǎng)盤(pán)的深色模式下，背景接近全黑，圖標(biāo)卻沒(méi)有太大的調(diào)整，給用戶(hù)帶來(lái)的閱讀體驗(yàn)并不好。

同樣，由于背景顏色太深，導(dǎo)致百度網(wǎng)盤(pán)的文本和背景對(duì)比度太大，也存在難以閱讀的情況，對(duì)于誦讀困難癥患者來(lái)說(shuō)，在閱讀時(shí)會(huì)感覺(jué)文字在旋轉(zhuǎn)、模糊。

在設(shè)計(jì)深色模式時(shí)，除了背景顏色盡量使用深灰色以外，還需要確保絕大部分區(qū)域保持深色，盡可能使用數(shù)量有限的色彩。把握好對(duì)比度和飽和度，才能設(shè)計(jì)出舒適的深色模式。

綜上所述，合理使用深色模式，可以降低屏幕亮度，不僅可以減少耗電量，還能減小對(duì)自己或他人眼睛的刺激。除此之外，深色模式對(duì)背景色、文字以及系統(tǒng)圖標(biāo)的顏色都進(jìn)行了優(yōu)化處理，可以提升閱讀舒適度。對(duì)于喜歡深色或黑色系的朋友來(lái)說(shuō)，深色模式更是一種不同于普通模式的全新體驗(yàn)。

除了APP，不少生產(chǎn)力工具也都采用了深色界面，比如PS、摹客等。以摹客為例，用戶(hù)在進(jìn)行設(shè)計(jì)時(shí)，深色界面不僅僅能降低眼睛疲勞度，還能突出你的設(shè)計(jì)內(nèi)容，打造沉浸式的設(shè)計(jì)體驗(yàn)。

隨著蘋(píng)果“黑色模式”的推出，深色模式逐漸成為APP設(shè)計(jì)的流行趨勢(shì)。作為設(shè)計(jì)師，也一定要掌握APP深色模式的設(shè)計(jì)技巧。從上述APP設(shè)計(jì)案例中，我為大家總結(jié)了以下幾點(diǎn)建議以作參考：

1.避免使用純黑色；

2.避免使用高飽和度的顏色；

3.文本顏色選用高亮色，但不宜使用純白；

4.做好情感化設(shè)計(jì)；

5.注意結(jié)構(gòu)和層次感；

6.允許用戶(hù)自由切換深色模式和普通模式。

文章來(lái)源：UI中國(guó)  作者：摹客產(chǎn)品協(xié)作設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)