關(guān)于深色模式,你需要知道這三點(diǎn)
隨著大眾使用手機(jī)的時(shí)間越來(lái)越長(zhǎng),很多APP考慮到用戶的用眼問(wèn)題,推出了深色模式。本文作者從三個(gè)角度分析深色模式,推薦給對(duì)深色模式感興趣的童鞋閱讀。
隨著iOS 13和Andorid 10都增加了「深色模式」,深色模式在2019年下半年突然爆發(fā),大家廠子的APP都紛紛推出深色模式版本,互聯(lián)網(wǎng)金融和各大銀行的APP也逐步推出深色模式,那么深色模式是未來(lái)趨勢(shì)嗎?今天我們來(lái)簡(jiǎn)單聊聊。
一、什么是深色模式
「深色模式」采用了最優(yōu)的文字前景與深色背景對(duì)比度,對(duì)文字和系統(tǒng)圖標(biāo)的顏色做了優(yōu)化處理,確保人眼觀看感受的一致性、舒適性和閱讀的易讀性。
「深色模式」采用文字前景與深色背景的對(duì)比度。同樣的色彩,在淺色背景和深色背景上人眼視覺(jué)感知的亮度與飽和度是不同的。從淺色模式變?yōu)樯钌J?,同時(shí)對(duì)文字與系統(tǒng)圖標(biāo)的顏色做了優(yōu)化處理,來(lái)保證深色模式和普通模式視覺(jué)感受的一致性、舒適性和閱讀的易讀性。
隨著移動(dòng)互聯(lián)網(wǎng)快速發(fā)展,人們對(duì)手機(jī)的依賴性越來(lái)越高。有研究表明,大多數(shù)人每天使用手機(jī)的時(shí)間都在6-8個(gè)小時(shí)以上。而且人們都晚上使用手機(jī)的時(shí)間也更多,再加上短視頻的出現(xiàn),我尋思大家每天晚上下班回家躺在被窩都在玩手機(jī)了。
那么推出深色模式也就顯得越來(lái)越重要,畢竟誰(shuí)都不愿意白色屏幕一直刺激自己的眼睛。而且深色模式對(duì)手機(jī)來(lái)說(shuō)節(jié)能省電,這樣深色模式的優(yōu)勢(shì)就凸顯出來(lái)了,也就順應(yīng)而來(lái)了。
二、深色模式的設(shè)計(jì)適配注意點(diǎn)
結(jié)合iOS 13和Andorid 10的深色模式適配規(guī)范,我總結(jié)了三點(diǎn)在適配的時(shí)候特殊的三條注意點(diǎn),給大家參考。
1. 深色模式背景的設(shè)計(jì)層級(jí)性
在淺色模式下,我們可以利用背景的投影等來(lái)區(qū)分頁(yè)面的主次層級(jí),而且特別自然。但是深色模式下,我們沒(méi)辦法利用投影來(lái)區(qū)分,效果也很不明顯。
深色模式下我們利用黑色的不同灰度來(lái)區(qū)分,達(dá)到頁(yè)面深淺的層級(jí)性,來(lái)保證用戶在頁(yè)面停留時(shí)仍然能快速、準(zhǔn)確完成自己的目標(biāo)。
在實(shí)際使用場(chǎng)景中,我們充分利用這三級(jí)灰的原則,讓頁(yè)面更有層次感、空間感,能夠讓用戶快速的可以獲取到重要的信息。
2. 圖標(biāo)、文字的合理搭配
圖標(biāo)的話我們絕不可以使用純色、高飽和度的顏色,因?yàn)樵谏钌J较掳瞪谋尘皩樱苋菀捉o用戶造成視覺(jué)疲勞,帶來(lái)不好的體驗(yàn)。
在圖標(biāo)等顏色上的使用,我們要適當(dāng)?shù)亟档推滹柡投群兔鞫?,?lái)把彩色在深色背景層上達(dá)到最佳的效果。
文字這里我們鑒于在淺色模式下是白底黑字的觀感體驗(yàn),在深色模式下我們絕對(duì)不可以直接采用純白色文字,這會(huì)給用戶造成很大的視覺(jué)刺激,造成眼睛疲勞。深色模式下,我們文字為了達(dá)到觀感和層次性,會(huì)采用灰色的文字。而且對(duì)文字我們采用不同程度的灰色,來(lái)對(duì)文字進(jìn)行層次關(guān)系區(qū)分,讓用戶更能容易區(qū)分開,快速抓到重點(diǎn)的信息。
而且對(duì)于一些特殊的閱讀型的產(chǎn)品,用戶需要長(zhǎng)時(shí)間閱讀和瀏覽文字、信息等內(nèi)容。這里我們要把文字的顏色搭配和背景整體協(xié)調(diào)、融合,整個(gè)頁(yè)面不會(huì)刺激用戶的眼睛,文字等內(nèi)容整體融入到背景中。
最好是創(chuàng)建一個(gè)深色模式下的顏色搭配調(diào)色板,這樣可以在深色模式下達(dá)到最佳的視覺(jué)體驗(yàn)效果。
3. 對(duì)重要的圖片進(jìn)行特殊處理
對(duì)于一些電商APP,不可避免會(huì)有大量廣告圖片元素,而且其他方面的APP也會(huì)有些廣告圖或者產(chǎn)品圖出現(xiàn)。在目前主流圖片規(guī)范引導(dǎo)的是干凈的淺色底為主,如果有大量的圖片展示,圖片區(qū)域就會(huì)比較突兀。
在這種情況下,我個(gè)人的想法是我們?cè)O(shè)計(jì)師還是以淺色模式為主,但是對(duì)于一些比較重要的圖片我們可以適當(dāng)對(duì)顏色進(jìn)行特殊處理來(lái)適配深色模式,或者有的大廠好像已經(jīng)可以用程序來(lái)處理圖片能讓主體突出,主體以外的區(qū)域透明化,這里不得不說(shuō)牛掰!
達(dá)到最佳的效果,給用戶帶來(lái)好的視覺(jué)體驗(yàn)感受。
三、深色模式的發(fā)展趨勢(shì)
那么「深色模式」是未來(lái)的趨勢(shì)嗎?
個(gè)人看法是未來(lái)肯定各家的產(chǎn)品都必須得推出深色模式,在實(shí)際的使用場(chǎng)景中,結(jié)合主要淺色模式的使用,讓用戶根據(jù)實(shí)際需求自由可以切換不同的顯示模式,兩者相得益彰。
而且有少部分獨(dú)愛(ài)深色模式的用戶,我個(gè)人就是,我是直接設(shè)置成深色模式了,深色模式帶來(lái)的沉浸式體驗(yàn)是相當(dāng)不錯(cuò)的。
深色模式未來(lái)是否能掀起一股大浪,還得讓用戶來(lái)驗(yàn)證。
還有,這里不得不說(shuō)深色模式的出現(xiàn),對(duì)設(shè)計(jì)師來(lái)說(shuō)又是一個(gè)小的考驗(yàn),適配的時(shí)候最好能給用戶達(dá)到最佳的體驗(yàn)。
設(shè)計(jì)師:我太難了!但是無(wú)論是深色模式還是淺色模式,最終目的還是給用戶帶來(lái)極佳的用戶體驗(yàn)感受,這樣才能讓我們的產(chǎn)品更加好用,用戶才會(huì)喜歡我們的產(chǎn)品。
作者:阿宇同學(xué);互聯(lián)網(wǎng)金融的用戶體驗(yàn)設(shè)計(jì)師,喜歡分享設(shè)計(jì),探討金融互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn),公眾號(hào):阿宇同學(xué)LY
本文由 @阿宇同學(xué)LY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!