本文主要表達(dá)的意思是：郵件的設(shè)計(jì)與網(wǎng)頁(yè)的設(shè)計(jì)有著巨大的差別。如果能用文字千萬(wàn)不要用圖片；如果要用圖片也千萬(wàn)記得把內(nèi)容加入圖片的Alt屬性中；如果有可能給一個(gè)明確的退訂鏈接。

寫(xiě)這篇文章的直接誘因是今天下午那個(gè)巨崩潰的淘寶注冊(cè)體驗(yàn)（注意，我說(shuō)的是給我的體驗(yàn)巨差，沒(méi)有說(shuō)用戶體驗(yàn)?。?。電子商務(wù)產(chǎn)品的設(shè)計(jì)中，我們會(huì)最頻繁的面對(duì)的一個(gè)模塊就是EDM

，在這個(gè)過(guò)程中積累了一些想法，一并記錄下來(lái)。

系統(tǒng)郵件可以簡(jiǎn)單分為2類(lèi)：提醒類(lèi)(注冊(cè)提醒、訂閱提醒、生日或節(jié)日提醒)、EDM(電子郵件營(yíng)銷(xiāo))。

一、作為提醒類(lèi)的系統(tǒng)郵件，我個(gè)人覺(jué)得比較簡(jiǎn)單，只要把握?。汉?jiǎn)潔、直接2個(gè)要素就足夠了。提醒類(lèi)郵件不需要花哨的修飾，不需要夸張的表達(dá)，因?yàn)閷?duì)用戶而言他唯一需要的就是知曉郵件的內(nèi)容同時(shí)點(diǎn)擊那個(gè)他需要的鏈接就足夠了，建議使用文本形式制作。

>>對(duì)于發(fā)信人：表明身份即可，可以直接使用網(wǎng)站名稱。如：Twitter、Flickr Mail

>>對(duì)于標(biāo)題：表明郵件的來(lái)處+需要處理的信息類(lèi)型就足夠了。如：kentzhu is now following you on twitter！

>>對(duì)于郵件頭部：需要有一個(gè)固定的頭部，一般直接使用網(wǎng)站的LOGO就夠了。當(dāng)然，也看到部分EDM放的是LOGO+網(wǎng)站導(dǎo)航。建議不放，因?yàn)樘嵝燕]件的作用在于讓用戶快速的完成任務(wù)，不是推廣，區(qū)別與EDM郵件。

>>對(duì)于郵件內(nèi)容需要注意：

1)?千萬(wàn)不要使用圖片！這點(diǎn)我覺(jué)得是跟網(wǎng)頁(yè)設(shè)計(jì)最大的區(qū)別，網(wǎng)頁(yè)上設(shè)計(jì)師都會(huì)使用大且?guī)ь伾陌粹o來(lái)吸引用戶的視覺(jué)注意，但是在郵件設(shè)計(jì)中恰恰是個(gè)巨大的錯(cuò)誤！因?yàn)?，幾乎所有的郵件系統(tǒng)在接受郵件的時(shí)候都默認(rèn)不加載圖片的。所以，在郵件中最有力的吸引視覺(jué)的手法是文字！比如，淘寶的注冊(cè)提醒郵件，使用了2個(gè)巨大的登錄按鈕，但是，默認(rèn)的時(shí)候圖片被屏蔽，于是整個(gè)郵件一片空白….

2)?鏈接地址千萬(wàn)使用明文的！目前主流的提醒郵件鏈接是一個(gè)文字鏈同時(shí)附加一個(gè)明文鏈接地址的做法，也是可以的。因?yàn)橛械泥]件系統(tǒng)可能會(huì)過(guò)濾文字超鏈接，所以設(shè)置成超鏈接和明文鏈接的地址一致的做法可以避免這一點(diǎn)。
3) 如果，你真的要使用圖片，那么，請(qǐng)?jiān)谶@個(gè)圖片上加注“Alt”屬性。這樣即使圖片被屏蔽了也能知道這個(gè)圖片代表是嘛玩意。比如，F(xiàn)lickr的提醒郵件在這點(diǎn)上就很棒。

