郵件設計最佳實踐:打造能被打開、閱讀和點擊的郵件

字體建議:

• 標題:更粗、更大的字體 (24-32px)
• 正文:乾淨、可讀的字體 (14-16px)
• 最多限制為 2 個字體系列
• 確保指定備用字體

字體大小

推薦大小:

• 標題: 22-32px
• 副標題: 18-22px
• 正文: 14-16px
• 小字: 12-14px (最小可讀)
• CTA: 14-18px

移動端考慮:

• 移動端正文最小 14px
• 連結的更大觸摸目標
• 在實際設備上測試可讀性

行長度和間距

最佳行長度:每行 50-75 個字符。太寬 = 難以追蹤;太窄 = 閱讀不連貫。

行高: 字體大小的 1.4-1.6 倍。顯著提高可讀性。

段落間距:在段落之間添加空間。密集的文本區塊讓人感覺壓抑。

文本樣式

謹慎使用:

• 粗體用於強調(不要過度使用)
• 斜體用於引用或微妙強調
• 大寫僅用於非常短的短語
• 底線保留給連結

避免:

• 正文中的多種顏色
• 過度加粗
• 全大寫段落
• 正文使用花俏或裝飾字體

郵件設計中的顏色

戰略性使用顏色可改善美觀和功能。

色彩心理學

藍色:信任、可靠性、專業性 綠色:成長、健康、成功、金錢 紅色:緊迫性、興奮、激情 橙色:活力、熱情、溫暖 紫色:創造力、奢華、智慧 黃色:樂觀、注意力、警告

構建調色盤

主色:您的主要品牌顏色。用於關鍵元素。

輔助色:互補色用於多樣性。

強調色:高對比度顏色用於 CTA 和重要元素。

中性色:灰色和白色用於背景和文本。

限制顏色:2-3 種主要顏色加中性色。太多顏色造成混亂。

顏色對比

可訪問性要求:文本與背景之間必須有足夠對比度。

WCAG 指南:

• 普通文本: 最小 4.5:1 對比度
• 大文本: 最小 3:1 對比度
• 使用對比度檢查工具

常見錯誤:

• 白色上的淺灰色文本(難以閱讀)
• 深色背景上的深色文本
• 彩色背景上的彩色文本
• 低對比度 CTA 按鈕

品牌一致性

匹配您的品牌:郵件顏色應與您的網站和品牌指南保持一致。

識別度:一致的顏色幫助訂閱者立即識別您的郵件。

專業外觀:連貫的配色方案看起來更精緻。

郵件中的圖片

圖片增強郵件,但需要小心處理。

圖片最佳實踐

檔案大小:每張圖片保持在 200KB 以下。大圖片載入緩慢且可能被阻止。

格式選擇:

• JPEG: 照片、複雜圖像
• PNG: 圖形、logo、需要透明度
• GIF: 簡單動畫、有限顏色
• SVG: 郵件中不廣泛支持

尺寸:

• 寬度: 全寬最大 600px
• 視網膜螢幕: 考慮 2x 解析度以清晰顯示
• 響應式: 使用百分比寬度

Alt 文本

當圖片無法載入時顯示 Alt 文本(在郵件中很常見)。

編寫有效的 Alt 文本:

• 描述圖片內容
• 包含圖片中的關鍵訊息
• 保持在 100 個字符以下
• 沒有圖片也要有意義
• 如果圖片可點擊,包含 CTA 文本

示例:

• 好:"50% 折扣促銷 - 立即購買按鈕"
• 差:"image1.jpg"
• 差:"" (空)

圖文比例

為什麼重要:圖片密集的郵件可能觸發垃圾郵件過濾器,並在圖片被阻止時失效。

建議:

• 目標 60% 文本, 40% 圖片
• 永遠不要發送純圖片郵件
• 確保沒有圖片時訊息清晰
• 在 HTML 中包含關鍵文本,而不僅僅是圖片

背景圖片

謹慎使用:

• 並非所有郵件客戶端都支持
• Outlook 支持有限
• 始終有備用背景色
• 使用 VML 以兼容 Outlook

CTA 按鈕設計

CTA 是最重要的設計元素。

按鈕基礎

大小:足夠大以便輕鬆點擊(最小 44x44px 觸摸目標)。

顏色:高對比度,從周圍環境中突出。

形狀:矩形加略微圓角通常表現良好。

文本:面向行動、具體、適當時使用第一人稱。

按鈕最佳實踐

可見性:

• 位置突出
• 周圍有留白
• 使用對比色
• 不要埋在折疊下方

設計元素:

• 陰影增加深度
• 邊框定義邊緣
• 填充提供呼吸空間
• 圖標可增加視覺興趣

移動端友好:

