教你一文讀懂暗色模式

2024-7-12    ui設計分享達人

引言
  暗色模式(Dark Mode)的興起是一個逐漸發(fā)展的過程,它涉及到
技術(shù)進步、用戶體驗優(yōu)化以及設計趨勢
的變化。
  隨著iOS 13在2019年的發(fā)布,暗色模式開始成為用戶關(guān)注的焦點;在用戶體驗方面,設計者們考慮到了環(huán)境光線與屏幕亮度的匹配問題,暗色模式可以有效減少視覺疲勞;在實際使用中,用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適,這也促使了暗色模式的普及和發(fā)展。
  暗色模式在UI設計中的重要性體現(xiàn)在
改善視覺舒適度、節(jié)省電量以及提供個性化選擇
上,其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。
  本文將從暗色模式的
基本概念、優(yōu)勢、設計原則和應用
三個維度,幫助各位同行更好地學習、理解并完成暗夜模式的UI設計工作。
(如果文中存在任何不準確或遺漏之處,我也非常期待各位專家的指正和建議)
本文目錄
本文目錄
 
「大廠設計師」教你一文讀懂暗色模式
 
 
一、定義及其在UI設計中的表現(xiàn)形式
1.暗色模式的定義
  暗色模式是一種
低光用戶界面(UI)設計
,也稱為深色模式,是一種用戶界面設計選項,它使用較深的顏色方案和背景,通常為黑色或深灰色,以減少屏幕亮度并提供更舒適的視覺體驗。
iOS 13 亮色模式(左)與暗色模式(右)的對比
iOS 13 亮色模式(左)與暗色模式(右)的對比
 
2.暗色模式的定義
(1).暗色模式在UI設計中的表現(xiàn)形式
設計師需要為暗色模式
創(chuàng)建一個新的調(diào)色板
,這通常意味著降低顏色的飽和度,以適應深色背景。同時,
避免使用純黑
作為主色調(diào)背景,而是選擇接近純黑的深灰色,以確保閱讀體驗的
舒適性和可讀性
亮色/暗色模式下主色需要進行調(diào)整
亮色/暗色模式下主色需要進行調(diào)整
 
(2).對比度控制
暗色背景與文本顏色之間的對比度應該控制在
WCAG2.0AA級標準
以上,以保證內(nèi)容的
清晰度和易讀性
。對于彩色元素,也需要適當調(diào)整飽和度,確保整體色彩之間的對比度符合無障礙標準。
達到/未達到WCAG2.0AA標準的視覺效果對比
達到/未達到WCAG2.0AA標準的視覺效果對比
 
(3).視覺元素區(qū)分
在暗色模式下,設計師需要特別注意視覺元素的區(qū)分,通過足夠的對比度來
保證文字和圖形的清晰
可見。這不僅僅是簡單的顏色反轉(zhuǎn),而是一種“弱光”主題的設計思考,旨在優(yōu)化用戶在低光環(huán)境下的視覺體驗。
亮色模式中的按鈕在暗色模式中顯得太跳躍
亮色模式中的按鈕在暗色模式中顯得太跳躍
 
二、歷史回顧及發(fā)展脈絡
1.命令行界面時代
    在早期的計算機系統(tǒng)中,如DOS和Linux,
終端通常使用暗色模式
,這是因為早期的CRT顯示器存在閃爍問題,暗色背景能夠減少視覺疲勞,并提供較高的對比度。
Linux的終端界面
Linux的終端界面
 
2.個人電腦時代
    隨著個人電腦的普及,
圖形用戶界面(GUI)逐漸成為標準
,此時大多數(shù)操作系統(tǒng)和應用程序采用了亮色模式,以模仿紙張的顏色并減少CRT顯示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移動設備時代
    智能手機和平板電腦的興起帶來了OLED等先進顯示技術(shù),這些設備的
小屏幕和高分辨率
使得暗色模式再次變得實用和流行,特別是在
節(jié)省電量和減少眼睛疲勞
方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系統(tǒng)時代
    近年來,
各大操作系統(tǒng)開始正式支持暗色模式
。例如,Windows 10在2018年的更新中引入了暗色應用模式,macOS和iOS隨后也推出了可以根據(jù)時間或環(huán)境自動切換的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、設計趨勢中暗色模式的地位
暗色模式在當前設計趨勢中占據(jù)重要地位,以其
減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容
的優(yōu)勢受到青睞。它不僅適應低光環(huán)境,還提供美學上的新探索,響應了用戶對舒適性和個性化選擇的需求。隨著技術(shù)發(fā)展和設計創(chuàng)新,暗色模式已成為現(xiàn)代界面設計不可或缺的一部分。許多頂級品牌和應用程序,如WhatsApp、Instagram、Google、Facebook等,都已經(jīng)引入暗色模式設計,這表明暗色模式已經(jīng)
成為了一種廣泛接受的設計趨勢
。
從左往右依次為:WhatsApp、Instagram、Google、Facebook
從左往右依次為:WhatsApp、Instagram、Google、Facebook
 
