域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

最近幾年中，手機(jī)等移動(dòng)端用戶(hù)不斷增長(zhǎng)，這給人們獲取信息的方式帶來(lái)了變革，甚至可以說(shuō)是一場(chǎng)革命。響應(yīng)式設(shè)計(jì)這種思維方式就是在這樣的大環(huán)境中興起的，越來(lái)越多的人們開(kāi)始討論怎樣做好響應(yīng)式網(wǎng)站。然而，盡管響應(yīng)式設(shè)計(jì)已經(jīng)形成風(fēng)潮，卻很少有人提起響應(yīng)式郵件的設(shè)計(jì)。

對(duì)設(shè)計(jì)師或開(kāi)發(fā)者來(lái)說(shuō)，html郵件可能是一個(gè)相對(duì)比較麻煩的媒介。它的客戶(hù)端技術(shù)已經(jīng)落后陳舊，內(nèi)容、格式等又沒(méi)有一定的標(biāo)準(zhǔn)規(guī)范，這使得現(xiàn)代的編碼規(guī)則毫無(wú)用武之地，一些代碼根本就無(wú)法顯示出來(lái)。但郵件仍是關(guān)鍵的營(yíng)銷(xiāo)渠道之一，它的作用不容忽視。研究表明在手機(jī)等移動(dòng)端上使用電子郵件的用戶(hù)已經(jīng)大大超過(guò)電腦或網(wǎng)頁(yè)上的用戶(hù)，與此同時(shí)，50%以上的移動(dòng)用戶(hù)會(huì)選擇關(guān)閉或刪除非個(gè)性化的郵件。怎樣才能讓郵件也跟上互聯(lián)網(wǎng)時(shí)代發(fā)展的潮流呢?響應(yīng)式的郵件是一個(gè)很好的選擇， 在郵件呈現(xiàn)上，通過(guò)頁(yè)面隱藏、折疊、擴(kuò)展等，它可以給PC端用戶(hù)和移動(dòng)端提供舒適的體驗(yàn)。那么響應(yīng)式的html郵件應(yīng)該是什么樣的呢?今天小飛就帶大家一起看看為什么我們應(yīng)該選擇響應(yīng)式郵件以及響應(yīng)式郵件應(yīng)該具備哪些特點(diǎn)。

如果您曾經(jīng)使用手機(jī)打開(kāi)一個(gè)固定寬度的郵箱，您可能更能體會(huì)響應(yīng)式的郵箱設(shè)計(jì)的必要性。因?yàn)橐粋€(gè)固定寬度的郵件在移動(dòng)設(shè)備的小屏幕上顯示時(shí)，整體布局通常會(huì)被縮小，這時(shí)它通常會(huì)出現(xiàn)以下缺點(diǎn)：

閱讀感受不佳

郵件布局整體縮小，這意味著如果用戶(hù)想要閱讀完整的內(nèi)容就必須放大郵件內(nèi)容，一旦郵件內(nèi)容放大了他們就需要不停的橫向移動(dòng)，從左至右瀏覽信息，但研究表明用戶(hù)在瀏覽郵件時(shí)習(xí)慣由上至下。這破壞了用戶(hù)的瀏覽習(xí)慣，而且來(lái)來(lái)*滾動(dòng)多次才能看完文章，無(wú)形之間帶來(lái)了不少的麻煩。不少用戶(hù)認(rèn)為這種麻煩會(huì)消磨他們的耐心，讓他們無(wú)法完成閱讀。

鏈接和按鈕不可見(jiàn)

在移動(dòng)端上，人們通常習(xí)慣使用手勢(shì)操作，郵箱的整體布局縮小，這也意味著郵件中的鏈接和"行為引導(dǎo)"按鈕會(huì)變小，這樣一來(lái)用戶(hù)就無(wú)法有效的進(jìn)行點(diǎn)擊，相關(guān)信息就得不到用戶(hù)的關(guān)注。特別是"行為引導(dǎo)"按鈕，如果我們的按鈕不夠明顯，用戶(hù)一般不會(huì)給予特別關(guān)注，這直接的影響了郵件的轉(zhuǎn)化率，以及它在增加網(wǎng)站流量、銷(xiāo)售額等方面的效用。

