
在數位產品體驗中,有一項元素貫穿了帳號註冊、交易流程、行銷推播等各個環節,卻鮮少被人深入討論,那就是——電子郵件。對使用者來說,電子郵件是他們接收來自品牌重要訊息的工具,也是建立品牌印象的管道之一;對品牌來說,它則是傳達價值主張、經營顧客關係、還有創造行銷價值的關鍵橋樑。
在本文中,我們將從產品設計的視角出發,深入解析Email的應用場合、設計實務技巧。除此之外,文末也包含了真實企業的Email案例研究。一起來看看好的Email設計究竟應該如何做吧!
💡
「Email」及「Newsletter」在中文裡常被翻譯為電子郵件、電子報、EDM。
Email的種類與應用場合
Email可大致分爲「交易型電子郵件(Transactional Email)」與「行銷型電子郵件(Marketing Email)」兩種,前者涵蓋如註冊帳號、登入身份驗證、傳送交易收據等使用者使用服務時,所需知道的必要資訊;後者則涵蓋以行銷為主要目的的內容。
這樣的分類方式,主要是因應法規需求。例如,歐盟的《一般資料保護規則》(GDPR)就使用了這兩個名詞,規範企業在寄送郵件時所需遵守的規定[^1]。不過,法規並未就這兩種類型郵件的範疇給出明確定義。
交易型電子郵件 | 行銷型電子郵件 | |
---|---|---|
涵蓋範圍 | 使用者使用服務時,所需知道的必要資訊 | 以行銷為目的的資訊 |
舉例 | 確認註冊帳號、驗證登入身份、交易收據、訂閱項目狀態、服務條款內容改動 | 限時優惠、新商品上架、產品或服務的使用訣竅、個人推薦 |
發送對象 | 通常為針對單一使用者 | 通常為群發 |
GDPR所規範的發送權限 | 在必要、合理的情境下向使用者發送這類資訊通常被認為是合規的。 | 需要獲得使用者明確的同意才可發送。例如:註冊帳號時下方的同意傳送行銷資訊勾選框。
這類勾選框不得預設使用者同意接收行銷資訊。同時,拒絕接收行銷資訊不得不必要地影響使用者使用該服務。 使用者可隨時撤回對接收行銷資訊的同意。 |

使用者的Email體驗
根據litmus的2025年7月統計數據顯示[^2],全球最多人使用的郵件軟體前五名為:Apple、Gmail、Outlook、Yahoo Mail還有Android,詳細的佔比如下。至於使用者運用電腦/手機版軟體開信的比率,則各佔一半左右,但不同年齡層的比率略有不同[^3]。
排名 | 軟體 | 比率 | 附註 |
---|---|---|---|
1 | Apple | 49.42% | 包含iPhone、iPad、Mac的預設郵件App以及部分第三方App |
2 | Gmail | 25.89% | 包含網頁端、iOS app、Android app |
3 | Outlook | 3.626% | 僅涵蓋電腦版Outlook |
4 | Yahoo Mail | 2.2% | 包含網頁端、iOS app、Android app |
5 | Android | 1.21% | 包含部分第三方App |
這些軟體的使用者介面如下。可以看到,即便是同一封信件,但是在不同的裝置、軟體間瀏覽時仍會有細微的差異。除此之外,如今已相當普及的深色介面模式也會影響使用者的Email體驗。









整體設計原則
- Email的所有細節(標題、文案、圖片、編排、內容份量、檔案大小等)都需要謹慎規劃,避免任何可能被認為是詐騙/垃圾信件的設計,否則會觸發郵件軟體的過濾機制,導致信直接被送進垃圾郵件堆。一旦其中一封郵件被標記為垃圾信,該寄件地址後續所發出的所有郵件也很可能被自動列入黑名單。
- 平時我們常看到的漂亮電子郵件,它的真身其實是由HTML/CSS所構成,所以可沿用所有網頁設計的邏輯。
- 不同郵件軟體在渲染電子郵件的HTML時會有些微差異,導致信件外觀無法完全一致。建議在正式發送前,先用不同的郵件軟體檢視設計的呈現情況,確定可接受再送出。
設計風格
電子郵件作為「品牌/服務」與「使用者」間的溝通媒介,自然應該延續品牌的調性、採用相同的設計系統、文案口吻,讓使用者一眼就可辨識出這是來自某某品牌的信件。

