看看這份簡易版入門指南!
發(fā)布時間:2022-01-26 09:40 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

在 Android Q 之后,蘋果也在 iOS13 支持了深色模式,深色模式成了2019下半年的熱門話題,不少產(chǎn)品已經(jīng)完成了對深色模式的適配,淘寶、微信也先后開始內(nèi)測,「變黑」似乎已經(jīng)成為趨勢。而在適配深色模式之前,設(shè)計師需要深入了解它的特性,衡量適配深色模式帶來的價值,以及規(guī)劃合適的策略,避免陷入「為黑而黑」的泥潭。

適配深色模式前,先收下這份簡易版入門指南!


為什么人們會喜歡「深色模式/dark mode」?


1. 深色系界面弱化背景,瀏覽內(nèi)容更專注。

影片放映時會關(guān)掉所有燈光,只有屏幕亮起吸引觀眾的注意力,同樣的原理下,當(dāng)產(chǎn)品界面是深色背景時,頁面元素優(yōu)先級更清晰,用戶更容易注意到關(guān)鍵內(nèi)容。而且相比淺色為主的界面,深色界面對眼睛的視覺壓力更小。

注:至于它的「護眼」作用還尚未明確,長時間盯著屏幕造成的視覺疲勞依然不可避免。

2. 新鮮感

看了太久千篇一律的「白底黑字」,深色模式讓用戶多了一種選擇。人人喜歡新鮮的樣式,哪怕只是短暫的熱情嘗試,都會增加用戶對產(chǎn)品的新鮮感,并且不可否認(rèn)的是,黑色更容易讓人感覺到酷炫新鮮。

3. 省電- OLED 屏幕顯示深色能耗更低

OLED 屏幕中每個像素都是自主發(fā)光,在顯示深色元素時,消耗的電量更少,而在顯示純黑色時,像素點可以徹底關(guān)閉。打個不完全嚴(yán)謹(jǐn)?shù)谋确,手機屏幕就像是排列了幾萬個小燈泡的大燈板,OLED 屏幕顯示黑色時會真的把那塊區(qū)域的燈泡關(guān)掉,自然會省電。


深色模式不等同于夜間模式


很多產(chǎn)品已經(jīng)存在夜間模式,開啟夜間模式后界面同樣會轉(zhuǎn)向暗色,而突然被討論的「深色模式」和「夜間模式」有什么區(qū)別?

適配深色模式前,先收下這份簡易版入門指南!

對于用戶而言顯然沒有必要分清楚夜間模式和深色模式的差別,在外觀上,它們真的很像。但是以設(shè)計師的角度來說,只有真正區(qū)分它們之間的差別和應(yīng)用場景,才能提供給用戶一套邏輯清晰的選擇方案,讓用戶更方便快捷地選擇自己想要的模式。

適配深色模式前,先收下這份簡易版入門指南!

△ 開啟夜間模式前后對比

適配深色模式前,先收下這份簡易版入門指南!

△ 淺色/深色模式下的界面對比

通過這兩張對比圖,可以明顯地感覺到夜間模式與深色模式下,界面元素的對比、層級表現(xiàn)都有所區(qū)別。

夜間模式的設(shè)計目的,是讓用戶在夜間使用手機時,屏幕顯示更柔和,調(diào)整色溫、降低飽和度,而在白天開啟夜間模式很難看清顯示內(nèi)容,并不適合在白天使用。

顯然,深色模式不是夜間模式,用戶可以在任何時間任何環(huán)境下使用它,需要維持和淺色模式同樣的產(chǎn)品特性,可以和設(shè)備的夜覽模式同時開啟。


深色模式適配現(xiàn)狀