「大廠設計師」教你一文讀懂暗色模式
 
 
一、用戶體驗層面
1.提高閱讀舒適度
(1).對比度和可讀性
在相同的對比度條件下,淺背景上的黑字比深背景上的淺色字
閱讀效果更好
。這表明,優(yōu)化對比度是提高閱讀舒適度的關(guān)鍵因素之一。
淺背景上深字與深背景上淺字的視覺對比
淺背景上深字與深背景上淺字的視覺對比
 
(2).用戶偏好和滿意度
一項針對用戶對暗色模式的使用體驗的調(diào)查顯示,與默認的白底模式相比,用戶在使用暗色模式時報告了
更低的視覺疲勞和更高的滿意度
。斯?。⊿loan)的一項研究在1977年就報告說,如果更多的光線通過混濁的透鏡到達眼睛,則出現(xiàn)畸變的可能性更大,即
暗模式對視力障礙者更好
。
對于長時間從事屏幕工作的人來說,暗色模式對眼睛更加友好
對于長時間從事屏幕工作的人來說,暗色模式對眼睛更加友好
 
2.減少視覺疲勞
(1).人眼生理特性
暗色模式能
減少屏幕發(fā)出的光線
,這有利于減少眼睛疲勞和不適,特別是在低光環(huán)境下,人眼的虹膜會打開以接受更多光線,而暗色模式提高了減少的光源,
減少了對眼睛的刺激
。
亮/暗環(huán)境下瞳孔大小的變化
亮/暗環(huán)境下瞳孔大小的變化
 
(2).藍光輻射減少
人們通過長期研究發(fā)現(xiàn)短波可見光,即紫光和藍光對眼底視網(wǎng)膜有相當程度的破壞作用, 而人們通常把這種可見光波長中高能量波段(400- 470nm)對視網(wǎng)膜的損壞現(xiàn)象稱為
“藍光傷害現(xiàn)象”
。 還有研究關(guān)注了暗色模式對藍光輻射的影響。由于暗色模式降低了屏幕的整體亮度,因此也
減少了藍光的輻射
。
可見光波段分布
可見光波段分布
 
二、設備電池壽命
1.降低屏幕功耗
在OLED屏幕上,每個像素都是獨立發(fā)光的,當
顯示黑色時,相關(guān)的像素點會關(guān)閉,從而不消耗能量
。這意味著,顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。
OLED屏幕發(fā)光原理
OLED屏幕發(fā)光原理
 
2.實際省電效果
以 Google 測試數(shù)據(jù)為例,OLED 屏幕的 Pixel 手機在時間段內(nèi)啟用深色模式并在使用地圖導航時保持屏幕最大亮度,手機的
電量消耗下降了 63%
Google的測試數(shù)據(jù)
Google的測試數(shù)據(jù)
 
三、降低屏幕功耗
1.促進睡眠
對于晚上喜歡在床上閱讀或工作的用戶來說,暗色背景有助于降低屏幕亮度,
減少對褪黑素分泌的干擾
,也有助于
減少藍光對睡眠周期的影響
,從而幫助用戶更快入睡并提高睡眠質(zhì)量。
OPPO手機暗色模式廣告
OPPO手機暗色模式廣告
 
2.減少眩光
眩光是明亮的屏幕和低光環(huán)境之間惱人的對比現(xiàn)象,對眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字,整體降低了屏幕的亮度,這樣在光線較亮的環(huán)境中,屏幕的亮光
與周圍暗環(huán)境的對比度降低
從而減少了屏幕反射光線對眼睛的刺激
,降低不適。
有眩光與無眩光的顯示器對比
有眩光與無眩光的顯示器對比
 
四、打造沉浸式體驗
1.減少視覺干擾
暗色模式提高了一種無干擾的工作環(huán)境,
有助于他們專注于手頭的任務
,特別是在進行寫作、編碼或其他需要集中注意力的活動時,暗色模式能夠減少視覺干擾。
暗色模式為視覺設計提供了更大的對比度,使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士,也增強了用戶的視覺聚焦,讓用戶更容易沉浸于應用或游戲的環(huán)境中。特別是在觀看視頻或進行游戲時,暗色背景能夠使色彩更為鮮明,提升用戶的視覺體驗。
編碼軟件一般默認暗色界面,有利于專注工作
編碼軟件一般默認暗色界面,有利于專注工作
 
