電子郵件內容的深色模式 dark-mode
深色模式可讓支援的電子郵件使用者端或應用程式針對文字、按鈕和其他視覺元素，顯示背景較暗且色彩較淺的電子郵件。 這種顯示器可減輕眼睛疲勞、節省電池壽命，並改善低光環境的可讀性，提供更舒適的觀賞體驗。 隨著主要作業系統和應用程式呈上升趨勢，這是現代電子郵件設計的重要考量，能確保內容清晰易懂，而且視覺上吸引所有使用者。
當您在Journey Optimizer B2B Edition視覺化設計空間中建立您的電子郵件內容時，您可以切換至 深色模式 檢視。 在此檢視中，您也可以定義特定的自訂設定，以便在啟用電子郵件使用者端的深色模式時支援這些使用者端。
電子郵件使用者端注意事項
不同的電子郵件使用者端和應用程式套用深色模式的方式存在重大差異。 因此，您應謹慎考量對於深色模式演算的期望。 在電子郵件設計空間中使用深色模式之前，請考慮以下電子郵件使用者端使用案例：
有些電子郵件使用者端完全不支援此功能，例如：
- Yahoo! Mail
- AOL
如果您在電子郵件設計中定義深色模式自訂設定，這些電子郵件使用者端無法顯示任何深色模式呈現。
有些電子郵件使用者端會系統地將其本身的預設深色模式套用至所有收到的電子郵件。 它們會根據其深色模式設定和無法使用的外部設定，自動調整顏色、背景、影像和其他元素。 這些使用者端包括：
- Gmail （案頭網頁郵件、iOS、Android™、行動網頁郵件）
- Outlook Windows
- Outlook Windows Mail
在此情況下，使用者端深色模式設定會覆寫您在Journey Optimizer B2B Edition中定義的自訂深色模式設定
Many of the most popular email clients offer the option to render custom dark mode with the @media (prefers-color-scheme: dark) query, which is the method used by the Journey Optimizer B2B Edition email styles. This list of clients includes:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In this case, the specific settings you define in the Journey Optimizer B2B Edition are rendered. However, some restrictions could apply according to each email client. For example, some clients (such as Apple Mail 16 (macOS 13)) do not generate dark mode if images are present in the email content.
For optimal results, test your content with the email clients that you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Litmus email test rendering integration in the email design space.
Design for dark mode
As you style your email content for dark mode in Journey Optimizer B2B Edition, the visual design space provides two types of tools:
-
Use the preview function to review the default dark mode rendering for most supporting email clients.
-
If you want to override the default settings of supporting email clients, define and apply custom dark mode settings to your email content. 瞭解更多
預覽預設深色模式 preview-dark-mode
-
Open the email content in the email design space.
At the top right of the canvas, there is a light-dark selector that toggles the content display between light (default) and dark mode.
-
Change the selector to Dark mode (
The canvas displays the content using the default dark mode preview.x
By default, the dark mode preview applies the
full color invertcolor scheme to all elements except images and icons. 此色彩配置會偵測包含明暗元素的區域，並加以反轉。 淺色背景變成深色，深色文字變成淺色，或深色背景變成淺色，淺色文字變成深色。
定義自訂深色模式設定 custom-dark-mode
切換至深色模式後，您可以選擇編輯內容的特定樣式元素，這些元素僅在收件者的電子郵件使用者端中啟用深色模式（前提是它支援該功能）時才會顯示。
電子郵件設計空間中的自訂深色模式樣式使用 @media (prefers-color-scheme: dark) CSS查詢，可偵測電子郵件使用者端是否已設為深色模式，並套用電子郵件中定義的深色主題設計。
定義自訂深色模式設定:_(_T)
-
如有需要，請將選取器移至設計畫布右上角的深色模式 （
-
編輯任何樣式色彩屬性，例如文字、背景或按鈕。
-
針對影像和圖示，僅針對深色模式定義特定資產。
您無法變更影像和圖示的顏色，但可以定義用於深色模式的替代資產。 您可以嘗試圖示的不同顏色組合，或調整像片影像的顏色和飽和度。
在 設定 窗格中使用專用切換功能，選取任何影像並切換至深色模式。 然後，選取其他影像資產。
如需選取影像資產的詳細資訊，請參閱新增影像資產。
-
在設計變更期間，請隨時選取切換至即時檢視，以檢查您的內容在各種裝置大小上呈現的方式。
從這個檢視，將選擇器變更為深色模式 （
note caution CAUTION 即時檢視是通用的預覽，用來比較各種裝置大小下的轉譯效果。 最終呈現內容可能會因收件者的電子郵件使用者端而異。 -
當您的深色模式變更完成時，請按一下模擬內容。
使用預覽和校訂工具來測試您的電子郵件設計。 如需詳細資訊，請參閱預覽及測試您的電子郵件內容。
-
如果您有Litmus Enterprise帳戶，請選取轉譯電子郵件，檢視Litmus中各種電子郵件使用者端的最終深色模式轉譯。
如需詳細資訊，請參閱使用Litmus測試電子郵件轉譯。
note caution CAUTION 雖然模擬非常接近電子郵件在深色模式中的顯示方式，但由於電子郵件服務提供者或裝置層級設定的差異，實際呈現可能會有所不同。
最佳做法 best-practices
隨著主要電子郵件使用者端採用深色模式的人數增加，您必須考量您在淺色和深色環境中呈現電子郵件的方式，不論您是否使用自訂深色模式。
深色模式可以改變顏色、背景和影像 — 有時會覆寫設計選擇。 為確保視覺一致性、協助工具及品牌完整性，請遵循下列最佳實務：
檢查清單：
- 將圖志和圖示儲存為具有透明背景的PNG檔案，以避免在深色模式中看到白色方塊。
- 避免使用硬式編碼白色或淺色背景的影像。
- 如果無法使用透明度，請在設計中將影像置於純色背景上，以防止發生尷尬的顏色倒轉。
檢查清單：
- 確保文字和背景顏色之間有足夠的對比，以便在淺色和深色模式中都能閱讀。
- 避免僅依賴背景顏色處理重要內容。 有些使用者端會以深色模式覆寫背景顏色，因此請確定關鍵資訊仍然可見。
檢查清單：
- 使用顏色組合，可輕鬆區別色盲人士。
- 使用中間調調色盤，確保與淺色和深色背景的對比。
- 使用具有高對比度的無障礙色彩組合，以改善可讀性，並符合Web Content Accessibility Guidelines (WCAG)標準。 使用WebAIM Contrast Checker之類的工具來驗證色彩對比。
- 避免使用精簡字型，因為這會影響可讀性。 如果您的品牌需要細字型，請在深色模式中將其粗體。
- 略過純黑色的純白色，這可能會導致眼睛疲勞，而且在某些電子郵件使用者端中可能會自動反轉。
- 如果深色模式不受支援，請提供可存取的遞補樣式。