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

針對黑暗模式優化行銷電子郵件

上次更新時間: 2025年11月12日

可搭配下列任何訂閱使用,除非另有註明:

在電子郵件編輯器中,您可以在編輯時預覽行銷電子郵件在黑暗模式下的顯示方式,或針對特定的電子郵件用戶端產生預覽。這有助於確保在暗色模式下檢視您行銷電子郵件的收件者能如預期般檢視電子郵件。

在電子郵件編輯器中預覽暗色模式

若要在編輯時切換至暗黑模式預覽您的電子郵件:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  2. 按一下已起草電子郵件的名稱
  3. 在電子郵件編輯器中,點選頁面頂端的顯示選項 ,然後開啟黑暗模式預覽 開關。

Screenshot of the email editor. The "Display options" dropdown menu at the top of the page is highlighted, as is the "Dark mode preview" option.

在特定客戶端預覽黑暗模式

若要查看您的電子郵件在特定瀏覽器或電子郵件用戶端中開啟黑暗模式後的顯示效果:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  2. 按一下草擬的電子郵件名稱
  3. 在電子郵件編輯器中,按一下右上方的預覽和測試,然後選擇在電子郵件用戶端中預覽
  4. 在預覽畫面中,按一下左上方的Choose preview type (選擇預覽類型) 下拉式功能表,然後選擇每個預覽類型旁邊的核取方塊 。若要查看暗色模式的可用預覽類型,請在搜尋列中輸入「暗色」。

Screenshot of the screen for previewing emails in email clients. The "Choose preview type" dropdown menu is displayed, with "dark" entered in the search bar.

  1. 在右上方,按一下預覽

瞭解為暗色模式設計電子郵件的最佳作法

不同的電子郵件用戶端和瀏覽器可能會以不同的方式呈現暗色模式。在設計以暗色模式檢視的電子郵件時,請牢記下列建議:

  • 使用在淺色和深色背景上都能清晰顯示的圖片:將任何圖片轉換為 .png 格式,以確保它們在背景顏色倒轉的情況下也正確顯示。
  • 確保任何文字都有足夠的顏色對比: 遵守網頁內容可讀性指引,並確保文字與背景顏色之間有足夠的對比。
  • 為暗色模式新增媒體查詢:有些電子郵件用戶端使用媒體查詢為自訂樣式提供有限的支援。您可以使用prefers-color-scheme 媒體功能,設定圖片和文字在暗模式下的顯示方式。此選項只適用於在設計管理員中建立的電子郵件範本。
這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助