跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

預覽和優化您的電子郵件設計在深色模式下出現的方式

上次更新時間: 六月 28, 2023

可与下列任何一种订阅一起使用,除非有说明:

行銷 Hub   Professional , Enterprise
舊版 Marketing Hub Basic

許多電子郵件客戶端都有深色模式設定,這可能會導致與啟用更明亮外觀的客戶端的市場推廣電子郵件顯示方式不一致。

preview-email-in-dark-mode

預覽電子郵件在特定客戶端深色模式下的外觀

若要查看聯絡人在瀏覽器或啟用暗模式的客戶端中開啟電郵時的外觀:

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「行銷郵件」。
  • 按一下現有草稿電郵的名稱。
  • 在電郵編輯器的右上角,按一下[操作]下拉式選單,然後按一下[預覽]。
  • 在預覽畫面頂部,按一下客戶。
  • 在「黑暗」模式下,選擇您要預覽的任何客戶端旁邊的復選框。

select-dark-mode-clients-to-preview-2

  • 在右上角,點擊「馬上測試我的電子郵件」。

設計暗模式電子郵件時的最佳做法

當您預覽不同暗模式客戶的電子郵件時,請記住每個客戶可能會以不同的方式呈現您的電子郵件。 例如,如果你的聯絡人使用Apple Mail開啟電子郵件,那麼他們是否啟用了深色模式,都會顯示出完全相同的狀態。 相反,如果聯絡人在Gmail或Outlook on Windows等應用程式中啟用了深色模式,您可能會發現電子郵件風格有更嚴重的差異,例如反向背景色彩。

若要確認您的電子郵件風格在客戶之間是一致的,請查看以下提示。

使用將會在明暗背景上清楚顯示的圖片

在上傳影像之前將影像轉換成PNG檔案,並將影像新增到電子郵件中,這有助於確保影像在電子郵件客戶端中渲染,在暗色模式下自動反轉電子郵件的背景色。 如果您的影像中有文字(如標誌) ,您也可以在文字周圍新增半透明的輪廓,使其脫穎而出。

選擇網路可見顏色

無論收件人使用哪個電子郵件客戶,設計您的電子郵件內容都很重要。 遵守無障礙標準(例如檢查文字的色彩對比度)也會協助您的電子郵件在深色模式下正確顯示。 在HubSpot網誌上進一步瞭解網頁可瀏覽的顏色

在iOS中爲暗模式樣式指定媒體查詢

幾個電子郵件客戶端(包括Apple Mail和Outlook.com )提供有限的支援,可透過媒體查詢偵測和添加自訂造型。 如果你使用更新的經典電郵編輯器,並有開發人員資源來變更你的電郵CSS ,你可以新增媒體查詢與偏好顏色方案 媒體功能,以設定影像和文字在深色模式和淺色模式下的外觀 

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助