新手上路！EDM 設計入門教學：快速製作出第一封電子報

製作電子報的工具

在介紹基礎概念之前，其實選對工具非常重要，好的電子報工具會幫你把各種細節都把關好，如果你沒有設計的經驗，公司也沒有工程師能夠客製化寫 Email 模板，可以利用電子豹內建的拖放式工具直接進行操作，參考這篇：如何使用拖放式編輯器設計內容？

若想使用其他的 Email 模板可以參考這一篇：找不到適合的模板嗎？利用這 3 款編輯器，輕鬆做出電子報，或是選擇有提供模板工具的 EDM 寄送廠商。

電子報設計元素

一般 EDM 最基礎的組成是信頭+ 內容 + 信尾，為了重複使用，標題和信尾中的元素最好有通用性，也可以讓收件者更容易辨識。

• 信頭：供收件者辨識寄件者身份，讓收件者一眼就看的出是誰寄的電子報。你可以放上公司的 logo 或是主題名稱。
• 標題、內容、按鈕：信件的主要大標題與內容，如果是要引導點擊，會需要包含 Call To Action 按鈕，讓收件者到購買頁面或是提供更多資訊的網頁。
• 信尾：在信尾提供的資訊通常會是相對次要，但「取消訂閱」是必要加入的連結。其他資訊例如：公司資訊、網站連結、聯絡方式等等。
  此外，其他選擇性內容，也適合放在信尾，如：收到電子報的原因、版權聲明、隱私權聲明。

延伸閱讀：4 個 call to action 測試，協助你提升電子報點擊率

設計出符合活動主題的圖片

電子報設計的技巧，以規劃配色、重點圖片最能輕鬆吸引讀者，其他的部分盡量保持簡潔。

配色建議訂定與品牌相關的色系，或是以行銷活動主題相關的顏色來發想。圖片可以善用免費的素材、設計工具，來製作吸引人的區塊，並且善用左右圖文排版、雙欄、三欄設計，製造版面的豐富性。

延伸閱讀：設計師愛用的五個免費圖庫 + 設計工具

Email 內圖片和文字互相搭配

傳統的 Email 設計通常會是一張大圖，或是好幾張圖片加上連結拼接而成。然而，比起都是圖片組成的電子報，收件端更偏好由大量文字組成的電子報內容。

因此，在設計時需要避免將文字內容都壓在圖片裡，而是應該儘可能的以文字編寫電子報，並只在必要時使用圖片，而這樣也可以確保你的信件在手機上有良好的閱讀體驗：如果文字都在圖片裡，會造成手機版文字太小、根本無法閱讀，更嚴重的狀況是，若第一次收到的使用者沒有點選「顯示圖片」按鈕，他就只會看到一封空白的郵件，會直接影響你的抱怨、取消訂閱數。

由於業界針對圖片佔比並沒有一個固定的說法，因此為了不讓圖片佔比太高，豹編覺得 20% 是一個不錯的參考值。( Facebook 廣告圖片建議的文字比例是 20% )

那麼，要怎麼開需求給設計？建議是寬 800px 以內的 jpg 檔，72dpi（儲存成網頁用）並且檔案大小不要超過 200KB，郵件的載入速度也會影響整體的體驗 。

利用響應式設計 EDM、或是以手機為中心思考的出發點

響應式設計 (Responsive Email Design) 是指郵件能夠同時在電腦、手機、平板等不同的載具上有良好的閱讀體驗。

例如：在電腦上看是雙欄位設計，在手機顯示的是一欄式設計，讓文字與按鈕不至於太小看不到。因此上一段提到的圖文分開製作就很重要。

寄出信件前進行測試

製作完後，最好針對主流收件裝置進行測試，包括手機版收件軟體、網頁版 Gmail、桌機版 Outlook 等等。如果你使用的是拖放式編輯器，供應商基本上會幫你確認好各種載具相容性的問題，這時你只要專心檢查：

1. 文字內容、圖片是否正確
2. 連結是否正確
3. 圖片的 alt 有沒有都放上去

測試深色模式

現在手機、電腦很多人開始使用深色模設定，這會讓你的 Email 相同的載具、不同的設定底下呈現不一樣的狀況，有關於深色模式如何因應？可以參考：如何優化 Email 在深色模式（dark mode）的設計呈現？

多蒐集他人的電子報案例

如果有在下 Facebook 廣告或 Adwords 廣告的話，你可能知道觀察他人的廣告是靈感來源的一部份。對於電子報來說，這也同樣適用。

訂閱競品的電子報，能協助你短期內累積可參考的電子報內容。

Really Good Emails 提供許多國外的 Email 設計版型參考。

開始優化

在版型設計妥當，也準備好素材之後，就可以開始準備優化電子報內容了。該從什麼地方開始下手？包括主旨、Call to action 都是很好的對象。

---