多年來，這個主題一直讓 掌握暗模式電子郵件 電子郵件極客們徹夜難眠…暗模式電子郵件設計和開發。就好像您在電子郵件渲染方面沒有足夠的時間來處理一樣。
黑暗模式為電子郵件開發帶來了另一個阻礙。但是，如果您知道自己在做什麼，則可以優化淺色和深色模式電子郵件的收件匣體驗。
如果您忽略深色模式，您的一些訂閱者可能會在打開您的 HTML 電子郵件設計時卻發現一團亂七八糟的內容。因此，讓我們闡明這個神秘的主題，並探索如何創建看起來很棒的電子郵件，無論模式如何。
目錄
到底什麼是黑暗模式？
深色模式是一種可以為許多裝置、應用程式和作業系統開啟和關閉的顯示設定。從本質上講，它改變了使用者介面，以便在深色背景上看到淺色文本，而不是在淺色背景上看到傳統的深色文字。
早在 70 年代，電子郵件發明後不久，深色模式 UI 就已經成為常態。想像一下那些老式的、四四方方的電腦，有黑色的螢幕和發光的綠色文字。光模式最終與 90 年代的 LCD 螢幕一起成為標準。
一旦 Gmail、Apple Mail 和 Outlook 開始提供深色模式，電子郵件行銷人員也開始注意。這是四年前我們第一次開始在黑暗模式下測試我們自己的東西時，舊的 Acid 時事通訊電子郵件的樣子。這並不可怕。但這也不理想。
還記得黑暗模式只是一個小眾偏好的時候嗎？那些日子已經一去不復返了。深色模式已迅速成為主流功能，最近的研究表明，很大一部分用戶至少在某些數位互動中更喜歡深色模式。
當然，這些關於消費者使用深色模式設定的研究各不相同。您真正想知道的是您的清單中有多少聯絡人正在以深色模式開啟訊息。 Sinch Email on Acid 的高級電子郵件分析可以讓您做到這一點。了解有關追蹤我們平台上開啟的暗模式的更多資訊。
但我們離題了……為什麼人們這麼喜歡黑暗模式？讓我們來分解一下：
- 眼睛舒適度：許多使用者發現深色模式對眼睛更舒適，尤其是在低光源條件下。這對於那些在深夜或早上第一件事檢查電子郵件的人來說尤其有益。
- 減少藍光照射：一些研究表明，減少藍光照射，尤其是在晚上，可以幫助改善睡眠模式。深色模式是使用者嘗試實現這一目標的一種方式。
- 電池壽命：對於配備 OLED 螢幕的設備，深色模式可顯著延長電池壽命。這是因為 OLED 螢幕在顯示黑色時可以關閉各個像素，從而消耗更少的電量。
- 美學偏好：讓我們面對現實吧，有些人只是認為深色模式看起來很酷。它可以為介面帶來時尚、現代的感覺。
- 減少螢幕眩光：在某些照明條件下，深色模式可以幫助減少螢幕眩光，從而更輕鬆地閱讀內容。
無論出於何種原因，很可能很大一部分訂閱者正在以深色模式查看您的電子郵件。作為電子郵件專業人員，我們的工作是確保我們的郵件在明亮和黑暗的環境中看起來都很棒。
深色模式電子郵件的挑戰
在我們討論解決方案之前，讓我們先分析一下暗模式電子郵件的主要挑戰。了解這些障礙是克服它們的第一步：
深色模式的顏色反轉：當你的設計翻轉時
深色模式的主要挑戰之一是顏色反轉。許多電子郵件用戶端在切換到深色模式時會自動反轉顏色，將淺色背景變為深色，將深色文字變為淺色。雖然這在理論上聽起來很簡單，但在實踐中它可能會導致一些意想不到的結果：
- 您精心挑選的配色方案可能會完全改變，從而影響電子郵件的整體外觀和感覺。
- 重要的設計元素（例如按鈕或號召性用語區域）可能會失去影響力或變得難以區分。
- 在淺色模式下表現良好的細微色差在深色模式下可能變得難以區分。
在此範例中，紫色可能是您在電子郵件中用於號召性用語的主要品牌顏色 。但倒綠色按鈕可能根本不適合您的品牌。
深色模式下的品牌一致性：徽標可見性問題
您品牌的視覺識別在電子郵件行銷中至關重要。然而，深色模式可能會擾亂您的電子郵件品牌推廣工作：
- 設計為在淺色背景上脫穎而出的徽標可能會在深色背景上突然變得不可見。
- 為淺色背景精心選擇的品牌顏色可能會發生衝突或在倒置時變得難以辨認。
- 您的電子郵件的整體「感覺」可能會發生巨大變化，可能會使其與您的品牌通常的美學脫節。
如果您的商標未針對在深色模式下查看電子郵件進行最佳化，可能會發生以下情況：
有關如何處理此問題的一系列選項，請查看我們關於修復暗模式徽標問題的提示。
輔助功能和深色模式：意外的對比問題
雖然深色模式可以使一些有視覺障礙的用戶受益，但它也可能造成意想不到的電子郵件可訪問性問題：
- 在淺色模式下完美運行的顏色對比度在深色模式下可能會出現問題。
- 在淺色背景上易於閱讀的文字在深色背景上可能會變得緊張，尤其是在未調整字體粗細的情況下。
- 在深色模式下，重要的視覺提示或分隔符號可能會消失或變得不那麼明顯。
電子郵件用戶端和暗模式渲染
就像電子郵件開發領域中的平常一樣，它從來都不是像擁有深色模式和非深色模式那麼簡單，所有具有深色模式功能的電子郵件用戶端都會略有不同。
正如Parcel 朋友在這篇優秀 新西蘭電子郵件列表 文章中所解釋的，您可以將不同的黑暗模式分解為三種不同的模式；完全反轉、部分反轉和無變化。
完全反轉將更改您的字體顏色和背景，部分反轉非常相似，但在很大程度上不會影響您的背景，任何更改都不會反轉您的任何內容。
我們建議選擇稍微不同的十六進位代碼，例如#000001或#FFFFFE，顏色差異不明顯，這將幫助您避免任何意外。
Gmail 和深色模式
就像通常的情況一樣，Gmail 在如何處理我們的深色模式電子郵件方面常常會出現一些問題，這僅僅是因為 Gmail 的版本太多，從 iOS 到 Android，再到常規的舊版 Gmail，都固定了一個解決方案可能相當困難。在 Gmail 上以深色模式預覽廣告活動可以幫助您了解如何為這些訂閱者打造最佳體驗。
如果您在 iOS 深色模式下使用 Gmail 遇到困難，您可以嘗試Rémi Parmentier提出的這個極其聰明的解決方案，利用混合（ Gmail 中支援）來控制深色模式出現時電子郵件的外觀。
Outlook 和深色模式
啊，現在我們開始講了，房間裡的大象；前景。一個重要問題是 Outlook 如何處理顏色反轉。在深色模式下，背景變暗，文字變亮，Outlook 可能難以準確反轉顏色，從而導致意外的、有時是不良的結果。這可能會導致可讀性差、視覺不一致以及整體不太理想的使用者體驗。
此外，Outlook 的暗模式實作可能不完全符合標準開發實踐，為電子郵件開發人員帶來了怪癖和挑戰。這些問題的範圍從背景圖像的渲染到某些樣式的處理，因此電子郵件設計者必須採用特定的策略來確保他們的電子郵件在 Outlook 的深色模式下看起來像預期的那樣。
如果您在 Outlook 中難以閱讀文本，Nicole Merlin 有一個關於處理 Outlook 深色模式中字體顏色的精彩指南，包括
暗模式電子郵件的照明解決方案
現在我們已經概述了所面臨的挑戰，讓我們深入探討一些策略，以幫助您駕馭黑暗模式電子郵件設計的黑暗水域：
為深色模式做好準備：元標籤和 CSS
建立適合深色模式的電子郵件的第一步是告訴電子郵件客戶您的電子郵件支援淺色和深色模式。您可以透過將特定元標記新增至電子郵件的 <head> 部分來實現此目的：
這些元標籤本質上是說，“嘿，電子郵件 電子郵件培養活動最佳實務：可轉換的電子郵件行銷活動 客戶端！這封電子郵件設計為在淺色和深色模式下工作。”
為了補充這些元標記，您還應該在 CSS 中包含以下內容：
此 CSS 強化了您的電子郵件支援兩種配色方案的訊息。
偵測並適應暗模式：媒體查詢
做好準備後，您可以使用 CSS 媒體查詢來偵測深色模式何時處於活動狀態並相應地調整您的樣式。這是一個例子：
此媒體查詢顯示：“如果啟用了深色模式，請改用這些顏色。”它是一個功能強大的工具，可讓您創建量身定制的暗模式體驗。
但是，需要注意的是，並非所有電子郵件用戶端都支援此功能。它在支援媒體查詢的電子郵件用戶端（例如 Apple Mail 和 Outlook for Mac）中非常有效。但某些用戶端（例如 Gmail）不支援此功能，因此您需要有後備選項。
讓您的標誌在深色模式下可見：圖像交換技術
您的商標是您品牌形象的重要組成部分。因此，確保它在淺色和深色模式下都可見至關重要。以下是一些策略：
- 使用透明 PNG：這可以很好地工作，但要小心深色文字或元素在深色背景下消失。
- 添加淺色輪廓或發光：這可以幫助您的徽標在兩種模式下脫穎而出，但請確保它不會影響徽標在淺色模式下的外觀。
- 創建徽標的深色模式版本：這通常是最好的解決方案。您可以使用影像交換技術來根據模式顯示不同的版本。
如果我們想在深色和淺色模式下顯示不同的徽標，程式碼可能如下所示：
CSS：
超文本標記語言
此程式碼告訴電子郵件用戶端在深色模 台灣數據 式處於活動狀態時使用深色模式徽標，在未啟動時使用淺色模式徽標。您可以對電子郵件設計中的其他重要圖形使用相同的技術。
當然，還有更簡單的解決方案，例如發光或輪廓技巧。
以下是 Sinch Email on Acid 標誌在深色模式下的顯示方式，並用白色筆畫勾勒出文字輪廓並填充空白（注意：圖形設計師通常討厭這種技術）：
優化暗模式電子郵件的影像
圖像在許多電子郵件行銷活動中發揮著至關重要的作用，但在黑暗模式下處理它們可能很棘手。以下是一些提示，其中許多與處理暗模式徽標類似：
- 使用透明背景：這使您的影像能夠與淺色和深色背景無縫融合。否則，在深色模式下，影像周圍可能會出現難看的白色背景。
- 添加微妙的輪廓：對於可能在深色背景上丟失的圖像，請考慮添加淺色輪廓。
- 建立深色模式版本：對於關鍵圖像，您可能需要建立特定於深色模式的版本並使用我們為徽標討論的圖像交換技術。
確保深色模式電子郵件的可訪問性
電子郵件可訪問性應該始終是您設計選擇的優先事項，而深色模式增加了一個額外的考慮層：
- 檢查對比：使用工具確保您的文字符合 WCAG 明暗模式對比準則。
- 使用足夠的字體大小：較小的文字在深色模式下可能難以閱讀，因此最好使用更大、更清晰的字體。
- 不要僅僅依賴顏色：使用其他視覺提示（如圖標或下劃線）來傳達訊息，而不僅僅是顏色差異。
- 使用螢幕閱讀器進行測試：確保您的暗模式最佳化不會幹擾螢幕閱讀器功能。
跨不同電子郵件用戶端處理暗模式
鑑於各個電子郵件用戶端的暗模式實施不一致，制定策略至關重要：
- 設計遵循最低公分母：確保您的電子郵件在不支援深色模式或高級 CSS 的用戶端中看起來不錯。
- 使用漸進增強：為支援暗模式的用戶端進行分層最佳化。
- 廣泛測試：使用 Acid 上的 Sinch Email 等工具跨不同用戶端和模式預覽電子郵件。
- 有後備選項：對於對您的訊息至關重要的元素，請考慮提供適用於所有場景的替代方案。
暗模式電子郵件設計的最佳實踐
現在我們已經介紹了技術方面，讓我們來看看設計暗模式電子郵件的一些整體最佳實踐：
- 從深色模式開始：不要將深色模式視為事後的想法。從設計過程一開始就考慮它。如果您有電子郵件設計系統，深色模式應該是其中的一部分。
- 使用深色模式調色板：開發一組在深色模式下效果良好並與您的品牌保持一致的顏色。
- 避免純黑色背景：深灰色通常比純黑色更容易傷害眼睛。
- 小心陰影：在淺色模式下看起來很棒的陰影在深色模式下可能會消失。
- 測試、測試、測試：始終在各種用戶端和裝置上以淺色和深色模式預覽電子郵件。
測試：暗模式電子郵件成功的關鍵
這就是我們戴上解決問題帽子的地方。在不同的客戶端上以深色模式測試您的電子郵件至關重要。這就是 Sinch Email on Acid 派上用場的地方。我們的電子郵件品質保證平台可讓您在各種用戶端和裝置上以暗模式測試和預覽電子郵件，協助您在訂閱者收到渲染問題之前發現它們。
透過 Acid 上的 Sinch Email，您可以：
- 在淺色和深色模式下預覽電子郵件
- 跨多個電子郵件用戶端和裝置進行測試
- 快速識別並修復渲染問題
- 確保您的電子郵件適合所有訂閱者，無論他們的模式偏好為何
另外，追蹤深色模式電子郵件在我們的分析中打開，這樣您就可以確切地了解為什麼優化深色和淺色模式值得付出努力。
不要害怕黑暗（模式）
電子郵件中的深色模式並不一定令人頭痛。借助這些技巧、技術和測試策略，無論您的訂閱者喜歡光明面還是黑暗面，您都可以創建看起來很棒的電子郵件。
請記住，掌握暗模式電子郵件的關鍵是徹底的測試和願意調整您的設計流程。透過從一開始就考慮深色模式、使用正確的工具和技術並進行徹底測試，您可以確保您的電子郵件在任何環境下都能閃閃發光。
所以，繼續吧，電子郵件專家！迎接黑暗模式的挑戰，創建無論如何查看都看起來很棒的電子郵件。如有疑問，請使用 Acid 上的 Sinch Email 進行測試。您的訂閱者（以及您內心的平靜）會感謝您。
更多深色模式電子郵件資源
深色模式是電子郵件開發人員每天都在解決的一個不斷發展的問題，並且不斷出現新的、令人興奮的解決方案。我們不可能僅在一篇文章中涵蓋有關黑暗模式的所有內容，因此我們有大量其他資源可供選擇。