2.增強視覺聚焦
暗色模式為視覺設計提供了更大的對比度,使得
界面元素更為突出
。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士,也增強了用戶的視覺聚焦,
讓用戶更容易沉浸于應用或游戲的環(huán)境中
。特別是在觀看視頻或進行游戲時,暗色背景能夠使色彩更為鮮明,提升用戶的視覺體驗。
手游王者榮耀UI界面
手游王者榮耀UI界面
 
「大廠設計師」教你一文讀懂暗色模式
 
 
一、不同平臺的設計原則
「大廠設計師」教你一文讀懂暗色模式
 
 
1.WCAG最低標準
(1).WCAG的定義
Web Content Accessibility Guideline,譯為
網(wǎng)頁內(nèi)容無障礙指南
,其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議,這些建議可使網(wǎng)站內(nèi)容更容易訪問。iOS人機界面準則以及Android平臺的Dark Theme都是基于WCGA之上。
WCAG的檢測網(wǎng)站:WCAG - Contrast Checker
WCAG的檢測網(wǎng)站:WCAG - Contrast Checker
 
(2).最小對比度(AA級)
對于普通的文本和文本圖像,要求視覺呈現(xiàn)
至少具有4.5:1的對比度
。這意味著文本的顏色應該與背景顏色有足夠的差異,以便用戶能夠輕松閱讀。
(3).加強對比度(AAA級)
對于普通文本與背景的對比度,
要求不低于7:1
。這一級別的要求比AA級更高,提供了更強的視覺清晰度,特別有助于色覺缺陷或低視力用戶的閱讀。
不同層級的信息使用不同對比度
不同層級的信息使用不同對比度
 
2.Android平臺
(1).使用深灰色而不是黑色
深色主題背景通常采用深灰色而非純黑色,這是因為純黑色可能會導致對比度過高,而深灰色可以提供
更為舒適的視覺體驗。
背景顏色為 #121212
背景顏色為 #121212
 
(2).通過淺色表達深度
在深色主題中,為了構(gòu)建清晰的視覺層次,通常會使用較淺的顏色來突出界面上的重要元素,如按鈕和卡片。Dark Theme通過
淺色遮罩覆蓋的形式凸顯不同層級
,不同高度層對應不同透明度的規(guī)范如下。規(guī)范最高層是24dp,覆蓋16%透明度的白色。
不同高度層對應的白色遮罩透明度
不同高度層對應的白色遮罩透明度
 
(3).顏色去飽和
在深色主題中,顏色的飽和度通常會降低,這樣可以
減少視覺疲勞
,并提供一種更為舒適和專業(yè)的外觀。
亮色/暗色模式中主色調(diào)的對比,降低了飽和度
亮色/暗色模式中主色調(diào)的對比,降低了飽和度
 
(4).使用深色及有限色彩
為了保持設計的一致性和專注性,深色主題中應使用有限的色彩,并且這些色彩應當與深色背景協(xié)調(diào)。
品牌顏色可以在深色主題中以完全飽和度使用,但應用應限于一個或兩個品牌元素,例如徽標或品牌按鈕。通過謹慎使用品牌顏色,使元素在層次結(jié)構(gòu)中保持突出。不飽和的顏色仍應在黑暗主題UI的其余部分中使用。
背景色也需要有品牌色的顏色傾向
背景色也需要有品牌色的顏色傾向
 
3.iOS平臺
(1).保持視覺風格的熟悉感
意味著即使在深色模式下,用戶應能立即識別出應用程序的風格和布局,
確保用戶體驗的連貫性
。iOS 7之后蘋果一直崇尚這種
毛玻璃般的透明材質(zhì)
以映射UI界面與設備屏幕的關(guān)系,也可以使用戶更好的感知上層元素與下層內(nèi)容之間的關(guān)系,界面也不會過于枯燥乏味。
iOS 13提供了4個層級的材質(zhì),由厚重到輕薄,對應的暗色模式也保持了風格一致性
iOS 13提供了4個層級的材質(zhì),由厚重到輕薄,對應的暗色模式也保持了風格一致性
 
(2).平臺一致性
設計時應遵循iOS的設計規(guī)范,確保在不同模式(淺色或深色)下都能
提供一致的用戶體驗
。這有助于用戶在使用各種應用時能夠獲得統(tǒng)一的操作感受。iOS默認提供了9個彩色色板(TintColor),為了保證深色模式下的對比度效果,
每個顏色都新增了深淺模式兩種版本
。
iOS 13 UI Sketch組件庫
iOS 13 UI Sketch組件庫
 