>>對(duì)于正文：請(qǐng)千萬(wàn)簡(jiǎn)潔，表述一下這個(gè)是什么動(dòng)作，用戶該怎么做就OK了，其他的啰嗦的不要！因?yàn)樵谶@個(gè)模塊里，用戶的目標(biāo)任務(wù)是單一的，你需要的是用更單純的頁(yè)面來(lái)讓用戶快速的完成這個(gè)任務(wù)，這就OK了。

>>其他：如果可以請(qǐng)告訴用戶如何退訂類(lèi)似的郵件(別學(xué)流氓卓越亞馬遜！)；可以善意的告訴用戶請(qǐng)勿直接回復(fù)該郵件。

二、EDM郵件對(duì)用戶而言，用戶可能會(huì)更關(guān)注其內(nèi)容的豐富性和視覺(jué)效果。因此EDM郵件必然無(wú)法純文字，且EDM郵件的主要目的是吸引用戶去網(wǎng)站乃至與去購(gòu)買(mǎi)，所以會(huì)更復(fù)雜一些。

>>對(duì)于標(biāo)題：務(wù)必吸引人。但是前提是要表述清楚內(nèi)容同時(shí)不要過(guò)長(zhǎng)。

>>對(duì)于頁(yè)面的寬度：建議控制在650px以下。個(gè)人比較傾向于使用650px，因?yàn)檫@個(gè)寬度不管是對(duì)于2欄還是3欄的設(shè)計(jì)都比較容易布局(刨除10px的間隙，然后再整除一下，很明顯這個(gè)數(shù)字比較容易搞定)。

>>對(duì)于頁(yè)面內(nèi)容：因?yàn)槭褂脠D片無(wú)可避免，但是，重要的內(nèi)容請(qǐng)務(wù)必使用文字，哪怕是使用了圖片也務(wù)必給出文字標(biāo)識(shí)！這點(diǎn)上有啊的EDM做的很棒，有啊的EDM頁(yè)頭是LOGO+主導(dǎo)航的模式，LOGO使用了Alt屬性，同時(shí)主導(dǎo)航是直接實(shí)用的文字鏈接的形式。這樣就算整個(gè)郵件圖片被屏蔽了重要的信息還是可以顯示出來(lái)。

>>對(duì)于圖片的使用：建議給每個(gè)圖片一個(gè)固定的寬度和高度及Alt屬性標(biāo)識(shí)，同時(shí)，注意不要使用背景圖片。

>>對(duì)于引導(dǎo)：一般的EDM都會(huì)在web端留一個(gè)源地址，所以，請(qǐng)?jiān)谀愕腅DM的明顯位置給出一個(gè)超鏈接，“如果圖片無(wú)法顯示請(qǐng)點(diǎn)擊這里查看”，這樣就算被屏蔽了也能引導(dǎo)部分用戶。

>>關(guān)于一致性：如果您會(huì)定期發(fā)送EDM(這句好似廢話啊)，請(qǐng)注意使用統(tǒng)一的風(fēng)格，主要是頁(yè)頭和頁(yè)尾的風(fēng)格統(tǒng)一。如果，你是有期刊號(hào)的請(qǐng)將期刊號(hào)和時(shí)間也一并加入！

>>關(guān)于提醒：請(qǐng)將如何退訂、如何聯(lián)系等必要的內(nèi)容不吝的放在頁(yè)面的底部，做個(gè)彬彬有禮的推廣者。同時(shí)，如果您愿意提供退訂按鈕，請(qǐng)務(wù)必試著實(shí)現(xiàn)一鍵退訂….

>>一些補(bǔ)充：系統(tǒng)郵件的制作應(yīng)該隨時(shí)注意按照郵件的玩法來(lái)走，打開(kāi)速度要快；頁(yè)面不要過(guò)長(zhǎng)，建議在2屏內(nèi)。關(guān)于具體內(nèi)的排版與設(shè)計(jì)且聽(tīng)下回分解。

奉上有啊EDM一枚(故意屏蔽圖片)

來(lái)源：http://www.ikent.me/blog/2313