EDM 設計指南：電子報版面、圖片、配色、手機顯示與發送前檢查清單（香港・台灣）

重點摘要

電郵不是網頁：不同郵件軟件對 HTML 與 CSS 的支援差異很大，版面越簡單越穩定，單欄設計最不容易出錯。

不要把整封郵件做成一張大圖；重要訊息要以文字呈現，圖片要有替代文字（alt text），並以連結載入而不是作為附件。

配色以品牌色為主，文字與背景要有足夠對比；W3C 的無障礙指引建議一般文字的對比度至少 4.5:1。

部分郵件軟件的深色模式會自動改變顏色，標誌與圖片要在深色背景下測試。

按下發送前，逐項核對寄件者、主旨、連結、圖片、退訂與手機顯示，並寄給不同信箱測試。

一封電子報的內容再好，在收件人的手機上排版錯亂、圖片載入不到、按鈕按不下去，效果也會大打折扣。這篇整理 EDM 設計的要點：版面結構、圖片、配色與深色模式、手機與各郵件軟件的顯示差異，最後附上一份發送前檢查清單。

先明白：電郵不是網頁

網頁由瀏覽器顯示，各瀏覽器對標準的支援相當一致；電郵則由 Gmail、Outlook、Apple Mail 等郵件軟件顯示，它們各自決定支援哪些 HTML 與 CSS，出於安全考慮也會移除部分程式碼。同一封郵件，在不同郵件軟件、不同裝置上可能呈現得很不一樣。

所以 EDM 設計的第一原則是穩定比花巧重要：

單欄版面最穩定。多欄設計在窄螢幕上容易擠壓變形。
用區塊組合版面：頁首（標誌）、主視覺、內文、行動按鈕、頁尾（聯絡資料與退訂），每個區塊內的圖片與文字放在一起。
常見的版面寬度約 600 像素，在桌面與手機上都容易處理；這是業界常用做法，不是硬性規定。
留白。區塊之間保留足夠空間，比塞滿內容更容易閱讀。

使用 EDM 平台的拖放式編輯器與現成版型，通常已經處理好大部分相容性問題，比從零編寫 HTML 穩妥得多。

圖片的用法

不要把整封郵件做成一張大圖。 這是最常見的錯誤，問題有三個：

很多郵件軟件預設不載入圖片，收件人只看到一片空白；
過濾器無法讀取圖片裡的文字，只有圖片、幾乎沒有文字的郵件較容易被當成垃圾郵件，詳見《如何避免電郵／電子報被當成垃圾郵件？企業寄件完整指南（香港・台灣）》；
圖片裡的文字無法被複製、搜尋，視障人士的讀屏軟件也讀不到。

圖片的正確用法：

重要訊息用文字寫：優惠內容、日期、地址、價錢，不要只放在圖片裡。
每張圖片都加上替代文字（alt text）：圖片載入不到時，收件人仍能知道那裡原本是甚麼。
以連結方式載入圖片，不要把圖片作為附件夾在郵件裡；附件會增加郵件大小，也是惡意郵件常見的手法。
壓縮圖片。檔案太大會拖慢載入；高解像度螢幕可以使用約兩倍尺寸的圖片再縮小顯示，讓圖片保持清晰。
主視覺放在最上方，讓收件人打開後第一眼就看到重點。
按鈕用真正的 HTML 按鈕，不要用圖片做按鈕 — 圖片不載入時，按鈕就消失了。

配色

以品牌色為主，保持一致。 每次電子報都用同一套配色與版型，收件人會更快認出你。可以把標誌、主色與按鈕樣式儲存成範本，每次沿用。

文字與背景要有足夠對比。 淺灰字配白底，在手機上、在戶外陽光下都很難閱讀。W3C 的網頁無障礙指引（WCAG）建議，一般文字與背景的對比度至少為 4.5:1（W3C：Understanding Contrast (Minimum)），可以作為電郵設計的參考。

不要只用顏色傳達重要訊息。 例如只用紅色表示「已售罄」，色弱的收件人可能看不出來；加上文字說明更穩妥。

注意深色模式。 不少收件人在手機上開啟了深色模式，部分郵件軟件會自動調暗背景、調亮文字，令原本的配色改變。常見問題包括深色標誌在深色背景上消失、白底圖片變成刺眼的白色方塊。建議：

標誌準備透明背景的版本，並在深色背景下測試；
不要依賴背景顏色傳達訊息；
發送前在開啟深色模式的手機上看一次。

手機與不同郵件軟件的顯示

很多收件人用手機閱讀郵件，設計時要以手機為優先：

字體不要太小，內文在手機上要不用放大就能閱讀；
按鈕要大、好按，前後留有空間，避免誤按旁邊的連結；
重要內容放上方，收件人不一定會捲動到底；
響應式設計（在窄螢幕上自動調整排版）能改善手機閱讀體驗，但不是每個郵件軟件都完整支援，所以單欄設計仍是最保險的基礎；
提供網頁版連結，郵件顯示不正常時，收件人仍可在瀏覽器閱讀。

版面最終在收件人的郵件軟件裡怎樣呈現，只有實際測試才知道。至少用 Gmail（網頁與手機 App）、Outlook、Apple Mail 各看一次。

發送前檢查清單

按下發送前，逐項核對：

寄件與主旨

寄件者名稱與地址代表你的品牌，不是 noreply@
主旨清楚，沒有錯字；預覽文字已設定，沒有重複主旨（寫法見《EDM 電郵主旨怎麼寫？電子報標題、預覽文字與 A/B 測試完整指南（香港・台灣）》）
個人化欄位（例如收件人名字）空白時有替代文字

內容

開頭兩行已交代重點；只有一個主要行動（寫法見《EDM 文案怎麼寫？電子報內容寫作指南：ABC、AIDA 框架與 CTA 行動按鈕（香港・台灣）》）
日期、價錢、優惠條款、地址正確
文法與錯字已由另一位同事檢查

連結與圖片

每一條連結都點過，指向正確的網頁；追蹤參數正確
每張圖片都有替代文字；不載入圖片時，郵件仍然看得懂
圖片已壓縮，沒有作為附件

合規

有公司名稱與聯絡資料
有收件原因說明與退訂連結，退訂連結能正常運作
名單只包括同意接收的收件人，已排除退訂與退信地址

測試

已寄給 Gmail、Outlook、Apple Mail 等測試帳號，確認進入收件匣而不是垃圾郵件夾
已在手機上檢查排版、按鈕與深色模式
網頁版連結正常

常見問題

電子報應該多少圖片、多少文字？
沒有固定比例。原則是：不載入圖片時，收件人仍能從文字看懂重點與行動；圖片用來補充與吸引，而不是取代文字。

可以用 GIF 動畫嗎？
可以，但要控制檔案大小，並確保第一格畫面已經包含重點 — 部分郵件軟件只會顯示第一格。

用甚麼字型比較好？
大部分郵件軟件只能顯示收件人裝置上已安裝的字型，自訂網頁字型不一定能顯示。建議使用系統內建字型，並設定後備字型。

需要自己寫 HTML 嗎？
不一定。EDM 平台的拖放式編輯器與範本已處理大部分相容性問題；需要自訂時，也要在多個郵件軟件中實際測試。

UFOSEND 的 EDM 電郵推廣服務提供拖放式編輯器與電子報、促銷、活動通知等現成版型，品牌標誌、色調與按鈕樣式可儲存為企業範本，並可在發送前即時預覽桌面與手機版本。