(3).清晰明確的信息層級
在深色背景下,原先利用陰影區(qū)分界面層次的方法可能不再適用,因此需要通過不同灰度的背景色和陰影來強化層次感。正確的層級關(guān)系有助于突出重要內(nèi)容,引導用戶的注意力。
在“通訊錄”與“信息”中選擇聯(lián)系人的界面因為信息層級不同,背景顏色不同 左:#000000 右:#1C1C1E
在“通訊錄”與“信息”中選擇聯(lián)系人的界面因為信息層級不同,背景顏色不同 左:#000000 右:#1C1C1E
 
(4).清晰明確的信息層級
深色模式應
聚焦于內(nèi)容展示
,使主要內(nèi)容突顯,而
非核心的界面元素則相對隱退
,這有助于集中用戶的注意力于重要信息上。在淺色主題中,我們經(jīng)常使用大塊的明亮顏色,這樣最重要的元素可能會更加顯眼。但在暗色模式中,這樣就不行了,大塊的亮顏色會讓我們?nèi)菀缀鲆暩匾脑亍?nbsp;
在Dark Mode中不能采用大面積的彩色
在Dark Mode中不能采用大面積的彩色
 
二、優(yōu)秀案例解讀
1.國內(nèi)案例
(1).Ant Design
Ant Design 在其4.0版本中對暗黑模式進行了探索,提供了一套
適用于企業(yè)級應用的暗色主題設計
,旨在幫助設計師和開發(fā)者快速實現(xiàn)暗色模式的用戶界面。
「大廠設計師」教你一文讀懂暗色模式
 
 
(2).微信
微信作為國內(nèi)領先的社交應用,其暗色模式設計不僅減少了屏幕的亮度,還對圖標和文字顏色進行了優(yōu)化,以確保在不同光線條件下的可讀性和舒適性。
文字信息的對比度僅大于7:1。更多的是考慮微信的聊天場景
中,用戶可能長時間沉浸式使用。這里微信將深色模式與夜間模式進行了兼容,
避免大的對比造成強烈的視覺刺激
,可以在深夜環(huán)境下獲得更好的感知度。
 
微信文字信息對比度
微信文字信息對比度
 
(3).百度地圖
百度地圖的暗色模式主要是為了適應
在夜間使用導航時,減少屏幕亮度對駕駛員視覺的影響
避免產(chǎn)生視覺疲勞或短暫的視覺致盲現(xiàn)象
。開啟這一模式后,百度地圖的界面顏色會變?yōu)樯钌尘?,以降低整體亮度,從而提供更舒適的視覺體驗。
比亞迪上搭載的百度地圖界面
比亞迪上搭載的百度地圖界面
 
(4).淘寶
電商類應用上,大量的商品圖片和視頻都是以淺色背景為主。如果只是把背景變?yōu)樯钌蜁执萄?,但是如果挨個調(diào)整商品圖片,則工作量十分巨大。淘寶
通過“語義化顏色”(Semantic Colors)進行適配
。所謂語義化顏色,就是
不再通過某一色值來描述顏色,而是通過用途來描述
,讓界面元素可以自動適配當前的外觀。
淘寶的深色模式
淘寶的深色模式
 
(5).抖音
界面采用暗色模式是由于暗色背景在低光環(huán)境下對眼睛的刺激更小,用戶在夜間使用應用時會覺得更加舒適。同時,采用暗色模式可以減少界面干擾,用更簡單的交互方式
提高用戶沉浸式觀看體驗
。這
促使用戶在晚上更多地使用抖音
,從而延長用戶在應用上停留的時間。
抖音的雙色模式,默認為暗色模式
抖音的雙色模式,默認為暗色模式
 
2.國外案例
(1).Google
Material Design的設計規(guī)范中新增了暗色主題,它使用大面積的深色來構(gòu)成界面,
作為產(chǎn)品默認主題的補充
。這種設計不僅能改善視覺人體工程學,還能在某些情況下節(jié)省電池電量,特別是對于配備OLED屏幕的設備來說。
Google Material Design設計規(guī)范
Google Material Design設計規(guī)范
 
(2).X/Twitter
目前提供了兩種深色模式
:分別是“昏暗(Dim)”和“熄燈(Light out)”,前者背景色為深灰色,后者基本是純黑色。馬斯克在X發(fā)文宣布,該平臺很快將只有“暗黑”模式,它在各個方面都更好,改動后暗黑模式將成為默認且唯一可用的主題。
Dim與Light out的區(qū)別
Dim與Light out的區(qū)別
 
