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

> 


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





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






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





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





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





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

**分類：** 電子報優化  
**作者：** tin  
**發布日期：** 2023-03-25T00:20:40.000+08:00


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

對 Email 行銷有興趣的可以參考[這篇：EDM 行銷為什麼還是這麼夯？](https://blog.newsleopard.com/email-marketing-retargeting-customers-180131/?ref=cms.newsleopard.com)，本篇著重於設計上要注意的事項，以及靈感參考。

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

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

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

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

舉產品會發的 Email 為例：

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

## 該用何種方式製作 Email？

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

假如是產品的通知信件，建議還是自己製作，因為需要放變數、模版格式要統一，且版型比較單純；如果是行銷信件，就建議使用[模版工具製作](https://blog.newsleopard.com/%e5%88%a9%e7%94%a8%e9%80%993%e6%ac%be%e7%b7%a8%e8%bc%af%e5%99%a8%ef%bc%8c%e8%bc%95%e9%ac%86%e5%81%9a%e5%87%ba%e9%9b%bb%e5%ad%90%e5%a0%b1%e7%89%88%e5%9e%8b/?ref=cms.newsleopard.com)，編輯大量的圖文、排版比較方便。

## 設計 Email 的準則

基本上在設計 Email 與設計網頁 UI 是差不多的，同樣需要考量在手機、平板、電腦版上的閱讀體驗，以及要呈現的資訊層級、要達到的目的（call-to-action），配色、用圖方面也是要符合品牌形象與設計guideline。比較需要注意的是因為 Email 的閱讀載具包含了古老的 outlook（大概與瀏覽器有微軟 ie 是一樣的意思）與各式的網頁版本與瀏覽器（想想看用頻果行動裝置的 safari 看 yahoo mail 會怎樣……），設計上必須比較規矩，才好實作出來，如果團隊沒有專門的工程師製作 Email 的話，建議使用[拖拉版型工具](https://blog.newsleopard.com/%e5%88%a9%e7%94%a8%e9%80%993%e6%ac%be%e7%b7%a8%e8%bc%af%e5%99%a8%ef%bc%8c%e8%bc%95%e9%ac%86%e5%81%9a%e5%87%ba%e9%9b%bb%e5%ad%90%e5%a0%b1%e7%89%88%e5%9e%8b/?ref=cms.newsleopard.com)來製作會比較保險。但是不管用什麼方式實作，我都還是會先出 UI 設計圖。

### 版型尺寸與建立 Styleguide

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

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

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/os-mail.png)

電腦版，mac 內建的收件軟體

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/uiux-design-email-1.jpg)

手機版，Gmail 收件軟體，亮色主題與深色主題

延伸閱讀：

> [別再迷失在黑暗中——如何優化 Email 在深色模式（dark mode）的設計呈現？](https://blog.newsleopard.com/dark-mode-design-for-email/?ref=cms.newsleopard.com)

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

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

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-4.png)

通知信件設計

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-3.png)

各種情境的 Email 設計

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-5.png)

### 圖片大小

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

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

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/09/save-for-web.jpg)

Photoshop > File > Export > Save for Web，或是利用線上的圖片壓縮軟體

### 文案設計

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

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

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-6.png)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-8.png)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/design-7.png)

* * *

## 設計靈感

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/09/netflix-emails.jpg)

netflix 整體設計，圖片來源：[reallygoodemails](https://reallygoodemails.com/netflix/?ref=cms.newsleopard.com)

### 破格的 Email 設計

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/09/Invision-email.jpg)

圖片來源：invision 歡迎信

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/09/craft-email.jpg)

圖片來源：[reallygoodemails](https://reallygoodemails.com/emails/craft-is-better-than-ever/?ref=cms.newsleopard.com)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/09/clear-email.jpg)

圖片來源：[reallygoodemails](https://reallygoodemails.com/emails/your-5-summer-guest-passes-are-here/?ref=cms.newsleopard.com)

* * *

> [2023 電子報行銷完整攻略 – 基礎篇](https://blog.newsleopard.com/email-marketing-index/?ref=cms.newsleopard.com)

[![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/07/customized-banner-1.png)](https://newsleopard.com/newsleopard/services/customized-design?ref=cms.newsleopard.com)