圖片顯示不全等問(wèn)題

郵件中的圖片顯示是一個(gè)大問(wèn)題。在PC端進(jìn)行瀏覽時(shí)，多樣的圖片可能最能體現(xiàn)網(wǎng)站的活潑、豐富，拉近與用戶(hù)的距離。但是在移動(dòng)端使用數(shù)據(jù)流量時(shí)，用戶(hù)很可能不想進(jìn)行大量圖片的加載。其次，多張圖片在移動(dòng)端展示時(shí)可能因?yàn)槌叽绲葐?wèn)題顯示不全，難以呈現(xiàn)PC端的那種效果。另外還有一些時(shí)候，某些用戶(hù)無(wú)法看見(jiàn)郵件中的圖片，雖然iphone的本地郵箱默認(rèn)顯示圖片，但是有很多移動(dòng)客戶(hù)端都限制圖片的載入。

響應(yīng)式郵件應(yīng)具備的特點(diǎn)：

就像響應(yīng)式網(wǎng)站能夠同時(shí)適用于電腦、手機(jī)等多種設(shè)備，響應(yīng)式郵箱能夠同時(shí)適用多種終端，一封郵件能夠根據(jù)不同的設(shè)備以相應(yīng)的格式來(lái)呈現(xiàn)。那么做好一個(gè)響應(yīng)式郵箱有哪幾個(gè)關(guān)鍵點(diǎn)要把握呢?

1. 內(nèi)容清晰簡(jiǎn)練

內(nèi)容是網(wǎng)站永恒的主題，郵箱更是如此。因?yàn)橐苿?dòng)設(shè)備的屏幕相比PC端要小，能夠利用的空間比較少，這時(shí)怎樣通過(guò)小屏幕完成與用戶(hù)的互動(dòng)顯得尤為重要。盡量保持郵件的內(nèi)容清晰簡(jiǎn)練，不是所有的信息都同樣重要，篩選出比較重要的信息，不要什么信息都放上去讓郵件顯得很擁擠。另外，按信息的重要程度垂直排列，最重要的、最希望用戶(hù)看見(jiàn)的內(nèi)容放在最上方，突出顯示優(yōu)先級(jí)的信息。

2. 單列的設(shè)計(jì)布局

簡(jiǎn)潔是郵箱設(shè)計(jì)的核心。在手機(jī)等移動(dòng)端上瀏覽郵件，我們需要著重考慮用戶(hù)使用時(shí)的流暢性。雖然多列的設(shè)計(jì)布局在郵件中也可以顯示出來(lái)，但是單列的是最理想的選擇，寬度不超過(guò)640px的布局比較適合手機(jī)閱覽。這樣就算有些設(shè)備只能縮小郵箱的整體布局，我們也不用擔(dān)心是否會(huì)有內(nèi)容顯示不出來(lái)。

3. 明顯的行為引導(dǎo)按鈕

就像我們?cè)谏厦嫣徇^(guò)的，如果行為引導(dǎo)按鈕不夠明顯，用戶(hù)可能根本就不會(huì)注意到，那我們的郵件究竟還有何意義?因此這些行為引導(dǎo)按鈕應(yīng)該足夠大，以方便用戶(hù)進(jìn)行點(diǎn)擊，不過(guò)按鈕和其他的鏈接也要盡量分散開(kāi)來(lái)，防止用戶(hù)不小心點(diǎn)錯(cuò)了，做到用戶(hù)友好再友好。蘋(píng)果ios的人機(jī)界面推薦最小的按鈕區(qū)域應(yīng)該是44*44px，因此行為引導(dǎo)按鈕的區(qū)域面積最好大于這個(gè)數(shù)值。

4. 文本左對(duì)齊