(3).Youtube
之前在IOS系統(tǒng)上的大量耗電一直被用戶詬病,在推出深色模式后,相較于亮色模式
能節(jié)約60%的電量
。同時,淺色的留白容易引起視覺疲勞,與內(nèi)容本身搶奪視覺重點,在深色模式下,
視頻內(nèi)容本身會被突出得更徹底
Youtube的全新暗色模式
Youtube的全新暗色模式
 
(2).E-Trade
在 2018 年的時候,一家客戶關(guān)系管理(CRM) 軟件服務提供商 SalesForce 的設計師想知道開發(fā)儀表板功能時采用哪種模式會最好。于是他們采訪了許多用戶,事實證明,
用戶對黑暗主題下的圖表反應會更快并且更精準。
這一點在股票交易軟件上也得到了驗證,目前來看
全世界絕大多數(shù)的股票軟件采用的都是負極性,也就是暗色底的設計方式
。紅色和綠色代表的漲或跌(不同國家顏色表示可能不一樣)在這樣的深色背景下就會特別顯眼。還有一些顏色比如藍色用于某些數(shù)據(jù)的走勢圖。
證券/股票交易類應用通常采用暗色界面
證券/股票交易類應用通常采用暗色界面
 
三、設計工具與資源
1.Sketch插件
(1).Sketch Midnight
Sketch Midnight Mac正式版是款針對Sketch打造的主題插件。Sketch Midnight Mac最新版為你的Sketch增加
精美的替換主題,自定義選擇顏色,自定義畫布黑暗等
。并且Sketch Midnight Mac中用戶還可以設置畫布的明度(純黑或灰色調(diào)畫布)以得到最佳主題展示效果。
「大廠設計師」教你一文讀懂暗色模式
 
 
(2).Sketch Dark Mode Plugin
這是一個
專門用于生成深色模式版本的文檔
的插件。它可以加快設計工作流程,并幫助你立即創(chuàng)建出精美的深色模式設計,而且操作簡便,沒有繁瑣的界面。
「大廠設計師」教你一文讀懂暗色模式
 
 
(3).Sketch Toolbox
雖然這個工具主要是用來管理和組織Sketch插件的,但它也
提供了一些與暗色模式相關(guān)的插件
,可以幫助設計師更好地管理和維護他們的設計項目。
「大廠設計師」教你一文讀懂暗色模式
 
 
(4).Frontify
雖然Frontify主要是一個品牌管理工具,但它也提供了一些功能,如基于Web的樣式規(guī)范和UI設計模式庫,這些功能可以
幫助設計師在創(chuàng)建暗色模式設計時保持一致性和標準化
。
「大廠設計師」教你一文讀懂暗色模式
 
 
2.在線工具
(1).Adobe Color
Adobe Color是一個在線工具,它可以
幫助設計師創(chuàng)建和測試色彩方案
,包括暗色模式的配色。您可以使用它來生成、預覽和分享配色方案。
「大廠設計師」教你一文讀懂暗色模式
 
 
(2).Coolors
Coolors是另一個在線配色方案生成器,它提供了
快速生成和調(diào)整配色方案
的功能,非常適合用于暗色模式的設計。
「大廠設計師」教你一文讀懂暗色模式
 
 
(3).Material Design Color Tool
由Google提供的Material Design Color Tool可以幫助設計師根據(jù)Material Design指南
創(chuàng)建色彩方案,包括暗色主題的配色
。
「大廠設計師」教你一文讀懂暗色模式
 
 
總結(jié)
    隨著用戶對界面設計要求的提高,暗色模式以其減少視覺疲勞和增強內(nèi)容可讀性的優(yōu)勢,在UI設計中越來越受歡迎。它不僅為用戶帶來了全新的視覺體驗,也為設計師提供了創(chuàng)新的空間。
    未來,暗色模式有望成為更多應用和系統(tǒng)的標準配置,設計師們將更加重視其創(chuàng)新和優(yōu)化,以提供更優(yōu)質(zhì)的用戶體驗。我們應緊跟這一趨勢,探索新的色彩搭配和布局,滿足用戶的需求和偏好。
    總之,暗色模式在UI設計中的應用和優(yōu)勢已經(jīng)得到了廣泛的認可。作為設計師,我們應該把握這一趨勢,不斷提升自己的設計能力,為用戶創(chuàng)造更加美好的數(shù)字生活。


作者:阿琳01
鏈接:https://www.zcool.com.cn/article/ZMTYxMzg5Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司、數(shù)據(jù)可視化設計公司用戶體驗公司、高端網(wǎng)站設計公司銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