手機對人類越來越重要，在高科技的未來，我們可能不需要帶錢包和鑰匙出門，卻萬萬離不開手機。除了現實生活中觀察到的跡象外，也有客觀數據説明手機的重要性。
根據 Adestra 統計數據「61% 的人習慣以手機打開電子郵件，以電腦軟體和網頁瀏覽器打開電子郵件的僅佔 39%」。以上數據顯示，越來越多收件人使用手機打開郵件，適應手機螢幕的電子報才能迎合現在及未來多數人的生活狀態。
你是否有這樣的經驗？閒暇之餘，滑一滑手機，隨手打開電子報，發現它長成這樣：
看到設計不良的電子報，大多數人根本不會浪費時間閲讀，他們會刪除甚至取消訂閲。忽視手機的重要性，將錯失很多行銷機會。
如何拉回顧客的心，使他們在玩遊戲、追劇等誘惑中，選擇閱讀你的電子報並進行點擊？你要做的第一步就是設計一款良好、適應手機的電子報。以下，我們將從 4 個部分說明電子報設計的要點。
做電子報手機版之前，先搞清楚收信的人
在動手調整版面之前，有兩件事值得先弄清楚。
第一，手機上的收信習慣和電腦完全不同。用手機收信的人多半在移動中，不會一封封仔細讀，往往只花 30 秒掃過信件主旨，把信分成「現在看」「等一下看」和「刪除」三堆。記住這點，你的 EDM 設計思路會跟著改變。
第二，先查查有多少會員是用手機看你的電子報。信在 3、4 吋的小螢幕上看起來是什麼感覺？連結和按鈕夠大、方便點嗎？圖片大小恰當嗎？最後別忘了，讀者點了信裡的連結之後，連到的網頁也要能在手機上順利瀏覽。
1. 易於閲讀的文字設計
- 使用强烈對比色
- 使用適合的字體大小
- 避免文字量過多
有些人爲了節省手機電源，會調低手機亮度，使文字不易閲讀。爲了幫助電子報更易被讀取，建議在文字的呈現上，使用强烈的對比色，比如在淺色背景上使用深色文字。除了顔色，字體太小也使資訊容易被忽略。字體大小的設計可參考 Learn UI Design Blog 針對 iPhone 提出的建議。
此外，請不要踩到電子報設計的大地雷：文字量過多。記住，你的目標是進行 CTA（Call-To-Action），引導電子報收件人進行你希望他們做的舉動。
以電商爲例，他們的 CTA 是引導至網站上進行消費。若電子報資訊量過多，太多文字呈現在小螢幕時，很可能會讓收件人感到不耐煩。建議你只需寫下吸引人的標題，引導收件人進行 CTA 即可。
以下有兩張示範圖。左圖上方是深色圖搭配淺色標題，很容易抓住使用者的眼光，在圖片中間文字量較多的地方，則使用淺色背景及深色文字。相較於左圖，在右圖中沒有文字大小之分，在内容中塞入太多資訊，讓人不知道重點在哪，也無法吸引使用者採取行動。
2. 使用單欄的佈局設計
在開始之前，請先深吸一口氣，迎接以下的錯誤示範圖：
剛剛滑得還開心嗎？以上跑版嚴重的電子報可能會讓你看得很崩潰。
很多電子報用兩欄到三欄的佈局設計，但建議你不要太貪心。以上就是一個錯誤範例，三欄佈局的設計使得它在手機瀏覽時容易跑版，導致收件人需要花更多時間才能把電子報「滾動」完。
單欄佈局的特性是瘦長，很適合在手機螢幕上滾動。此外，比起雙欄甚至三欄設計，有更多空間可以調整字體大小，不要忘了上面説的，字體太小容易使資訊被忽略。同時，單欄設計在技術層面上不易失敗。每一款手機的系統、螢幕都不一樣，你不能保證電子報在其他手機設備上長什麽樣子。總結單欄佈局的三大好處：
- 適合在手機螢幕滾動
- 設計空間變多，可放大字體
- 技術層面上不易失敗
以下示範圖中呈現三件產品。一橫列中只有一種產品，不會被分散焦點。由於空間較多，兩行内即可呈現完整的產品名稱，整體視覺上很舒服。
3. 增添更多圖片資訊
- 圖片下方增加 CTA 和簡單的文字敘述
- 添加替代文字
爲了節省手機的網路流量，有些收件人會設定郵箱不預先下載圖片，當他們打開電子報時，就會出現以下示範圖中的兩種情況。
第一種：只看得到六個空白框框，知道有六張圖，卻不知道内容是什麽；第二種：圖片下方有粗體的產品名稱，也有價格、「放入購物車」按鈕。未顯示的圖片由於添加了替代文字（ALT text），也看得到介紹文字。
你無法要求收件人一定得顯示圖片，因此，在圖片下方增加簡短的文字描述和 CTA ，可以幫助收件人透過文字了解你的產品資訊。另外，在圖片上添加替代文字（ALT text）也是比較常見的做法。
4. 突出你的 CTA（Call-to-Action）設計
- 足夠大且明顯的 CTA
- 確保連結與連結之間有足夠的間距
看完上方關於文字、版型和圖片的設計要點後，最後也是最重要的一點，是關於 CTA 的設計。
電子報的目標是告訴收件人一些產品資訊，引導他們進行消費，提升你的業績。CTA 可以説是電子報設計的關鍵，若手機顯示的 CTA 設計不良，很可能導致電子報行銷成效不佳。
CTA 的設計必須考量兩方面：視覺及實際體驗。若 CTA 設計得太小，視覺上很容易被忽略；若連結與連結之間距離太近，很可能在實際操作時，導致使用者誤按連結。
因此，必須設計足夠大且明顯（可用對比色顯示）的 CTA ，並確保它不會與其他連結靠得太近。UX Planet 中提到至少 48*48dp 的觸摸面積，以及至少 8dp 的連結間距，才符合 Android 系統的設計原則 。如果你覺得數據很難理解，不如看看下方的範例，便能清楚知道 CTA 的設計差異。
以下範例中，左圖的 CTA 以白色背景、深藍色按鈕及白色字體呈現，强烈對比色有很好的聚焦效果。按鈕寬度幾乎佔手機螢幕寬度的 50%，且周圍并沒有其他連結，不會造成收件人的誤按。
右圖的 CTA 為左排的藍色文字，CTA 與右排説明文的字體一樣大，且顔色不鮮明，視覺上很容易被忽略。由於連結與連結之間相隔很近，有可能造成誤按。
手機瀏覽最佳化與響應式電子報有什麼不同
談到電子報手機版，常有人搞混兩個說法：手機瀏覽最佳化（Mobile Optimize），和響應式設計（Responsive Design），也就是常聽到的 RWD 電子報。
簡單來說，手機瀏覽最佳化是站在手機使用者的角度設計內容；響應式設計則是針對版型做最佳化，讓信件不論在哪種載具、瀏覽器或解析度下開啟，都有不錯的閱讀體驗。
要兼顧所有裝置與瀏覽器很困難，建議先從訂閱者最多人用的部分開始優化，避免浪費資源。
響應式電子報是一種 HTML 技術做法，讓信件在電腦、手機或平板等不同螢幕大小下都能順利閱讀，使用者不必縮放、平移或來回捲動。它適用在訂閱者用手機或平板的原生郵件 App 開信的時候。要注意的地方有這幾點：
- 比手機瀏覽最佳化複雜。
- 訂閱者多半透過 Yahoo 或 Gmail 等郵件 App 收信。
- 針對手機訂閱者，需要花時間確認內容的優先順序。
- 可以隱藏大部分的圖片，但無法新增內容。
如果你不想自己處理這些技術細節，用拖拉式 Email 編輯器製作信件會省事很多，一般這類工具會幫你處理多數裝置的相容問題。
手機 EDM 的圖片尺寸：替換與隱藏
響應式電子報在圖片上有兩個常用手法，也和手機 EDM 的圖片尺寸直接相關。
替換：不是所有圖片都適合直接搬到手機上。一張桌面版看起來很自然的大圖，在手機上可能就顯得不協調。這時可以另外準備一張專為手機設計、寬 320 像素的圖片。如果畫質不夠清楚，可以先把圖縮放成寬 640 像素，再在手機版型中以 320 像素的寬度顯示，圖片就會銳利許多。
隱藏：圖片太多，信件載入就慢；載入失敗，畫面上還會冒出一個叉叉，都會讓訂閱者失去耐性。透過響應式設計，可以在手機上隱藏次要的圖片，讓使用者收到更相關、更密集的資訊，畢竟手機使用者很容易分心。你也可以加上一顆「觀看圖片」的按鈕，讓訂閱者自己決定要不要看。
重點整理：你是否已掌握這些要點？
這篇文章提供幾點適應手機載具的設計要點，這些要點可以總結成一個大原則：簡單明瞭。
現今人們生活中已經離不開手機，你的電子報訂閱者隨時隨地都可能用手機打開郵件。下次設計電子報時，使用以下歸納的設計重點，即可讓電子報適應手機界面，進而提升點擊率，提高潛在顧客的消費欲望。
- 文字：文字必須夠大，且建議使用淺色背景+深色文字，以利閱讀。同時為了避免收件人的不耐煩，請不要使用過多文字量。
- 單欄佈局：單欄佈局在技術上不易出錯，適合手機螢幕滾動，且保留更多設計空間給文字。
- 圖片：在圖片下方添加文字敘述及 CTA，幫助收件人更易取得產品資訊。亦可增加圖片替代文字。
- CTA 設計：設計足夠大的 CTA，也可使用對比色凸顯 CTA，並確保 CTA 周圍沒有其他連接，以免造成收件人誤按。
延伸閱讀：手機使用者愛這味！4 種信件主旨寫法提升電子報開信率