• 移動端全寬
• 大觸摸目標
• 與其他可點擊元素間隔

防彈按鈕

在任何地方都能工作的 HTML 按鈕,包括 Outlook。

技巧:使用在所有客戶端中都能呈現為按鈕的 HTML/CSS,為 Outlook 提供 VML 備用。

好處:

• 在所有客戶端中看起來像按鈕
• 即使圖片關閉也可點擊
• 外觀一致
• 比圖片按鈕更可靠

移動優先的郵件設計

超過 40% 的郵件在移動設備上打開。

移動設計原則

單欄:多欄佈局在小螢幕上會崩潰。

大文本:最小 14px 正文,更大的標題。

觸摸友好:按鈕和連結至少 44x44px 並帶間距。

可掃描:短段落,清晰層次。

快速載入:優化圖片,最小化代碼。

響應式 vs. 可縮放

響應式設計:使用媒體查詢根據螢幕大小改變佈局。

可縮放設計:無需媒體查詢即可跨尺寸工作的單一設計。

混合:廣泛兼容性的組合方法。

建議:從移動優先的可縮放單欄設計開始,在支持的地方添加響應式增強。

在移動端測試

必須測試:

• 實際設備(不僅僅是模擬器)
• 多種螢幕尺寸
• 縱向和橫向
• 圖片開啟和關閉
• 不同的郵件應用

郵件結構和模板

一致的結構提高識別度和效率。

標準郵件結構

預標題:顯示在收件箱預覽中的隱藏文本。

標題:Logo, 導航連結(可選)。

主視覺區:主要視覺/標題區域。

正文:主要內容。

CTA:主要行動號召。

次要內容:附加優惠、連結(可選)。

頁腳:退訂、地址、社交連結。

模板類型

促銷模板:

• 強烈的主視覺圖片
• 清晰的優惠標題
• 輔助文案
• 突出的 CTA
• 簡單結構

新聞通訊模板:

• 多個內容部分
• 目錄(可選)
• 清晰的部分劃分
• 多個 CTA
• 更複雜的結構

交易模板:

• 乾淨、簡單的佈局
• 關鍵訊息突出
• 清晰的下一步
• 最少營銷
• 專注的結構

創建可重用模板

好處:

• 一致的品牌
• 更快的製作
• 更少的錯誤
• 更容易測試
• 可擴展的流程

標準化的模板元素:

• 頁首/頁腳設計
• 調色盤
• 排版
• 按鈕樣式
• 間距系統

深色模式考慮

許多用戶在深色模式下查看郵件。

深色模式如何工作

兩種類型:

1. 完全顏色反轉:亮變暗,暗變亮
2. 部分反轉:僅改變淺色背景

郵件客戶端差異:不同客戶端處理深色模式的方式不同。沒有單一方法適用於所有地方。

深色模式設計技巧

在深色模式下測試:在淺色和深色模式下預覽郵件。

透明背景:如果 logo 在深色背景上看起來不好,請避免。

Logo 版本:提供在淺色和深色背景上都能工作的 logo。

顏色選擇:確保顏色在兩種模式下都可見和可讀。

避免純黑/白:略微偏離黑色和白色在兩種模式下都更溫和。

邊框圖片:為與白色背景融合的圖片添加微妙邊框。

郵件設計中的可訪問性

讓每個人都能使用郵件。

可訪問性基礎

顏色對比:文本可讀性的足夠對比度。

字體大小:最小可讀大小 (14px 正文)。

Alt 文本:所有圖片的描述性文本。

語義結構:正確的 HTML 層次結構。

連結文本:描述性連結文本(不是"點擊這裡")。

螢幕閱讀器考慮

閱讀順序:線性閱讀時內容應有意義。

表格結構:謹慎使用表格佈局;添加 role="presentation"。

標題層次:使用正確的 h1, h2, h3 結構。

跳過連結:允許跳轉到主要內容。

動畫和動效

減少動效:一些用戶對動畫敏感。

GIF 考慮:限制動畫循環,避免閃爍。

基本內容:不要僅在動畫中放置關鍵訊息。

郵件客戶端兼容性

不同的郵件客戶端渲染 HTML 的方式不同。

主要郵件客戶端

桌面端:

• Outlook (渲染最具挑戰性)
• Apple Mail (良好的現代支持)
• Thunderbird (良好支持)

網頁郵箱:

• Gmail (剝離一些 CSS)
• Yahoo Mail (各異)
• Outlook.com (改進中)

移動端:

• iOS Mail (出色支持)
• Gmail App (因版本而異)
• Samsung Mail (良好支持)

常見渲染問題

Outlook 挑戰:

• 不支持 CSS 背景圖片
• 有限的 CSS 支持
• 不同的渲染引擎
• 某些功能需要 VML

