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