郵件的文本最好左對(duì)齊，同時(shí)我們可以將重要的元素放到內(nèi)容區(qū)域的左邊，這可不是小飛隨便說(shuō)說(shuō)的，它的背后有很多理論支撐。首先，有相關(guān)視覺(jué)追蹤的研究表明用戶(hù)會(huì)將大部分的注意力集中在郵箱內(nèi)容的左邊，這點(diǎn)可能沒(méi)什么好驚訝的，因?yàn)槲覀兊拈喿x習(xí)慣是從左向右的。而且，一些操作系統(tǒng)，特別是安卓的，在無(wú)法縮放郵件完美適應(yīng)小屏幕時(shí)，通常只展示郵件的左側(cè)內(nèi)容(也許有些用戶(hù)使用安卓手機(jī)會(huì)出現(xiàn)這種情況呢)。另外，從人體工程學(xué)的角度來(lái)說(shuō)，大部分用戶(hù)覺(jué)得手持屏幕時(shí)與左下角或中間位置的內(nèi)容交互最容易。

5. 響應(yīng)式圖片

圖片是響應(yīng)式郵件設(shè)計(jì)中不可忽視的一環(huán)。就像我們前面提到的一樣，不要使用固定寬度的圖片，將圖片設(shè)置成響應(yīng)式的。這一點(diǎn)可以通過(guò)給圖片設(shè)置相關(guān)單位，或者使用支持響應(yīng)式的框架(比如Bootstrap)， 用響應(yīng)式圖片class名控制(例如class="img-responsive")來(lái)解決。另外，移動(dòng)設(shè)備在加載圖片時(shí)通常會(huì)比PC端要慢，所以不要放一些與郵件不相關(guān)的圖片，做到簡(jiǎn)潔明了。

6. 大號(hào)的字體

考慮到很多郵件客戶(hù)端不直接顯示圖片，文字往往是用戶(hù)看見(jiàn)的第一要素。為了便于用戶(hù)閱讀，在設(shè)計(jì)響應(yīng)式郵件時(shí)，使用的字體盡量大一點(diǎn)。因?yàn)槿绻煮w比較小，再加上相近的背景色，用戶(hù)在閱讀時(shí)可能會(huì)有困難。建議至少使用13px以上的字體(13px是iPhone手機(jī)上的最小字體)。

除了以上這些要點(diǎn)，在做響應(yīng)式郵箱時(shí)，我們還應(yīng)該注意以下幾點(diǎn)：郵件主題欄應(yīng)該簡(jiǎn)短有力，引人入勝;減少或隱藏導(dǎo)航菜單;使用多種測(cè)試工具等?？傊?，考慮的越周全，做出的響應(yīng)式郵箱越會(huì)合用戶(hù)的口味。

小飛相信以上這些建議應(yīng)該能給您很多啟發(fā)，讓您對(duì)響應(yīng)式郵件有新的看法和認(rèn)識(shí)。在 起飛頁(yè)自助建站平臺(tái)（）做網(wǎng)站，您可以免費(fèi)獲得一個(gè)響應(yīng)式的郵箱。現(xiàn)在使用移動(dòng)端郵箱的人這么多，如果您是做網(wǎng)上商城的，那就更加不能錯(cuò)過(guò)了。響應(yīng)式郵箱可以給您的用戶(hù)提供舒暢的瀏覽體驗(yàn)，能夠幫助樹(shù)立公司高大上的品牌形象。

起飛頁(yè)上的響應(yīng)式郵箱在哪?在做好一個(gè)網(wǎng)站之后，您只需點(diǎn)擊"后臺(tái)"，就會(huì)看見(jiàn)如下頁(yè)面，再點(diǎn)擊"設(shè)置"中的"郵件模板設(shè)置"。起飛頁(yè)已經(jīng)為您設(shè)計(jì)了多種風(fēng)格不同的郵箱模板，您找到自己滿(mǎn)意的，點(diǎn)擊即可使用。除此以外，您還可以通過(guò)修改整體設(shè)定、logo、頁(yè)眉和標(biāo)題欄等自定義自己郵箱的風(fēng)格。快來(lái)起飛頁(yè)自助平臺(tái)做一個(gè)屬于自己的網(wǎng)站吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！