藍藍設(shè)計( www.0391cbd.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源：莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

對于移動設(shè)備的設(shè)計從來不是一件簡單的事情。人們采用不同的方式使用網(wǎng)絡(luò)，我們需要考慮一個全面的方案，特別是在小屏幕上使用郵件。

讓我們一起來探討關(guān)于移動設(shè)備上的郵件設(shè)計需要考慮的問題，這些討論并不意味著能夠解答手機郵件設(shè)計上的所有問題，但這是一個好的起點。

1.保持簡潔

嚴禁復雜—尤其是在郵件上。始終避免使用復雜的結(jié)構(gòu)，否則在小屏幕上渲染時一定會失敗。請記住許多設(shè)備是不支持媒體查詢的（例如谷歌郵件），所以我們不能指望成熟的內(nèi)容重排技術(shù)。

一個線性簡單的布局在大多情況下都能表現(xiàn)良好。

郵件的整體大小也非常重要，如果它超過了預設(shè)的大小（大概100KB），你的郵件將不能完全加載。我在所有的客戶端上都沒有測試出這個問題，但是谷歌郵件和IOS設(shè)備出現(xiàn)了這個問題。

下面這張截圖里，你能夠看到用戶是如何通過點擊一個鏈接查看整個信息：這使得用戶不必閱讀全部郵件。

2.注重郵件目標和折疊

雖然我不是“above the fold”問題的粉絲，不過在移動設(shè)備上閱讀郵件意味我們要把上半部分放在非常重要的位置。

讓用戶能夠輕松地看到摘要目錄，在大多數(shù)情況下都能快速瀏覽內(nèi)容，從而引導讀者深入閱讀。

郵件頂部的小段落可以做到這些。

這使得一些重要的客戶端（如谷歌郵件，或者IOS和OSX上的郵件）工作更便利。

3.調(diào)整字體和圖片

這個話題只適用那些支持媒體查詢的設(shè)備。不幸的是，對于那些不支持的設(shè)備我們沒有任何辦法，他們會自己調(diào)整文本與圖片。

目前，媒體查詢能夠被所有IOS設(shè)備支持，安卓原生郵件應用也支持（但是有一點問題并且Lollipop拋棄了這一特性支持谷歌郵件），還有的黑莓手機和少數(shù)的其它手機支持。

IOS設(shè)備在字體與圖片尺寸上有兩個主要問題：

• 小字體在默認情況下被放大
• 郵件寬度基于最大的單元

字體被放大通常不能說是一個嚴重的問題，但是在很多情況會導致文本超出你的布局被剪切。

在你的CSS代碼中加入這一行能夠輕松解決這一問題。

下面的截圖你能夠清楚地看到通過添加-webkit-text-size-adjus，紅色區(qū)域的文本大小是如何改變的，左邊的是添加后的，右邊的是沒添加。

字體調(diào)整也影響移動設(shè)備上的用戶體驗。小字體在桌面設(shè)備上能夠輕松閱讀，但是小屏幕上就有完全不同的影響。

看下面這個例子，右邊的文字被放大了能夠輕松閱讀，吸引用戶的目光。

一般來說，在移動設(shè)備上放大文本字體是一個非常好的做法，特別是對郵件來說。因為閱讀的時間很緊張你需要快速抓住用戶的關(guān)注。

關(guān)于圖片

你可以為那些支持媒體查詢的設(shè)備加載針對性圖片（可以看看這兩篇文章A Slick, New Image Swapping Technique for Responsive Emails和Optimizing images for mobile）

4.自定義鏈接和按鈕

移動設(shè)備上的郵件設(shè)計對于鏈接需要一點技巧。

首先考慮到將被手指點擊，所以保持良好的間隔并嚴格限制數(shù)量。

確保他們很容易點擊并可見。此外，永遠記住在內(nèi)聯(lián)CSS樣式表中為錨添加規(guī)則：Gmail應用程序鏈接的樣式為藍色，默認情況下強調(diào)他們。

一個潛在的小問題是，Gmail和IOS自動為電話號碼，URL和電子郵件字符串（只是Gmail）添加鏈接。

為避免IOS自動生成電話鏈接，你可以在你的代碼中添加meta標簽。

Gmail的解決有一些狡猾：它通過加入一些不可見的字符，以確保字符串不會被識別為一個潛在鏈接。

我用HTML實體和“中性”span標簽做了一系列測試。只有用span標記打破鏈接的每個部分，才能獲得預期結(jié)果。

5.添加間距

對于郵件的設(shè)計我有一個的建議就是考慮增大文本內(nèi)容的內(nèi)邊距，這能夠顯著提升郵件可讀性。

本文全系列滿滿干貨，是從眾多交互設(shè)計前輩們分享的寶貴經(jīng)驗里挑選出的最實用的方法，不僅能讓你徹底了解交互設(shè)計，還能幫有志在這個領(lǐng)域發(fā)展，卻苦于沒有老師的童鞋，從零開始學習成為一名優(yōu)秀的交互設(shè)計師。

在校大學生、想轉(zhuǎn)行的設(shè)計師還能在這兒得到前輩的實用建議，想進階的交互也有職場系列經(jīng)驗分享，文末還有超贊的資源奉獻，干貨量大，推薦童鞋們收藏 ：）

我的職責通常是產(chǎn)品戰(zhàn)略和設(shè)計方向的規(guī)劃，很少參與具體的設(shè)計細節(jié)，但我一直相信基礎(chǔ)設(shè)計技能對于設(shè)計思維的影響，以下五條是我認為頁面設(shè)計最基礎(chǔ)的技能要求。沒有經(jīng)歷任何藝術(shù)教育的設(shè)計師（比如我）也可以通過對以下五項修煉的培養(yǎng)迅速提高基礎(chǔ)設(shè)計能力 >>>

HTML5、CSS3和jQuery這3大前端開發(fā)技術(shù)已經(jīng)越來越成熟，而且這三者的緊密結(jié)合使得開發(fā)者可以有越來越豐富的想象空間。今天我們要來分享一些非常炫酷的HTML5相冊動畫應用，這些應用同時也結(jié)合了CSS3和jQuery，特別是第一個，非常具有創(chuàng)意，一起來看看吧。

1、HTML5 3D立體美女墻相冊

HTML5非常強大，尤其是和CSS3結(jié)合，有時候能達到非同凡響的網(wǎng)頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相冊應用，它可以用鼠標多拽從多個角度瀏覽相冊圖片，點擊圖片，就可以放大圖片，相冊圖片都是美女，千萬別讓女朋友看到。