設計實務

電商 EDM 電子報版型設計指南｜開信率與點擊率雙提升

2026年8月8日・ViewInternet 編輯部

電子報不是縮小版的網頁

許多品牌把官網的視覺直接搬進 EDM，結果在收件匣裡慘不忍睹。電子郵件的渲染環境與瀏覽器完全不同，Outlook 使用的是 Word 排版引擎，Gmail 會擷取樣式，許多手機客戶端則會強制縮放。這代表你在網頁上熟悉的 Flexbox、Grid、外部樣式表在信件裡幾乎不能用，得回到表格式排版與行內樣式的老方法。理解這個底層限制，是做出穩定 EDM 版型的第一步。

實務上我們會把整封信控制在單欄結構，寬度鎖在六百到六百四十像素之間。單欄不只是為了相容性，更是為了閱讀節奏。收件人在手機上是用拇指快速滑動的，多欄排版會讓視線來回跳動，反而拉低理解速度。把資訊由上到下線性堆疊，一個區塊講一件事，讀者才能在三秒內抓到你想傳達的重點。

主旨行與預覽文字決定生死

再精美的版型，信沒被打開就等於零。開信率的關鍵不在信件內部，而在收件匣列表那一行主旨與預覽文字。主旨行建議控制在全形十五字以內，把最有價值的資訊前置，例如折扣幅度、截止時間或具體好處，不要把品牌名塞在最前面浪費黃金字元。預覽文字則是很多人忽略的隱藏欄位，如果不設定，客戶端會自動抓信件開頭的圖片替代文字或退訂連結，畫面會非常難看。

我們會刻意用一段隱藏的預覽文字去補充主旨行沒講完的誘因，形成一組互補的鉤子。舉例來說主旨講「夏季全館限時七折」，預覽文字就接「僅限本週末，會員再享免運」。兩行加起來構成一個完整的行動理由。這種主旨與預覽的搭配設計，往往比重做整份版型更能立即拉升開信表現。

視覺層級與按鈕的黃金比例

進到信件內部，版型設計的核心任務是引導視線走向那顆行動按鈕。我們習慣用倒金字塔的資訊結構，最上方是一張能承載情緒的主視覺與一句話標題，中段補上支撐理由與商品，下方收束到明確的行動呼籲。整封信最好只有一個主要行動目標，如果同時想推新品、清庫存又想導流門市，讀者反而會因為選擇太多而不點任何一個。

按鈕本身要做成可點擊的區塊而非純文字連結，並保留足夠的觸控範圍，高度建議至少四十四像素。顏色要與品牌主色形成對比，讓它在整封信裡是最跳的元素。同時務必為所有圖片設定替代文字，因為大量客戶端預設不顯示圖片，當主視覺變成一個破圖框時，替代文字與按鈕的文案就是唯一還能說服讀者的內容。這也是為什麼我們堅持關鍵訊息一定要用真文字而非壓在圖片裡。

深色模式與寄出前的檢查清單

深色模式已經是 EDM 設計躲不掉的課題。當收件人開啟深色介面，白底黑字的信件可能被反轉成難以辨識的樣子，透明去背的黑色 Logo 會直接消失在深色背景裡。我們的做法是替 Logo 加上淺色描邊或底色襯墊，並實際在深淺兩種模式下都測過一輪，確保無論哪種環境品牌識別都站得住。

寄出前的檢查清單同樣不能省。每一封信我們都會先發測試信到 Gmail、Outlook 與手機三種環境交叉比對，確認連結都有正確的追蹤參數，退訂連結清楚可見以符合法規，載入時間不會因為圖片太重而拖垮。這些看似瑣碎的步驟，累積起來就是開信率與點擊率的差距。如果你的品牌想把電子報變成穩定的營收渠道，而不只是偶爾發一封的通知，歡迎參考我們的電商官網與行銷素材設計服務，讓版型、視覺與轉換一次到位。