夜晚，你打開筆記本電腦。屏幕將刺眼的白光直射你的臉龐。你瞇起眼睛心想：“這實在太亮了。”
而這正是深色模式所要避免的。
最初只是一股設計潮流，如今深色模式已成為用戶的一種期待，因為它讓深夜瀏覽更護眼，并幫助你在弱光環境下保持專注。
在本指南中，你將了解深色模式網站為何如此受歡迎，以及如何設計一個能與淺色模式無縫切換的深色模式網站。
什么是網頁設計中的深色模式？
深色模式是一種設計風格，網站使用深色背景（通常是黑色、深灰色或深藍色），并在其上呈現淺色文字和元素。它與通常的“淺色模式”正好相反，后者是在白色背景上顯示深色文字。
你可能已經在手機上使用過它，或在 YouTube、Instagram 等網站上注意到它，因為它現在已非常普遍。
無需代碼的電子郵件模板構建器
使用?Postcards Email Builder，你可以在線創建和編輯電子郵件模板，無需任何編碼技能！包含 100 多個組件，助你比以往更快地創建自定義電子郵件模板。
盡管仍有很多人堅持使用淺色模式，但深色模式已迅速從新奇事物發展為真正的趨勢。
2024年，英國 YouGov 機構調查了 2500 多人，以了解他們偏好如何使用智能手機。根據他們的調查，29% 的人更喜歡在智能手機上使用深色模式。
幾年前，甚至還沒有切換模式的概念——網站和應用始終只有淺色模式。但這項調查表明，如今，用戶在有選擇時也會選擇深色模式。
為什么使用深色模式網站
你可能認為深色模式是一個很酷的網頁設計選擇。但當你的訪客嘗試它時，他們會立刻注意到以下好處：
在夜晚或昏暗房間中，相較于明亮的白色屏幕，它對眼睛更溫和。
它賦予網站一種現代、高級的感覺，這就是為什么科技品牌、作品集網站和創意網站經常使用它們。
在最高亮度下，它最多可節省 67% 的 OLED（有機發光二極管）功耗，因為屏幕越亮，節省的電量就越多。
它減少了整體的藍光暴露，使得深夜瀏覽對周圍環境的干擾更小。
深色模式網站的優缺點
以下是擁有深色模式網站的利弊快速比較，以幫助你決定是否真的需要它：
優點: 在弱光環境下更護眼；提供時尚現代的設計，使色彩更突出；在 OLED/AMOLED 設備上節省電量；有助于編碼或編輯時集中注意力；減少藍光暴露，對睡眠更有利。
缺點: 在強光下閱讀更困難；對部分用戶可能因文本模糊而降低可讀性；明亮的Logo和色彩可能顯示不佳；需要額外維護以保持設計一致性；色彩在深色背景上有時會感覺情感上“不對勁”。
4個啟發性的深色模式網頁設計示例
以下是四個深色模式網站示例，你可以從中汲取靈感：
1. Qase
Qase 的深色模式采用深海軍藍背景，賦予網站一種時尚、太空般的感覺。紫色和藍色的點綴增添了柔和的光暈，使設計看起來現代且未來感十足。一切感覺干凈利落，非常適合技術平臺。
登錄后，你會看到一個切換按鈕，可以在淺色和深色模式之間切換。
低代碼網站構建器
使用?Startup App?和?Slides App，你可以使用在線網站編輯器構建無限量的網站，該編輯器包含現成的設計和編碼元素、模板和主題。
2. YouTube
YouTube 的深色模式用深灰色和黑色取代了亮白色背景。這使得視頻在屏幕上更加突出。在夜晚它也讓人感覺更舒適，并保持了界面的簡潔。
但如果你偏好淺色模式，可以從設置中一鍵切換回來。
3. Wix
在深色模式下，Wix Studio Tab Chrome 擴展（非網站）使用豐富的炭黑色背景，看起來非常舒適。其彩色圖標和卡片讓你能快速發現更新和鏈接。這種方式使對比度感覺平衡。
4. Trello
Trello 的灰色背景和淺灰色文本看起來是完美的組合。明亮的點綴將你的注意力引導到重要的看板和按鈕上。整潔的布局賦予了 Trello 工作區一種極簡主義的感覺。
如何逐步創建深色模式網站
有多種方法可以為你的網站添加深色模式。
一些最常見的方法是使用 WordPress 插件（更簡單），或者，如果你更精通編碼，可以選擇 JavaScript 和 CSS 方案。
但如果你想避免所有這些麻煩，并且需要一個簡單的拖放選項來快速完成工作，請使用 Designmodo 的 Slides，一個無需代碼的網站構建器。
1.?進入?Designmodo Slides，點擊?"Open Editor"。
2.?轉到?"New Page"，添加你網站的?"Name"?和?"Title"。
3.?然后點擊?"Create and Edit"。
4.?在編輯器中，你會在頂部欄看到?"Add"?選項。點擊它查看下拉菜單。
在下拉菜單中，你可以看到：
-- Slides
-- Examples
-- Templates
-- Widgets
5.?從可用選項中，選擇你最喜歡的設計（我選擇了幻燈片 27）。
6.?在左側面板中，將鼠標懸停在版式上，然后單擊?"Pen"?符號開始編輯。
7.?將出現一個編輯面板。現在，轉到?"Edit"?部分，查找?"White Slide"?切換選項。將其關閉，你的幻燈片將變為深色模式。
8.?點擊?"綠色勾號"?保存更改。
現在，你可以根據需要自定義整個網站設計（包括文本和視覺效果），并在準備就緒后發布它。
設計深色模式網站的技巧
既然你知道如何創建深色模式網站，以下是一些可以遵循的技巧：
不要使用純黑色背景
純黑色（#000000）背景搭配亮白色文本可能看似顯而易見的選擇，但它可能產生強烈的對比，令人視覺疲勞。相反，使用深灰色（#121212）作為背景。這可以保持設計對眼睛柔和，同時視覺上仍然豐富。
避免純白色文本
深色背景上的亮白色文本會產生光暈效果，使其更難閱讀，尤其對于有某些視力狀況的人。
相反，選擇灰白色或淺灰色，并根據不同文本類型調整不透明度，例如：
重要文本：約 87% 不透明度
次要或提示文本：約 60% 不透明度
禁用文本：約 38% 不透明度
降低高飽和度色彩的強度
明亮、類似霓虹的顏色在深色模式下可能會顯得過于強烈。它們會在背景上“發光”，使閱讀變得困難。如果你的品牌使用強烈的顏色，嘗試使用稍微柔和的版本，這樣它們仍然突出而不會讓觀看者感到刺眼。
不要改變你的品牌色
你不必為深色模式完全反轉你的整個調色板，但你可能需要對其進行調整。對按鈕或Logo等重要元素保留你的主要品牌顏色，但在其他地方使用調低強度的版本，以避免壓倒界面。
避免使用陰影
在深色模式下，陰影會消失。如果它們只比背景暗一點，你就看不到它們。如果你把它們做成純黑色，幫助也不大。如果你讓它們更亮，它們看起來會很奇怪。
所以，相反，使用柔和的高光、輕微的漸變或略微不同的色調來顯示深度。你也可以給元素一個其顏色較亮版本的微弱發光。這很簡單，而且比幾乎注意不到的陰影效果要好得多。
為深色模式調整圖像
深色模式會改變視覺效果，因此需要額外注意。以下是我們推薦的一些技巧：
使用柔和或暗色調，使圖像與背景平滑融合。
避免使用明亮的顏色，因為它們可能會分散注意力。
調整亮度和對比度，使你的圖像不會看起來太亮或太暗。你可以使用淺色濾鏡或疊加層使它們更好地適應深色背景。
使用淺色圖標或圖形以確保清晰的可見性。
在不同光照條件下測試，確保圖像保持可讀性和吸引力。
檢查你的圖片庫，調整或替換任何與深色主題沖突的內容。
讓用戶可以輕松切換模式
設計來源：Mohammad Turk
有些人整天都喜歡深色模式；其他人只在晚上需要。通過一個清晰、簡單的切換開關給予用戶控制權，讓他們可以隨時切換模式。
在不同設備和光照條件下測試
你的設計應該在白天的手機上和夜晚的臺式機上同樣出色地工作。因此，請確保在各種光照條件和屏幕類型下進行測試，以確認它始終可讀且吸引人。
你應該為你的網站添加深色模式嗎？
深色模式并非每個網站的必備功能，但如果你的受眾在弱光環境下瀏覽或依賴移動設備，它可能會產生很大的不同。關鍵是測試：確保可讀性、色彩平衡和品牌形象在深色模式下的效果與在淺色模式下一樣好。
如果你準備嘗試，請審視你網站的設計，并在現有布局旁邊測試深色調色板。然后，收集用戶反饋，看看它是否真正改善了訪客的體驗。
常見問題解答 (FAQs)
深色模式能改善 SEO 嗎？
不能直接改善。深色模式關乎網頁設計和用戶體驗，但更好的用戶體驗可以帶來更長的會話時間和更低的跳出率，這可能間接有助于 SEO。
深色模式和夜間模式有什么區別？
深色模式將屏幕的整體外觀變為深色配淺色文字，這讓人感覺更舒適，甚至可以在某些設備上節省電量。相反，夜間模式通過減少藍光并添加橙色或黃色等暖色調來軟化顏色。這使得屏幕在晚上看起來更放松。
深色模式總是省電嗎？
它只在 OLED 和 AMOLED 屏幕上節省電量。在 LCD 屏幕上，節能效果微乎其微。
精選文章：