Gmail 挑戰:

• 剝離 <style> 區塊(使用內聯 CSS)
• 移除帶數字的類
• 有限的 CSS 支持

兼容性編碼

內聯 CSS:最可靠的方法。

表格佈局:對於 Outlook 仍然必要。

網絡安全字體:使用備用字體。

廣泛測試:使用郵件測試工具。

測試和質量保證

永遠不要不經測試就發送。

測試清單

內容:

• [ ] 拼寫和語法
• [ ] 連結正常工作
• [ ] 個性化渲染
• [ ] 日期和詳情準確

設計:

• [ ] 圖片正常載入
• [ ] Alt 文本到位
• [ ] 顏色正確
• [ ] 字體正確渲染
• [ ] 移動端佈局工作

技術:

• [ ] 連結正確追蹤
• [ ] 退訂工作
• [ ] 在瀏覽器中查看工作
• [ ] 預標題正確顯示

測試工具

郵件預覽服務: Litmus, Email on Acid

• 跨郵件客戶端預覽
• 捕捉渲染問題
• 檢查垃圾郵件分數
• 可訪問性檢查

手動測試:

• 發送測試郵件給自己
• 在多個設備上查看
• 檢查不同的郵件客戶端
• 停用圖片測試

常見設計錯誤

避免這些常見錯誤。

錯誤 1: 純圖片郵件

問題:圖片被阻止時什麼都不顯示。 修復:平衡圖片與 HTML 文本。

錯誤 2: 微小文本

問題:在移動端不可讀。 修復:最小 14px 正文。

錯誤 3: 埋藏的 CTA

問題:用戶找不到操作。 修復:突出位置加對比度。

錯誤 4: 無移動端考慮

問題:手機上佈局崩潰。 修復:移動優先設計方法。

錯誤 5: 缺少 Alt 文本

問題:圖片未載入時沒有上下文。 修復:所有圖片的描述性 alt 文本。

錯誤 6: 對比度差

問題:文本難以閱讀。 修復:滿足 WCAG 對比度要求。

設計與可送達性

設計選擇可能影響收件箱位置。

垃圾郵件過濾器考慮

圖片密集的郵件:可能觸發垃圾郵件過濾器。

損壞的 HTML:可能發出垃圾郵件信號。

缺少文本:純圖片郵件看起來可疑。

過多連結:太多連結引發警報。

乾淨的設計,乾淨的代碼

專業外觀:垃圾郵件過濾器從用戶行為中學習。設計良好的郵件收到的投訴更少。

乾淨的 HTML:驗證代碼,避免錯誤。

正確結構:遵循郵件 HTML 最佳實踐。

列表品質關聯

即使完美的設計,如果郵件無法到達收件箱也會失敗。驗證您的列表以確保您精心設計的郵件到達真實訂閱者。

快速參考

設計清單

佈局:

• [ ] 單欄(或正確響應式)
• [ ] 清晰的視覺層次
• [ ] 充足的留白
• [ ] 移動端友好結構

排版:

• [ ] 可讀的字體大小 (14px+ 正文)
• [ ] 適當的行高
• [ ] 有限的字體系列
• [ ] 足夠的對比度

圖片:

• [ ] 優化的檔案大小
• [ ] 描述性 alt 文本
• [ ] 良好的文本與圖片比例
• [ ] 圖片關閉時工作

CTA:

• [ ] 突出位置
• [ ] 高對比度
• [ ] 觸摸友好大小
• [ ] 清晰的操作文本

測試:

• [ ] 多個郵件客戶端
• [ ] 移動設備
• [ ] 深色模式
• [ ] 圖片停用

結論

優秀的郵件設計服務於您的訊息和訂閱者。通過遵循視覺層次原則、針對移動端優化、確保可訪問性和全面測試,您可以創建人們想要閱讀和採取行動的郵件。

記住這些關鍵原則:

• 移動優先:首先為最小螢幕設計
• 簡單獲勝:清晰勝過聰明
• 層次重要:引導視線到重要內容
• 測試一切:在設計中看起來不錯的可能在郵件客戶端中崩潰
• 包含可訪問性:為所有用戶設計

永遠無法到達收件箱的精美郵件不會產生結果。將優秀設計與驗證過的郵件列表相結合以實現最大影響。

準備好確保您精心設計的郵件到達真實訂閱者了嗎?從 BillionVerify 開始驗證您的列表並最大化您的郵件設計工作的 ROI。

使用 Instantly 或 Smartlead 的團隊，在每次活動前透過 BillionVerify 清洗名單，可顯著提升送達率。

在選擇驗證服務商之前，比較 BillionVerify 與 ZeroBounce 在準確率和速度方面的差異。