最近幾年中，手機(jī)等移動(dòng)端用戶不斷增長，這給人們獲取信息的方式帶來了變革，甚至可以說是一場(chǎng)革命。響應(yīng)式設(shè)計(jì)這種思維方式就是在這樣的大環(huán)境中興起的，越來越多的人們開始討論怎樣做好響應(yīng)式網(wǎng)站。然而，盡管響應(yīng)式設(shè)計(jì)已經(jīng)形成風(fēng)潮，卻很少有人提起響應(yīng)式郵件的設(shè)計(jì)。
對(duì)設(shè)計(jì)師或開發(fā)者來說，html郵件可能是一個(gè)相對(duì)比較麻煩的媒介。它的客戶端技術(shù)已經(jīng)落后陳舊，內(nèi)容、格式等又沒有一定的標(biāo)準(zhǔn)規(guī)范，這使得現(xiàn)代的編碼規(guī)則毫無用武之地，一些代碼根本就無法顯示出來。但郵件仍是關(guān)鍵的營銷渠道之一，它的作用不容忽視。研究表明在手機(jī)等移動(dòng)端上使用電子郵件的用戶已經(jīng)大大超過電腦或網(wǎng)頁上的用戶，與此同時(shí)，50%以上的移動(dòng)用戶會(huì)選擇關(guān)閉或刪除非個(gè)性化的郵件。怎樣才能讓郵件也跟上互聯(lián)網(wǎng)時(shí)代發(fā)展的潮流呢?響應(yīng)式的郵件是一個(gè)很好的選擇， 在郵件呈現(xiàn)上，通過頁面隱藏、折疊、擴(kuò)展等，它可以給PC端用戶和移動(dòng)端提供舒適的體驗(yàn)。那么響應(yīng)式的html郵件應(yīng)該是什么樣的呢?今天小飛就帶大家一起看看為什么我們應(yīng)該選擇響應(yīng)式郵件以及響應(yīng)式郵件應(yīng)該具備哪些特點(diǎn)。
如果您曾經(jīng)使用手機(jī)打開一個(gè)固定寬度的郵箱，您可能更能體會(huì)響應(yīng)式的郵箱設(shè)計(jì)的必要性。因?yàn)橐粋€(gè)固定寬度的郵件在移動(dòng)設(shè)備的小屏幕上顯示時(shí)，整體布局通常會(huì)被縮小，這時(shí)它通常會(huì)出現(xiàn)以下缺點(diǎn)：
閱讀感受不佳
郵件布局整體縮小，這意味著如果用戶想要閱讀完整的內(nèi)容就必須放大郵件內(nèi)容，一旦郵件內(nèi)容放大了他們就需要不停的橫向移動(dòng)，從左至右瀏覽信息，但研究表明用戶在瀏覽郵件時(shí)習(xí)慣由上至下。這破壞了用戶的瀏覽習(xí)慣，而且來來*滾動(dòng)多次才能看完文章，無形之間帶來了不少的麻煩。不少用戶認(rèn)為這種麻煩會(huì)消磨他們的耐心，讓他們無法完成閱讀。
鏈接和按鈕不可見
在移動(dòng)端上，人們通常習(xí)慣使用手勢(shì)操作，郵箱的整體布局縮小，這也意味著郵件中的鏈接和"行為引導(dǎo)"按鈕會(huì)變小，這樣一來用戶就無法有效的進(jìn)行點(diǎn)擊，相關(guān)信息就得不到用戶的關(guān)注。特別是"行為引導(dǎo)"按鈕，如果我們的按鈕不夠明顯，用戶一般不會(huì)給予特別關(guān)注，這直接的影響了郵件的轉(zhuǎn)化率，以及它在增加網(wǎng)站流量、銷售額等方面的效用。
圖片顯示不全等問題
郵件中的圖片顯示是一個(gè)大問題。在PC端進(jìn)行瀏覽時(shí)，多樣的圖片可能最能體現(xiàn)網(wǎng)站的活潑、豐富，拉近與用戶的距離。但是在移動(dòng)端使用數(shù)據(jù)流量時(shí)，用戶很可能不想進(jìn)行大量圖片的加載。其次，多張圖片在移動(dòng)端展示時(shí)可能因?yàn)槌叽绲葐栴}顯示不全，難以呈現(xiàn)PC端的那種效果。另外還有一些時(shí)候，某些用戶無法看見郵件中的圖片，雖然iphone的本地郵箱默認(rèn)顯示圖片，但是有很多移動(dòng)客戶端都限制圖片的載入。
響應(yīng)式郵件應(yīng)具備的特點(diǎn)：
就像響應(yīng)式網(wǎng)站能夠同時(shí)適用于電腦、手機(jī)等多種設(shè)備，響應(yīng)式郵箱能夠同時(shí)適用多種終端，一封郵件能夠根據(jù)不同的設(shè)備以相應(yīng)的格式來呈現(xiàn)。那么做好一個(gè)響應(yīng)式郵箱有哪幾個(gè)關(guān)鍵點(diǎn)要把握呢?
1. 內(nèi)容清晰簡練
內(nèi)容是網(wǎng)站永恒的主題，郵箱更是如此。因?yàn)橐苿?dòng)設(shè)備的屏幕相比PC端要小，能夠利用的空間比較少，這時(shí)怎樣通過小屏幕完成與用戶的互動(dòng)顯得尤為重要。盡量保持郵件的內(nèi)容清晰簡練，不是所有的信息都同樣重要，篩選出比較重要的信息，不要什么信息都放上去讓郵件顯得很擁擠。另外，按信息的重要程度垂直排列，最重要的、最希望用戶看見的內(nèi)容放在最上方，突出顯示優(yōu)先級(jí)的信息。
2. 單列的設(shè)計(jì)布局
簡潔是郵箱設(shè)計(jì)的核心。在手機(jī)等移動(dòng)端上瀏覽郵件，我們需要著重考慮用戶使用時(shí)的流暢性。雖然多列的設(shè)計(jì)布局在郵件中也可以顯示出來，但是單列的是最理想的選擇，寬度不超過640px的布局比較適合手機(jī)閱覽。這樣就算有些設(shè)備只能縮小郵箱的整體布局，我們也不用擔(dān)心是否會(huì)有內(nèi)容顯示不出來。
3. 明顯的行為引導(dǎo)按鈕
就像我們?cè)谏厦嫣徇^的，如果行為引導(dǎo)按鈕不夠明顯，用戶可能根本就不會(huì)注意到，那我們的郵件究竟還有何意義?因此這些行為引導(dǎo)按鈕應(yīng)該足夠大，以方便用戶進(jìn)行點(diǎn)擊，不過按鈕和其他的鏈接也要盡量分散開來，防止用戶不小心點(diǎn)錯(cuò)了，做到用戶友好再友好。蘋果ios的人機(jī)界面推薦最小的按鈕區(qū)域應(yīng)該是44*44px，因此行為引導(dǎo)按鈕的區(qū)域面積最好大于這個(gè)數(shù)值。
4. 文本左對(duì)齊
郵件的文本最好左對(duì)齊，同時(shí)我們可以將重要的元素放到內(nèi)容區(qū)域的左邊，這可不是小飛隨便說說的，它的背后有很多理論支撐。首先，有相關(guān)視覺追蹤的研究表明用戶會(huì)將大部分的注意力集中在郵箱內(nèi)容的左邊，這點(diǎn)可能沒什么好驚訝的，因?yàn)槲覀兊拈喿x習(xí)慣是從左向右的。而且，一些操作系統(tǒng)，特別是安卓的，在無法縮放郵件完美適應(yīng)小屏幕時(shí)，通常只展示郵件的左側(cè)內(nèi)容(也許有些用戶使用安卓手機(jī)會(huì)出現(xiàn)這種情況呢)。另外，從人體工程學(xué)的角度來說，大部分用戶覺得手持屏幕時(shí)與左下角或中間位置的內(nèi)容交互最容易。
5. 響應(yīng)式圖片
圖片是響應(yīng)式郵件設(shè)計(jì)中不可忽視的一環(huán)。就像我們前面提到的一樣，不要使用固定寬度的圖片，將圖片設(shè)置成響應(yīng)式的。這一點(diǎn)可以通過給圖片設(shè)置相關(guān)單位，或者使用支持響應(yīng)式的框架(比如Bootstrap)， 用響應(yīng)式圖片class名控制(例如class="img-responsive")來解決。另外，移動(dòng)設(shè)備在加載圖片時(shí)通常會(huì)比PC端要慢，所以不要放一些與郵件不相關(guān)的圖片，做到簡潔明了。
6. 大號(hào)的字體
考慮到很多郵件客戶端不直接顯示圖片，文字往往是用戶看見的第一要素。為了便于用戶閱讀，在設(shè)計(jì)響應(yīng)式郵件時(shí)，使用的字體盡量大一點(diǎn)。因?yàn)槿绻煮w比較小，再加上相近的背景色，用戶在閱讀時(shí)可能會(huì)有困難。建議至少使用13px以上的字體(13px是iPhone手機(jī)上的最小字體)。
除了以上這些要點(diǎn)，在做響應(yīng)式郵箱時(shí)，我們還應(yīng)該注意以下幾點(diǎn)：郵件主題欄應(yīng)該簡短有力，引人入勝;減少或隱藏導(dǎo)航菜單;使用多種測(cè)試工具等?？傊?，考慮的越周全，做出的響應(yīng)式郵箱越會(huì)合用戶的口味。
小飛相信以上這些建議應(yīng)該能給您很多啟發(fā)，讓您對(duì)響應(yīng)式郵件有新的看法和認(rèn)識(shí)。在 起飛頁自助建站平臺(tái)（）做網(wǎng)站，您可以免費(fèi)獲得一個(gè)響應(yīng)式的郵箱?，F(xiàn)在使用移動(dòng)端郵箱的人這么多，如果您是做網(wǎng)上商城的，那就更加不能錯(cuò)過了。響應(yīng)式郵箱可以給您的用戶提供舒暢的瀏覽體驗(yàn)，能夠幫助樹立公司高大上的品牌形象。
起飛頁上的響應(yīng)式郵箱在哪?在做好一個(gè)網(wǎng)站之后，您只需點(diǎn)擊"后臺(tái)"，就會(huì)看見如下頁面，再點(diǎn)擊"設(shè)置"中的"郵件模板設(shè)置"。起飛頁已經(jīng)為您設(shè)計(jì)了多種風(fēng)格不同的郵箱模板，您找到自己滿意的，點(diǎn)擊即可使用。除此以外，您還可以通過修改整體設(shè)定、logo、頁眉和標(biāo)題欄等自定義自己郵箱的風(fēng)格?？靵砥痫w頁自助平臺(tái)做一個(gè)屬于自己的網(wǎng)站吧!
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