用戶將系統(tǒng)主題設(shè)置為深色后,自然就會期望所有的 app 都變成深色,深色模式逐漸會成為產(chǎn)品標(biāo)配的功能。已經(jīng)有越來越多的產(chǎn)品用各種方式對系統(tǒng)的深色模式進行適配。主要分為以下三種類型:

  • app 自動跟隨系統(tǒng)主題切換模式,如果用戶的手機系統(tǒng)不支持深色模式,產(chǎn)品不會切換到深色模式。代表產(chǎn)品有 微信讀書、豆瓣、懶飯、Instagram、愛奇藝
  • 原有夜間模式與深色模式進行捆綁,讓用戶自行選擇是否配合系統(tǒng)主題切換。在不支持深色主題的系統(tǒng)內(nèi)用戶可以通過開啟夜間模式,使產(chǎn)品主題變?yōu)樯钌。?yán)格來說,這并不是真正的深色模式,而出于不同的決策模型,產(chǎn)品團隊會做出最適合自己的選擇。代表產(chǎn)品:QQ、Twitter
  • 原有產(chǎn)品沒有夜間模式,正在內(nèi)測跟隨系統(tǒng)切換主題的深色模式。代表產(chǎn)品:微信、淘寶


深色模式的適配不同思路


iOS & Android 兩套設(shè)計語言的 Dark Mode 策略除了在基礎(chǔ)色彩體系的數(shù)值有些差距外,更明顯的是在 Accent color 的不同處理方式。

Android Q 則強調(diào)保障清晰觀看體驗的前提下,要具備更多的靈活性,比如在原色彩上面加 40% 的白色透明遮罩,以增強在深色背景上的清晰對比度,缺點可能會讓原色彩在感官上發(fā)生較大的偏差。

適配深色模式前,先收下這份簡易版入門指南!

1. 語義化顏色

在 iOS 設(shè)計語言規(guī)范下,產(chǎn)品支持深色模式就必須管理兩套完整的顏色方案,確保它們之間始終保持同步,這就要求設(shè)計團隊以更系統(tǒng)的方式來管理顏色體系。為此,蘋果引入了「語義化顏色」的概念。

注:語義化顏色是通過「用途」來對元素進行定義描述,而不是具體的色值!赣猛尽苟x下的顏色是動態(tài)性,脫離于具體的表現(xiàn)樣式而獨立存在。比如,「背景色」,在深色模式中指代黑色,而在淺色模式中指代白色,這樣就可以讓顏色靈活地適應(yīng)淺色與深色模式切換。具體應(yīng)用方法已有很多資料分享,本文不做擴展。

2. 統(tǒng)一規(guī)律變化色彩梯度

適配深色模式前,先收下這份簡易版入門指南!

Android 適配方案簡單粗暴,對于顏色可參考梯度漸變模型規(guī)律配色,頁面背景根據(jù)層級疊加不同透明度的白色即可。但是完全執(zhí)行就容易導(dǎo)致產(chǎn)品在深色模式下產(chǎn)生風(fēng)格偏移,出現(xiàn)不符合品牌設(shè)計語言的情況。

3. 智能語義化

在 iOS 適配策略的基礎(chǔ)上,淘寶團隊在分享中提出了「智能語義化」方案,使適配成本大幅降低。方案思路是:設(shè)計師根據(jù)不同 UI 元素的特性先制定顏色語義化規(guī)則,技術(shù)在框架層面通過「顏色自動反轉(zhuǎn)」技術(shù)實現(xiàn)顏色反轉(zhuǎn)。

然而除去基本顏色,大量的圖標(biāo)、插圖,動效等等需要一一調(diào)整兼容,完美適配深色模式需要多方配合持續(xù)維護,而后期的功能開發(fā)也需要同時兼顧兩種模式,對于自定義元素較多、業(yè)務(wù)組成復(fù)雜的 APP 適配難度可想而知。


總結(jié)


看完本文后,你可以了解深色模式受到追捧的原因,區(qū)分深色模式與夜間模式的不同,了解到適配深色模式的多種策略和面臨的挑戰(zhàn),深入思考,當(dāng)前產(chǎn)品是否真的需要適配深色模式。最后,希望能夠幫你找到真正適合自己產(chǎn)品的適配策略。

UI交互app及axure設(shè)計教程
我要自學(xué)網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC