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