【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 善用白色邊緣、及謹記發信前先進行手機及電腦測試。
