優秀的郵件設計並不是要花俏,而是讓您的訊息易於理解和採取行動。本綜合指南涵蓋郵件設計原則、技術考量和實用技巧,幫助您創建能吸引訂閱者並產生效果的郵件。
為什麼郵件設計很重要
設計顯著影響郵件性能。
設計與性能的關聯
第一印象:訂閱者在幾秒鐘內就會評判您的郵件。糟糕的設計意味著立即刪除。
可讀性:良好的設計引導讀者理解您的訊息。糟糕的設計製造混亂。
信任度:專業的設計傳遞合法性信號。馬虎的設計觸發垃圾郵件疑慮。
行動:有效的設計將視線引導至 CTA。糟糕的設計將它們掩埋。
設計對指標的影響
打開率:預覽文本和預標題設計影響打開率。
閱讀率:佈局和排版決定人們是閱讀還是略讀。
點擊率:CTA 設計和位置驅動點擊。
轉化率:連貫的設計建立支持轉化的信任。
郵件設計基礎
適用於每封郵件的核心原則。
視覺層次
視覺層次按重要性順序引導讀者瀏覽您的郵件。
創建層次:
大小:更大的元素首先吸引注意力。標題應比正文大。
顏色:粗體或對比色突出顯示。策略性地用於重要元素。
位置:頂部和中心位置首先被看到。將優先內容放在那裡。
留白:元素周圍的空白空間使它們突出。
對比:元素與背景之間的高對比度提高可見性。
層次示例:
- Logo/標題(品牌識別)
- 標題(主要訊息)
- 輔助圖片(視覺興趣)
- 正文(詳情)
- CTA 按鈕(行動)
- 頁腳(法律/退訂)
F 模式和 Z 模式
眼動追蹤研究揭示人們如何掃描郵件。
F 模式(文本密集型郵件):
- 眼睛水平掃描頂部
- 然後向下移動並掃描較短的水平線
- 最後沿左側垂直掃描
- 將關鍵訊息放在這些線上
Z 模式(視覺型郵件):
- 眼睛從左上角開始
- 水平移動到右上角
- 對角線到左下角
- 水平到右下角
- 將 CTA 放在 Z 的右下角
單欄 vs. 多欄
佈局結構影響可讀性和移動端體驗。
單欄佈局:
- 最適合移動端(大多數郵件打開)
- 更易閱讀
- 清晰的視覺路徑
- 更簡單的設計和編碼
- 推薦用於大多數郵件
多欄佈局:
- 可以顯示更多內容
- 適合有多個故事的新聞通訊
- 需要響應式設計
- 編碼更複雜
- 移動端可能雜亂
最佳實踐:從單欄開始。只有當內容真正需要且您能正確執行響應式設計時才使用多欄。
留白
空白空間是設計元素,而非浪費空間。
留白的好處:
- 提高可讀性
- 創造視覺呼吸空間
- 將注意力引導至關鍵元素
- 使郵件感覺不那麼壓抑
- 提升感知品質
在哪裡添加留白:
- 標題周圍
- 各部分之間
- CTA 周圍
- 邊距和填充
- 文本和圖片之間
郵件中的排版
文本樣式影響可讀性和品牌認知。
字體選擇
網絡安全字體(到處渲染):
- Arial, Helvetica (sans-serif)
- Georgia, Times New Roman (serif)
- Verdana, Tahoma (sans-serif)
- Courier New (monospace)
網絡字體(可能無法渲染):
- Google Fonts, 自定義字體
- 需要備用字體
- 並非所有郵件客戶端都支持
- 使用 @font-face 和備用字體
字體建議:
- 標題:更粗、更大的字體 (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
- 更複雜的結構
交易模板:
- 乾淨、簡單的佈局
- 關鍵訊息突出
- 清晰的下一步
- 最少營銷
- 專注的結構
創建可重用模板
好處:
- 一致的品牌
- 更快的製作
- 更少的錯誤
- 更容易測試
- 可擴展的流程
標準化的模板元素:
- 頁首/頁腳設計
- 調色盤
- 排版
- 按鈕樣式
- 間距系統
深色模式考慮
許多用戶在深色模式下查看郵件。
深色模式如何工作
兩種類型:
- 完全顏色反轉:亮變暗,暗變亮
- 部分反轉:僅改變淺色背景
郵件客戶端差異:不同客戶端處理深色模式的方式不同。沒有單一方法適用於所有地方。
深色模式設計技巧
在深色模式下測試:在淺色和深色模式下預覽郵件。
透明背景:如果 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。