隨着iOS 13和Andorid 10都增加了「深色模式」,深色模式在2019年下半年突然爆發,大家廠子的APP都紛紛推出深色模式版本,互聯網金融和各大銀行的APP也逐步推出深色模式,那麼深色模式是未來趨勢嗎?今天我們來簡單聊聊。
一、什麼是深色模式
「深色模式」採用了最優的文字前景與深色背景對比度,對文字和系統圖標的顏色做了優化處理,確保人眼觀看感受的一致性、舒適性和閲讀的易讀性。
「深色模式」採用文字前景與深色背景的對比度。同樣的色彩,在淺色背景和深色背景上人眼視覺感知的亮度與飽和度是不同的。從淺色模式變為深色模式,同時對文字與系統圖標的顏色做了優化處理,來保證深色模式和普通模式視覺感受的一致性、舒適性和閲讀的易讀性。
隨着移動互聯網快速發展,人們對手機的依賴性越來越高。有研究表明,大多數人每天使用手機的時間都在6-8個小時以上。而且人們都晚上使用手機的時間也更多,再加上短視頻的出現,我尋思大家每天晚上下班回家躺在被窩都在玩手機了。
那麼推出深色模式也就顯得越來越重要,畢竟誰都不願意白色屏幕一直刺激自己的眼睛。而且深色模式對手機來説節能省電,這樣深色模式的優勢就凸顯出來了,也就順應而來了。
二、深色模式的設計適配注意點
結合iOS 13和Andorid 10的深色模式適配規範,我總結了三點在適配的時候特殊的三條注意點,給大家參考。
1. 深色模式背景的設計層級性
在淺色模式下,我們可以利用背景的投影等來區分頁面的主次層級,而且特別自然。但是深色模式下,我們沒辦法利用投影來區分,效果也很不明顯。
深色模式下我們利用黑色的不同灰度來區分,達到頁面深淺的層級性,來保證用户在頁面停留時仍然能快速、準確完成自己的目標。
在實際使用場景中,我們充分利用這三級灰的原則,讓頁面更有層次感、空間感,能夠讓用户快速的可以獲取到重要的信息。
2. 圖標、文字的合理搭配
圖標的話我們絕不可以使用純色、高飽和度的顏色,因為在深色模式下暗色的背景層,很容易給用户造成視覺疲勞,帶來不好的體驗。
在圖標等顏色上的使用,我們要適當地降低其飽和度和明度,來把彩色在深色背景層上達到最佳的效果。
文字這裏我們鑑於在淺色模式下是白底黑字的觀感體驗,在深色模式下我們絕對不可以直接採用純白色文字,這會給用户造成很大的視覺刺激,造成眼睛疲勞。深色模式下,我們文字為了達到觀感和層次性,會採用灰色的文字。而且對文字我們採用不同程度的灰色,來對文字進行層次關係區分,讓用户更能容易區分開,快速抓到重點的信息。
而且對於一些特殊的閲讀型的產品,用户需要長時間閲讀和瀏覽文字、信息等內容。這裏我們要把文字的顏色搭配和背景整體協調、融合,整個頁面不會刺激用户的眼睛,文字等內容整體融入到背景中。
最好是創建一個深色模式下的顏色搭配調色板,這樣可以在深色模式下達到最佳的視覺體驗效果。
3. 對重要的圖片進行特殊處理
對於一些電商APP,不可避免會有大量廣告圖片元素,而且其他方面的APP也會有些廣告圖或者產品圖出現。在目前主流圖片規範引導的是乾淨的淺色底為主,如果有大量的圖片展示,圖片區域就會比較突兀。
在這種情況下,我個人的想法是我們設計師還是以淺色模式為主,但是對於一些比較重要的圖片我們可以適當對顏色進行特殊處理來適配深色模式,或者有的大廠好像已經可以用程序來處理圖片能讓主體突出,主體以外的區域透明化,這裏不得不説牛掰!
達到最佳的效果,給用户帶來好的視覺體驗感受。
三、深色模式的發展趨勢
那麼「深色模式」是未來的趨勢嗎?
個人看法是未來肯定各家的產品都必須得推出深色模式,在實際的使用場景中,結合主要淺色模式的使用,讓用户根據實際需求自由可以切換不同的顯示模式,兩者相得益彰。
而且有少部分獨愛深色模式的用户,我個人就是,我是直接設置成深色模式了,深色模式帶來的沉浸式體驗是相當不錯的。
深色模式未來是否能掀起一股大浪,還得讓用户來驗證。
還有,這裏不得不説深色模式的出現,對設計師來説又是一個小的考驗,適配的時候最好能給用户達到最佳的體驗。
設計師:我太難了!但是無論是深色模式還是淺色模式,最終目的還是給用户帶來極佳的用户體驗感受,這樣才能讓我們的產品更加好用,用户才會喜歡我們的產品。