# 實戰教學：如何讓手機使用者不再秒殺你的電子報（上） > 平均來說，大約有 40% 的電子郵件是透過手機和平板電腦開啟的。不幸的是，這些可以順利在電腦上開啟的電子報，卻在不知不覺中帶給在手機上瀏覽的訂戶負面體驗。 你是否透過手機開啟電子報時有以下經驗： 1. 花時間等待圖片下載 2. 只為了閱讀一個句子卻需不停的往下捲動 3. 想點擊連結的時候需要先放大畫面 我們曾經談過，為了提高開信率，電子報最好提供手機使用者良好的閱讀體驗。然而，每個個案遇到的情形可能不同，尤其是在資源有限的情況下，必須謹慎的進行決策。 了解你的手機訂戶 在著手改善之前，你必須先了解你的目標客群。針對不同的裝置和瀏覽器進行優化非常困難，因此會建議先從使用者最多的部分開始進行，才能避免資源的浪費。決策過程如下圖： 到這邊一定有很多人會想問：手機瀏覽最佳化（Mobile Optimize）和響應式設計 （Responsive Design）到底有什麼不同？ 簡單來說，手機瀏覽最佳化是以手機使用者的角度來進行內容的設計，而響應式設計則是對版型進行最佳化，以求信件在不同載具、瀏覽器、解 **分類：** 電子報優化 **作者：** Andy.Chou **發布日期：** 2014-11-12T19:56:54.000+08:00 平均來說，大約有 40% 的電子郵件是透過手機和平板電腦開啟的。不幸的是，這些可以順利在電腦上開啟的電子報，卻在不知不覺中帶給在手機上瀏覽的訂戶負面體驗。 你是否透過手機開啟電子報時有以下經驗： 1. 花時間等待圖片下載 2. 只為了閱讀一個句子卻需不停的往下捲動 3. 想點擊連結的時候需要先放大畫面 我們曾經談過，為了提高開信率，電子報最好提供手機使用者良好的閱讀體驗。然而，每個個案遇到的情形可能不同，尤其是在資源有限的情況下，必須謹慎的進行決策。 ## 了解你的手機訂戶 在著手改善之前，你必須先了解你的目標客群。針對不同的裝置和瀏覽器進行優化非常困難，因此會建議先從使用者最多的部分開始進行，才能避免資源的浪費。決策過程如下圖： [![whether\_to\_invest\_in\_responsive](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112510/whether_to_invest_in_responsive2.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112510/whether_to_invest_in_responsive2.jpg?ref=cms.newsleopard.com) 到這邊一定有很多人會想問：手機瀏覽最佳化（Mobile Optimize）和響應式設計 （Responsive Design）到底有什麼不同？ 簡單來說，手機瀏覽最佳化是以手機使用者的角度來進行內容的設計，而響應式設計則是對版型進行最佳化，以求信件在不同載具、瀏覽器、解析度被開啟時能提供良好的閱讀體驗。由於篇幅限制的關係，本篇會先解釋手機瀏覽最佳化的實際操作方式。 ## **什麼是手機瀏覽最佳化**？ 透過HTML語言，設計專門讓用戶以手機瀏覽的電子報。（營幕大小在 320–480 pixels） **使用時機** 當大部分的訂戶都用手機做為開信載具 **重點與注意事項** - 透過混合的方式為大部分訂戶提供良好的使用者體驗 - 要能容易相容於現有的行為 - 更靈活的設計規範 - 愈來愈小的顯示範圍 - 愈來愈小的文字空間 ## 手機瀏覽最佳化的 3 個技巧 ## 1.保持簡潔 **怎麼作?** - 保持訊息簡單明確，最好第一個段的內容和主題相切 - 附上圖表幫助理解 - 刪除不相干的資訊或圖片 **為什麼重要?** 手機使用者的時間很零碎，而且常常一次處理多件事情(也容易分心)，明確、簡單、集中的資訊可以讓他們有效率的做出行動。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112505/Udemy.jpg) Udemy ## 2.容易瀏覽 **怎麼作?** - 用區塊明確地切割不同的訊息 - 在閱讀過程中包含標題和圖片 - 避免放入次要、相對細節的資料，用按鈕引導有興趣的讀者進入網頁並進行互動。 - 參考支援手機的網頁的滾動頁面設計 **為什麼重要?** 讓手機用戶保持興趣和集中注意力是很難的，有組織的設計可以幫助訂戶迅速的瀏覽並抓住重點。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112509/Noom-Coach2.jpg) Noom Coach ## 3.容易點擊 **怎麼作?** - 使用夠大的按鈕和連結，讓使用者可以輕鬆點擊 - 元件之間增加間距 - 在不混淆資訊的前題下，讓整個區塊都可以回應使用者的點擊 **為什麼重要?** 當進行觸控時，人類的手指需要比滑鼠更大的空間來完成動作，設計時最好能讓使用者在不需把畫面放大的情況下輕鬆的點擊。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112508/Gmail1.jpg) Gmail廣告 * * * 延伸閱讀：[如何讓手機使用者不再秒殺你的電子報（下）](https://blog.newsleopard.com/%E5%A6%82%E4%BD%95%E8%AE%93%E6%89%8B%E6%A9%9F%E4%BD%BF%E7%94%A8%E8%80%85%E4%B8%8D%E5%86%8D%E7%A7%92%E6%AE%BA%E4%BD%A0%E7%9A%84%E9%9B%BB%E5%AD%90%E5%A0%B1%EF%BC%88%E4%B8%8B%EF%BC%89/?ref=cms.newsleopard.com)