【Dark mode教學II】發營銷電郵要照顧dark mode用户?你不能不知的3大技巧! | 文章 – 滙豐機滙
你的電郵收件者如果啟用了 dark mode,而你沒謹慎設計eDM的話,電郵成本及內容可能鈍成泡影。

上回的dark mode 教學探討了什麼是 dark mode、為何成為 UI 趨勢及設計的大原則,這些都主要套用在 APP 及網站,而來到營銷電郵便要加倍小心,因為它跟 APP 或網頁設計不同,發 email 的你對於收件者的黑白模式設置並沒有決定權。意思是,如果收件者於 Gmail、Outlook、或 Sparks 這些電郵 APP 設置了 dark mode,這些程式會自動替電郵轉成 dark mode。這並不表示你可將設計的責任交給這些程式,因為現時它們是不能將所有細節完美呈現。
這時候你有兩個做法:一)將白色底加入整個電郵背景,那麼即使用家選用了 dark mode,郵件還是會以 light mode 顯示,可省去 dark mode 帶來的不穩定因素,但壞處是忽略了用家對 dark mode 的需求及所有 dark mode 於 UX 的好處;二)訂立可以順利於 dark mode 及 light mode 行走的設計,這樣便可以滿足到 dark mode 的用家,同時省去大部份電郵程式帶來的 color translation errors。
以下將分享一些電郵設計的貼士, 建立屬於你的 eDM 安全區!
不同的電郵程式如何處理 dark mode?
在分享貼士之前,先了解一下不同的電郵程式現時是如何處理 dark mode ,你可能會想根據它們調整用色的強度等設置。
- 100% 「黑白顛倒」:Gmail App iOS, Outlook 2019 Windows
- 部份「黑白顛倒」:Gmail App Android, Outlook App Android, Outlook App iOS, Outlook 2019 Mac, Outlook.com
- 沒有顛倒:iOS/Apple Mail(只有純文字電郵會啓用 dark mode)
三大技巧助你的營銷電郵順利立足 light mode 及 dark mode
1. 白色背景適當地運用 transparency
以 UberEats 的 email 為例,因為沒應用 transparency 的原故,email banner 中的梯型圖案在 dark mode 與黑色背景連貫失敗:
只要簡單去背,整個設計看上去會更富空間感及自然。相同原理,來自 Deliveroo 的例子:
另一個來自 Medium 電郵的例子,dark mode 中表格的白色顯得突兀,如果將 table 的白色背景轉透明,或以深灰作分隔線會更自然:*傳送門:快速去背小工具~*
2. 避免於黑色系元素應用 transparency
如果將 transparency 應用於黑色元素,便會跟 dark mode 背景撞色,例子如下:▲H&M 營銷電郵的 icon、聯絡按鈕、social media 的按鈕黑到近乎看不到。
有關 social media icon set,不少公司都選用灰色作 icon 的底色、將 icon 元素轉為白色(需配以黑色 banner,否則會消失於 light mode)、或套用該 social media app 原有的顏色,這樣便可以兼容黑白模式的電郵設置。
Bumble 使用灰色底做 icon set:
直接將元素轉成白色,配以黑色 banner 的 Shopborder:
套用 APP 主色的 ASOS:*傳送門:social media icons 素材可以於此找到連結,還有各種風格的商用款式可選。
3. 避免將元素跟背景重疊
在 dark mode,email 裡的圖片顏色未必能夠與黑色背景完全兼容:按鈕 “J’en profite” 的顏色於 light mode 能夠顯示,但在 dark mode 便怪怪的,因為從它的邊框可見,它的按鈕用是圖片顯示,即是與 text box 的背景色相撞。這情況可以於 CSS 用 “border-radius” ,將按鈕以單一顏色顯示。
另一個來自 Apple 的例子:
“All new. For a better you.” 在 dark mode 同樣黑得近乎看不到,但如果轉為白色,light mode 的用家便會無法閱讀,解決辦法是於 Photoshop 將白框較粗:
4. 黑色 logo 加上白色邊框
第一集 dark mode 教學也有提過 Medium 的 logo 於 dark mode email 變得難看:Logo 顯示是重要的一環,其實可以為它統一加上白色輪廓,這樣一來可清楚突出 logo,二來亦不會影響 light mode 的用家體驗:
以上便是一些重要的電郵設計技巧,讓你更易配合 dark mode 用家。其實,現時還未有讓電郵於黑白模式及各種程式完美呈現的方法,不過以上的技巧可以讓替電郵於大部份程式正常顯示,重點是適當應用 transparency、定好元素顏色,避免背景與元素顏色相撞、於文字及 logo 善用白色邊緣、及謹記發信前先進行手機及電腦測試。