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