區塊劃分
電子郵件的區塊可以按照順序由上到下切成「Preheader」、「內容」與「結尾」三大段。
區塊 | 說明 | 附註 |
---|---|---|
Preheader | 這是信件最開頭的區塊,它的內容會顯示於郵件軟體的預覽文字區,是使用者決定是否開啟本封信的關鍵。
一般來說,會用一段簡潔扼要的描述幫助使用者大致了解信件的內容。 | 如果覺得在Preheader的內容會妨礙排版,可以用CSS將其從視覺上隱藏 |
內容 | 信件的主體。一封信可以有很多個內容區塊。
第一個內容區塊兼具「傳達信件主旨」與「吸引閱讀者往下滑」的任務。所以首先,會放置品牌的Logo讓使用者一眼就能了解這是誰寄來的信件,接著是配置一個大標題、精彩的主視覺、CTA來引起閱讀者的興趣、促使行動。 | |
結尾 | 這是閱讀者最後看到的部分,所以會用於放置一些低優先級的資訊。例如:郵件發送者的社群媒體帳號列表。整體來說,它就像網頁的footer。
另外,在這個區塊放置「取消訂閱」的連結也是約定俗成的慣例。 |


畫布尺寸

設計電子郵件版面時,最保險的畫布寬度設定是600px。這個尺寸是根據多數郵件軟體的預設顯示範圍所訂定,能夠確保大多數使用者在不需左右滾動的情況下順利閱讀內容。不過,畫布的寬度沒有硬性規定,你想使用更寬的畫布也可以,但要注意不要讓信件寬到被介面截斷或出現滾動條,影響閱讀體驗。
至於高度部分,雖然同樣沒有硬性限制,但建議以「精準、清晰傳遞單一訊息」為前提,安排合理的內容份量。過於冗長的email只會讓使用者感到厭煩,未來不再願意閱讀你的信件。或者更慘一點,你的信未來會永遠地被自動送進「垃圾郵件」資料夾中。
版型與RWD
電子郵件的真身是一個獨立且輕量的HTML文件,所有版型設計皆以HTML/CSS建構。不過,電子郵件的CSS支援度相對有限,僅能使用較為基礎、相容性高的語法。舉例來說,像display: grid
或 display: flex
這類新語法的相容性就很差,因此排版通常會以<table>
製作。
👉
如果想知道特定的CSS規則是否有被郵件軟體支援,可以到caniemail.com查詢。
雖然能用的CSS有限,但好消息是,所有的網頁設計知識都可以沿用。在製作RWD電子郵件時,開發者同樣會使用@media query
來因應不同裝置尺寸,確保內容在桌機與手機上皆能良好顯示。考量到畫布寬度限制與跨平台相容性,Email版型設計通常採用一欄或兩欄的垂直切割方式,再視情況調整為橫向並排或堆疊成單欄。若切割超過三欄以上,很容易導致內容過於擁擠或出現排版錯誤。
儘管同樣應用了RWD設計的概念,但實務上,電子郵件的電腦版、手機版版型差異通常不會相差太大以維持一致的閱讀體驗。常見的做法是以手機版為主體,再透過設定最大寬度(max-width)來讓內容在桌面端保持置中。

