建站
咨詢
售后
建站咨詢
新聞中心
移動(dòng)設(shè)備上的郵件設(shè)計(jì)不僅僅是一個(gè)內(nèi)容填充列表，它涉及諸多設(shè)計(jì)元素。
十年的左云網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整左云建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“左云網(wǎng)站設(shè)計(jì)”,“左云網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
對(duì)于移動(dòng)設(shè)備的設(shè)計(jì)從來(lái)不是一件簡(jiǎn)單的事情。人們采用不同的方式使用網(wǎng)絡(luò)，我們需要考慮一個(gè)全面的方案，特別是在小屏幕上使用郵件。
讓我們一起來(lái)探討關(guān)于移動(dòng)設(shè)備上的郵件設(shè)計(jì)需要考慮的問(wèn)題，這些討論并不意味著能夠解答手機(jī)郵件設(shè)計(jì)上的所有問(wèn)題，但這是一個(gè)好的起點(diǎn)。
一、保持簡(jiǎn)潔
嚴(yán)禁復(fù)雜 —— 尤其是在郵件上。始終避免使用復(fù)雜的結(jié)構(gòu)，否則在小屏幕上渲染時(shí)一定會(huì)失敗。請(qǐng)記住許多設(shè)備是不支持媒體查詢的（例如谷歌郵件），所以我們不能指望成熟的內(nèi)容重排技術(shù)。
一個(gè)線性簡(jiǎn)單的布局在大多情況下都能表現(xiàn)良好。
郵件的整體大小也非常重要，如果它超過(guò)了預(yù)設(shè)的大?。ù蟾?00KB），你的郵件將不能完全加載。我在所有的客戶端上都沒(méi)有測(cè)試出這個(gè)問(wèn)題，但是谷歌郵件和IOS設(shè)備出現(xiàn)了這個(gè)問(wèn)題。
下面這張截圖里，你能夠看到用戶是如何通過(guò)點(diǎn)擊一個(gè)鏈接查看整個(gè)信息：這使得用戶不必閱讀全部郵件。
二、注重郵件目標(biāo)和折疊
雖然我不是“Above the fold”問(wèn)題的粉絲，不過(guò)在移動(dòng)設(shè)備上閱讀郵件意味我們要把上半部分放在非常重要的位置。
讓用戶能夠輕松地看到摘要目錄，在大多數(shù)情況下都能快速瀏覽內(nèi)容，從而引導(dǎo)讀者深入閱讀。
郵件頂部的小段落可以做到這些。
這使得一些重要的客戶端（如谷歌郵件，或者IOS和OSX上的郵件）工作更便利。
三、調(diào)整字體和圖片
這個(gè)話題只適用那些支持媒體查詢的設(shè)備。不幸的是，對(duì)于那些不支持的設(shè)備我們沒(méi)有任何辦法，他們會(huì)自己調(diào)整文本與圖片。
目前，媒體查詢能夠被所有IOS設(shè)備支持，安卓原生郵件應(yīng)用也支持（但是有一點(diǎn)問(wèn)題并且Lollipop拋棄了這一特性支持谷歌郵件），還有***的黑莓手機(jī)和少數(shù)的其它手機(jī)支持。
IOS設(shè)備在字體與圖片尺寸上有兩個(gè)主要問(wèn)題：
- 小字體在默認(rèn)情況下被放大
- 郵件寬度基于***的單元
字體被放大通常不能說(shuō)是一個(gè)嚴(yán)重的問(wèn)題，但是在很多情況會(huì)導(dǎo)致文本超出你的布局被剪切。
在你的CSS代碼中加入這一行能夠輕松解決這一問(wèn)題。
下面的截圖你能夠清楚地看到通過(guò)添加-webkit-text-size-adjus，紅色區(qū)域的文本大小是如何改變的，左邊的是添加后的，右邊的是沒(méi)添加。
字體調(diào)整也影響移動(dòng)設(shè)備上的用戶體驗(yàn)。小字體在桌面設(shè)備上能夠輕松閱讀，但是小屏幕上就有完全不同的影響。
看下面這個(gè)例子，右邊的文字被放大了能夠輕松閱讀，吸引用戶的目光。
一般來(lái)說(shuō)，在移動(dòng)設(shè)備上放大文本字體是一個(gè)非常好的做法，特別是對(duì)郵件來(lái)說(shuō)。因?yàn)殚喿x的時(shí)間很緊張你需要快速抓住用戶的關(guān)注。
四、自定義鏈接和按鈕
移動(dòng)設(shè)備上的郵件設(shè)計(jì)對(duì)于鏈接需要一點(diǎn)技巧。
首先考慮到將被手指點(diǎn)擊，所以保持良好的間隔并嚴(yán)格限制數(shù)量。
確保他們很容易點(diǎn)擊并可見(jiàn)。此外，永遠(yuǎn)記住在內(nèi)聯(lián)CSS樣式表中為錨添加規(guī)則：Gmail應(yīng)用程序鏈接的樣式為藍(lán)色，默認(rèn)情況下強(qiáng)調(diào)他們。
一個(gè)潛在的小問(wèn)題是，Gmail和IOS自動(dòng)為電話號(hào)碼，URL和電子郵件字符串（只是Gmail）添加鏈接。
為避免IOS自動(dòng)生成電話鏈接，你可以在你的代碼中添加meta標(biāo)簽。
Gmail的解決有一些狡猾：它通過(guò)加入一些不可見(jiàn)的字符，以確保字符串不會(huì)被識(shí)別為一個(gè)潛在鏈接。
我用HTML實(shí)體和“中性”span標(biāo)簽做了一系列測(cè)試。只有用span標(biāo)記打破鏈接的每個(gè)部分，才能獲得預(yù)期結(jié)果。
五、添加間距
對(duì)于郵件的設(shè)計(jì)我有一個(gè)***的建議就是考慮增大文本內(nèi)容的內(nèi)邊距，這能夠顯著提升郵件可讀性。
【職場(chǎng)經(jīng)驗(yàn)之看完轉(zhuǎn)系列！】
想成為總監(jiān)？來(lái)看看這個(gè)！
《優(yōu)設(shè)重磅首發(fā)！聊聊從設(shè)計(jì)師到總監(jiān)的晉級(jí)路線》牛魔王的重磅之作！面試到簡(jiǎn)歷全部搞定！
《優(yōu)設(shè)重磅首發(fā)！全方位揭開(kāi)簡(jiǎn)歷和面試話術(shù)的秘密》成為職場(chǎng)大牛的11種必備能力！
《設(shè)計(jì)師進(jìn)階教程！成為優(yōu)秀設(shè)計(jì)師必備的11種職場(chǎng)能力》
譯文地址：blog.enqoo
本文標(biāo)題：搞定小屏！5大黃金準(zhǔn)則幫你設(shè)計(jì)移動(dòng)端郵件
文章轉(zhuǎn)載：http://www.5511xx.com/article/dhoichs.html
