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