給 UI/UX 產品設計師的 Email 設計攻略

在產品設計的過程中，Email 總是常常被忽略、很少被討論的一環，但在使用者體驗上，Email 的地位已經越來越重要，在產品設計初期需要規劃有哪些「必要」發送的信件（例如：註冊成功、忘記密碼、訂單成立等等）並在後期開始規劃如何透過 Email 優化體驗、公布訊息等等增加使用者黏著度。

對 Email 行銷有興趣的可以參考這篇：EDM 行銷為什麼還是這麼夯？，本篇著重於設計上要注意的事項，以及靈感參考。

開始設計 Email 之前先了解 Email 的種類

理解兩種 Email 的差異，能協助你快速規劃出符合需求的設計。

• 交易型郵件 (Transactional Emails)：發送給單一收件人信件。通常會根據收件者的操作而觸發，例如：發票中獎、註冊成功、訂單成立、歡迎信。
• 群發型郵件 (One-to-Many Emails)：相對於單一收件者，此類就是想要廣發訊息給一大群人。例如：商品促銷、會議出席通知、新功能發布。

這兩種郵件的目的性完全不一樣，群發型郵件通常會需要追蹤後續點擊率、轉換率，而交易型郵件主要是要快速到達、資訊清楚。

舉產品會發的 Email 為例：

• 訂單完成（交易型郵件）
• 新的功能發布、韌體更新（群發型郵件）
• 範例、教學（群發型郵件）
• 折扣（群發型郵件，有時候會依照使用情境為交易型郵件）

該用何種方式製作 Email？

就像網頁一樣，製作 Email 必須工程師寫 HTML 與 CSS 製作，但是純手刻製作 Email 看似簡單，實際上門檻更高，因為必須考量到不同的收件端（像是電腦版的 outlook 就好比瀏覽器屆的 IE 但是更難搞），只能夠寫最基本的 HTML/CSS，但是又要支援 RWD 手機版。所以在設計上會盡量以版型安全、並且考量到手機版來設計。

假如是產品的通知信件，建議還是自己製作，因為需要放變數、模版格式要統一，且版型比較單純；如果是行銷信件，就建議使用模版工具製作，編輯大量的圖文、排版比較方便。

設計 Email 的準則

基本上在設計 Email 與設計網頁 UI 是差不多的，同樣需要考量在手機、平板、電腦版上的閱讀體驗，以及要呈現的資訊層級、要達到的目的（call-to-action），配色、用圖方面也是要符合品牌形象與設計guideline。比較需要注意的是因為 Email 的閱讀載具包含了古老的 outlook（大概與瀏覽器有微軟 ie 是一樣的意思）與各式的網頁版本與瀏覽器（想想看用頻果行動裝置的 safari 看 yahoo mail 會怎樣……），設計上必須比較規矩，才好實作出來，如果團隊沒有專門的工程師製作 Email 的話，建議使用拖拉版型工具來製作會比較保險。但是不管用什麼方式實作，我都還是會先出 UI 設計圖。

版型尺寸與建立 Styleguide

其實 Email 的版型尺寸並沒有一定的標準，就像是你打開 UI 設計軟體：Sketch （或是 Adobe XD, Figma 等等 UI 繪製軟體），他有建議的網頁 Artboard 尺寸，但是並沒有一個準則，可以依照需求來定。

通常，我會做個有基本收件端 UI（包含手機、電腦，例如：Gmail App, Mac Mail）的設計，開始設計通用的 Email 版型，確保版型在收件端 UI 上看起來順眼。

內容的區塊建議寬度在 600-800px 之間，電腦閱讀起來比較不會吃力。

設計配色也要考量到深色版本的呈現，因為電子豹的 Logo 顏色比較深，在深色模式必定會被吃掉，所以要加上底色。

延伸閱讀：

別再迷失在黑暗中——如何優化 Email 在深色模式（dark mode）的設計呈現？

確認通用的版型之後，接著再設計企業信件的其他排版。

電子豹的通用版型：有品牌 Logo，頁尾包含客服資訊與社群連結，主要內容第一行會是整封 Email 的主題（大標），按鈕顏色區分為主要藍、次要紫色，連結顏色為企業藍。

定調好版型之後接下來的設計就會根據 styleguide 走。

業務、客服的名片資訊設計：

圖片大小

網頁設計師或是前端工程師的都知道，最害怕的就是直接把可以印刷的圖片直接放在網頁上，不僅會增加 client 端載入負擔，也會讓自己的網站太過肥大、也可能導致 Google 排名下降等等。

在 Email 也是一樣，滿版圖片必須控制在寬度 600-800px 之間，儲存成網頁版本，雙欄的則是要再更小。通常一般圖片我會依照顯示出來的尺寸出圖，但是企業 logo、social icon 我會出 1.5-2 倍的圖，以免在 retina 螢幕、手機上看起來模糊（通常在網頁上會使用 svg 向量圖檔，但是 Email 不支援）。

例如螢幕顯示 facebook icon 是 40x40px，我就會出 80x80px，並在 HTML 裡面定義好顯示 40px 的寬度。

文案設計

文案設計其實可算是 UX 的一環，要怎麼讓信件看起來清楚、語調一致整齊，是產品設計專業的展現。

舉例電子豹交易型郵件的設計，統一會在第一行標題看到主要資訊，接著是詳細內容、Call To Action，最後會放上聯絡資訊，footer 會有小小的網站連結、社群媒體連結等等。

信件的寄件人、寄件信箱、以及信件主旨，也都要經過統一的設計。

---

設計靈感

要蒐集 Email 設計靈感，最大的網站就是 Really Good Emails，他蒐集了許多知名企業、新創所發送的 Email，比起仿間許多網站的設計參考常常文案是假字、圖片是免費圖庫、或是很舊的範例，在 really good emails 你可以找到現在各種不同類型的設計，並且可以針對同一間公司搜尋，例如：搜尋 netflix，即可觀察該公司的 Email 設計與部分的行銷手法。

破格的 Email 設計

通常交易型郵件的設計著重於乾淨、資訊清楚，頂多加上企業識別的圖案或是顏色，像是歡迎信件、新產品發布等等，常常看到蠻多有趣的設計，分享給大家！不過 Email 的破格設計必須稍微對 HTML 有概念，不然容易做出難以用圖 + 文展現的設計（因為 Email 的 HTML 只能用 <table> 做，且把 Email 做成一大張圖片不僅檔案會太大，還在手機上不好閱讀，是最不好的做法），這點就需要設計經驗的累積囉。

---

2023 電子報行銷完整攻略 – 基礎篇