至於最關鍵的CTA按鈕設計,也可沿用手機介面的UI設計邏輯——Apple的Human Interface Guidelines建議按鈕至少爲44x44px、Material Design則建議至少為48x48px,以確保使用者能輕鬆地點擊到按鈕。
圖像尺寸
關於電子郵件中所使用的圖像,主要的設計考量在於控制其檔案大小,以避免拖累整封郵件的載入速度。考慮到畫布只有600px、版型又可能會切割為2欄顯示,使用1x~2x的圖像就已經足夠。
淺色與深色模式
隨著深色模式逐漸普及,電子郵件內容的設計也必須考量在深色模式下的顯示效果。
在設計網頁時,我們會透過@media (prefers-color-scheme)
語法來根據使用者的顯示設定切換UI外觀。但遺憾的是,這個語法目前在大多數郵件軟體中的支援度仍非常差。因此,電子郵件內容在深色模式下的呈現,多仰賴郵件軟體的自動轉換。

更棘手的是,市面上百百種郵件軟體的深色模式轉換邏輯全都不一樣。有些會將內容的顏色全部反轉,有些則僅調整軟體介面本身,對郵件內容不作任何變動。在採用「反轉顏色」策略的郵件軟體上,會將純白色(#FFFFFF)轉換為純黑色(#000000),其他顏色依此類推。如果不想要顏色被反轉,就要使用inline CSS搭配!important
加以限制。







另一個在深色模式下特別需要注意的項目是圖片。像是Logo等具識別性的圖形元素,建議使用PNG格式,以避免出現不自然的白色背景或邊角。若你的Logo為深色系設計,則建議使用帶有足夠邊距與背景色的圖片,以確保在雙模式下都有良好的可視性與美感。

Email檔案大小
檔案過大的Email會拖累信件載入速度、間接影響用戶開信的意願,還可能會被郵件軟體折疊。例如:Gmail會折疊超過102kb的信件,顯示「查看完整訊息」的按鈕,造成訊息傳遞效果大打折扣。為了避免上述窘境,最理想的Email檔案大小是不超過100kb。
以下因素都會影響Email檔案大小:
- 整封信的HTML/CSS以及其他Code的長度
- 內容的訊息量
- 圖片數量
- GIF(因為GIF的每一幀都是一張圖片)
案例分析
註冊與登入驗證類
在註冊或登入時向用戶傳送電子郵件是最經典的郵件應用情境。在這個情境中,使用者正在完成註冊或登入手續的途中,按著系統要求來收信,且計劃著收完信後要快速切回原先的系統。因此,設計上最好採用簡潔的設計與文案,突出使用者當下最需要的資訊。例如:完成信箱驗證的按鈕、驗證碼。
此外,若是用於登入驗證的郵件,通常也會附上「重設密碼」或其他資安相關的連結,方便帳戶遭到盜用的使用者迅速採取應對措施。



歡迎新用戶類
這類郵件通常會在新用戶完成註冊後立即或數日內寄出,內容多著重於介紹產品或服務的使用技巧,協助用戶快速上手並探索其功能亮點,提升整體體驗與黏著度。有時郵件中可能也會包含新用戶專屬的限時優惠、折扣碼,鼓勵使用者立即做出行動(例如:從免費版升級至付費方案)。


購物車放棄類
在具備購物功能的網站或服務中,「購物車」常被視為判斷使用者購買意願的重要指標。典型的購物流程包括:瀏覽商品、加入購物車、完成結帳。而那些已將商品加入購物車卻未結帳的用戶,往往具備購買意願,卻因各種原因仍在猶豫。
因此,企業常會針對這類用戶發送提醒郵件。這類郵件的目的一是提醒用戶購物車內仍有未結帳商品,二則是要把那些四處比價後忘記回來完成購買的用戶給「叫」回來。比較精明一點的企業,甚至會利用使用者這時的心理狀態,在郵件中加入小優惠、強調產品優勢的文字,說服使用者購買(但同時間也有更精明的使用者反向利用這點來索取優惠就是了)。
根據klaviyo的2024年度報告,購物車放棄類郵件具有$3.65美金的每位收件人收益(RPR)以及3.33%的轉換率(因為這封信而完成購買的使用者比率),成效相當驚人。


行銷類
以行銷為主要目的的郵件,直白地一點說,就是「廣告」。由於這類內容容易引起用戶反感,因此建議根據顧客的興趣與行為進行內容客製化,精準推送他們可能感興趣的主題,提升開信率與互動意願,進而達成行銷成效。

企業公告類
當服務的《服務條款》或《隱私權政策》等法律資訊有所變更時,服務提供者依法有義務主動通知使用者。這類郵件應簡明扼要地說明變更內容,包含:哪些條款有調整、變更的原因、生效日期,並附上連結供使用者查閱完整版本。此外,也應清楚告知用戶若不同意新條款,可採取的行動或選項,如停止使用服務或聯繫客服等,以維護使用者權益。
設計這類通知信件時,務必參考當地法律規範與平台政策,確保內容符合法規要求與資訊揭露義務。


服務使用類
隨著使用者使用服務所必須通知的事項。常見的內容包括:使用者變更了某項設定、訂閱項目即將到期、達成某種成就、建議使用者完成某項設定……等等。

總結
Email是企業傳遞資訊的重要管道,也是一項極具潛力的行銷工具,常讓行銷人員與產品經理「念念不忘」。然而,身為 UI/UX 設計師,我們應著重思考「使用者收信的前後正處在什麼流程當中?」、「使用者是否期望或需要收到這封信?」
唯有尊重使用者的接收意願與使用感受,才能建立良好的Email互動體驗。有了這一前提,才是時候來打磨信件主旨、內容、設計形式、CTA、寄送時機等其他細節。
參考資料
點擊以展開
- Consolidated text: Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (Text with EEA relevance). (2016). European Union. Retrieved Aug 18th from https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A02016R0679-20160504
- The State of Email Client Market Share. (2025). litmus. Retrieved Aug 18th from https://www.litmus.com/email-client-market-share
- Email Usage: Key Trends for 2025 and Beyond. (2025). SMTP2GO. Retrieved Aug 19th from https://www.smtp2go.com/blog/email-usage-key-trends-for-2025-and-beyond/
- The abandoned cart benchmarks report: 2024 data to inform your strategy. (2024). klaviyo. Retrieved Aug 18th from https://www.klaviyo.com/blog/abandoned-cart-benchmarks
本文所提及的法規資訊僅供參考,並非法律建議。由於各地法規可能隨時更新,具體適用條件與解釋也會依實際情況而異,若您有合規相關需求,建議尋求專業法律顧問協助。

RECOMMEND
-
設計一款在 iOS 18/26+ 都完美呈現的 App Icon
iOS 26引入了一款全新材質「Liquid Glass(液態玻璃)」,這種材質在互動上融合了水滴的流動感與玻璃的透亮質…
2025.09.02 -
設計Email的UI/UX實務技巧:用途、尺寸、精選案例分析
在數位產品體驗中,有一項元素貫穿了帳號註冊、交易流程、行銷推播等各個環節,卻鮮少被人深入討論,那就是——電子郵件。對使用…
2025.09.01 -
如何設計Android平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促…
2025.08.27 -
如何設計iOS平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促…
2025.08.26 -
用通行密鑰(Passkey)設計無密碼登入體驗:使用流程、UI/UX設計個案研究、設計資源
無論是登入網站、服務,都需要建立一組帳號密碼。然而,隨著使用的服務越來越多,要記住的帳密也跟著越來越多。為了解決帳號容易…
2025.05.13 -
不再當Figma新手:讓UI設計稿更加專業的必要細節
優秀的UI設計稿,其價值不僅在於華麗的外表,更體現於背後所傳達的一致性、邏輯與縝密決策。透過這篇文章,你將能跳脫一昧聚焦…
2025.04.09
設計一款在 iOS 18/26+ 都完美呈現的 App Icon
2025.09.02
如何設計Android平台上的Widget小工具:UI/UX規範、技術要求統整
2025.08.27